From 146ef8c8cd2b1bf997113fe082777a4b5df862f8 Mon Sep 17 00:00:00 2001 From: Carlos Coelho <80289056+carlosrcoelho@users.noreply.github.com> Date: Tue, 25 Jun 2024 19:52:41 -0300 Subject: [PATCH 1/4] Improve makefile (#2338) * Update Makefile to use command substitution for killing process * break long lines into shorter ones * replace fixed values with variables * correct the unit test coverage report --------- Co-authored-by: italojohnny Co-authored-by: Gabriel Luiz Freitas Almeida --- Makefile | 53 +++++++++++++++++++++++++++++++++++++------------- pyproject.toml | 22 +++++++++++++++++++++ 2 files changed, 62 insertions(+), 13 deletions(-) diff --git a/Makefile b/Makefile index 853fe6196..0b03489ab 100644 --- a/Makefile +++ b/Makefile @@ -47,20 +47,22 @@ init: coverage: ## run the tests and generate a coverage report - poetry run pytest --cov \ - --cov-config=.coveragerc \ - --cov-report xml \ - --cov-report term-missing:skip-covered \ - --cov-report lcov:coverage/lcov-pytest.info + @poetry run coverage run + @poetry run coverage erase # allow passing arguments to pytest unit_tests: - poetry run pytest --ignore=tests/integration --instafail -ra -n auto -m "not api_key_required" $(args) + poetry run pytest \ + --ignore=tests/integration \ + --instafail -ra -n auto -m "not api_key_required" \ + $(args) integration_tests: - poetry run pytest tests/integration --instafail -ra -n auto $(args) + poetry run pytest tests/integration \ + --instafail -ra -n auto \ + $(args) format: ## run code formatters poetry run ruff check . --fix @@ -129,9 +131,20 @@ start: @echo 'Running the CLI' ifeq ($(open_browser),false) - @make install_backend && poetry run langflow run --path $(path) --log-level $(log_level) --host $(host) --port $(port) --env-file $(env) --no-open-browser + @make install_backend && poetry run langflow run \ + --path $(path) \ + --log-level $(log_level) \ + --host $(host) \ + --port $(port) \ + --env-file $(env) \ + --no-open-browser else - @make install_backend && poetry run langflow run --path $(path) --log-level $(log_level) --host $(host) --port $(port) --env-file $(env) + @make install_backend && poetry run langflow run \ + --path $(path) \ + --log-level $(log_level) \ + --host $(host) \ + --port $(port) \ + --env-file $(env) endif @@ -166,13 +179,27 @@ backend: ## run the backend in development mode @echo 'Setting up the environment' @make setup_env make install_backend - @-kill -9 $(lsof -t -i:7860) + @-kill -9 $$(lsof -t -i:7860) ifdef login @echo "Running backend autologin is $(login)"; - LANGFLOW_AUTO_LOGIN=$(login) poetry run uvicorn --factory langflow.main:create_app --host 0.0.0.0 --port 7860 --reload --env-file .env --loop asyncio --workers $(workers) + LANGFLOW_AUTO_LOGIN=$(login) poetry run uvicorn \ + --factory langflow.main:create_app \ + --host 0.0.0.0 \ + --port $(port) \ + --reload \ + --env-file $(env) \ + --loop asyncio \ + --workers $(workers) else - @echo "Running backend respecting the .env file"; - poetry run uvicorn --factory langflow.main:create_app --host 0.0.0.0 --port 7860 --reload --env-file .env --loop asyncio --workers $(workers) + @echo "Running backend respecting the $(env) file"; + poetry run uvicorn \ + --factory langflow.main:create_app \ + --host 0.0.0.0 \ + --port $(port) \ + --reload \ + --env-file $(env) \ + --loop asyncio \ + --workers $(workers) endif diff --git a/pyproject.toml b/pyproject.toml index 1bd744a36..52d1ecd01 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -151,6 +151,28 @@ log_cli = true markers = ["async_test", "api_key_required"] +[tool.coverage.run] +command_line = """ + -m pytest + --cov --cov-report=term --cov-report=html + --instafail -ra -n auto -m "not api_key_required" + tests/unit +""" +source = ["src/backend/base/langflow/"] +omit = ["*/alembic/*", "tests/*", "*/__init__.py"] + + +[tool.coverage.report] +sort = "Stmts" +skip_empty = true +show_missing = false +ignore_errors = true + + +[tool.coverage.html] +directory = "coverage" + + [tool.ruff] exclude = ["src/backend/langflow/alembic/*"] line-length = 120 From 3db91f890b2ee802714fdf290eb12876c32abf87 Mon Sep 17 00:00:00 2001 From: cristhianzl Date: Fri, 21 Jun 2024 17:25:39 -0300 Subject: [PATCH 2/4] =?UTF-8?q?=E2=9C=A8=20(hooks):=20add=20custom=20hooks?= =?UTF-8?q?=20for=20card=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add `useDataEffect` to handle data-related side effects - Add `useInstallComponent` to manage component installation logic - Add `useLikeComponent` to handle like functionality - Add `useDragStart` to manage drag start events - Add `usePlaygroundEffect` to handle playground-related side effects ✨ (cardComponent): add custom hooks for data, install, like, drag start, and playground effects ♻️ (cardComponent): rename state variables for consistency and readability ✨ (MainPage): add CollectionCard component to handle card rendering and interactions ✨ (index.tsx): add CollectionCard component to ComponentsComponent ♻️ (index.tsx): refactor to use CollectionCard instead of inline code --- .../cardComponent/hooks/use-data-effect.tsx | 18 ++ .../hooks/use-handle-install.tsx | 54 ++++++ .../cardComponent/hooks/use-handle-like.tsx | 50 ++++++ .../cardComponent/hooks/use-on-drag-start.tsx | 33 ++++ .../hooks/use-playground-effect.tsx | 26 +++ .../src/components/cardComponent/index.tsx | 168 +++++------------- .../components/collectionCard/index.tsx | 58 ++++++ .../components/componentsComponent/index.tsx | 43 +---- 8 files changed, 288 insertions(+), 162 deletions(-) create mode 100644 src/frontend/src/components/cardComponent/hooks/use-data-effect.tsx create mode 100644 src/frontend/src/components/cardComponent/hooks/use-handle-install.tsx create mode 100644 src/frontend/src/components/cardComponent/hooks/use-handle-like.tsx create mode 100644 src/frontend/src/components/cardComponent/hooks/use-on-drag-start.tsx create mode 100644 src/frontend/src/components/cardComponent/hooks/use-playground-effect.tsx create mode 100644 src/frontend/src/pages/MainPage/components/componentsComponent/components/collectionCard/index.tsx diff --git a/src/frontend/src/components/cardComponent/hooks/use-data-effect.tsx b/src/frontend/src/components/cardComponent/hooks/use-data-effect.tsx new file mode 100644 index 000000000..fd03753b2 --- /dev/null +++ b/src/frontend/src/components/cardComponent/hooks/use-data-effect.tsx @@ -0,0 +1,18 @@ +import { useEffect } from "react"; + +const useDataEffect = ( + data, + setLikedByUser, + setLikesCount, + setDownloadsCount, +) => { + useEffect(() => { + if (data) { + setLikedByUser(data?.liked_by_user ?? false); + setLikesCount(data?.liked_by_count ?? 0); + setDownloadsCount(data?.downloads_count ?? 0); + } + }, [data, data?.liked_by_count, data?.liked_by_user, data?.downloads_count]); +}; + +export default useDataEffect; diff --git a/src/frontend/src/components/cardComponent/hooks/use-handle-install.tsx b/src/frontend/src/components/cardComponent/hooks/use-handle-install.tsx new file mode 100644 index 000000000..062f51ebd --- /dev/null +++ b/src/frontend/src/components/cardComponent/hooks/use-handle-install.tsx @@ -0,0 +1,54 @@ +import { useState } from "react"; +import { getComponent } from "../../../controllers/API"; +import useFlowsManagerStore from "../../../stores/flowsManagerStore"; +import cloneFlowWithParent from "../../../utils/storeUtils"; + +const useInstallComponent = ( + data, + name, + isStore, + downloadsCount, + setDownloadsCount, + setLoading, + setSuccessData, + setErrorData, +) => { + const addFlow = useFlowsManagerStore((state) => state.addFlow); + + const handleInstall = () => { + const temp = downloadsCount; + setDownloadsCount((old) => Number(old) + 1); + setLoading(true); + + getComponent(data.id) + .then((res) => { + const newFlow = cloneFlowWithParent(res, res.id, data.is_component); + addFlow(true, newFlow) + .then((id) => { + setSuccessData({ + title: `${name} ${isStore ? "Downloaded" : "Installed"} Successfully.`, + }); + setLoading(false); + }) + .catch((error) => { + setLoading(false); + setErrorData({ + title: `Error ${isStore ? "downloading" : "installing"} the ${name}`, + list: [error.response.data.detail], + }); + }); + }) + .catch((err) => { + setLoading(false); + setErrorData({ + title: `Error ${isStore ? "downloading" : "installing"} the ${name}`, + list: [err.response.data.detail], + }); + setDownloadsCount(temp); + }); + }; + + return { handleInstall }; +}; + +export default useInstallComponent; diff --git a/src/frontend/src/components/cardComponent/hooks/use-handle-like.tsx b/src/frontend/src/components/cardComponent/hooks/use-handle-like.tsx new file mode 100644 index 000000000..61e049e4d --- /dev/null +++ b/src/frontend/src/components/cardComponent/hooks/use-handle-like.tsx @@ -0,0 +1,50 @@ +import { postLikeComponent } from "../../../controllers/API"; + +const useLikeComponent = ( + data, + name, + setLoadingLike, + likedByUser, + likesCount, + setLikedByUser, + setLikesCount, + setValidApiKey, + setErrorData, +) => { + const handleLike = () => { + setLoadingLike(true); + if (likedByUser !== undefined || likedByUser !== null) { + const temp = likedByUser; + const tempNum = likesCount; + setLikedByUser((prev) => !prev); + setLikesCount((prev) => (temp ? prev - 1 : prev + 1)); + + postLikeComponent(data.id) + .then((response) => { + setLoadingLike(false); + setLikesCount(response.data.likes_count); + setLikedByUser(response.data.liked_by_user); + }) + .catch((error) => { + setLoadingLike(false); + setLikesCount(tempNum); + setLikedByUser(temp); + if (error.response.status === 403) { + setValidApiKey(false); + } else { + console.error(error); + setErrorData({ + title: `Error liking ${name}.`, + list: [error.response.data.detail], + }); + } + }); + } + }; + + return { + handleLike, + }; +}; + +export default useLikeComponent; diff --git a/src/frontend/src/components/cardComponent/hooks/use-on-drag-start.tsx b/src/frontend/src/components/cardComponent/hooks/use-on-drag-start.tsx new file mode 100644 index 000000000..a73a2cf3b --- /dev/null +++ b/src/frontend/src/components/cardComponent/hooks/use-on-drag-start.tsx @@ -0,0 +1,33 @@ +import { useCallback } from "react"; +import { createRoot } from "react-dom/client"; +import useFlowsManagerStore from "../../../stores/flowsManagerStore"; +import DragCardComponent from "../components/dragCardComponent"; + +const useDragStart = (data) => { + const getFlowById = useFlowsManagerStore((state) => state.getFlowById); + + const onDragStart = useCallback( + (event) => { + let image = ; // Replace with whatever you want here + + const ghost = document.createElement("div"); + ghost.style.transform = "translate(-10000px, -10000px)"; + ghost.style.position = "absolute"; + document.body.appendChild(ghost); + event.dataTransfer.setDragImage(ghost, 0, 0); + + const root = createRoot(ghost); + root.render(image); + + const flow = getFlowById(data.id); + if (flow) { + event.dataTransfer.setData("flow", JSON.stringify(data)); + } + }, + [data], + ); + + return { onDragStart }; +}; + +export default useDragStart; diff --git a/src/frontend/src/components/cardComponent/hooks/use-playground-effect.tsx b/src/frontend/src/components/cardComponent/hooks/use-playground-effect.tsx new file mode 100644 index 000000000..ff8e3a96f --- /dev/null +++ b/src/frontend/src/components/cardComponent/hooks/use-playground-effect.tsx @@ -0,0 +1,26 @@ +import { useEffect } from "react"; + +const usePlaygroundEffect = ( + currentFlowId, + playground, + openPlayground, + currentFlow, + setNodes, + setEdges, + cleanFlowPool, +) => { + useEffect(() => { + if (currentFlowId && playground) { + if (openPlayground) { + setNodes(currentFlow?.data?.nodes ?? [], true); + setEdges(currentFlow?.data?.edges ?? [], true); + } else { + setNodes([], true); + setEdges([], true); + } + cleanFlowPool(); + } + }, [openPlayground]); +}; + +export default usePlaygroundEffect; diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx index ba00e6958..68ba1e231 100644 --- a/src/frontend/src/components/cardComponent/index.tsx +++ b/src/frontend/src/components/cardComponent/index.tsx @@ -28,6 +28,11 @@ import { Checkbox } from "../ui/checkbox"; import { FormControl, FormField } from "../ui/form"; import Loading from "../ui/loading"; import DragCardComponent from "./components/dragCardComponent"; +import useDataEffect from "./hooks/use-data-effect"; +import useInstallComponent from "./hooks/use-handle-install"; +import useLikeComponent from "./hooks/use-handle-like"; +import useDragStart from "./hooks/use-on-drag-start"; +import usePlaygroundEffect from "./hooks/use-playground-effect"; import { convertTestName } from "./utils/convert-test-name"; export default function CollectionCardComponent({ @@ -59,11 +64,9 @@ export default function CollectionCardComponent({ const isStore = false; const [loading, setLoading] = useState(false); const [loadingLike, setLoadingLike] = useState(false); - const [liked_by_user, setLiked_by_user] = useState( - data?.liked_by_user ?? false, - ); - const [likes_count, setLikes_count] = useState(data?.liked_by_count ?? 0); - const [downloads_count, setDownloads_count] = useState( + const [likedByUser, setLikedByUser] = useState(data?.liked_by_user ?? false); + const [likesCount, setLikesCount] = useState(data?.liked_by_count ?? 0); + const [downloadsCount, setDownloadsCount] = useState( data?.downloads_count ?? 0, ); const currentFlow = useFlowsManagerStore((state) => state.currentFlow); @@ -99,115 +102,45 @@ export default function CollectionCardComponent({ return inputs.length > 0 || outputs.length > 0; } - useEffect(() => { - if (currentFlowId && playground) { - if (openPlayground) { - setNodes(currentFlow?.data?.nodes ?? [], true); - setEdges(currentFlow?.data?.edges ?? [], true); - } else { - setNodes([], true); - setEdges([], true); - } - cleanFlowPool(); - } - }, [openPlayground]); + usePlaygroundEffect( + currentFlowId, + playground, + openPlayground, + currentFlow, + setNodes, + setEdges, + cleanFlowPool, + ); - useEffect(() => { - if (data) { - setLiked_by_user(data?.liked_by_user ?? false); - setLikes_count(data?.liked_by_count ?? 0); - setDownloads_count(data?.downloads_count ?? 0); - } - }, [data, data.liked_by_count, data.liked_by_user, data.downloads_count]); + useDataEffect(data, setLikedByUser, setLikesCount, setDownloadsCount); - function handleInstall() { - const temp = downloads_count; - setDownloads_count((old) => Number(old) + 1); - setLoading(true); - getComponent(data.id) - .then((res) => { - const newFlow = cloneFLowWithParent(res, res.id, data.is_component); - addFlow(true, newFlow) - .then((id) => { - setSuccessData({ - title: `${name} ${ - isStore ? "Downloaded" : "Installed" - } Successfully.`, - }); - setLoading(false); - }) - .catch((error) => { - setLoading(false); - setErrorData({ - title: `Error ${ - isStore ? "downloading" : "installing" - } the ${name}`, - list: [error["response"]["data"]["detail"]], - }); - }); - }) - .catch((err) => { - setLoading(false); - setErrorData({ - title: `Error ${isStore ? "downloading" : "installing"} the ${name}`, - list: [err["response"]["data"]["detail"]], - }); - setDownloads_count(temp); - }); - } + const { handleInstall } = useInstallComponent( + data, + name, + isStore, + downloadsCount, + setDownloadsCount, + setLoading, + setSuccessData, + setErrorData, + ); - function handleLike() { - setLoadingLike(true); - if (liked_by_user !== undefined || liked_by_user !== null) { - const temp = liked_by_user; - const tempNum = likes_count; - setLiked_by_user((prev) => !prev); - if (!temp) { - setLikes_count((prev) => Number(prev) + 1); - } else { - setLikes_count((prev) => Number(prev) - 1); - } - postLikeComponent(data.id) - .then((response) => { - setLoadingLike(false); - setLikes_count(response.data.likes_count); - setLiked_by_user(response.data.liked_by_user); - }) - .catch((error) => { - setLoadingLike(false); - setLikes_count(tempNum); - setLiked_by_user(temp); - if (error.response.status === 403) { - setValidApiKey(false); - } else { - console.error(error); - setErrorData({ - title: `Error liking ${name}.`, - list: [error["response"]["data"]["detail"]], - }); - } - }); - } - } + const { handleLike } = useLikeComponent( + data, + name, + setLoadingLike, + likedByUser, + likesCount, + setLikedByUser, + setLikesCount, + setValidApiKey, + setErrorData, + ); const isSelectedCard = selectedFlowsComponentsCards?.includes(data?.id) ?? false; - function onDragStart(event: React.DragEvent) { - let image: JSX.Element = ; // <== whatever you want here - - var ghost = document.createElement("div"); - ghost.style.transform = "translate(-10000px, -10000px)"; - ghost.style.position = "absolute"; - document.body.appendChild(ghost); - event.dataTransfer.setDragImage(ghost, 0, 0); - const root = createRoot(ghost); - root.render(image); - const flow = getFlowById(data.id); - if (flow) { - event.dataTransfer.setData("flow", JSON.stringify(data)); - } - } + const { onDragStart } = useDragStart(data); return ( <> @@ -264,7 +197,7 @@ export default function CollectionCardComponent({ - {likes_count ?? 0} + {likesCount ?? 0} @@ -275,7 +208,7 @@ export default function CollectionCardComponent({ className="h-4 w-4" /> - {downloads_count ?? 0} + {downloadsCount ?? 0} @@ -324,20 +257,7 @@ export default function CollectionCardComponent({ )} )} -
- {/* {data.tags && - data.tags.length > 0 && - data.tags.map((tag, index) => ( - - {tag.name} - - ))} */} -
+
@@ -457,7 +377,7 @@ export default function CollectionCardComponent({ name="Heart" className={cn( "h-5 w-5", - liked_by_user + likedByUser ? "fill-destructive stroke-destructive" : "", !authorized ? "text-ring" : "", diff --git a/src/frontend/src/pages/MainPage/components/componentsComponent/components/collectionCard/index.tsx b/src/frontend/src/pages/MainPage/components/componentsComponent/components/collectionCard/index.tsx new file mode 100644 index 000000000..1c9c0799e --- /dev/null +++ b/src/frontend/src/pages/MainPage/components/componentsComponent/components/collectionCard/index.tsx @@ -0,0 +1,58 @@ +import React from "react"; +import { Link, useNavigate } from "react-router-dom"; +import CollectionCardComponent from "../../../../../../components/cardComponent"; +import IconComponent from "../../../../../../components/genericIconComponent"; +import { Button } from "../../../../../../components/ui/button"; +const CollectionCard = ({ item, type, isLoading, control }) => { + const navigate = useNavigate(); + const isComponent = item.is_component ?? false; + const editFlowLink = `/flow/${item.id}`; + const editFlowButtonTestId = `edit-flow-button-${item.id}`; + + const handleClick = () => { + if (!isComponent) { + navigate(editFlowLink); + } + }; + + const renderButton = () => { + if (!isComponent) { + return ( + + + + ); + } + return null; + }; + + return ( + + ); +}; + +export default CollectionCard; diff --git a/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx b/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx index af13e2bb4..d60bf3a05 100644 --- a/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx +++ b/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx @@ -19,6 +19,7 @@ import { getNameByType } from "../../utils/get-name-by-type"; import { sortFlows } from "../../utils/sort-flows"; import EmptyComponent from "../emptyComponent"; import HeaderComponent from "../headerComponent"; +import CollectionCard from "./components/collectionCard"; import useDeleteMultipleFlows from "./hooks/use-delete-multiple"; import useDescriptionModal from "./hooks/use-description-modal"; import useFilteredFlows from "./hooks/use-filtered-flows"; @@ -61,7 +62,6 @@ export default function ComponentsComponent({ const [handleFileDrop] = useFileDrop(uploadFlow, type)!; const [pageSize, setPageSize] = useState(20); const [pageIndex, setPageIndex] = useState(1); - const navigate = useNavigate(); const location = useLocation(); const all: FlowType[] = sortFlows(allFlows, type); const start = (pageIndex - 1) * pageSize; @@ -205,43 +205,10 @@ export default function ComponentsComponent({ {data?.map((item) => (
- - - - ) : ( - <> - ) - } - onClick={ - !item.is_component - ? () => { - navigate("/flow/" + item.id); - } - : undefined - } - playground={!item.is_component} + From b7ff822ae2c3b71dba0a1c87f6cf90dc9484f4f9 Mon Sep 17 00:00:00 2001 From: cristhianzl Date: Fri, 21 Jun 2024 18:23:10 -0300 Subject: [PATCH 3/4] =?UTF-8?q?=F0=9F=92=A1=20(hooks):=20add=20TypeScript?= =?UTF-8?q?=20types=20to=20hook=20parameters=20for=20better=20type=20safet?= =?UTF-8?q?y?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 💡 (index.tsx): add non-null assertion operator to playground variable ♻️ (use-on-file-drop.tsx): add type annotations for folderId and folderChangeCallback ♻️ (use-auto-resize-text-area.tsx): add type annotations for value and inputRef ♻️ (use-drag-and-drop.tsx): add type annotations for setIsDragging, setFiles, currentFlowId, and setErrorData ♻️ (use-focus-unlock.tsx): add type annotations for lockChat and inputRef ♻️ (use-upload.tsx): add type annotations for uploadFile, currentFlowId, setFiles, and lockChat ♻️ (use-column-defs.tsx): add type annotation for myData ♻️ (use-row-data.tsx): add type annotations for myData and open ♻️ (index.tsx): remove commented-out code ♻️ (use-filtered-flows.tsx): add type annotations for flowsFromFolder, searchFlowsComponents, and setAllFlows 💡 (index.tsx): add non-null assertion operator to flowsFromFolder variable --- .../hooks/use-fetch-data-on-mount.tsx | 11 ++++++----- .../hooks/use-handle-new-value.tsx | 15 ++++++++------- .../hooks/use-handle-node-class.tsx | 11 ++++++----- .../hooks/use-handle-refresh-buttons.tsx | 5 ++++- .../hooks/use-update-validation-status.tsx | 7 ++++++- .../hooks/use-validation-status-string.tsx | 2 +- .../cardComponent/hooks/use-data-effect.tsx | 9 +++++---- .../hooks/use-handle-install.tsx | 17 +++++++++-------- .../cardComponent/hooks/use-handle-like.tsx | 19 ++++++++++--------- .../cardComponent/hooks/use-on-drag-start.tsx | 3 ++- .../hooks/use-playground-effect.tsx | 15 ++++++++------- .../src/components/cardComponent/index.tsx | 2 +- .../hooks/use-on-file-drop.tsx | 5 ++++- .../hooks/use-auto-resize-text-area.tsx | 5 ++++- .../chatInput/hooks/use-drag-and-drop.tsx | 8 ++++---- .../chatInput/hooks/use-focus-unlock.tsx | 5 ++++- .../chatView/chatInput/hooks/use-upload.tsx | 12 +++++++++++- .../editNodeModal/hooks/use-column-defs.tsx | 3 ++- .../editNodeModal/hooks/use-row-data.tsx | 12 ++++-------- .../src/modals/editNodeModal/index.tsx | 2 -- .../hooks/use-filtered-flows.tsx | 7 ++++--- .../components/componentsComponent/index.tsx | 2 +- 22 files changed, 104 insertions(+), 73 deletions(-) diff --git a/src/frontend/src/CustomNodes/hooks/use-fetch-data-on-mount.tsx b/src/frontend/src/CustomNodes/hooks/use-fetch-data-on-mount.tsx index 5802863b0..497c560c2 100644 --- a/src/frontend/src/CustomNodes/hooks/use-fetch-data-on-mount.tsx +++ b/src/frontend/src/CustomNodes/hooks/use-fetch-data-on-mount.tsx @@ -6,13 +6,14 @@ import { } from "../../constants/constants"; import useAlertStore from "../../stores/alertStore"; import { ResponseErrorDetailAPI } from "../../types/api"; +import { NodeDataType } from "../../types/flow"; const useFetchDataOnMount = ( - data, - name, - handleUpdateValues, - setNode, - setIsLoading, + data: NodeDataType, + name: string, + handleUpdateValues: (name: string, data: NodeDataType) => Promise, + setNode: (id: string, callback: (oldNode: any) => any) => void, + setIsLoading: (value: boolean) => void, ) => { const setErrorData = useAlertStore((state) => state.setErrorData); diff --git a/src/frontend/src/CustomNodes/hooks/use-handle-new-value.tsx b/src/frontend/src/CustomNodes/hooks/use-handle-new-value.tsx index b9690e270..a32c4d2dc 100644 --- a/src/frontend/src/CustomNodes/hooks/use-handle-new-value.tsx +++ b/src/frontend/src/CustomNodes/hooks/use-handle-new-value.tsx @@ -5,15 +5,16 @@ import { } from "../../constants/constants"; import useAlertStore from "../../stores/alertStore"; import { ResponseErrorTypeAPI } from "../../types/api"; +import { NodeDataType } from "../../types/flow"; const useHandleOnNewValue = ( - data, - name, - takeSnapshot, - handleUpdateValues, - debouncedHandleUpdateValues, - setNode, - setIsLoading, + data: NodeDataType, + name: string, + takeSnapshot: () => void, + handleUpdateValues: (name: string, data: NodeDataType) => Promise, + debouncedHandleUpdateValues: any, + setNode: (id: string, callback: (oldNode: any) => any) => void, + setIsLoading: (value: boolean) => void, ) => { const setErrorData = useAlertStore((state) => state.setErrorData); diff --git a/src/frontend/src/CustomNodes/hooks/use-handle-node-class.tsx b/src/frontend/src/CustomNodes/hooks/use-handle-node-class.tsx index 933f836a4..e82c06e72 100644 --- a/src/frontend/src/CustomNodes/hooks/use-handle-node-class.tsx +++ b/src/frontend/src/CustomNodes/hooks/use-handle-node-class.tsx @@ -1,11 +1,12 @@ import { cloneDeep } from "lodash"; +import { NodeDataType } from "../../types/flow"; const useHandleNodeClass = ( - data, - name, - takeSnapshot, - setNode, - updateNodeInternals, + data: NodeDataType, + name: string, + takeSnapshot: () => void, + setNode: (id: string, callback: (oldNode: any) => any) => void, + updateNodeInternals: (id: string) => void, ) => { const handleNodeClass = (newNodeClass, code, type?: string) => { if (!data.node) return; diff --git a/src/frontend/src/CustomNodes/hooks/use-handle-refresh-buttons.tsx b/src/frontend/src/CustomNodes/hooks/use-handle-refresh-buttons.tsx index e2ecb3f46..65345fcea 100644 --- a/src/frontend/src/CustomNodes/hooks/use-handle-refresh-buttons.tsx +++ b/src/frontend/src/CustomNodes/hooks/use-handle-refresh-buttons.tsx @@ -7,7 +7,10 @@ import useAlertStore from "../../stores/alertStore"; import { ResponseErrorDetailAPI } from "../../types/api"; import { handleUpdateValues } from "../../utils/parameterUtils"; -const useHandleRefreshButtonPress = (setIsLoading, setNode) => { +const useHandleRefreshButtonPress = ( + setIsLoading: (value: boolean) => void, + setNode: (id: string, callback: (oldNode: any) => any) => void, +) => { const setErrorData = useAlertStore((state) => state.setErrorData); const handleRefreshButtonPress = async (name, data) => { diff --git a/src/frontend/src/CustomNodes/hooks/use-update-validation-status.tsx b/src/frontend/src/CustomNodes/hooks/use-update-validation-status.tsx index 2a7153dfb..e93691b5f 100644 --- a/src/frontend/src/CustomNodes/hooks/use-update-validation-status.tsx +++ b/src/frontend/src/CustomNodes/hooks/use-update-validation-status.tsx @@ -1,6 +1,11 @@ import { useEffect } from "react"; +import { FlowPoolType } from "../../types/zustand/flow"; -const useUpdateValidationStatus = (dataId, flowPool, setValidationStatus) => { +const useUpdateValidationStatus = ( + dataId: string, + flowPool: FlowPoolType, + setValidationStatus: (value: any) => void, +) => { useEffect(() => { const relevantData = flowPool[dataId] && flowPool[dataId]?.length > 0 diff --git a/src/frontend/src/CustomNodes/hooks/use-validation-status-string.tsx b/src/frontend/src/CustomNodes/hooks/use-validation-status-string.tsx index 31929eb99..3ad905dc8 100644 --- a/src/frontend/src/CustomNodes/hooks/use-validation-status-string.tsx +++ b/src/frontend/src/CustomNodes/hooks/use-validation-status-string.tsx @@ -4,7 +4,7 @@ import { isErrorLog } from "../../types/utils/typeCheckingUtils"; const useValidationStatusString = ( validationStatus: VertexBuildTypeAPI | null, - setValidationString, + setValidationString: (value: any) => void, ) => { useEffect(() => { if (validationStatus && validationStatus.data?.outputs) { diff --git a/src/frontend/src/components/cardComponent/hooks/use-data-effect.tsx b/src/frontend/src/components/cardComponent/hooks/use-data-effect.tsx index fd03753b2..21d29049a 100644 --- a/src/frontend/src/components/cardComponent/hooks/use-data-effect.tsx +++ b/src/frontend/src/components/cardComponent/hooks/use-data-effect.tsx @@ -1,10 +1,11 @@ import { useEffect } from "react"; +import { storeComponent } from "../../../types/store"; const useDataEffect = ( - data, - setLikedByUser, - setLikesCount, - setDownloadsCount, + data: storeComponent, + setLikedByUser: (value: any) => void, + setLikesCount: (value: any) => void, + setDownloadsCount: (value: any) => void, ) => { useEffect(() => { if (data) { diff --git a/src/frontend/src/components/cardComponent/hooks/use-handle-install.tsx b/src/frontend/src/components/cardComponent/hooks/use-handle-install.tsx index 062f51ebd..4c407349d 100644 --- a/src/frontend/src/components/cardComponent/hooks/use-handle-install.tsx +++ b/src/frontend/src/components/cardComponent/hooks/use-handle-install.tsx @@ -1,17 +1,18 @@ import { useState } from "react"; import { getComponent } from "../../../controllers/API"; import useFlowsManagerStore from "../../../stores/flowsManagerStore"; +import { storeComponent } from "../../../types/store"; import cloneFlowWithParent from "../../../utils/storeUtils"; const useInstallComponent = ( - data, - name, - isStore, - downloadsCount, - setDownloadsCount, - setLoading, - setSuccessData, - setErrorData, + data: storeComponent, + name: string, + isStore: boolean, + downloadsCount: number, + setDownloadsCount: (value: any) => void, + setLoading: (value: boolean) => void, + setSuccessData: (value: { title: string }) => void, + setErrorData: (value: { title: string; list: string[] }) => void, ) => { const addFlow = useFlowsManagerStore((state) => state.addFlow); diff --git a/src/frontend/src/components/cardComponent/hooks/use-handle-like.tsx b/src/frontend/src/components/cardComponent/hooks/use-handle-like.tsx index 61e049e4d..bfda076be 100644 --- a/src/frontend/src/components/cardComponent/hooks/use-handle-like.tsx +++ b/src/frontend/src/components/cardComponent/hooks/use-handle-like.tsx @@ -1,15 +1,16 @@ import { postLikeComponent } from "../../../controllers/API"; +import { storeComponent } from "../../../types/store"; const useLikeComponent = ( - data, - name, - setLoadingLike, - likedByUser, - likesCount, - setLikedByUser, - setLikesCount, - setValidApiKey, - setErrorData, + data: storeComponent, + name: string, + setLoadingLike: (value: boolean) => void, + likedByUser: boolean | null | undefined, + likesCount: number, + setLikedByUser: (value: any) => void, + setLikesCount: (value: any) => void, + setValidApiKey: (value: boolean) => void, + setErrorData: (value: { title: string; list: string[] }) => void, ) => { const handleLike = () => { setLoadingLike(true); diff --git a/src/frontend/src/components/cardComponent/hooks/use-on-drag-start.tsx b/src/frontend/src/components/cardComponent/hooks/use-on-drag-start.tsx index a73a2cf3b..251c668e2 100644 --- a/src/frontend/src/components/cardComponent/hooks/use-on-drag-start.tsx +++ b/src/frontend/src/components/cardComponent/hooks/use-on-drag-start.tsx @@ -1,9 +1,10 @@ import { useCallback } from "react"; import { createRoot } from "react-dom/client"; import useFlowsManagerStore from "../../../stores/flowsManagerStore"; +import { storeComponent } from "../../../types/store"; import DragCardComponent from "../components/dragCardComponent"; -const useDragStart = (data) => { +const useDragStart = (data: storeComponent) => { const getFlowById = useFlowsManagerStore((state) => state.getFlowById); const onDragStart = useCallback( diff --git a/src/frontend/src/components/cardComponent/hooks/use-playground-effect.tsx b/src/frontend/src/components/cardComponent/hooks/use-playground-effect.tsx index ff8e3a96f..e9236e98b 100644 --- a/src/frontend/src/components/cardComponent/hooks/use-playground-effect.tsx +++ b/src/frontend/src/components/cardComponent/hooks/use-playground-effect.tsx @@ -1,13 +1,14 @@ import { useEffect } from "react"; +import { FlowType } from "../../../types/flow"; const usePlaygroundEffect = ( - currentFlowId, - playground, - openPlayground, - currentFlow, - setNodes, - setEdges, - cleanFlowPool, + currentFlowId: string, + playground: boolean, + openPlayground: boolean, + currentFlow: FlowType | undefined, + setNodes: (value: any, value2: boolean) => void, + setEdges: (value: any, value2: boolean) => void, + cleanFlowPool: () => void, ) => { useEffect(() => { if (currentFlowId && playground) { diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx index 68ba1e231..9e5825155 100644 --- a/src/frontend/src/components/cardComponent/index.tsx +++ b/src/frontend/src/components/cardComponent/index.tsx @@ -104,7 +104,7 @@ export default function CollectionCardComponent({ usePlaygroundEffect( currentFlowId, - playground, + playground!, openPlayground, currentFlow, setNodes, diff --git a/src/frontend/src/components/sidebarComponent/hooks/use-on-file-drop.tsx b/src/frontend/src/components/sidebarComponent/hooks/use-on-file-drop.tsx index c75bf4bec..4dd87fc50 100644 --- a/src/frontend/src/components/sidebarComponent/hooks/use-on-file-drop.tsx +++ b/src/frontend/src/components/sidebarComponent/hooks/use-on-file-drop.tsx @@ -9,7 +9,10 @@ import useFlowsManagerStore from "../../../stores/flowsManagerStore"; import { useFolderStore } from "../../../stores/foldersStore"; import { addVersionToDuplicates } from "../../../utils/reactflowUtils"; -const useFileDrop = (folderId, folderChangeCallback) => { +const useFileDrop = ( + folderId: string, + folderChangeCallback: (folderId: string) => void, +) => { const setFolderDragging = useFolderStore((state) => state.setFolderDragging); const setFolderIdDragging = useFolderStore( (state) => state.setFolderIdDragging, diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-auto-resize-text-area.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-auto-resize-text-area.tsx index d4102fe9d..41428e4a4 100644 --- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-auto-resize-text-area.tsx +++ b/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-auto-resize-text-area.tsx @@ -1,6 +1,9 @@ import { useEffect } from "react"; -const useAutoResizeTextArea = (value, inputRef) => { +const useAutoResizeTextArea = ( + value: string, + inputRef: React.RefObject, +) => { useEffect(() => { if (inputRef.current && inputRef.current.scrollHeight! !== 0) { inputRef.current.style!.height = "inherit"; // Reset the height diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-drag-and-drop.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-drag-and-drop.tsx index b1ff9d143..9b30fba41 100644 --- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-drag-and-drop.tsx +++ b/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-drag-and-drop.tsx @@ -7,10 +7,10 @@ import { import useFileUpload from "./use-file-upload"; const useDragAndDrop = ( - setIsDragging, - setFiles, - currentFlowId, - setErrorData, + setIsDragging: (value: boolean) => void, + setFiles: (value: any) => void, + currentFlowId: string, + setErrorData: (value: any) => void, ) => { const dragOver = (e) => { e.preventDefault(); diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-focus-unlock.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-focus-unlock.tsx index 15dfe70ae..6e951d80f 100644 --- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-focus-unlock.tsx +++ b/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-focus-unlock.tsx @@ -1,6 +1,9 @@ import { useEffect } from "react"; -const useFocusOnUnlock = (lockChat, inputRef) => { +const useFocusOnUnlock = ( + lockChat: boolean, + inputRef: React.RefObject, +) => { useEffect(() => { if (!lockChat && inputRef.current) { inputRef.current.focus(); diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-upload.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-upload.tsx index 5a9e85195..29bc86e6a 100644 --- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-upload.tsx +++ b/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-upload.tsx @@ -1,3 +1,4 @@ +import { AxiosResponse } from "axios"; import { useEffect } from "react"; import ShortUniqueId from "short-unique-id"; import { @@ -6,9 +7,18 @@ import { SN_ERROR_TEXT, } from "../../../../../../constants/constants"; import useAlertStore from "../../../../../../stores/alertStore"; +import { UploadFileTypeAPI } from "../../../../../../types/api"; import useFileUpload from "./use-file-upload"; -const useUpload = (uploadFile, currentFlowId, setFiles, lockChat) => { +const useUpload = ( + uploadFile: ( + file: File, + id: string, + ) => Promise>, + currentFlowId: string, + setFiles: any, + lockChat: boolean, +) => { const setErrorData = useAlertStore((state) => state.setErrorData); useEffect(() => { const handlePaste = (event: ClipboardEvent): void => { diff --git a/src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx b/src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx index 14263a9c6..71f8566de 100644 --- a/src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx +++ b/src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx @@ -2,9 +2,10 @@ import { ColDef, ValueGetterParams } from "ag-grid-community"; import { useMemo } from "react"; import TableNodeCellRender from "../../../components/tableComponent/components/tableNodeCellRender"; import TableToggleCellRender from "../../../components/tableComponent/components/tableToggleCellRender"; +import { NodeDataType } from "../../../types/flow"; const useColumnDefs = ( - myData: any, + myData: NodeDataType, handleOnNewValue: (newValue: any, name: string) => void, handleOnChangeDb: (value: boolean, key: string) => void, changeAdvanced: (n: string) => void, diff --git a/src/frontend/src/modals/editNodeModal/hooks/use-row-data.tsx b/src/frontend/src/modals/editNodeModal/hooks/use-row-data.tsx index cafd25c6d..e2cd5a772 100644 --- a/src/frontend/src/modals/editNodeModal/hooks/use-row-data.tsx +++ b/src/frontend/src/modals/editNodeModal/hooks/use-row-data.tsx @@ -1,14 +1,12 @@ import { useMemo } from "react"; import { LANGFLOW_SUPPORTED_TYPES } from "../../../constants/constants"; -import { TemplateVariableType } from "../../../types/api"; +import { NodeDataType } from "../../../types/flow"; -const useRowData = (myData, open) => { +const useRowData = (myData: NodeDataType, open: boolean) => { const rowData = useMemo(() => { return Object.keys(myData.node!.template) .filter((key: string) => { - const templateParam = myData.node!.template[ - key - ] as TemplateVariableType; + const templateParam = myData.node!.template[key] as any; return ( key.charAt(0) !== "_" && templateParam.show && @@ -20,9 +18,7 @@ const useRowData = (myData, open) => { ); }) .map((key: string) => { - const templateParam = myData.node!.template[ - key - ] as TemplateVariableType; + const templateParam = myData.node!.template[key] as any; return { ...templateParam, key: key, diff --git a/src/frontend/src/modals/editNodeModal/index.tsx b/src/frontend/src/modals/editNodeModal/index.tsx index f4a368fa6..2a01e6c0b 100644 --- a/src/frontend/src/modals/editNodeModal/index.tsx +++ b/src/frontend/src/modals/editNodeModal/index.tsx @@ -16,13 +16,11 @@ const EditNodeModal = forwardRef( nodeLength, open, setOpen, - // setOpenWDoubleClick, data, }: { nodeLength: number; open: boolean; setOpen: (open: boolean) => void; - // setOpenWDoubleClick: (open: boolean) => void; data: NodeDataType; }, ref, diff --git a/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-filtered-flows.tsx b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-filtered-flows.tsx index 96b1757ff..db8be8c72 100644 --- a/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-filtered-flows.tsx +++ b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-filtered-flows.tsx @@ -1,10 +1,11 @@ import cloneDeep from "lodash/cloneDeep"; import { useEffect } from "react"; +import { FlowType } from "../../../../../types/flow"; const useFilteredFlows = ( - flowsFromFolder, - searchFlowsComponents, - setAllFlows, + flowsFromFolder: FlowType[], + searchFlowsComponents: string, + setAllFlows: (value: any[]) => void, ) => { useEffect(() => { const newFlows = cloneDeep(flowsFromFolder || []); diff --git a/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx b/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx index d60bf3a05..472ac235f 100644 --- a/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx +++ b/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx @@ -94,7 +94,7 @@ export default function ComponentsComponent({ getFolderById(folderId ? folderId : myCollectionId); }, [location]); - useFilteredFlows(flowsFromFolder, searchFlowsComponents, setAllFlows); + useFilteredFlows(flowsFromFolder!, searchFlowsComponents, setAllFlows); const resetFilter = () => { setPageIndex(1); From a0117f57941d2d589ca4e029d3e46bdc27cf5426 Mon Sep 17 00:00:00 2001 From: cristhianzl Date: Fri, 21 Jun 2024 18:35:52 -0300 Subject: [PATCH 4/4] =?UTF-8?q?=F0=9F=92=A1=20(hooks):=20add=20TypeScript?= =?UTF-8?q?=20types=20to=20hook=20parameters=20for=20better=20type=20safet?= =?UTF-8?q?y?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 💡 (use-dropdown-options.tsx): add TypeScript types to function parameters 💡 (use-api-keys.tsx): add TypeScript types to function parameters 💡 (use-handle-delete-key.tsx): add TypeScript types to function parameters 💡 (use-preload-images.tsx): add TypeScript types to function parameters 💡 (use-patch-password.tsx): add TypeScript types to function parameters 💡 (use-patch-profile-picture.tsx): add TypeScript types to function parameters 💡 (use-save-key.tsx): add TypeScript types to function parameters 💡 (use-scroll-to-element.tsx): add TypeScript types to function parameters 💡 (use-messages-table.tsx): add TypeScript types to function parameters 💡 (use-remove-messages.tsx): add TypeScript types to function parameters 💡 (use-updateMessage.tsx): add type annotations to setSuccessData and setErrorData for better type safety and code clarity --- .../hooks/use-delete-multiple.tsx | 18 ++++----- .../hooks/use-description-modal.tsx | 5 ++- .../hooks/use-handle-duplicate.tsx | 37 +++++++++++++------ .../hooks/use-handle-export.tsx | 21 ++++++----- .../hooks/use-handle-select-all.tsx | 7 +++- .../hooks/use-select-options-change.tsx | 12 +++--- .../hooks/use-selected-flows.tsx | 6 ++- .../components/componentsComponent/index.tsx | 6 +-- .../MainPage/hooks/use-delete-folder.tsx | 2 +- .../MainPage/hooks/use-dropdown-options.tsx | 21 ++++++++++- .../pages/ApiKeysPage/hooks/use-api-keys.tsx | 8 +++- .../hooks/use-handle-delete-key.tsx | 8 ++-- .../hooks/use-preload-images.tsx | 5 ++- .../pages/hooks/use-patch-password.tsx | 9 ++++- .../pages/hooks/use-patch-profile-picture.tsx | 13 ++++--- .../SettingsPage/pages/hooks/use-save-key.tsx | 10 ++--- .../pages/hooks/use-scroll-to-element.tsx | 5 ++- .../messagesPage/hooks/use-messages-table.tsx | 5 ++- .../hooks/use-remove-messages.tsx | 8 ++-- .../messagesPage/hooks/use-updateMessage.tsx | 5 ++- 20 files changed, 140 insertions(+), 71 deletions(-) diff --git a/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-delete-multiple.tsx b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-delete-multiple.tsx index 395088193..46caecbf1 100644 --- a/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-delete-multiple.tsx +++ b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-delete-multiple.tsx @@ -1,15 +1,15 @@ import { useCallback } from "react"; const useDeleteMultipleFlows = ( - selectedFlowsComponentsCards, - removeFlow, - resetFilter, - getFoldersApi, - folderId, - myCollectionId, - getFolderById, - setSuccessData, - setErrorData, + selectedFlowsComponentsCards: string[], + removeFlow: (selectedFlowsComponentsCards: string[]) => Promise, + resetFilter: () => void, + getFoldersApi: (refetch?: boolean) => Promise, + folderId: string | undefined, + myCollectionId: string, + getFolderById: (id: string) => void, + setSuccessData: (data: { title: string }) => void, + setErrorData: (data: { title: string; list: string[] }) => void, ) => { const handleDeleteMultiple = useCallback(() => { removeFlow(selectedFlowsComponentsCards) diff --git a/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-description-modal.tsx b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-description-modal.tsx index 6de2ebb6d..2af71e91a 100644 --- a/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-description-modal.tsx +++ b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-description-modal.tsx @@ -1,6 +1,9 @@ import { useMemo } from "react"; -const useDescriptionModal = (selectedFlowsComponentsCards, type) => { +const useDescriptionModal = ( + selectedFlowsComponentsCards: string[] | undefined, + type: string | undefined, +) => { const getDescriptionModal = useMemo(() => { const getTypeLabel = (type) => { const labels = { diff --git a/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-handle-duplicate.tsx b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-handle-duplicate.tsx index fc49fc0d1..d0ae38e4f 100644 --- a/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-handle-duplicate.tsx +++ b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-handle-duplicate.tsx @@ -1,18 +1,31 @@ import { useCallback } from "react"; +import { XYPosition } from "reactflow"; +import { FlowType } from "../../../../../types/flow"; const useDuplicateFlows = ( - selectedFlowsComponentsCards, - addFlow, - allFlows, - resetFilter, - getFoldersApi, - folderId, - myCollectionId, - getFolderById, - setSuccessData, - setSelectedFlowsComponentsCards, - handleSelectAll, - cardTypes, + selectedFlowsComponentsCards: string[], + addFlow: ( + newProject: boolean, + flow?: FlowType, + override?: boolean, + position?: XYPosition, + fromDragAndDrop?: boolean, + ) => Promise, + allFlows: any[], + resetFilter: () => void, + getFoldersApi: ( + refetch?: boolean, + startupApplication?: boolean, + ) => Promise, + folderId: string, + myCollectionId: string, + getFolderById: (id: string) => void, + setSuccessData: (data: { title: string }) => void, + setSelectedFlowsComponentsCards: ( + selectedFlowsComponentsCards: string[], + ) => void, + handleSelectAll: (select: boolean) => void, + cardTypes: string, ) => { const handleDuplicate = useCallback(() => { Promise.all( diff --git a/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-handle-export.tsx b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-handle-export.tsx index 8edabc146..4b5e2f925 100644 --- a/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-handle-export.tsx +++ b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-handle-export.tsx @@ -1,15 +1,18 @@ import { useCallback } from "react"; +import { FlowType } from "../../../../../types/flow"; const useExportFlows = ( - selectedFlowsComponentsCards, - allFlows, - downloadFlow, - removeApiKeys, - version, - setSuccessData, - setSelectedFlowsComponentsCards, - handleSelectAll, - cardTypes, + selectedFlowsComponentsCards: string[], + allFlows: Array, + downloadFlow: (flow: any, name: string, description: string) => void, + removeApiKeys: (flow: any) => any, + version: string, + setSuccessData: (data: { title: string }) => void, + setSelectedFlowsComponentsCards: ( + selectedFlowsComponentsCards: string[], + ) => void, + handleSelectAll: (select: boolean) => void, + cardTypes: string, ) => { const handleExport = useCallback(() => { selectedFlowsComponentsCards.forEach((selectedFlowId) => { diff --git a/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-handle-select-all.tsx b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-handle-select-all.tsx index a81515e0a..4961c73e9 100644 --- a/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-handle-select-all.tsx +++ b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-handle-select-all.tsx @@ -1,6 +1,11 @@ import { useCallback } from "react"; +import { FlowType } from "../../../../../types/flow"; -const useSelectAll = (flowsFromFolder, getValues, setValue) => { +const useSelectAll = ( + flowsFromFolder: FlowType[], + getValues: () => Record, + setValue: (key: string, value: boolean) => void, +) => { const handleSelectAll = useCallback( (select) => { const flowsFromFolderIds = flowsFromFolder?.map((f) => f.id); diff --git a/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-select-options-change.tsx b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-select-options-change.tsx index 56dc204c7..dc7053600 100644 --- a/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-select-options-change.tsx +++ b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-select-options-change.tsx @@ -1,15 +1,15 @@ import { useCallback } from "react"; const useSelectOptionsChange = ( - selectedFlowsComponentsCards, - setErrorData, - setOpenDelete, - handleDuplicate, - handleExport, + selectedFlowsComponentsCards: string[] | undefined, + setErrorData: (data: { title: string; list: string[] }) => void, + setOpenDelete: (value: boolean) => void, + handleDuplicate: () => void, + handleExport: () => void, ) => { const handleSelectOptionsChange = useCallback( (action) => { - const hasSelected = selectedFlowsComponentsCards?.length > 0; + const hasSelected = selectedFlowsComponentsCards?.length! > 0; if (!hasSelected) { setErrorData({ title: "No items selected", diff --git a/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-selected-flows.tsx b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-selected-flows.tsx index b6f00934e..e5ac9a90d 100644 --- a/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-selected-flows.tsx +++ b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-selected-flows.tsx @@ -1,8 +1,10 @@ import { useEffect } from "react"; const useSelectedFlows = ( - entireFormValues, - setSelectedFlowsComponentsCards, + entireFormValues: Record | undefined, + setSelectedFlowsComponentsCards: ( + selectedFlowsComponentsCards: string[], + ) => void, ) => { useEffect(() => { if (!entireFormValues || Object.keys(entireFormValues).length === 0) return; diff --git a/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx b/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx index 472ac235f..7ccd88048 100644 --- a/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx +++ b/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx @@ -107,7 +107,7 @@ export default function ComponentsComponent({ const methods = useForm(); const { handleSelectAll } = useSelectAll( - flowsFromFolder, + flowsFromFolder!, getValues, setValue, ); @@ -119,7 +119,7 @@ export default function ComponentsComponent({ resetFilter, getFoldersApi, folderId, - myCollectionId, + myCollectionId!, getFolderById, setSuccessData, setSelectedFlowsComponentsCards, @@ -155,7 +155,7 @@ export default function ComponentsComponent({ resetFilter, getFoldersApi, folderId, - myCollectionId, + myCollectionId!, getFolderById, setSuccessData, setErrorData, diff --git a/src/frontend/src/pages/MainPage/hooks/use-delete-folder.tsx b/src/frontend/src/pages/MainPage/hooks/use-delete-folder.tsx index 0d093bc32..27ccfdc19 100644 --- a/src/frontend/src/pages/MainPage/hooks/use-delete-folder.tsx +++ b/src/frontend/src/pages/MainPage/hooks/use-delete-folder.tsx @@ -2,7 +2,7 @@ import useAlertStore from "../../../stores/alertStore"; import { useFolderStore } from "../../../stores/foldersStore"; import { deleteFolder, getFolderById } from "../services"; -const useDeleteFolder = ({ navigate }) => { +const useDeleteFolder = ({ navigate }: { navigate: (url: string) => void }) => { const setSuccessData = useAlertStore((state) => state.setSuccessData); const setErrorData = useAlertStore((state) => state.setErrorData); const folderToEdit = useFolderStore((state) => state.folderToEdit); diff --git a/src/frontend/src/pages/MainPage/hooks/use-dropdown-options.tsx b/src/frontend/src/pages/MainPage/hooks/use-dropdown-options.tsx index 69e2c2df3..92957d295 100644 --- a/src/frontend/src/pages/MainPage/hooks/use-dropdown-options.tsx +++ b/src/frontend/src/pages/MainPage/hooks/use-dropdown-options.tsx @@ -1,7 +1,26 @@ +import { XYPosition } from "reactflow"; import { CONSOLE_ERROR_MSG } from "../../../constants/alerts_constants"; import useAlertStore from "../../../stores/alertStore"; -const useDropdownOptions = ({ uploadFlow, navigate, is_component }) => { +const useDropdownOptions = ({ + uploadFlow, + navigate, + is_component, +}: { + uploadFlow: ({ + newProject, + file, + isComponent, + position, + }: { + newProject: boolean; + file?: File; + isComponent: boolean | null; + position?: XYPosition; + }) => Promise; + navigate: (url: string) => void; + is_component: boolean; +}) => { const setSuccessData = useAlertStore((state) => state.setSuccessData); const setErrorData = useAlertStore((state) => state.setErrorData); const handleImportFromJSON = () => { diff --git a/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/hooks/use-api-keys.tsx b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/hooks/use-api-keys.tsx index 8af9b4a0b..2bdbe33f9 100644 --- a/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/hooks/use-api-keys.tsx +++ b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/hooks/use-api-keys.tsx @@ -1,6 +1,12 @@ import { getApiKey } from "../../../../../controllers/API"; +import { Users } from "../../../../../types/api"; -const useApiKeys = (userData, setLoadingKeys, keysList, setUserId) => { +const useApiKeys = ( + userData: Users | null, + setLoadingKeys: (load: boolean) => void, + keysList: React.MutableRefObject, + setUserId: (userId: string) => void, +) => { const fetchApiKeys = () => { setLoadingKeys(true); getApiKey() diff --git a/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/hooks/use-handle-delete-key.tsx b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/hooks/use-handle-delete-key.tsx index 74d5dae99..0d642dfbf 100644 --- a/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/hooks/use-handle-delete-key.tsx +++ b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/hooks/use-handle-delete-key.tsx @@ -7,10 +7,10 @@ import { import { deleteApiKey } from "../../../../../controllers/API"; const useDeleteApiKeys = ( - selectedRows, - resetFilter, - setSuccessData, - setErrorData, + selectedRows: string[], + resetFilter: () => void, + setSuccessData: (data: { title: string }) => void, + setErrorData: (data: { title: string; list: string[] }) => void, ) => { const handleDeleteKey = () => { Promise.all(selectedRows.map((selectedRow) => deleteApiKey(selectedRow))) diff --git a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/hooks/use-preload-images.tsx b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/hooks/use-preload-images.tsx index 988af6ea9..abc8587d2 100644 --- a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/hooks/use-preload-images.tsx +++ b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/hooks/use-preload-images.tsx @@ -4,7 +4,10 @@ import { BASE_URL_API, } from "../../../../../../../../../constants/constants"; -const usePreloadImages = (profilePictures, setImagesLoaded) => { +const usePreloadImages = ( + profilePictures: { [key: string]: string[] }, + setImagesLoaded: (value: boolean) => void, +) => { const preloadImages = async (imageUrls) => { return Promise.all( imageUrls.map( diff --git a/src/frontend/src/pages/SettingsPage/pages/hooks/use-patch-password.tsx b/src/frontend/src/pages/SettingsPage/pages/hooks/use-patch-password.tsx index c4b452e6b..0003fe4a1 100644 --- a/src/frontend/src/pages/SettingsPage/pages/hooks/use-patch-password.tsx +++ b/src/frontend/src/pages/SettingsPage/pages/hooks/use-patch-password.tsx @@ -5,8 +5,13 @@ import { SAVE_SUCCESS_ALERT, } from "../../../../constants/alerts_constants"; import { resetPassword } from "../../../../controllers/API"; +import { Users } from "../../../../types/api"; -const usePatchPassword = (userData, setSuccessData, setErrorData) => { +const usePatchPassword = ( + userData: Users | null, + setSuccessData: (data: { title: string; list?: string[] }) => void, + setErrorData: (data: { title: string; list: string[] }) => void, +) => { const handlePatchPassword = async (password, cnfPassword, handleInput) => { if (password !== cnfPassword) { setErrorData({ @@ -16,7 +21,7 @@ const usePatchPassword = (userData, setSuccessData, setErrorData) => { return; } try { - if (password !== "") await resetPassword(userData.id, { password }); + if (password !== "") await resetPassword(userData!.id, { password }); handleInput({ target: { name: "password", value: "" } }); handleInput({ target: { name: "cnfPassword", value: "" } }); setSuccessData({ title: SAVE_SUCCESS_ALERT }); diff --git a/src/frontend/src/pages/SettingsPage/pages/hooks/use-patch-profile-picture.tsx b/src/frontend/src/pages/SettingsPage/pages/hooks/use-patch-profile-picture.tsx index 584300fdf..6ad76f4ff 100644 --- a/src/frontend/src/pages/SettingsPage/pages/hooks/use-patch-profile-picture.tsx +++ b/src/frontend/src/pages/SettingsPage/pages/hooks/use-patch-profile-picture.tsx @@ -4,21 +4,22 @@ import { SAVE_SUCCESS_ALERT, } from "../../../../constants/alerts_constants"; import { updateUser } from "../../../../controllers/API"; +import { Users } from "../../../../types/api"; const usePatchProfilePicture = ( - setSuccessData, - setErrorData, - currentUserData, - setUserData, + setSuccessData: (data: { title: string; list?: string[] }) => void, + setErrorData: (data: { title: string; list: string[] }) => void, + currentUserData: Users | null, + setUserData: (data: any) => void, ) => { const handlePatchProfilePicture = async (profile_picture) => { try { if (profile_picture !== "") { - await updateUser(currentUserData.id, { + await updateUser(currentUserData!.id, { profile_image: profile_picture, }); let newUserData = cloneDeep(currentUserData); - newUserData.profile_image = profile_picture; + newUserData!.profile_image = profile_picture; setUserData(newUserData); } setSuccessData({ title: SAVE_SUCCESS_ALERT }); diff --git a/src/frontend/src/pages/SettingsPage/pages/hooks/use-save-key.tsx b/src/frontend/src/pages/SettingsPage/pages/hooks/use-save-key.tsx index cf5871a26..4f87405c3 100644 --- a/src/frontend/src/pages/SettingsPage/pages/hooks/use-save-key.tsx +++ b/src/frontend/src/pages/SettingsPage/pages/hooks/use-save-key.tsx @@ -7,11 +7,11 @@ import { AuthContext } from "../../../../contexts/authContext"; import { addApiKeyStore } from "../../../../controllers/API"; const useSaveKey = ( - setSuccessData, - setErrorData, - setHasApiKey, - setValidApiKey, - setLoadingApiKey, + setSuccessData: (data: { title: string }) => void, + setErrorData: (data: { title: string; list: string[] }) => void, + setHasApiKey: (hasApiKey: boolean) => void, + setValidApiKey: (validApiKey: boolean) => void, + setLoadingApiKey: (loadingApiKey: boolean) => void, ) => { const { storeApiKey } = useContext(AuthContext); diff --git a/src/frontend/src/pages/SettingsPage/pages/hooks/use-scroll-to-element.tsx b/src/frontend/src/pages/SettingsPage/pages/hooks/use-scroll-to-element.tsx index a56c2d5d6..faa7408a3 100644 --- a/src/frontend/src/pages/SettingsPage/pages/hooks/use-scroll-to-element.tsx +++ b/src/frontend/src/pages/SettingsPage/pages/hooks/use-scroll-to-element.tsx @@ -1,6 +1,9 @@ import { useEffect } from "react"; -const useScrollToElement = (scrollId, setCurrentFlowId) => { +const useScrollToElement = ( + scrollId: string | null | undefined, + setCurrentFlowId: (currentFlowId: string) => void, +) => { useEffect(() => { const element = document.getElementById(scrollId ?? "null"); if (element) { diff --git a/src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-messages-table.tsx b/src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-messages-table.tsx index 7f3a74352..fe344e478 100644 --- a/src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-messages-table.tsx +++ b/src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-messages-table.tsx @@ -1,8 +1,11 @@ +import { ColDef, ColGroupDef } from "ag-grid-community"; import { useEffect } from "react"; import { getMessagesTable } from "../../../../../controllers/API"; import { useMessagesStore } from "../../../../../stores/messagesStore"; -const useMessagesTable = (setColumns) => { +const useMessagesTable = ( + setColumns: (data: Array) => void, +) => { const setMessages = useMessagesStore((state) => state.setMessages); useEffect(() => { const fetchData = async () => { diff --git a/src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-remove-messages.tsx b/src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-remove-messages.tsx index d7f4d5202..f2c8a2a4d 100644 --- a/src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-remove-messages.tsx +++ b/src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-remove-messages.tsx @@ -2,10 +2,10 @@ import { deleteMessagesFn } from "../../../../../controllers/API"; import { useMessagesStore } from "../../../../../stores/messagesStore"; const useRemoveMessages = ( - setSelectedRows, - setSuccessData, - setErrorData, - selectedRows, + setSelectedRows: (data: number[]) => void, + setSuccessData: (data: { title: string }) => void, + setErrorData: (data: { title: string }) => void, + selectedRows: number[], ) => { const deleteMessages = useMessagesStore((state) => state.removeMessages); diff --git a/src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-updateMessage.tsx b/src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-updateMessage.tsx index f199ac489..dc2840b79 100644 --- a/src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-updateMessage.tsx +++ b/src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-updateMessage.tsx @@ -2,7 +2,10 @@ import { updateMessageApi } from "../../../../../controllers/API"; import { useMessagesStore } from "../../../../../stores/messagesStore"; import { Message } from "../../../../../types/messages"; -const useUpdateMessage = (setSuccessData, setErrorData) => { +const useUpdateMessage = ( + setSuccessData: (data: { title: string; list?: string[] }) => void, + setErrorData: (data: { title: string; list?: string[] }) => void, +) => { const updateMessage = useMessagesStore((state) => state.updateMessage); const handleUpdate = async (data: Message) => {