Fixed dropping file

src/frontend/src/contexts/flowsContext.tsx

@@ -58,7 +58,6 @@ const FlowsContextInitialValue: FlowsContextType = {
   setTabId: (index: string) => {},
   isLoading: true,
   flows: [],
-  refreshFlows: () => {},
   removeFlow: (id: string) => {},
   addFlow: async (newProject: boolean, flowData?: FlowType) => "",
   updateFlow: (newFlow: FlowType) => {},
@@ -98,7 +97,7 @@ export function FlowsProvider({ children }: { children: ReactNode }) {
 
   const [tabId, setTabId] = useState("");
 
-  const [isLoading, setIsLoading] = useState(true);
+  const [isLoading, setIsLoading] = useState(false);
 
   const [flows, setFlows] = useState<Array<FlowType>>([]);
   const [id, setId] = useState(uid());
@@ -124,25 +123,27 @@ export function FlowsProvider({ children }: { children: ReactNode }) {
   }
 
   function refreshFlows() {
-    setIsLoading(true);
+    if (Object.keys(templates).length > 0) {
-    getTabsDataFromDB().then((DbData) => {
+      setIsLoading(true);
-      if (DbData && Object.keys(templates).length > 0) {
+      getTabsDataFromDB().then((DbData) => {
-        try {
+        if (DbData) {
-          processFlows(DbData, false);
+          try {
-          updateStateWithDbData(DbData);
+            processFlows(DbData, false);
-          setIsLoading(false);
+            updateStateWithDbData(DbData);
-        } catch (e) {}
+            setIsLoading(false);
-      }
+          } catch (e) {}
-    });
+        }
+      });
+    }
   }
 
   useEffect(() => {
     // If the user is authenticated, fetch the types. This code is important to check if the user is auth because of the execution order of the useEffect hooks.
-    if (getAuthentication() === true) {
+    if (getAuthentication() === true && Object.keys(templates).length > 0) {
       // get data from db
       refreshFlows();
     }
-  }, [templates, getAuthentication()]);
+  }, [getAuthentication(), templates, tabId]);
 
   function getTabsDataFromDB() {
     //get tabs from db
@@ -333,7 +334,6 @@ export function FlowsProvider({ children }: { children: ReactNode }) {
       if (file) {
         let text = await file.text();
         let fileData = JSON.parse(text);
-        console.log(fileData);
         if (fileData.is_component === undefined) {
           reject("Your file doesn't have the is_component property.");
         } else if (
@@ -761,7 +761,6 @@ export function FlowsProvider({ children }: { children: ReactNode }) {
         tabId,
         setTabId,
         flows,
-        refreshFlows,
         incrementNodeId,
         removeFlow,
         addFlow,

src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx

@@ -362,6 +362,11 @@ export default function Page({
             newProject: false,
             isComponent: false,
             file: event.dataTransfer.files.item(0)!,
+          }).catch((error) => {
+            setErrorData({
+              title: "Error uploading file",
+              list: [error],
+            });
           });
         } else {
           setErrorData({

src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx

@@ -212,7 +212,14 @@ export default function ExtraSidebar(): JSX.Element {
             <button
               className="extra-side-bar-buttons"
               onClick={() => {
-                uploadFlow({ newProject: false, isComponent: false });
+                uploadFlow({ newProject: false, isComponent: false }).catch(
+                  (error) => {
+                    setErrorData({
+                      title: "Error uploading file",
+                      list: [error],
+                    });
+                  }
+                );
               }}
             >
               <IconComponent name="FileUp" className="side-bar-button-size " />

src/frontend/src/pages/MainPage/components/components/index.tsx

@@ -51,6 +51,7 @@ export default function ComponentsComponent({
     const start = (pageIndex - 1) * pageSize;
     const end = start + pageSize;
     setData(allData.slice(start, end));
+    console.log(allData);
   }, [pageIndex, pageSize, allData]);
 
   const [data, setData] = useState<FlowType[]>([]);

src/frontend/src/pages/MainPage/index.tsx

@@ -9,17 +9,8 @@ import { USER_PROJECTS_HEADER } from "../../constants/constants";
 import { alertContext } from "../../contexts/alertContext";
 import { FlowsContext } from "../../contexts/flowsContext";
 export default function HomePage(): JSX.Element {
-  const {
+  const { setTabId, downloadFlows, uploadFlows, addFlow, uploadFlow } =
-    flows,
+    useContext(FlowsContext);
-    setTabId,
-    downloadFlows,
-    uploadFlows,
-    addFlow,
-    removeFlow,
-    uploadFlow,
-    refreshFlows,
-    isLoading,
-  } = useContext(FlowsContext);
   const { setErrorData, setSuccessData } = useContext(alertContext);
   const location = useLocation();
   const pathname = location.pathname;
@@ -63,7 +54,6 @@ export default function HomePage(): JSX.Element {
   // Set a null id
   useEffect(() => {
     setTabId("");
-    refreshFlows();
   }, [pathname]);
 
   const navigate = useNavigate();

src/frontend/src/types/tabs/index.ts

@@ -7,7 +7,6 @@ export type FlowsContextType = {
   isLoading: boolean;
   setTabId: (index: string) => void;
   flows: Array<FlowType>;
-  refreshFlows: () => void;
   removeFlow: (id: string) => void;
   addFlow: (
     newProject: boolean,