Modularized Card Wrap and fixed name of pages

src/frontend/src/components/cardsWrapComponent/index.tsx

@@ -0,0 +1,76 @@
+import { useState } from "react";
+import IconComponent from "../../components/genericIconComponent";
+import { SkeletonCardComponent } from "../skeletonCardComponent";
+
+export default function CardsWrapComponent({
+  onFileDrop,
+  children,
+  isLoading,
+  dragMessage,
+}: {
+  onFileDrop?: (e: any) => void;
+  children: JSX.Element | JSX.Element[];
+  isLoading: boolean;
+  dragMessage?: string;
+}) {
+  const [isDragging, setIsDragging] = useState(false);
+
+  const dragOver = (e) => {
+    e.preventDefault();
+    if (e.dataTransfer.types.some((types) => types === "Files") && onFileDrop) {
+      setIsDragging(true);
+    }
+  };
+
+  const dragEnter = (e) => {
+    if (e.dataTransfer.types.some((types) => types === "Files") && onFileDrop) {
+      setIsDragging(true);
+    }
+    e.preventDefault();
+  };
+
+  const dragLeave = (e) => {
+    e.preventDefault();
+    if (onFileDrop) setIsDragging(false);
+  };
+
+  const onDrop = (e) => {
+    e.preventDefault();
+    if (onFileDrop) onFileDrop(e);
+    setIsDragging(false);
+  };
+
+  return (
+    <div
+      onDragOver={dragOver}
+      onDragEnter={dragEnter}
+      onDragLeave={dragLeave}
+      onDrop={onDrop}
+      className={
+        "h-full w-full " +
+        (isDragging
+          ? "mb-24 flex flex-col items-center justify-center gap-4 text-2xl font-light"
+          : "")
+      }
+    >
+      {isDragging ? (
+        <>
+          <IconComponent name="ArrowUpToLine" className="h-12 w-12 stroke-1" />
+          {dragMessage ? dragMessage : "Drop your file here"}
+        </>
+      ) : (
+        <div className="main-page-flows-display">
+          {isLoading ? (
+            <>
+              <SkeletonCardComponent />
+              <SkeletonCardComponent />
+              <SkeletonCardComponent />
+            </>
+          ) : (
+            children
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -1,9 +1,6 @@
 import { useContext, useEffect, useState } from "react";
-
-import { SkeletonCardComponent } from "../../../../components/skeletonCardComponent";
+import CardsWrapComponent from "../../../../components/cardsWrapComponent";
 import { alertContext } from "../../../../contexts/alertContext";
-import { AuthContext } from "../../../../contexts/authContext";
-import { TabsContext } from "../../../../contexts/tabsContext";
 import {
   getStoreComponents,
   getStoreSavedComponents,
@@ -11,15 +8,7 @@ import {
 import { storeComponent } from "../../../../types/store";
 import { MarketCardComponent } from "../../../StorePage/components/market-card";
 
-export default function SavedComponents(): JSX.Element {
-  const { setTabId } = useContext(TabsContext);
-
-  const { setApiKey, apiKey } = useContext(AuthContext);
-
-  // set null id
-  useEffect(() => {
-    setTabId("");
-  }, []);
+export default function AddedComponents(): JSX.Element {
   const [data, setData] = useState<storeComponent[]>([]);
   const [loading, setLoading] = useState(false);
   const [filteredCategories, setFilteredCategories] = useState(new Set());
@@ -62,30 +51,16 @@ export default function SavedComponents(): JSX.Element {
   }
 
   return (
-    <>
-      {loading ? (
-        <>
-          <div className="mt-6 grid w-full gap-4 md:grid-cols-2 lg:grid-cols-3">
-            <SkeletonCardComponent />
-            <SkeletonCardComponent />
-            <SkeletonCardComponent />
-          </div>
-        </>
-      ) : (
-        <div className="flex w-full flex-col gap-4 p-4">
-          <div className="mt-6 grid w-full gap-4 md:grid-cols-2 lg:grid-cols-3">
-            {data
-              .filter(
-                (f) =>
-                  Array.from(filteredCategories).length === 0 ||
-                  filteredCategories.has(f.is_component)
-              )
-              .map((item, idx) => (
-                <MarketCardComponent key={idx} data={item} />
-              ))}
-          </div>
-        </div>
-      )}
-    </>
+    <CardsWrapComponent isLoading={loading}>
+      {data
+        .filter(
+          (f) =>
+            Array.from(filteredCategories).length === 0 ||
+            filteredCategories.has(f.is_component)
+        )
+        .map((item, idx) => (
+          <MarketCardComponent key={idx} data={item} />
+        ))}
+    </CardsWrapComponent>
   );
 }

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

@@ -1,64 +1,18 @@
-import { useContext, useEffect, useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
+import { useContext } from "react";
+import { Link } from "react-router-dom";
 import { CardComponent } from "../../../../components/cardComponent";
+import CardsWrapComponent from "../../../../components/cardsWrapComponent";
 import IconComponent from "../../../../components/genericIconComponent";
-import { SkeletonCardComponent } from "../../../../components/skeletonCardComponent";
 import { Button } from "../../../../components/ui/button";
 import { alertContext } from "../../../../contexts/alertContext";
 import { TabsContext } from "../../../../contexts/tabsContext";
 
 export default function ComponentsComponent() {
-  const {
-    flows,
-    setTabId,
-    downloadFlows,
-    uploadFlows,
-    addFlow,
-    removeFlow,
-    uploadFlow,
-    isLoading,
-  } = useContext(TabsContext);
+  const { flows, removeFlow, uploadFlow, isLoading } = useContext(TabsContext);
   const { setErrorData } = useContext(alertContext);
 
-  const dropdownOptions = [
-    {
-      name: "Import from JSON",
-      onBtnClick: () =>
-        uploadFlow(true).then((id) => {
-          navigate("/flow/" + id);
-        }),
-    },
-  ];
-
-  // Set a null id
-  useEffect(() => {
-    setTabId("");
-  }, []);
-  const navigate = useNavigate();
-
-  const [isDragging, setIsDragging] = useState(false);
-
-  const dragOver = (e) => {
+  const onFileDrop = (e) => {
     e.preventDefault();
-    if (e.dataTransfer.types.some((types) => types === "Files")) {
-      setIsDragging(true);
-    }
-  };
-
-  const dragEnter = (e) => {
-    if (e.dataTransfer.types.some((types) => types === "Files")) {
-      setIsDragging(true);
-    }
-    e.preventDefault();
-  };
-
-  const dragLeave = () => {
-    setIsDragging(false);
-  };
-
-  const fileDrop = (e) => {
-    e.preventDefault();
-    setIsDragging(false);
     if (e.dataTransfer.types.some((types) => types === "Files")) {
       if (e.dataTransfer.files.item(0).type === "application/json") {
         uploadFlow(true, e.dataTransfer.files.item(0)!);
@@ -72,62 +26,38 @@ export default function ComponentsComponent() {
   };
 
   return (
-    <div
-      onDragOver={dragOver}
-      onDragEnter={dragEnter}
-      onDragLeave={dragLeave}
-      onDrop={fileDrop}
-      className={
-        "h-full w-full " +
-        (isDragging
-          ? "mb-24 flex flex-col items-center justify-center gap-4 text-2xl font-light"
-          : "")
-      }
+    <CardsWrapComponent
+      onFileDrop={onFileDrop}
+      isLoading={isLoading && flows.length == 0}
+      dragMessage={"Drop your component here"}
     >
-      {isDragging ? (
-        <>
-          <IconComponent name="ArrowUpToLine" className="h-12 w-12 stroke-1" />
-          Drop your flow here
-        </>
-      ) : (
-        <div className="main-page-flows-display">
-          {isLoading && flows.length == 0 ? (
-            <>
-              <SkeletonCardComponent />
-              <SkeletonCardComponent />
-              <SkeletonCardComponent />
-            </>
-          ) : (
-            flows
-              .filter((flow) => flow.is_component)
-              .map((flow, idx) => (
-                <CardComponent
-                  key={idx}
-                  data={flow}
-                  id={flow.id}
-                  button={
-                    <Link to={"/flow/" + flow.id}>
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        className="whitespace-nowrap "
-                      >
-                        <IconComponent
-                          name="ExternalLink"
-                          className="main-page-nav-button"
-                        />
-                        Edit Flow
-                      </Button>
-                    </Link>
-                  }
-                  onDelete={() => {
-                    removeFlow(flow.id);
-                  }}
-                />
-              ))
-          )}
-        </div>
-      )}
-    </div>
+      {flows
+        .filter((flow) => flow.is_component)
+        .map((flow, idx) => (
+          <CardComponent
+            key={idx}
+            data={flow}
+            id={flow.id}
+            button={
+              <Link to={"/flow/" + flow.id}>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="whitespace-nowrap "
+                >
+                  <IconComponent
+                    name="ExternalLink"
+                    className="main-page-nav-button"
+                  />
+                  Edit Flow
+                </Button>
+              </Link>
+            }
+            onDelete={() => {
+              removeFlow(flow.id);
+            }}
+          />
+        ))}
+    </CardsWrapComponent>
   );
 }

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

@@ -1,63 +1,18 @@
-import { useContext, useEffect, useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
+import { useContext } from "react";
+import { Link } from "react-router-dom";
 import { CardComponent } from "../../../../components/cardComponent";
+import CardsWrapComponent from "../../../../components/cardsWrapComponent";
 import IconComponent from "../../../../components/genericIconComponent";
-import { SkeletonCardComponent } from "../../../../components/skeletonCardComponent";
 import { Button } from "../../../../components/ui/button";
 import { alertContext } from "../../../../contexts/alertContext";
 import { TabsContext } from "../../../../contexts/tabsContext";
 
 export default function FlowsComponent() {
-  const {
-    flows,
-    setTabId,
-    downloadFlows,
-    uploadFlows,
-    addFlow,
-    removeFlow,
-    uploadFlow,
-    isLoading,
-  } = useContext(TabsContext);
+  const { uploadFlow, removeFlow, flows, isLoading } = useContext(TabsContext);
   const { setErrorData } = useContext(alertContext);
-  const dropdownOptions = [
-    {
-      name: "Import from JSON",
-      onBtnClick: () =>
-        uploadFlow(true).then((id) => {
-          navigate("/flow/" + id);
-        }),
-    },
-  ];
 
-  // Set a null id
-  useEffect(() => {
-    setTabId("");
-  }, []);
-  const navigate = useNavigate();
-
-  const [isDragging, setIsDragging] = useState(false);
-
-  const dragOver = (e) => {
+  const onFileDrop = (e) => {
     e.preventDefault();
-    if (e.dataTransfer.types.some((types) => types === "Files")) {
-      setIsDragging(true);
-    }
-  };
-
-  const dragEnter = (e) => {
-    if (e.dataTransfer.types.some((types) => types === "Files")) {
-      setIsDragging(true);
-    }
-    e.preventDefault();
-  };
-
-  const dragLeave = () => {
-    setIsDragging(false);
-  };
-
-  const fileDrop = (e) => {
-    e.preventDefault();
-    setIsDragging(false);
     if (e.dataTransfer.types.some((types) => types === "Files")) {
       if (e.dataTransfer.files.item(0).type === "application/json") {
         uploadFlow(true, e.dataTransfer.files.item(0)!);
@@ -70,63 +25,39 @@ export default function FlowsComponent() {
     }
   };
   return (
-    <div
-      onDragOver={dragOver}
-      onDragEnter={dragEnter}
-      onDragLeave={dragLeave}
-      onDrop={fileDrop}
-      className={
-        "h-full w-full " +
-        (isDragging
-          ? "mb-24 flex flex-col items-center justify-center gap-4 text-2xl font-light"
-          : "")
-      }
+    <CardsWrapComponent
+      onFileDrop={onFileDrop}
+      dragMessage={"Drag your flow here"}
+      isLoading={isLoading && flows.length == 0}
     >
-      {isDragging ? (
-        <>
-          <IconComponent name="ArrowUpToLine" className="h-12 w-12 stroke-1" />
-          Drop your flow here
-        </>
-      ) : (
-        <div className="main-page-flows-display">
-          {isLoading && flows.length == 0 ? (
-            <>
-              <SkeletonCardComponent />
-              <SkeletonCardComponent />
-              <SkeletonCardComponent />
-            </>
-          ) : (
-            flows
-              .filter((flow) => !flow.is_component)
-              .map((flow, idx) => (
-                <CardComponent
-                  key={idx}
-                  isFlow
-                  data={flow}
-                  id={flow.id}
-                  button={
-                    <Link to={"/flow/" + flow.id}>
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        className="whitespace-nowrap "
-                      >
-                        <IconComponent
-                          name="ExternalLink"
-                          className="main-page-nav-button"
-                        />
-                        Edit Flow
-                      </Button>
-                    </Link>
-                  }
-                  onDelete={() => {
-                    removeFlow(flow.id);
-                  }}
-                />
-              ))
-          )}
-        </div>
-      )}
-    </div>
+      {flows
+        .filter((flow) => !flow.is_component)
+        .map((flow, idx) => (
+          <CardComponent
+            key={idx}
+            isFlow
+            data={flow}
+            id={flow.id}
+            button={
+              <Link to={"/flow/" + flow.id}>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="whitespace-nowrap "
+                >
+                  <IconComponent
+                    name="ExternalLink"
+                    className="main-page-nav-button"
+                  />
+                  Edit Flow
+                </Button>
+              </Link>
+            }
+            onDelete={() => {
+              removeFlow(flow.id);
+            }}
+          />
+        ))}
+    </CardsWrapComponent>
   );
 }

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

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useState } from "react";
+import { useContext, useEffect } from "react";
 import { Outlet, useNavigate } from "react-router-dom";
 import DropdownButton from "../../components/DropdownButtonComponent";
 import IconComponent from "../../components/genericIconComponent";
@@ -7,20 +7,11 @@ import SidebarNav from "../../components/sidebarComponent";
 import { Button } from "../../components/ui/button";
 import { Separator } from "../../components/ui/separator";
 import { USER_PROJECTS_HEADER } from "../../constants/constants";
-import { alertContext } from "../../contexts/alertContext";
 import { StoreContext } from "../../contexts/storeContext";
 import { TabsContext } from "../../contexts/tabsContext";
 export default function HomePage(): JSX.Element {
-  const {
-    flows,
-    setTabId,
-    downloadFlows,
-    uploadFlows,
-    addFlow,
-    uploadFlow,
-    isLoading,
-  } = useContext(TabsContext);
-  const { setErrorData } = useContext(alertContext);
+  const { setTabId, downloadFlows, uploadFlows, addFlow, uploadFlow } =
+    useContext(TabsContext);
   const { hasStore } = useContext(StoreContext);
   const dropdownOptions = [
     {
@@ -44,8 +35,8 @@ export default function HomePage(): JSX.Element {
 
   if (hasStore) {
     sidebarNavItems.push({
-      title: "Saved Components",
-      href: "/saved-components",
+      title: "Added Components",
+      href: "/added-components",
     });
   }
 
@@ -55,41 +46,6 @@ export default function HomePage(): JSX.Element {
   }, []);
   const navigate = useNavigate();
 
-  const [isDragging, setIsDragging] = useState(false);
-
-  const dragOver = (e) => {
-    e.preventDefault();
-    if (e.dataTransfer.types.some((types) => types === "Files")) {
-      setIsDragging(true);
-    }
-  };
-
-  const dragEnter = (e) => {
-    if (e.dataTransfer.types.some((types) => types === "Files")) {
-      setIsDragging(true);
-    }
-    e.preventDefault();
-  };
-
-  const dragLeave = () => {
-    setIsDragging(false);
-  };
-
-  const fileDrop = (e) => {
-    e.preventDefault();
-    setIsDragging(false);
-    if (e.dataTransfer.types.some((types) => types === "Files")) {
-      if (e.dataTransfer.files.item(0).type === "application/json") {
-        uploadFlow(true, e.dataTransfer.files.item(0)!);
-      } else {
-        setErrorData({
-          title: "Invalid file type",
-          list: ["Please upload a JSON file"],
-        });
-      }
-    }
-  };
-
   // Personal flows display
   return (
     <>

src/frontend/src/pages/StorePage/components/market-card.tsx

@@ -234,7 +234,7 @@ export const MarketCardComponent = ({ data }: { data: storeComponent }) => {
                   "main-page-nav-button" + (loading ? " animate-spin" : "")
                 }
               />
-              {added ? "Install Locally" : "Add to Account"}
+              {added ? "Use Template" : "Add to Account"}
             </Button>
           </div>
         </div>

src/frontend/src/routes.tsx

@@ -10,9 +10,9 @@ import ApiKeysPage from "./pages/ApiKeysPage";
 import CommunityPage from "./pages/CommunityPage";
 import FlowPage from "./pages/FlowPage";
 import HomePage from "./pages/MainPage";
+import AddedComponents from "./pages/MainPage/components/added-components";
 import ComponentsComponent from "./pages/MainPage/components/components";
 import FlowsComponent from "./pages/MainPage/components/flows";
-import SavedComponents from "./pages/MainPage/components/saved-components";
 import ProfileSettingsPage from "./pages/ProfileSettingsPage";
 import StorePage from "./pages/StorePage";
 import ViewPage from "./pages/ViewPage";
@@ -41,10 +41,10 @@ const Router = () => {
         <Route path="flows" element={<FlowsComponent />} />
         <Route path="components" element={<ComponentsComponent />} />
         <Route
-          path="saved-components"
+          path="added-components"
           element={
             <StoreGuard>
-              <SavedComponents />
+              <AddedComponents />
             </StoreGuard>
           }
         />