From 3b7f1928ff8d511cc28489d87e32f1cc3375453d Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Tue, 5 Mar 2024 20:59:15 -0300
Subject: [PATCH] update examples in MainPage using zustand

---
 .../src/pages/MainPage/components/components/index.tsx        | 4 ----
 src/frontend/src/pages/MainPage/index.tsx                     | 2 +-
 src/frontend/src/stores/flowsManagerStore.ts                  | 4 +++-
 3 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/frontend/src/pages/MainPage/components/components/index.tsx b/src/frontend/src/pages/MainPage/components/components/index.tsx
index 0073447c0..234852388 100644
--- a/src/frontend/src/pages/MainPage/components/components/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/components/index.tsx
@@ -58,10 +58,6 @@ export default function ComponentsComponent({
       });
     const start = (pageIndex - 1) * pageSize;
     const end = start + pageSize;
-    const examples = all.filter(f=>(f.folder===STARTER_FOLDER_NAME && !f.user_id));
-    console.log(examples);
-    setExamples(examples);
-    all = all.filter(f=>!(f.folder===STARTER_FOLDER_NAME && !f.user_id));;
     setData(all.slice(start, end));
   }, [flows, isLoading, pageIndex, pageSize]);
 
diff --git a/src/frontend/src/pages/MainPage/index.tsx b/src/frontend/src/pages/MainPage/index.tsx
index de546befa..9b35681eb 100644
--- a/src/frontend/src/pages/MainPage/index.tsx
+++ b/src/frontend/src/pages/MainPage/index.tsx
@@ -131,7 +131,7 @@ export default function HomePage(): JSX.Element {
           <div className="flex flex-wrap w-full h-full p-4 gap-3">
             {examples.map((example, idx) => {
               return( 
-              <ExampleCardComponent flow={example} />)
+              <ExampleCardComponent key={idx} flow={example} />)
             })}
             <NewFlowCardComponent/>
             </div>
diff --git a/src/frontend/src/stores/flowsManagerStore.ts b/src/frontend/src/stores/flowsManagerStore.ts
index 96b443152..d993f40b0 100644
--- a/src/frontend/src/stores/flowsManagerStore.ts
+++ b/src/frontend/src/stores/flowsManagerStore.ts
@@ -25,6 +25,7 @@ import useAlertStore from "./alertStore";
 import { useDarkStore } from "./darkStore";
 import useFlowStore from "./flowStore";
 import { useTypesStore } from "./typesStore";
+import { STARTER_FOLDER_NAME } from "../constants/constants";
 
 let saveTimeoutId: NodeJS.Timeout | null = null;
 
@@ -66,7 +67,8 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
         .then((dbData) => {
           if (dbData) {
             const { data, flows } = processFlows(dbData, false);
-            get().setFlows(flows);
+            get().setExamples(flows.filter(f=>(f.folder===STARTER_FOLDER_NAME && !f.user_id)));
+            get().setFlows(flows.filter(f=>!(f.folder===STARTER_FOLDER_NAME && !f.user_id)));
             useTypesStore.setState((state) => ({
               data: { ...state.data, ["saved_components"]: data },
             }));