Refactored card component on components and flows

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>
       )}

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);
             }}

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

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);

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",
     });
   }
 

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);
       });
     });
   }

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>
           }
         />

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;
 };