From 0e9cf8e797477adf72e905e884ae4f7ee1972102 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Thu, 9 Nov 2023 20:52:45 -0300
Subject: [PATCH] Refactored card component on components and flows

---
 .../src/components/cardComponent/index.tsx    |  6 ++----
 .../MainPage/components/components/index.tsx  | 19 -------------------
 .../pages/MainPage/components/flows/index.tsx |  2 --
 .../index.tsx                                 |  2 +-
 src/frontend/src/pages/MainPage/index.tsx     |  4 ++--
 .../StorePage/components/market-card.tsx      |  4 +---
 src/frontend/src/routes.tsx                   |  6 +++---
 src/frontend/src/types/components/index.ts    |  2 --
 8 files changed, 9 insertions(+), 36 deletions(-)
 rename src/frontend/src/pages/MainPage/components/{added-components => from-store}/index.tsx (95%)

diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
index 5578935fd..5ef61f716 100644
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -10,9 +10,7 @@ import {
 } from "../ui/card";
 
 export const CardComponent = ({
-  isFlow,
   data,
-  id,
   onDelete,
   button,
 }: cardComponentPropsType): JSX.Element => {
@@ -44,11 +42,11 @@ export const CardComponent = ({
         </CardDescription>
       </CardHeader>
 
-      {isFlow && (
+      {button && (
         <CardFooter>
           <div className="card-component-footer-arrangement">
             <div className="card-component-footer"></div>
-            {button && button}
+            {button}
           </div>
         </CardFooter>
       )}
diff --git a/src/frontend/src/pages/MainPage/components/components/index.tsx b/src/frontend/src/pages/MainPage/components/components/index.tsx
index 306ba4ba3..010c0ab1f 100644
--- a/src/frontend/src/pages/MainPage/components/components/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/components/index.tsx
@@ -1,9 +1,6 @@
 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 { Button } from "../../../../components/ui/button";
 import { alertContext } from "../../../../contexts/alertContext";
 import { TabsContext } from "../../../../contexts/tabsContext";
 
@@ -37,22 +34,6 @@ export default function ComponentsComponent() {
           <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);
             }}
diff --git a/src/frontend/src/pages/MainPage/components/flows/index.tsx b/src/frontend/src/pages/MainPage/components/flows/index.tsx
index 94891cde7..3df5e25a4 100644
--- a/src/frontend/src/pages/MainPage/components/flows/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/flows/index.tsx
@@ -35,9 +35,7 @@ export default function FlowsComponent() {
         .map((flow, idx) => (
           <CardComponent
             key={idx}
-            isFlow
             data={flow}
-            id={flow.id}
             button={
               <Link to={"/flow/" + flow.id}>
                 <Button
diff --git a/src/frontend/src/pages/MainPage/components/added-components/index.tsx b/src/frontend/src/pages/MainPage/components/from-store/index.tsx
similarity index 95%
rename from src/frontend/src/pages/MainPage/components/added-components/index.tsx
rename to src/frontend/src/pages/MainPage/components/from-store/index.tsx
index 4974d0237..04b7c106b 100644
--- a/src/frontend/src/pages/MainPage/components/added-components/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/from-store/index.tsx
@@ -5,7 +5,7 @@ import { getStoreComponents } from "../../../../controllers/API";
 import { storeComponent } from "../../../../types/store";
 import { MarketCardComponent } from "../../../StorePage/components/market-card";
 
-export default function AddedComponents(): JSX.Element {
+export default function FromStore(): JSX.Element {
   const [data, setData] = useState<storeComponent[]>([]);
   const [loading, setLoading] = useState(false);
   const { setErrorData } = useContext(alertContext);
diff --git a/src/frontend/src/pages/MainPage/index.tsx b/src/frontend/src/pages/MainPage/index.tsx
index 38a15ab72..e21c294c5 100644
--- a/src/frontend/src/pages/MainPage/index.tsx
+++ b/src/frontend/src/pages/MainPage/index.tsx
@@ -35,8 +35,8 @@ export default function HomePage(): JSX.Element {
 
   if (hasStore) {
     sidebarNavItems.push({
-      title: "Added Components",
-      href: "/added-components",
+      title: "From Store",
+      href: "/from-store",
     });
   }
 
diff --git a/src/frontend/src/pages/StorePage/components/market-card.tsx b/src/frontend/src/pages/StorePage/components/market-card.tsx
index cfd76f4ed..f6edc5131 100644
--- a/src/frontend/src/pages/StorePage/components/market-card.tsx
+++ b/src/frontend/src/pages/StorePage/components/market-card.tsx
@@ -89,9 +89,7 @@ export const MarketCardComponent = ({
         setSuccessData({ title: `${name} Installed` });
         setLoading(false);
         setInstalled(true);
-        setTimeout(() => {
-          navigate("/flow/" + id);
-        }, 500);
+        if (!data.is_component) navigate("/flow/" + id);
       });
     });
   }
diff --git a/src/frontend/src/routes.tsx b/src/frontend/src/routes.tsx
index 73aad35f8..25d96fe86 100644
--- a/src/frontend/src/routes.tsx
+++ b/src/frontend/src/routes.tsx
@@ -11,9 +11,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 FromStore from "./pages/MainPage/components/from-store";
 import ProfileSettingsPage from "./pages/ProfileSettingsPage";
 import StorePage from "./pages/StorePage";
 import ViewPage from "./pages/ViewPage";
@@ -42,10 +42,10 @@ const Router = () => {
         <Route path="flows" element={<FlowsComponent />} />
         <Route path="components" element={<ComponentsComponent />} />
         <Route
-          path="added-components"
+          path="from-store"
           element={
             <StoreGuard>
-              <AddedComponents />
+              <FromStore />
             </StoreGuard>
           }
         />
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index a2cec293d..b2c988567 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -552,9 +552,7 @@ export type groupDataType = {
 };
 
 export type cardComponentPropsType = {
-  isFlow?: boolean;
   data: FlowType;
-  id: string;
   onDelete?: () => void;
   button?: JSX.Element;
 };