diff --git a/src/frontend/src/components/sidebarComponent/components/sideBarFolderButtons/index.tsx b/src/frontend/src/components/sidebarComponent/components/sideBarFolderButtons/index.tsx index bf2353edd..b887c2aab 100644 --- a/src/frontend/src/components/sidebarComponent/components/sideBarFolderButtons/index.tsx +++ b/src/frontend/src/components/sidebarComponent/components/sideBarFolderButtons/index.tsx @@ -33,7 +33,7 @@ const SideBarFoldersButtonsComponent = ({ const [foldersNames, setFoldersNames] = useState({}); const takeSnapshot = useFlowsManagerStore((state) => state.takeSnapshot); const [editFolders, setEditFolderName] = useState( - folders.map((obj) => ({ name: obj.name, edit: false })) + folders.map((obj) => ({ name: obj.name, edit: false })), ); const uploadFolder = useFolderStore((state) => state.uploadFolder); const currentFolder = pathname.split("/"); @@ -58,11 +58,13 @@ const SideBarFoldersButtonsComponent = ({ const { dragOver, dragEnter, dragLeave, onDrop } = useFileDrop( folderId, - handleFolderChange + handleFolderChange, ); const handleUploadFlowsToFolder = () => { - uploadFolder(folderId); + uploadFolder(folderId).then(() => { + getFolderById(folderId); + }); }; const handleDownloadFolder = (id: string) => { @@ -73,7 +75,7 @@ const SideBarFoldersButtonsComponent = ({ addFolder({ name: "New Folder", parent_id: null, description: "" }).then( (res) => { getFoldersApi(true); - } + }, ); } @@ -119,7 +121,7 @@ const SideBarFoldersButtonsComponent = ({ <> {folders.map((item, index) => { const editFolderName = editFolders?.filter( - (folder) => folder.name === item.name + (folder) => folder.name === item.name, )[0]; return (
handleChangeFolder!(item.id!)} > @@ -205,7 +207,7 @@ const SideBarFoldersButtonsComponent = ({ folders.map((obj) => ({ name: obj.name, edit: false, - })) + })), ); } if (e.key === "Enter") { @@ -238,10 +240,10 @@ const SideBarFoldersButtonsComponent = ({ }; const updatedFolder = await updateFolder( body, - item.id! + item.id!, ); const updateFolders = folders.filter( - (f) => f.name !== item.name + (f) => f.name !== item.name, ); setFolders([...updateFolders, updatedFolder]); setFoldersNames({}); @@ -249,7 +251,7 @@ const SideBarFoldersButtonsComponent = ({ folders.map((obj) => ({ name: obj.name, edit: false, - })) + })), ); } else { setFoldersNames((old) => ({ diff --git a/src/frontend/src/stores/foldersStore.tsx b/src/frontend/src/stores/foldersStore.tsx index 3f3208e24..4b878e764 100644 --- a/src/frontend/src/stores/foldersStore.tsx +++ b/src/frontend/src/stores/foldersStore.tsx @@ -112,31 +112,25 @@ export const useFolderStore = create((set, get) => ({ const file = (event.target as HTMLInputElement).files![0]; const formData = new FormData(); formData.append("file", file); - const fileReader = new FileReader(); - fileReader.readAsText(file, "UTF-8"); - fileReader.onload = (e) => { - if (e && e.target) { - const data = JSON.parse(e.target.result as string); - if (data.data?.nodes) { - uploadFlowsToDatabase(formData).then(() => { - useFlowsManagerStore - .getState() - .refreshFlows() - .then(() => { - resolve(); - }); + file.text().then((text) => { + const data = JSON.parse(text); + if (data.data?.nodes) { + useFlowsManagerStore + .getState() + .addFlow(true, data) + .then(() => { + resolve(); }); - } else { - uploadFlowsFromFolders(formData).then(() => { - get() - .getFoldersApi(true) - .then(() => { - resolve(); - }); - }); - } + } else { + uploadFlowsFromFolders(formData).then(() => { + get() + .getFoldersApi(true) + .then(() => { + resolve(); + }); + }); } - }; + }); } }; input.click(); diff --git a/src/frontend/src/types/zustand/folders/index.ts b/src/frontend/src/types/zustand/folders/index.ts index 352be3baf..2c5b2b96b 100644 --- a/src/frontend/src/types/zustand/folders/index.ts +++ b/src/frontend/src/types/zustand/folders/index.ts @@ -20,7 +20,7 @@ export type FoldersStoreType = { setFolderUrl: (folderUrl: string) => void; folderDragging: boolean; setFolderDragging: (set: boolean) => void; - uploadFolder: (folderId: string) => void; + uploadFolder: (folderId: string) => Promise; folderIdDragging: string; setFolderIdDragging: (id: string) => void; starterProjectId: string;