From be54190408f612d8713d1a30bd3ec2a9b5bfee80 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Wed, 14 Aug 2024 09:54:01 -0300 Subject: [PATCH 01/38] Removed unused code --- .../src/components/sidebarComponent/index.tsx | 2 -- .../pages/MainPage/pages/mainPage/index.tsx | 5 ---- src/frontend/src/stores/authStore.ts | 29 ------------------- 3 files changed, 36 deletions(-) diff --git a/src/frontend/src/components/sidebarComponent/index.tsx b/src/frontend/src/components/sidebarComponent/index.tsx index dbf80c771d4..f2093b8da88 100644 --- a/src/frontend/src/components/sidebarComponent/index.tsx +++ b/src/frontend/src/components/sidebarComponent/index.tsx @@ -13,7 +13,6 @@ type SidebarNavProps = { icon: React.ReactNode; }[]; handleChangeFolder?: (id: string) => void; - handleEditFolder?: (item: FolderType) => void; handleDeleteFolder?: (item: FolderType) => void; className?: string; }; @@ -22,7 +21,6 @@ export default function SidebarNav({ className, items, handleChangeFolder, - handleEditFolder, handleDeleteFolder, ...props }: SidebarNavProps) { diff --git a/src/frontend/src/pages/MainPage/pages/mainPage/index.tsx b/src/frontend/src/pages/MainPage/pages/mainPage/index.tsx index 6847ad5794c..4a748993a4d 100644 --- a/src/frontend/src/pages/MainPage/pages/mainPage/index.tsx +++ b/src/frontend/src/pages/MainPage/pages/mainPage/index.tsx @@ -18,7 +18,6 @@ export default function HomePage(): JSX.Element { const location = useLocation(); const pathname = location.pathname; const [openModal, setOpenModal] = useState(false); - const [openFolderModal, setOpenFolderModal] = useState(false); const [openDeleteFolderModal, setOpenDeleteFolderModal] = useState(false); const is_component = pathname === "/components"; const setFolderToEdit = useFolderStore((state) => state.setFolderToEdit); @@ -85,10 +84,6 @@ export default function HomePage(): JSX.Element { handleChangeFolder={(id: string) => { navigate(`all/folder/${id}`, { state: { folderId: id } }); }} - handleEditFolder={(item) => { - setFolderToEdit(item); - setOpenFolderModal(true); - }} handleDeleteFolder={(item) => { setFolderToEdit(item); setOpenDeleteFolderModal(true); diff --git a/src/frontend/src/stores/authStore.ts b/src/frontend/src/stores/authStore.ts index 5d12927e2d1..85fb717bc4a 100644 --- a/src/frontend/src/stores/authStore.ts +++ b/src/frontend/src/stores/authStore.ts @@ -1,10 +1,8 @@ // authStore.js import { LANGFLOW_ACCESS_TOKEN } from "@/constants/constants"; -import useFlowsManagerStore from "@/stores/flowsManagerStore"; import { AuthStoreType } from "@/types/zustand/auth"; import Cookies from "universal-cookie"; import { create } from "zustand"; -import { useFolderStore } from "../stores/foldersStore"; const cookies = new Cookies(); const useAuthStore = create((set, get) => ({ @@ -40,33 +38,6 @@ const useAuthStore = create((set, get) => ({ window.location.href = "/login"; }, - // getUser: () => { - // const setLoading = useAlertStore.getState().setLoading; - // const getFoldersApi = useFolderStore.getState().getFoldersApi; - // const checkHasStore = useStoreStore.getState().checkHasStore; - // const fetchApiData = useStoreStore.getState().fetchApiData; - - // getLoggedUser() - // .then(async (user) => { - // set({ userData: user, isAdmin: user.is_superuser }); - // getFoldersApi(true, true); - // checkHasStore(); - // fetchApiData(); - // }) - // .catch((error) => { - // setLoading(false); - // }); - // }, - - // login: (newAccessToken) => { - // set({ accessToken: newAccessToken, isAuthenticated: true }); - // get().getUser(); - // }, - - // storeApiKey: (apikey) => { - // cookies.set('apikey_tkn_lflw', apikey, { path: '/' }); - // set({ apiKey: apikey }); - // }, })); export default useAuthStore; From 96f85873a31a04ad7a195d1f58612ab661536561 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Wed, 14 Aug 2024 10:23:18 -0300 Subject: [PATCH 02/38] Separated folder sidebar from common sidebar --- .../components/sideBarFolderButtons/index.tsx | 413 ------------------ .../src/components/sidebarComponent/index.tsx | 26 +- 2 files changed, 1 insertion(+), 438 deletions(-) delete mode 100644 src/frontend/src/components/sidebarComponent/components/sideBarFolderButtons/index.tsx diff --git a/src/frontend/src/components/sidebarComponent/components/sideBarFolderButtons/index.tsx b/src/frontend/src/components/sidebarComponent/components/sideBarFolderButtons/index.tsx deleted file mode 100644 index d48601c8bd1..00000000000 --- a/src/frontend/src/components/sidebarComponent/components/sideBarFolderButtons/index.tsx +++ /dev/null @@ -1,413 +0,0 @@ -import { - usePatchFolders, - usePostFolders, - usePostUploadFolders, -} from "@/controllers/API/queries/folders"; -import { useGetDownloadFolders } from "@/controllers/API/queries/folders/use-get-download-folders"; -import { createFileUpload } from "@/helpers/create-file-upload"; -import { getObjectsFromFilelist } from "@/helpers/get-objects-from-filelist"; -import useUploadFlow from "@/hooks/flows/use-upload-flow"; -import { useEffect, useRef, useState } from "react"; -import { useLocation } from "react-router-dom"; -import { FolderType } from "../../../../pages/MainPage/entities"; -import useAlertStore from "../../../../stores/alertStore"; -import useFlowsManagerStore from "../../../../stores/flowsManagerStore"; -import { useFolderStore } from "../../../../stores/foldersStore"; -import { handleKeyDown } from "../../../../utils/reactflowUtils"; -import { cn } from "../../../../utils/utils"; -import IconComponent, { - ForwardedIconComponent, -} from "../../../genericIconComponent"; -import { Button, buttonVariants } from "../../../ui/button"; -import { Input } from "../../../ui/input"; -import useFileDrop from "../../hooks/use-on-file-drop"; - -type SideBarFoldersButtonsComponentProps = { - pathname: string; - handleChangeFolder?: (id: string) => void; - handleDeleteFolder?: (item: FolderType) => void; -}; -const SideBarFoldersButtonsComponent = ({ - pathname, - handleChangeFolder, - handleDeleteFolder, -}: SideBarFoldersButtonsComponentProps) => { - const refInput = useRef(null); - const setFolders = useFolderStore((state) => state.setFolders); - const folders = useFolderStore((state) => state.folders); - const [foldersNames, setFoldersNames] = useState({}); - const takeSnapshot = useFlowsManagerStore((state) => state.takeSnapshot); - const [editFolders, setEditFolderName] = useState( - folders.map((obj) => ({ name: obj.name, edit: false })), - ); - const currentFolder = pathname.split("/"); - const urlWithoutPath = pathname.split("/").length < 4; - const myCollectionId = useFolderStore((state) => state.myCollectionId); - const folderIdDragging = useFolderStore((state) => state.folderIdDragging); - const refreshFolders = useFolderStore((state) => state.refreshFolders); - - const checkPathName = (itemId: string) => { - if (urlWithoutPath && itemId === myCollectionId) { - return true; - } - return currentFolder.includes(itemId); - }; - const location = useLocation(); - const folderId = location?.state?.folderId ?? myCollectionId; - const getFolderById = useFolderStore((state) => state.getFolderById); - const setErrorData = useAlertStore((state) => state.setErrorData); - const setSuccessData = useAlertStore((state) => state.setSuccessData); - const getFoldersApi = useFolderStore((state) => state.getFoldersApi); - const uploadFlow = useUploadFlow(); - - const handleFolderChange = () => { - getFolderById(folderId); - }; - - const { dragOver, dragEnter, dragLeave, onDrop } = useFileDrop( - folderId, - handleFolderChange, - ); - - const { mutate } = usePostUploadFolders(); - - const handleUploadFlowsToFolder = () => { - createFileUpload().then((files: File[]) => { - getObjectsFromFilelist(files).then((objects) => { - if (objects.every((flow) => flow.data?.nodes)) { - uploadFlow({ files }).then(() => { - getFolderById(folderId); - setSuccessData({ - title: "Uploaded successfully", - }); - }); - } else { - files.forEach((folder) => { - const formData = new FormData(); - formData.append("file", folder); - mutate( - { formData }, - { - onSuccess: () => { - getFoldersApi(true); - setSuccessData({ - title: "Folder uploaded successfully.", - }); - }, - onError: (err) => { - console.log(err); - setErrorData({ - title: `Error on upload`, - list: [err["response"]["data"]["message"]], - }); - }, - }, - ); - }); - } - }); - }); - }; - - const { mutate: mutateDownloadFolder } = useGetDownloadFolders(); - - const handleDownloadFolder = (id: string) => { - mutateDownloadFolder( - { - folderId: id, - }, - { - onSuccess: (data) => { - const folder = folders.find((f) => f.id === data.folderId); - - data.folder_name = folder?.name || "folder"; - data.folder_description = folder?.description || ""; - - const jsonString = `data:text/json;charset=utf-8,${encodeURIComponent( - JSON.stringify(data), - )}`; - - const link = document.createElement("a"); - link.href = jsonString; - link.download = `${data.folder_name}.json`; - - link.click(); - }, - onError: () => { - setErrorData({ - title: `An error occurred while downloading folder.`, - }); - }, - }, - ); - }; - - const { mutate: mutateAddFolder } = usePostFolders(); - const { mutate: mutateUpdateFolder } = usePatchFolders(); - - function addNewFolder() { - mutateAddFolder( - { - data: { - name: "New Folder", - parent_id: null, - description: "", - }, - }, - { - onSuccess: () => { - refreshFolders(); - }, - }, - ); - } - - function handleEditFolderName(e, name): void { - const { - target: { value }, - } = e; - setFoldersNames((old) => ({ - ...old, - [name]: value, - })); - } - - useEffect(() => { - folders.map((obj) => ({ name: obj.name, edit: false })); - }, [folders]); - - const handleEditNameFolder = async (item) => { - const newEditFolders = editFolders.map((obj) => { - if (obj.name === item.name) { - return { name: item.name, edit: false }; - } - return { name: obj.name, edit: false }; - }); - setEditFolderName(newEditFolders); - if (foldersNames[item.name].trim() !== "") { - setFoldersNames((old) => ({ - ...old, - [item.name]: foldersNames[item.name], - })); - const body = { - ...item, - name: foldersNames[item.name], - flows: item.flows?.length > 0 ? item.flows : [], - components: item.components?.length > 0 ? item.components : [], - }; - - mutateUpdateFolder( - { - data: body, - folderId: item.id!, - }, - { - onSuccess: (updatedFolder) => { - const updatedFolderIndex = folders.findIndex( - (f) => f.id === updatedFolder.id, - ); - - const updateFolders = [...folders]; - updateFolders[updatedFolderIndex] = updatedFolder; - - setFolders(updateFolders); - setFoldersNames({}); - setEditFolderName( - folders.map((obj) => ({ - name: obj.name, - edit: false, - })), - ); - }, - }, - ); - } else { - setFoldersNames((old) => ({ - ...old, - [item.name]: item.name, - })); - } - }; - - return ( - <> -
-
Folders
- - -
- -
- <> - {folders.map((item, index) => { - const editFolderName = editFolders?.filter( - (folder) => folder.name === item.name, - )[0]; - return ( -
dragOver(e, item.id!)} - onDragEnter={(e) => dragEnter(e, item.id!)} - onDragLeave={dragLeave} - onDrop={(e) => onDrop(e, item.id!)} - key={item.id} - data-testid={`sidebar-nav-${item.name}`} - className={cn( - buttonVariants({ variant: "ghost" }), - checkPathName(item.id!) - ? "border border-border bg-muted hover:bg-muted" - : "border hover:bg-transparent lg:border-transparent lg:hover:border-border", - "group flex w-full shrink-0 cursor-pointer gap-2 opacity-100 lg:min-w-full", - folderIdDragging === item.id! ? "bg-border" : "", - )} - onClick={() => handleChangeFolder!(item.id!)} - > -
{ - if (item.name === "My Projects") { - return; - } - - if (!foldersNames[item.name]) { - setFoldersNames({ [item.name]: item.name }); - } - - if ( - editFolders.find((obj) => obj.name === item.name)?.name - ) { - const newEditFolders = editFolders.map((obj) => { - if (obj.name === item.name) { - return { name: item.name, edit: true }; - } - return { name: obj.name, edit: false }; - }); - setEditFolderName(newEditFolders); - takeSnapshot(); - event.stopPropagation(); - event.preventDefault(); - return; - } - - setEditFolderName((old) => [ - ...old, - { name: item.name, edit: true }, - ]); - setFoldersNames((oldFolder) => ({ - ...oldFolder, - [item.name]: item.name, - })); - takeSnapshot(); - event.stopPropagation(); - event.preventDefault(); - }} - className="flex w-full items-center gap-2" - > - - {editFolderName?.edit ? ( -
- { - handleEditFolderName(e, item.name); - }} - ref={refInput} - onKeyDown={(e) => { - if (e.key === "Escape") { - const newEditFolders = editFolders.map((obj) => { - if (obj.name === item.name) { - return { name: item.name, edit: false }; - } - return { name: obj.name, edit: false }; - }); - setEditFolderName(newEditFolders); - setFoldersNames({}); - setEditFolderName( - folders.map((obj) => ({ - name: obj.name, - edit: false, - })), - ); - } - if (e.key === "Enter") { - refInput.current?.blur(); - } - handleKeyDown(e, e.key, ""); - }} - autoFocus={true} - onBlur={async () => { - if (refInput.current?.value !== item.name) { - handleEditNameFolder(item); - } else { - editFolderName.edit = false; - } - }} - value={foldersNames[item.name]} - id={`input-folder-${item.name}`} - data-testid={`input-folder`} - /> -
- ) : ( - - {item.name} - - )} - {index > 0 && ( - - )} - -
-
- ); - })} - -
- - ); -}; -export default SideBarFoldersButtonsComponent; diff --git a/src/frontend/src/components/sidebarComponent/index.tsx b/src/frontend/src/components/sidebarComponent/index.tsx index f2093b8da88..7b53aa1daba 100644 --- a/src/frontend/src/components/sidebarComponent/index.tsx +++ b/src/frontend/src/components/sidebarComponent/index.tsx @@ -1,10 +1,7 @@ import { useLocation } from "react-router-dom"; -import { FolderType } from "../../pages/MainPage/entities"; -import { useFolderStore } from "../../stores/foldersStore"; import { cn } from "../../utils/utils"; import HorizontalScrollFadeComponent from "../horizontalScrollFadeComponent"; import SideBarButtonsComponent from "./components/sideBarButtons"; -import SideBarFoldersButtonsComponent from "./components/sideBarFolderButtons"; type SidebarNavProps = { items: { @@ -12,42 +9,21 @@ type SidebarNavProps = { title: string; icon: React.ReactNode; }[]; - handleChangeFolder?: (id: string) => void; - handleDeleteFolder?: (item: FolderType) => void; className?: string; }; export default function SidebarNav({ className, items, - handleChangeFolder, - handleDeleteFolder, ...props }: SidebarNavProps) { const location = useLocation(); const pathname = location.pathname; - const loadingFolders = useFolderStore((state) => state.isLoadingFolders); - const folders = useFolderStore((state) => state.folders); - - const pathValues = ["folder", "components", "flows", "all"]; - const isFolderPath = pathValues.some((value) => pathname.includes(value)); - - // Ensure all conditions are covered and provide a default case if necessary - const sidebarContent = - items.length > 0 ? ( - - ) : !loadingFolders && folders?.length > 0 && isFolderPath ? ( - - ) : null; return ( ); From 966f3a85689aaa60a12ac25ad8c6edbcbea80192 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Wed, 14 Aug 2024 10:23:34 -0300 Subject: [PATCH 03/38] Removed useOnFileDrop from common sidebar --- .../hooks/use-on-file-drop.tsx | 150 ------------------ 1 file changed, 150 deletions(-) delete mode 100644 src/frontend/src/components/sidebarComponent/hooks/use-on-file-drop.tsx 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 deleted file mode 100644 index 9e353624c06..00000000000 --- a/src/frontend/src/components/sidebarComponent/hooks/use-on-file-drop.tsx +++ /dev/null @@ -1,150 +0,0 @@ -import useSaveFlow from "@/hooks/flows/use-save-flow"; -import { - UPLOAD_ALERT_LIST, - WRONG_FILE_ERROR_ALERT, -} from "../../../constants/alerts_constants"; -import { uploadFlowToFolder } from "../../../pages/MainPage/services"; -import useAlertStore from "../../../stores/alertStore"; -import useFlowsManagerStore from "../../../stores/flowsManagerStore"; -import { useFolderStore } from "../../../stores/foldersStore"; -import { addVersionToDuplicates } from "../../../utils/reactflowUtils"; - -const useFileDrop = ( - folderId: string, - folderChangeCallback: (folderId: string) => void, -) => { - const setFolderDragging = useFolderStore((state) => state.setFolderDragging); - const setFolderIdDragging = useFolderStore( - (state) => state.setFolderIdDragging, - ); - - const setErrorData = useAlertStore((state) => state.setErrorData); - const refreshFolders = useFolderStore((state) => state.refreshFolders); - const flows = useFlowsManagerStore((state) => state.flows); - const saveFlow = useSaveFlow(); - - const triggerFolderChange = (folderId) => { - if (folderChangeCallback) { - folderChangeCallback(folderId); - } - }; - const handleFileDrop = async (e) => { - if (e.dataTransfer.types.some((type) => type === "Files")) { - if (e.dataTransfer.files && e.dataTransfer.files.length > 0) { - const firstFile = e.dataTransfer.files[0]; - if (firstFile.type === "application/json") { - uploadFormData(firstFile); - } else { - setErrorData({ - title: WRONG_FILE_ERROR_ALERT, - list: [UPLOAD_ALERT_LIST], - }); - } - } - } - }; - - const dragOver = ( - e: - | React.DragEvent - | React.DragEvent - | React.DragEvent, - folderId: string, - ) => { - e.preventDefault(); - - if (e.dataTransfer.types.some((types) => types === "Files")) { - setFolderDragging(true); - } - setFolderIdDragging(folderId); - }; - - const dragEnter = ( - e: - | React.DragEvent - | React.DragEvent - | React.DragEvent, - folderId: string, - ) => { - if (e.dataTransfer.types.some((types) => types === "Files")) { - setFolderDragging(true); - } - setFolderIdDragging(folderId); - e.preventDefault(); - }; - - const dragLeave = ( - e: - | React.DragEvent - | React.DragEvent - | React.DragEvent, - ) => { - e.preventDefault(); - if (e.target === e.currentTarget) { - setFolderDragging(false); - setFolderIdDragging(""); - } - }; - - const onDrop = ( - e: - | React.DragEvent - | React.DragEvent - | React.DragEvent, - folderId: string, - ) => { - if (e?.dataTransfer?.getData("flow")) { - const data = JSON.parse(e?.dataTransfer?.getData("flow")); - - if (data) { - uploadFromDragCard(data.id, folderId); - return; - } - } - - e.preventDefault(); - handleFileDrop(e); - }; - - const uploadFromDragCard = (flowId, folderId) => { - const selectedFlow = flows?.find((flow) => flow.id === flowId); - - if (!selectedFlow) { - throw new Error("Flow not found"); - } - const updatedFlow = { ...selectedFlow, folder_id: folderId }; - - const newName = addVersionToDuplicates(updatedFlow, flows ?? []); - - updatedFlow.name = newName; - - setFolderDragging(false); - setFolderIdDragging(""); - - saveFlow(updatedFlow).then(() => { - refreshFolders(); - triggerFolderChange(folderId); - }); - }; - - const uploadFormData = (data) => { - const formData = new FormData(); - formData.append("file", data); - setFolderDragging(false); - setFolderIdDragging(""); - - uploadFlowToFolder(formData, folderId).then(() => { - refreshFolders(); - triggerFolderChange(folderId); - }); - }; - - return { - dragOver, - dragEnter, - dragLeave, - onDrop, - }; -}; - -export default useFileDrop; From 3394430230c4cca926e6fcc5ec28d56ae398f039 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Wed, 14 Aug 2024 10:28:05 -0300 Subject: [PATCH 04/38] Added folderSidebarComponent that fetches the folders --- .../folderSidebarComponent/index.tsx | 42 +++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 src/frontend/src/components/folderSidebarComponent/index.tsx diff --git a/src/frontend/src/components/folderSidebarComponent/index.tsx b/src/frontend/src/components/folderSidebarComponent/index.tsx new file mode 100644 index 00000000000..41da3a1237b --- /dev/null +++ b/src/frontend/src/components/folderSidebarComponent/index.tsx @@ -0,0 +1,42 @@ +import { useGetFoldersQuery } from "@/controllers/API/queries/folders/use-get-folders"; +import { useLocation } from "react-router-dom"; +import { FolderType } from "../../pages/MainPage/entities"; +import { cn } from "../../utils/utils"; +import HorizontalScrollFadeComponent from "../horizontalScrollFadeComponent"; +import Loading from "../ui/loading"; +import SideBarFoldersButtonsComponent from "./components/sideBarFolderButtons"; + +type SidebarNavProps = { + handleChangeFolder?: (id: string) => void; + handleDeleteFolder?: (item: FolderType) => void; + className?: string; +}; + +export default function FolderSidebarNav({ + className, + handleChangeFolder, + handleDeleteFolder, + ...props +}: SidebarNavProps) { + const location = useLocation(); + const pathname = location.pathname; + + const { data: folders, isPending } = useGetFoldersQuery(); + + return ( + + ); +} From 836514973a9ccca2e550f2c812b3d985bfb10911 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Wed, 14 Aug 2024 10:28:25 -0300 Subject: [PATCH 05/38] Added useOnFileDrop and SIdebarFoldersButton --- .../components/sideBarFolderButtons/index.tsx | 407 ++++++++++++++++++ .../hooks/use-on-file-drop.tsx | 147 +++++++ 2 files changed, 554 insertions(+) create mode 100644 src/frontend/src/components/folderSidebarComponent/components/sideBarFolderButtons/index.tsx create mode 100644 src/frontend/src/components/folderSidebarComponent/hooks/use-on-file-drop.tsx diff --git a/src/frontend/src/components/folderSidebarComponent/components/sideBarFolderButtons/index.tsx b/src/frontend/src/components/folderSidebarComponent/components/sideBarFolderButtons/index.tsx new file mode 100644 index 00000000000..d26f661f687 --- /dev/null +++ b/src/frontend/src/components/folderSidebarComponent/components/sideBarFolderButtons/index.tsx @@ -0,0 +1,407 @@ +import { + usePatchFolders, + usePostFolders, + usePostUploadFolders, +} from "@/controllers/API/queries/folders"; +import { useGetDownloadFolders } from "@/controllers/API/queries/folders/use-get-download-folders"; +import { createFileUpload } from "@/helpers/create-file-upload"; +import { getObjectsFromFilelist } from "@/helpers/get-objects-from-filelist"; +import useUploadFlow from "@/hooks/flows/use-upload-flow"; +import { useEffect, useRef, useState } from "react"; +import { useLocation } from "react-router-dom"; +import { FolderType } from "../../../../pages/MainPage/entities"; +import useAlertStore from "../../../../stores/alertStore"; +import useFlowsManagerStore from "../../../../stores/flowsManagerStore"; +import { useFolderStore } from "../../../../stores/foldersStore"; +import { handleKeyDown } from "../../../../utils/reactflowUtils"; +import { cn } from "../../../../utils/utils"; +import IconComponent, { + ForwardedIconComponent, +} from "../../../genericIconComponent"; +import { Button, buttonVariants } from "../../../ui/button"; +import { Input } from "../../../ui/input"; +import useFileDrop from "../../hooks/use-on-file-drop"; + +type SideBarFoldersButtonsComponentProps = { + pathname: string; + handleChangeFolder?: (id: string) => void; + handleDeleteFolder?: (item: FolderType) => void; + folders: FolderType[]; +}; +const SideBarFoldersButtonsComponent = ({ + pathname, + handleChangeFolder, + handleDeleteFolder, + folders, +}: SideBarFoldersButtonsComponentProps) => { + const refInput = useRef(null); + const [foldersNames, setFoldersNames] = useState({}); + const takeSnapshot = useFlowsManagerStore((state) => state.takeSnapshot); + const [editFolders, setEditFolderName] = useState( + folders.map((obj) => ({ name: obj.name, edit: false })), + ); + const currentFolder = pathname.split("/"); + const urlWithoutPath = pathname.split("/").length < 4; + const myCollectionId = useFolderStore((state) => state.myCollectionId); + const folderIdDragging = useFolderStore((state) => state.folderIdDragging); + + const checkPathName = (itemId: string) => { + if (urlWithoutPath && itemId === myCollectionId) { + return true; + } + return currentFolder.includes(itemId); + }; + const location = useLocation(); + const folderId = location?.state?.folderId ?? myCollectionId; + const getFolderById = useFolderStore((state) => state.getFolderById); + const setErrorData = useAlertStore((state) => state.setErrorData); + const setSuccessData = useAlertStore((state) => state.setSuccessData); + const uploadFlow = useUploadFlow(); + + const handleFolderChange = () => { + getFolderById(folderId); + }; + + const { dragOver, dragEnter, dragLeave, onDrop } = useFileDrop( + folderId, + handleFolderChange, + ); + + const { mutate } = usePostUploadFolders(); + + const handleUploadFlowsToFolder = () => { + createFileUpload().then((files: File[]) => { + getObjectsFromFilelist(files).then((objects) => { + if (objects.every((flow) => flow.data?.nodes)) { + uploadFlow({ files }).then(() => { + getFolderById(folderId); + setSuccessData({ + title: "Uploaded successfully", + }); + }); + } else { + files.forEach((folder) => { + const formData = new FormData(); + formData.append("file", folder); + mutate( + { formData }, + { + onSuccess: () => { + setSuccessData({ + title: "Folder uploaded successfully.", + }); + }, + onError: (err) => { + console.log(err); + setErrorData({ + title: `Error on upload`, + list: [err["response"]["data"]["message"]], + }); + }, + }, + ); + }); + } + }); + }); + }; + + const { mutate: mutateDownloadFolder } = useGetDownloadFolders(); + + const handleDownloadFolder = (id: string) => { + mutateDownloadFolder( + { + folderId: id, + }, + { + onSuccess: (data) => { + const folder = folders.find((f) => f.id === data.folderId); + + data.folder_name = folder?.name || "folder"; + data.folder_description = folder?.description || ""; + + const jsonString = `data:text/json;charset=utf-8,${encodeURIComponent( + JSON.stringify(data), + )}`; + + const link = document.createElement("a"); + link.href = jsonString; + link.download = `${data.folder_name}.json`; + + link.click(); + }, + onError: () => { + setErrorData({ + title: `An error occurred while downloading folder.`, + }); + }, + }, + ); + }; + + const { mutate: mutateAddFolder } = usePostFolders(); + const { mutate: mutateUpdateFolder } = usePatchFolders(); + + function addNewFolder() { + mutateAddFolder( + { + data: { + name: "New Folder", + parent_id: null, + description: "", + }, + }, + { + onSuccess: () => {}, + }, + ); + } + + function handleEditFolderName(e, name): void { + const { + target: { value }, + } = e; + setFoldersNames((old) => ({ + ...old, + [name]: value, + })); + } + + useEffect(() => { + setEditFolderName(folders.map((obj) => ({ name: obj.name, edit: false }))); + }, [folders]); + + const handleEditNameFolder = async (item) => { + const newEditFolders = editFolders.map((obj) => { + if (obj.name === item.name) { + return { name: item.name, edit: false }; + } + return { name: obj.name, edit: false }; + }); + setEditFolderName(newEditFolders); + if (foldersNames[item.name].trim() !== "") { + setFoldersNames((old) => ({ + ...old, + [item.name]: foldersNames[item.name], + })); + const body = { + ...item, + name: foldersNames[item.name], + flows: item.flows?.length > 0 ? item.flows : [], + components: item.components?.length > 0 ? item.components : [], + }; + + mutateUpdateFolder( + { + data: body, + folderId: item.id!, + }, + { + onSuccess: (updatedFolder) => { + const updatedFolderIndex = folders.findIndex( + (f) => f.id === updatedFolder.id, + ); + + const updateFolders = [...folders]; + updateFolders[updatedFolderIndex] = updatedFolder; + + setFoldersNames({}); + setEditFolderName( + folders.map((obj) => ({ + name: obj.name, + edit: false, + })), + ); + }, + }, + ); + } else { + setFoldersNames((old) => ({ + ...old, + [item.name]: item.name, + })); + } + }; + + return ( + <> +
+
Folders
+ + +
+ +
+ <> + {folders.map((item, index) => { + const editFolderName = editFolders?.filter( + (folder) => folder.name === item.name, + )[0]; + return ( +
dragOver(e, item.id!)} + onDragEnter={(e) => dragEnter(e, item.id!)} + onDragLeave={dragLeave} + onDrop={(e) => onDrop(e, item.id!)} + key={item.id} + data-testid={`sidebar-nav-${item.name}`} + className={cn( + buttonVariants({ variant: "ghost" }), + checkPathName(item.id!) + ? "border border-border bg-muted hover:bg-muted" + : "border hover:bg-transparent lg:border-transparent lg:hover:border-border", + "group flex w-full shrink-0 cursor-pointer gap-2 opacity-100 lg:min-w-full", + folderIdDragging === item.id! ? "bg-border" : "", + )} + onClick={() => handleChangeFolder!(item.id!)} + > +
{ + if (item.name === "My Projects") { + return; + } + + if (!foldersNames[item.name]) { + setFoldersNames({ [item.name]: item.name }); + } + + if ( + editFolders.find((obj) => obj.name === item.name)?.name + ) { + const newEditFolders = editFolders.map((obj) => { + if (obj.name === item.name) { + return { name: item.name, edit: true }; + } + return { name: obj.name, edit: false }; + }); + setEditFolderName(newEditFolders); + takeSnapshot(); + event.stopPropagation(); + event.preventDefault(); + return; + } + + setEditFolderName((old) => [ + ...old, + { name: item.name, edit: true }, + ]); + setFoldersNames((oldFolder) => ({ + ...oldFolder, + [item.name]: item.name, + })); + takeSnapshot(); + event.stopPropagation(); + event.preventDefault(); + }} + className="flex w-full items-center gap-2" + > + + {editFolderName?.edit ? ( +
+ { + handleEditFolderName(e, item.name); + }} + ref={refInput} + onKeyDown={(e) => { + if (e.key === "Escape") { + const newEditFolders = editFolders.map((obj) => { + if (obj.name === item.name) { + return { name: item.name, edit: false }; + } + return { name: obj.name, edit: false }; + }); + setEditFolderName(newEditFolders); + setFoldersNames({}); + setEditFolderName( + folders.map((obj) => ({ + name: obj.name, + edit: false, + })), + ); + } + if (e.key === "Enter") { + refInput.current?.blur(); + } + handleKeyDown(e, e.key, ""); + }} + autoFocus={true} + onBlur={async () => { + if (refInput.current?.value !== item.name) { + handleEditNameFolder(item); + } else { + editFolderName.edit = false; + } + }} + value={foldersNames[item.name]} + id={`input-folder-${item.name}`} + data-testid={`input-folder`} + /> +
+ ) : ( + + {item.name} + + )} + {index > 0 && ( + + )} + +
+
+ ); + })} + +
+ + ); +}; +export default SideBarFoldersButtonsComponent; diff --git a/src/frontend/src/components/folderSidebarComponent/hooks/use-on-file-drop.tsx b/src/frontend/src/components/folderSidebarComponent/hooks/use-on-file-drop.tsx new file mode 100644 index 00000000000..2b2a63678b1 --- /dev/null +++ b/src/frontend/src/components/folderSidebarComponent/hooks/use-on-file-drop.tsx @@ -0,0 +1,147 @@ +import useSaveFlow from "@/hooks/flows/use-save-flow"; +import { + UPLOAD_ALERT_LIST, + WRONG_FILE_ERROR_ALERT, +} from "../../../constants/alerts_constants"; +import { uploadFlowToFolder } from "../../../pages/MainPage/services"; +import useAlertStore from "../../../stores/alertStore"; +import useFlowsManagerStore from "../../../stores/flowsManagerStore"; +import { useFolderStore } from "../../../stores/foldersStore"; +import { addVersionToDuplicates } from "../../../utils/reactflowUtils"; + +const useFileDrop = ( + folderId: string, + folderChangeCallback: (folderId: string) => void, +) => { + const setFolderDragging = useFolderStore((state) => state.setFolderDragging); + const setFolderIdDragging = useFolderStore( + (state) => state.setFolderIdDragging, + ); + + const setErrorData = useAlertStore((state) => state.setErrorData); + const flows = useFlowsManagerStore((state) => state.flows); + const saveFlow = useSaveFlow(); + + const triggerFolderChange = (folderId) => { + if (folderChangeCallback) { + folderChangeCallback(folderId); + } + }; + const handleFileDrop = async (e) => { + if (e.dataTransfer.types.some((type) => type === "Files")) { + if (e.dataTransfer.files && e.dataTransfer.files.length > 0) { + const firstFile = e.dataTransfer.files[0]; + if (firstFile.type === "application/json") { + uploadFormData(firstFile); + } else { + setErrorData({ + title: WRONG_FILE_ERROR_ALERT, + list: [UPLOAD_ALERT_LIST], + }); + } + } + } + }; + + const dragOver = ( + e: + | React.DragEvent + | React.DragEvent + | React.DragEvent, + folderId: string, + ) => { + e.preventDefault(); + + if (e.dataTransfer.types.some((types) => types === "Files")) { + setFolderDragging(true); + } + setFolderIdDragging(folderId); + }; + + const dragEnter = ( + e: + | React.DragEvent + | React.DragEvent + | React.DragEvent, + folderId: string, + ) => { + if (e.dataTransfer.types.some((types) => types === "Files")) { + setFolderDragging(true); + } + setFolderIdDragging(folderId); + e.preventDefault(); + }; + + const dragLeave = ( + e: + | React.DragEvent + | React.DragEvent + | React.DragEvent, + ) => { + e.preventDefault(); + if (e.target === e.currentTarget) { + setFolderDragging(false); + setFolderIdDragging(""); + } + }; + + const onDrop = ( + e: + | React.DragEvent + | React.DragEvent + | React.DragEvent, + folderId: string, + ) => { + if (e?.dataTransfer?.getData("flow")) { + const data = JSON.parse(e?.dataTransfer?.getData("flow")); + + if (data) { + uploadFromDragCard(data.id, folderId); + return; + } + } + + e.preventDefault(); + handleFileDrop(e); + }; + + const uploadFromDragCard = (flowId, folderId) => { + const selectedFlow = flows?.find((flow) => flow.id === flowId); + + if (!selectedFlow) { + throw new Error("Flow not found"); + } + const updatedFlow = { ...selectedFlow, folder_id: folderId }; + + const newName = addVersionToDuplicates(updatedFlow, flows ?? []); + + updatedFlow.name = newName; + + setFolderDragging(false); + setFolderIdDragging(""); + + saveFlow(updatedFlow).then(() => { + triggerFolderChange(folderId); + }); + }; + + const uploadFormData = (data) => { + const formData = new FormData(); + formData.append("file", data); + setFolderDragging(false); + setFolderIdDragging(""); + + uploadFlowToFolder(formData, folderId).then(() => { + triggerFolderChange(folderId); + }); + }; + + return { + dragOver, + dragEnter, + dragLeave, + onDrop, + }; +}; + +export default useFileDrop; From d7f39b78b6c0979caa46240431d40c04cd984ce9 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Wed, 14 Aug 2024 10:28:35 -0300 Subject: [PATCH 06/38] Make auth context not get folders --- src/frontend/src/contexts/authContext.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/frontend/src/contexts/authContext.tsx b/src/frontend/src/contexts/authContext.tsx index f8902480734..230fbce7355 100644 --- a/src/frontend/src/contexts/authContext.tsx +++ b/src/frontend/src/contexts/authContext.tsx @@ -8,7 +8,6 @@ import useAuthStore from "@/stores/authStore"; import { createContext, useEffect, useState } from "react"; import Cookies from "universal-cookie"; import useAlertStore from "../stores/alertStore"; -import { useFolderStore } from "../stores/foldersStore"; import { useStoreStore } from "../stores/storeStore"; import { Users } from "../types/api"; import { AuthContextType } from "../types/contexts/auth"; @@ -38,8 +37,6 @@ export function AuthProvider({ children }): React.ReactElement { cookies.get(LANGFLOW_API_TOKEN), ); - const getFoldersApi = useFolderStore((state) => state.getFoldersApi); - const checkHasStore = useStoreStore((state) => state.checkHasStore); const fetchApiData = useStoreStore((state) => state.fetchApiData); const setIsAuthenticated = useAuthStore((state) => state.setIsAuthenticated); @@ -68,7 +65,6 @@ export function AuthProvider({ children }): React.ReactElement { setUserData(user); const isSuperUser = user!.is_superuser; useAuthStore.getState().setIsAdmin(isSuperUser); - getFoldersApi(true, true); checkHasStore(); fetchApiData(); }, From 8790002dd52a042e1b9011f2171dc9ce5df8e382 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Wed, 14 Aug 2024 10:28:47 -0300 Subject: [PATCH 07/38] Make delete folder refetch get folders --- .../API/queries/folders/use-delete-folders.ts | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/frontend/src/controllers/API/queries/folders/use-delete-folders.ts b/src/frontend/src/controllers/API/queries/folders/use-delete-folders.ts index 5498b044acb..4650543dce2 100644 --- a/src/frontend/src/controllers/API/queries/folders/use-delete-folders.ts +++ b/src/frontend/src/controllers/API/queries/folders/use-delete-folders.ts @@ -12,7 +12,7 @@ export const useDeleteFolders: useMutationFunctionType< undefined, DeleteFoldersParams > = (options?) => { - const { mutate } = UseRequestProcessor(); + const { mutate, queryClient } = UseRequestProcessor(); const deleteFolder = async ({ folder_id, @@ -25,7 +25,12 @@ export const useDeleteFolders: useMutationFunctionType< DeleteFoldersParams, any, DeleteFoldersParams - > = mutate(["useDeleteFolders"], deleteFolder, options); + > = mutate(["useDeleteFolders"], deleteFolder, { + ...options, + onSettled: () => { + queryClient.refetchQueries({ queryKey: ["useGetFolders"] }); + }, + }); return mutation; }; From dba42cbca6467121124707313893d2b2dff28609 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Wed, 14 Aug 2024 10:29:45 -0300 Subject: [PATCH 08/38] Make folder mutations refetch the getFolder --- .../API/queries/folders/use-patch-folders.ts | 10 +++++++--- .../API/queries/folders/use-post-folders.ts | 13 ++++++++----- .../API/queries/folders/use-post-upload-folders.ts | 9 +++++++-- 3 files changed, 22 insertions(+), 10 deletions(-) diff --git a/src/frontend/src/controllers/API/queries/folders/use-patch-folders.ts b/src/frontend/src/controllers/API/queries/folders/use-patch-folders.ts index 0bbdb4dccd8..2424e079ef6 100644 --- a/src/frontend/src/controllers/API/queries/folders/use-patch-folders.ts +++ b/src/frontend/src/controllers/API/queries/folders/use-patch-folders.ts @@ -1,5 +1,4 @@ import { AddFolderType } from "@/pages/MainPage/entities"; -import { useFolderStore } from "@/stores/foldersStore"; import { useMutationFunctionType } from "@/types/api"; import { api } from "../../api"; import { getURL } from "../../helpers/constants"; @@ -14,7 +13,7 @@ export const usePatchFolders: useMutationFunctionType< undefined, IPatchPatchFolders > = (options?) => { - const { mutate } = UseRequestProcessor(); + const { mutate, queryClient } = UseRequestProcessor(); const patchFoldersFn = async ( newFolder: IPatchPatchFolders, @@ -33,7 +32,12 @@ export const usePatchFolders: useMutationFunctionType< return res.data; }; - const mutation = mutate(["usePatchFolders"], patchFoldersFn, options); + const mutation = mutate(["usePatchFolders"], patchFoldersFn, { + ...options, + onSettled: () => { + queryClient.refetchQueries({ queryKey: ["useGetFolders"] }); + }, + }); return mutation; }; diff --git a/src/frontend/src/controllers/API/queries/folders/use-post-folders.ts b/src/frontend/src/controllers/API/queries/folders/use-post-folders.ts index eac378bdf5e..f4cee391026 100644 --- a/src/frontend/src/controllers/API/queries/folders/use-post-folders.ts +++ b/src/frontend/src/controllers/API/queries/folders/use-post-folders.ts @@ -1,7 +1,5 @@ import { AddFolderType } from "@/pages/MainPage/entities"; -import useFlowsManagerStore from "@/stores/flowsManagerStore"; -import { useFolderStore } from "@/stores/foldersStore"; -import { Users, useMutationFunctionType } from "@/types/api"; +import { useMutationFunctionType } from "@/types/api"; import { api } from "../../api"; import { getURL } from "../../helpers/constants"; import { UseRequestProcessor } from "../../services/request-processor"; @@ -14,7 +12,7 @@ export const usePostFolders: useMutationFunctionType< undefined, IPostAddFolders > = (options?) => { - const { mutate } = UseRequestProcessor(); + const { mutate, queryClient } = UseRequestProcessor(); const addFoldersFn = async (newFolder: IPostAddFolders): Promise => { const payload = { @@ -28,7 +26,12 @@ export const usePostFolders: useMutationFunctionType< return res.data; }; - const mutation = mutate(["usePostFolders"], addFoldersFn, options); + const mutation = mutate(["usePostFolders"], addFoldersFn, { + ...options, + onSettled: () => { + queryClient.refetchQueries({ queryKey: ["useGetFolders"] }); + }, + }); return mutation; }; diff --git a/src/frontend/src/controllers/API/queries/folders/use-post-upload-folders.ts b/src/frontend/src/controllers/API/queries/folders/use-post-upload-folders.ts index 8c244bffc53..00084653706 100644 --- a/src/frontend/src/controllers/API/queries/folders/use-post-upload-folders.ts +++ b/src/frontend/src/controllers/API/queries/folders/use-post-upload-folders.ts @@ -11,7 +11,7 @@ export const usePostUploadFolders: useMutationFunctionType< undefined, IPostAddUploadFolders > = (options?) => { - const { mutate } = UseRequestProcessor(); + const { mutate, queryClient } = UseRequestProcessor(); const uploadFoldersFn = async ( payload: IPostAddUploadFolders, @@ -23,7 +23,12 @@ export const usePostUploadFolders: useMutationFunctionType< return res.data; }; - const mutation = mutate(["usePostUploadFolders"], uploadFoldersFn, options); + const mutation = mutate(["usePostUploadFolders"], uploadFoldersFn, { + ...options, + onSettled: () => { + queryClient.refetchQueries({ queryKey: ["useGetFolders"] }); + }, + }); return mutation; }; From c01dc49e2132562fe5eaeecaefac3f1b066d3761 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Wed, 14 Aug 2024 10:29:53 -0300 Subject: [PATCH 09/38] Create getFolder query --- .../API/queries/folders/use-get-folders.ts | 50 +++++++++++++++++++ 1 file changed, 50 insertions(+) create mode 100644 src/frontend/src/controllers/API/queries/folders/use-get-folders.ts diff --git a/src/frontend/src/controllers/API/queries/folders/use-get-folders.ts b/src/frontend/src/controllers/API/queries/folders/use-get-folders.ts new file mode 100644 index 00000000000..51059a3be82 --- /dev/null +++ b/src/frontend/src/controllers/API/queries/folders/use-get-folders.ts @@ -0,0 +1,50 @@ +import { DEFAULT_FOLDER, STARTER_FOLDER_NAME } from "@/constants/constants"; +import { FolderType } from "@/pages/MainPage/entities"; +import useFlowsManagerStore from "@/stores/flowsManagerStore"; +import { useFolderStore } from "@/stores/foldersStore"; +import { useTypesStore } from "@/stores/typesStore"; +import { useQueryFunctionType } from "@/types/api"; +import { api } from "../../api"; +import { getURL } from "../../helpers/constants"; +import { UseRequestProcessor } from "../../services/request-processor"; + +export const useGetFoldersQuery: useQueryFunctionType< + undefined, + FolderType[] +> = (options) => { + const { query } = UseRequestProcessor(); + + const setStarterProjectId = useFolderStore( + (state) => state.setStarterProjectId, + ); + const setMyCollectionId = useFolderStore((state) => state.setMyCollectionId); + + const getFoldersFn = async (): Promise => { + const res = await api.get(`${getURL("FOLDERS")}/`); + const data = res.data; + + const foldersWithoutStarterProjects = data?.filter( + (folder) => folder.name !== STARTER_FOLDER_NAME, + ); + + const starterProjects = data?.find( + (folder) => folder.name === STARTER_FOLDER_NAME, + ); + + setStarterProjectId(starterProjects?.id ?? ""); + + const myCollectionId = data?.find((f) => f.name === DEFAULT_FOLDER)?.id; + setMyCollectionId(myCollectionId); + + const { refreshFlows } = useFlowsManagerStore.getState(); + const { getTypes } = useTypesStore.getState(); + + await refreshFlows(); + await getTypes(); + + return foldersWithoutStarterProjects; + }; + + const queryResult = query(["useGetFolders"], getFoldersFn, options); + return queryResult; +}; From 2eef2cc1c78ecca09d586ba34c8cb4e8be9b0614 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Wed, 14 Aug 2024 10:30:05 -0300 Subject: [PATCH 10/38] Removed unused functions from useFolderStore --- src/frontend/src/stores/foldersStore.tsx | 105 +---------------------- 1 file changed, 3 insertions(+), 102 deletions(-) diff --git a/src/frontend/src/stores/foldersStore.tsx b/src/frontend/src/stores/foldersStore.tsx index 87a9be0c25d..acd13d17d00 100644 --- a/src/frontend/src/stores/foldersStore.tsx +++ b/src/frontend/src/stores/foldersStore.tsx @@ -1,95 +1,9 @@ import { create } from "zustand"; -import { DEFAULT_FOLDER, STARTER_FOLDER_NAME } from "../constants/constants"; -import { getFolderById, getFolders } from "../pages/MainPage/services"; +import { getFolderById } from "../pages/MainPage/services"; import { FoldersStoreType } from "../types/zustand/folders"; import useFlowsManagerStore from "./flowsManagerStore"; -import { useTypesStore } from "./typesStore"; export const useFolderStore = create((set, get) => ({ - folders: [], - getFoldersApi: (refetch = false, startupApplication: boolean = false) => { - return new Promise((resolve, reject) => { - get().setIsLoadingFolders(true); - if (get()?.folders.length === 0 || refetch === true) { - getFolders().then( - async (res) => { - const foldersWithoutStarterProjects = res?.filter( - (folder) => folder.name !== STARTER_FOLDER_NAME, - ); - - const starterProjects = res?.find( - (folder) => folder.name === STARTER_FOLDER_NAME, - ); - - set({ starterProjectId: starterProjects?.id ?? "" }); - set({ folders: foldersWithoutStarterProjects }); - - const myCollectionId = res?.find( - (f) => f.name === DEFAULT_FOLDER, - )?.id; - - set({ myCollectionId }); - - const { refreshFlows } = useFlowsManagerStore.getState(); - const { getTypes } = useTypesStore.getState(); - - if (refetch) { - if (startupApplication) { - await refreshFlows(); - await getTypes(); - get().setIsLoadingFolders(false); - } else { - refreshFlows(); - getTypes(); - get().setIsLoadingFolders(false); - } - } - - resolve(); - }, - (error) => { - set({ folders: [] }); - get().setIsLoadingFolders(false); - reject(error); - }, - ); - } - }); - }, - refreshFolders: () => { - return new Promise((resolve, reject) => { - getFolders().then( - async (res) => { - const foldersWithoutStarterProjects = res?.filter( - (folder) => folder.name !== STARTER_FOLDER_NAME, - ); - - const starterProjects = res?.find( - (folder) => folder.name === STARTER_FOLDER_NAME, - ); - - set({ starterProjectId: starterProjects?.id ?? "" }); - set({ folders: foldersWithoutStarterProjects }); - - const myCollectionId = res?.find( - (f) => f.name === DEFAULT_FOLDER, - )?.id; - - set({ myCollectionId }); - - resolve(); - }, - (error) => { - set({ folders: [] }); - get().setIsLoadingFolders(false); - reject(error); - }, - ); - }); - }, - setFolders: (folders) => set(() => ({ folders: folders })), - isLoadingFolders: false, - setIsLoadingFolders: (isLoadingFolders) => set(() => ({ isLoadingFolders })), getFolderById: (id) => { if (id) { getFolderById(id).then((res) => { @@ -102,23 +16,10 @@ export const useFolderStore = create((set, get) => ({ selectedFolder: null, setSelectedFolder: (folder) => set(() => ({ selectedFolder: folder })), loadingById: false, - getMyCollectionFolder: () => { - const folders = get().folders; - const myCollectionId = folders?.find((f) => f.name === DEFAULT_FOLDER)?.id; - if (myCollectionId) { - getFolderById(myCollectionId).then((res) => { - set({ myCollectionFlows: res }); - }); - } - }, setMyCollectionFlow: (folder) => set(() => ({ myCollectionFlows: folder })), myCollectionFlows: null, - setMyCollectionId: () => { - const folders = get().folders; - const myCollectionId = folders?.find((f) => f.name === DEFAULT_FOLDER)?.id; - if (myCollectionId) { - set({ myCollectionId }); - } + setMyCollectionId: (myCollectionId) => { + set({ myCollectionId }); }, myCollectionId: "", folderToEdit: null, From d55207c722a4309c9d976a93ef351e1d14224289 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Wed, 14 Aug 2024 10:30:19 -0300 Subject: [PATCH 11/38] Make isLoading from application depend only on flows --- src/frontend/src/pages/AppWrapperPage/index.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/frontend/src/pages/AppWrapperPage/index.tsx b/src/frontend/src/pages/AppWrapperPage/index.tsx index 91011d76f06..85793fb8575 100644 --- a/src/frontend/src/pages/AppWrapperPage/index.tsx +++ b/src/frontend/src/pages/AppWrapperPage/index.tsx @@ -9,7 +9,6 @@ import { import { useGetHealthQuery } from "@/controllers/API/queries/health"; import useTrackLastVisitedPath from "@/hooks/use-track-last-visited-path"; import useFlowsManagerStore from "@/stores/flowsManagerStore"; -import { useFolderStore } from "@/stores/foldersStore"; import { cn } from "@/utils/utils"; import { ErrorBoundary } from "react-error-boundary"; import { Outlet } from "react-router-dom"; @@ -18,14 +17,13 @@ export function AppWrapperPage() { useTrackLastVisitedPath(); const isLoading = useFlowsManagerStore((state) => state.isLoading); - const isLoadingFolders = useFolderStore((state) => state.isLoadingFolders); const { data: healthData, isFetching: fetchingHealth, isError: isErrorHealth, refetch, } = useGetHealthQuery(); - const isLoadingApplication = isLoading || isLoadingFolders; + const isLoadingApplication = isLoading; return (
Date: Wed, 14 Aug 2024 10:30:42 -0300 Subject: [PATCH 12/38] Make main page not refetch folders --- .../src/pages/MainPage/pages/mainPage/index.tsx | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/src/frontend/src/pages/MainPage/pages/mainPage/index.tsx b/src/frontend/src/pages/MainPage/pages/mainPage/index.tsx index 4a748993a4d..f88b75ae3e5 100644 --- a/src/frontend/src/pages/MainPage/pages/mainPage/index.tsx +++ b/src/frontend/src/pages/MainPage/pages/mainPage/index.tsx @@ -1,10 +1,10 @@ +import FolderSidebarNav from "@/components/folderSidebarComponent"; import { useDeleteFolders } from "@/controllers/API/queries/folders"; import useAlertStore from "@/stores/alertStore"; import { useState } from "react"; import { Outlet, useLocation, useNavigate } from "react-router-dom"; import DropdownButton from "../../../../components/dropdownButtonComponent"; import PageLayout from "../../../../components/pageLayout"; -import SidebarNav from "../../../../components/sidebarComponent"; import { MY_COLLECTION_DESC, USER_PROJECTS_HEADER, @@ -12,7 +12,6 @@ import { import { useFolderStore } from "../../../../stores/foldersStore"; import ModalsComponent from "../../components/modalsComponent"; import useDropdownOptions from "../../hooks/use-dropdown-options"; -import { getFolderById } from "../../services"; export default function HomePage(): JSX.Element { const location = useLocation(); @@ -26,8 +25,6 @@ export default function HomePage(): JSX.Element { const setSuccessData = useAlertStore((state) => state.setSuccessData); const setErrorData = useAlertStore((state) => state.setErrorData); const folderToEdit = useFolderStore((state) => state.folderToEdit); - const myCollectionId = useFolderStore((state) => state.myCollectionId); - const getFoldersApi = useFolderStore((state) => state.getFoldersApi); const dropdownOptions = useDropdownOptions({ navigate, @@ -46,8 +43,6 @@ export default function HomePage(): JSX.Element { setSuccessData({ title: "Folder deleted successfully.", }); - getFolderById(myCollectionId!); - getFoldersApi(true); navigate("/all"); }, onError: (err) => { @@ -79,8 +74,7 @@ export default function HomePage(): JSX.Element { >