From 538049227a6785a93027a689a1e1453484732ccd Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa <72977554+Cristhianzl@users.noreply.github.com> Date: Tue, 9 Jul 2024 19:29:52 -0300 Subject: [PATCH] fix: re-implement logic to correctly save or update flow in the appropriate folder on autologin = false (#2610) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ♻️ (frontend): remove unused imports and variables in cardComponent ✨ (authContext): add setAllFlows and setSelectedFolder to AuthProvider ✨ (undrawCards): add folderIdUrl for better URL handling ✨ (collectionCard): add folder URL handling for navigation ✨ (use-delete-multiple): add setAllFlows and setSelectedFolder to handleDeleteMultiple ✨ (componentsComponent): add isLoadingFolders and setSelectedFolder ✨ (tabsComponent): add folder URL handling for tab navigation ✨ (flowsManagerStore): add folder URL handling in saveFlowDebounce ✨ (foldersStore.tsx): add setSelectedFolder method to manage selected folder state ♻️ (foldersStore.tsx): move setIsLoadingFolders call to improve loading state management ✨ (flowsManager/index.ts): add folderId parameter to saveFlow and saveFlowDebounce methods for better flow management ✨ (folders/index.ts): add setSelectedFolder method to FoldersStoreType for better folder state management (cherry picked from commit 0df06c01b005aef588535f9d31e35d4b1746423d) --- src/frontend/src/components/cardComponent/index.tsx | 2 -- src/frontend/src/contexts/authContext.tsx | 5 +++++ .../newFlowModal/components/undrawCards/index.tsx | 5 ++++- .../components/collectionCard/index.tsx | 9 ++++++++- .../componentsComponent/hooks/use-delete-multiple.tsx | 7 +++++++ .../MainPage/components/componentsComponent/index.tsx | 10 ++++++++-- .../components/tabsComponent/index.tsx | 8 ++++++-- src/frontend/src/stores/flowsManagerStore.ts | 8 ++++++++ src/frontend/src/stores/foldersStore.tsx | 7 ++++--- src/frontend/src/types/zustand/flowsManager/index.ts | 7 ++++++- src/frontend/src/types/zustand/folders/index.ts | 1 + 11 files changed, 57 insertions(+), 12 deletions(-) diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx index 53d24f0af76..a2372e7685a 100644 --- a/src/frontend/src/components/cardComponent/index.tsx +++ b/src/frontend/src/components/cardComponent/index.tsx @@ -27,7 +27,6 @@ import { 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"; @@ -56,7 +55,6 @@ export default function CollectionCardComponent({ control?: Control; is_component?: boolean; }) { - const addFlow = useFlowsManagerStore((state) => state.addFlow); const setSuccessData = useAlertStore((state) => state.setSuccessData); const setErrorData = useAlertStore((state) => state.setErrorData); const setValidApiKey = useStoreStore((state) => state.updateValidApiKey); diff --git a/src/frontend/src/contexts/authContext.tsx b/src/frontend/src/contexts/authContext.tsx index cfdbdfb4f5e..89b6b2b6ba9 100644 --- a/src/frontend/src/contexts/authContext.tsx +++ b/src/frontend/src/contexts/authContext.tsx @@ -1,3 +1,4 @@ +import useFlowsManagerStore from "@/stores/flowsManagerStore"; import { createContext, useEffect, useState } from "react"; import { useNavigate } from "react-router-dom"; import Cookies from "universal-cookie"; @@ -56,6 +57,8 @@ export function AuthProvider({ children }): React.ReactElement { ); const checkHasStore = useStoreStore((state) => state.checkHasStore); const fetchApiData = useStoreStore((state) => state.fetchApiData); + const setAllFlows = useFlowsManagerStore((state) => state.setAllFlows); + const setSelectedFolder = useFolderStore((state) => state.setSelectedFolder); useEffect(() => { const storedAccessToken = cookies.get("access_token_lf"); @@ -105,6 +108,8 @@ export function AuthProvider({ children }): React.ReactElement { setUserData(null); setAccessToken(null); setIsAuthenticated(false); + setAllFlows([]); + setSelectedFolder(null); navigate("/login"); } catch (error) { console.error(error); diff --git a/src/frontend/src/modals/newFlowModal/components/undrawCards/index.tsx b/src/frontend/src/modals/newFlowModal/components/undrawCards/index.tsx index d872fabe353..44920d83d94 100644 --- a/src/frontend/src/modals/newFlowModal/components/undrawCards/index.tsx +++ b/src/frontend/src/modals/newFlowModal/components/undrawCards/index.tsx @@ -26,6 +26,9 @@ export default function UndrawCardComponent({ const location = useLocation(); const folderId = location?.state?.folderId; const setFolderUrl = useFolderStore((state) => state.setFolderUrl); + const myCollectionId = useFolderStore((state) => state.myCollectionId); + + const folderIdUrl = folderId || myCollectionId || ""; function selectImage() { switch (flow.name) { @@ -108,7 +111,7 @@ export default function UndrawCardComponent({ updateIds(flow.data!); addFlow(true, flow).then((id) => { setFolderUrl(folderId ?? ""); - navigate(`/flow/${id}${folderId ? `/folder/${folderId}` : ""}`); + navigate(`/flow/${id}/folder/${folderIdUrl}`); }); }} className="h-64 w-80 cursor-pointer bg-background pt-4" 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 index 1c9c0799e7d..6553e6a828d 100644 --- a/src/frontend/src/pages/MainPage/components/componentsComponent/components/collectionCard/index.tsx +++ b/src/frontend/src/pages/MainPage/components/componentsComponent/components/collectionCard/index.tsx @@ -1,3 +1,4 @@ +import { useFolderStore } from "@/stores/foldersStore"; import React from "react"; import { Link, useNavigate } from "react-router-dom"; import CollectionCardComponent from "../../../../../../components/cardComponent"; @@ -9,9 +10,15 @@ const CollectionCard = ({ item, type, isLoading, control }) => { const editFlowLink = `/flow/${item.id}`; const editFlowButtonTestId = `edit-flow-button-${item.id}`; + const folderUrl = useFolderStore((state) => state.folderUrl); + const myCollectionIdFolder = useFolderStore((state) => state.myCollectionId); + + const hasFolderUrl = folderUrl != null && folderUrl !== ""; + const currentFolderUrl = hasFolderUrl ? folderUrl : myCollectionIdFolder; + const handleClick = () => { if (!isComponent) { - navigate(editFlowLink); + navigate(editFlowLink, { state: { folderId: currentFolderUrl } }); } }; 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 46caecbf1b8..e6b4bb11d41 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,3 +1,5 @@ +import { FolderType } from "@/pages/MainPage/entities"; +import { FlowType } from "@/types/flow"; import { useCallback } from "react"; const useDeleteMultipleFlows = ( @@ -10,10 +12,15 @@ const useDeleteMultipleFlows = ( getFolderById: (id: string) => void, setSuccessData: (data: { title: string }) => void, setErrorData: (data: { title: string; list: string[] }) => void, + setAllFlows: (flows: FlowType[]) => void, + setSelectedFolder: (folder: FolderType | null) => void, ) => { const handleDeleteMultiple = useCallback(() => { removeFlow(selectedFlowsComponentsCards) .then(() => { + setAllFlows([]); + setSelectedFolder(null); + resetFilter(); getFoldersApi(true); if (!folderId || folderId === myCollectionId) { diff --git a/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx b/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx index 7ccd8804815..85b53234999 100644 --- a/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx +++ b/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx @@ -76,6 +76,8 @@ export default function ComponentsComponent({ const getFoldersApi = useFolderStore((state) => state.getFoldersApi); const setFolderUrl = useFolderStore((state) => state.setFolderUrl); const addFlow = useFlowsManagerStore((state) => state.addFlow); + const isLoadingFolders = useFolderStore((state) => state.isLoadingFolders); + const setSelectedFolder = useFolderStore((state) => state.setSelectedFolder); const cardTypes = useMemo(() => { if (window.location.pathname.includes("components")) { @@ -159,6 +161,8 @@ export default function ComponentsComponent({ getFolderById, setSuccessData, setErrorData, + setAllFlows, + setSelectedFolder, ); useSelectedFlows(entireFormValues, setSelectedFlowsComponentsCards); @@ -196,11 +200,13 @@ export default function ComponentsComponent({ >
- {!isLoading && data?.length === 0 ? ( + {!isLoading && !isLoadingFolders && data?.length === 0 ? ( ) : (
- {isLoading === false && data?.length > 0 ? ( + {isLoading === false && + data?.length > 0 && + isLoadingFolders === false ? ( <> {data?.map((item) => ( diff --git a/src/frontend/src/pages/MainPage/components/myCollectionComponent/components/tabsComponent/index.tsx b/src/frontend/src/pages/MainPage/components/myCollectionComponent/components/tabsComponent/index.tsx index 3bf83532c4e..8c1eab9477c 100644 --- a/src/frontend/src/pages/MainPage/components/myCollectionComponent/components/tabsComponent/index.tsx +++ b/src/frontend/src/pages/MainPage/components/myCollectionComponent/components/tabsComponent/index.tsx @@ -1,4 +1,4 @@ -import { useEffect } from "react"; +import { useEffect, useState } from "react"; import { useNavigate } from "react-router-dom"; import { useFolderStore } from "../../../../../../stores/foldersStore"; @@ -17,6 +17,10 @@ const TabsSearchComponent = ({ }: TabsSearchComponentProps) => { const navigate = useNavigate(); const folderUrl = useFolderStore((state) => state.folderUrl); + const myCollectionIdFolder = useFolderStore((state) => state.myCollectionId); + + const hasFolderUrl = folderUrl != null && folderUrl !== ""; + const currentFolderUrl = hasFolderUrl ? folderUrl : myCollectionIdFolder; const changeLocation = (tabOption) => { const location = window.location.pathname; @@ -33,7 +37,7 @@ const TabsSearchComponent = ({ break; } - navigate(newLocation, { state: { folderId: folderUrl } }); + navigate(newLocation, { state: { folderId: currentFolderUrl } }); }; useEffect(() => { diff --git a/src/frontend/src/stores/flowsManagerStore.ts b/src/frontend/src/stores/flowsManagerStore.ts index a99916107a3..f9ef070b092 100644 --- a/src/frontend/src/stores/flowsManagerStore.ts +++ b/src/frontend/src/stores/flowsManagerStore.ts @@ -1,6 +1,7 @@ import { AxiosError } from "axios"; import { cloneDeep } from "lodash"; import pDebounce from "p-debounce"; +import { useLocation } from "react-router-dom"; import { Edge, Node, Viewport, XYPosition } from "reactflow"; import { create } from "zustand"; import { SAVE_DEBOUNCE_TIME } from "../constants/constants"; @@ -132,6 +133,13 @@ const useFlowsManagerStore = create((set, get) => ({ return get().saveFlowDebounce(flow, silent); // call the debounced function directly }, saveFlowDebounce: pDebounce((flow: FlowType, silent?: boolean) => { + const folderUrl = useFolderStore.getState().folderUrl; + const hasFolderUrl = folderUrl != null && folderUrl !== ""; + + flow.folder_id = hasFolderUrl + ? useFolderStore.getState().folderUrl + : useFolderStore.getState().myCollectionId ?? ""; + set({ saveLoading: true }); return new Promise((resolve, reject) => { updateFlowInDatabase(flow) diff --git a/src/frontend/src/stores/foldersStore.tsx b/src/frontend/src/stores/foldersStore.tsx index 6257c9085ba..3ec4628002d 100644 --- a/src/frontend/src/stores/foldersStore.tsx +++ b/src/frontend/src/stores/foldersStore.tsx @@ -13,8 +13,8 @@ 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) { - get().setIsLoadingFolders(true); getFolders().then( async (res) => { const foldersWithoutStarterProjects = res?.filter( @@ -36,18 +36,18 @@ export const useFolderStore = create((set, get) => ({ const { refreshFlows } = useFlowsManagerStore.getState(); const { getTypes } = useTypesStore.getState(); - const { setIsLoadingFolders } = get(); if (refetch) { if (startupApplication) { await refreshFlows(); await getTypes(); + get().setIsLoadingFolders(false); } else { refreshFlows(); getTypes(); + get().setIsLoadingFolders(false); } } - setIsLoadingFolders(false); resolve(); }, @@ -104,6 +104,7 @@ export const useFolderStore = create((set, get) => ({ } }, selectedFolder: null, + setSelectedFolder: (folder) => set(() => ({ selectedFolder: folder })), loadingById: false, getMyCollectionFolder: () => { const folders = get().folders; diff --git a/src/frontend/src/types/zustand/flowsManager/index.ts b/src/frontend/src/types/zustand/flowsManager/index.ts index aaafebb7b55..6e7b0319452 100644 --- a/src/frontend/src/types/zustand/flowsManager/index.ts +++ b/src/frontend/src/types/zustand/flowsManager/index.ts @@ -14,10 +14,15 @@ export type FlowsManagerStoreType = { isLoading: boolean; setIsLoading: (isLoading: boolean) => void; refreshFlows: () => Promise; - saveFlow: (flow: FlowType, silent?: boolean) => Promise | undefined; + saveFlow: ( + flow: FlowType, + silent?: boolean, + folderId?: string, + ) => Promise | undefined; saveFlowDebounce: ( flow: FlowType, silent?: boolean, + folderId?: string, ) => Promise | undefined; autoSaveCurrentFlow: ( nodes: Node[], diff --git a/src/frontend/src/types/zustand/folders/index.ts b/src/frontend/src/types/zustand/folders/index.ts index 495d65b874e..ea352ae2881 100644 --- a/src/frontend/src/types/zustand/folders/index.ts +++ b/src/frontend/src/types/zustand/folders/index.ts @@ -10,6 +10,7 @@ export type FoldersStoreType = { isLoadingFolders: boolean; setIsLoadingFolders: (isLoadingFolders: boolean) => void; selectedFolder: FolderType | null; + setSelectedFolder: (folder: FolderType | null) => void; getFolderById: (id: string) => void; getMyCollectionFolder: () => void; myCollectionFlows: FolderType | null;