fix(exampleComponent): add Link component to wrap Button for navigation

feat(exampleComponent): add Link to navigate to specific flow based on data id

feat(components): add support for setting examples based on STARTER_FOLDER_NAME constant
feat(components): filter out examples from all flows and set them separately
feat(components): log examples and set them using setExamples function

feat(MainPage): add examples state to store and use it to render ExampleCardComponent
feat(MainPage): map over examples to render ExampleCardComponent for each example

feat(flowsManagerStore): add examples array to store state
feat(flowsManagerStore): add setExamples function to set examples in store

feat(flow): add folder and user_id fields to FlowType

feat(zustand): add examples array and setExamples function to FlowsManagerStoreType

src/frontend/src/components/exampleComponent/index.tsx

@@ -19,6 +19,7 @@ import {
     CardTitle,
 } from "../ui/card";
 import { FlowType } from "../../types/flow";
+import { Link } from "react-router-dom";
 
 export default function CollectionCardComponent({
     data,
@@ -58,6 +59,7 @@ export default function CollectionCardComponent({
             <CardFooter>
                 <div className="flex w-full items-center justify-between gap-2">
                     <div className="flex w-full justify-end flex-wrap gap-2">
+                    <Link to={"/flow/" + data.id}>
                         <Button
                             tabIndex={-1}
                             variant="outline"
@@ -70,6 +72,7 @@ export default function CollectionCardComponent({
                             />
                             Select Flow
                         </Button>
+                        </Link>
                     </div>
                 </div>
             </CardFooter>

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

@@ -14,6 +14,7 @@ import {
 import useAlertStore from "../../../../stores/alertStore";
 import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
 import { FlowType } from "../../../../types/flow";
+import { STARTER_FOLDER_NAME } from "../../../../constants/constants";
 
 export default function ComponentsComponent({
   is_component = true,
@@ -24,6 +25,7 @@ export default function ComponentsComponent({
   const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow);
   const removeFlow = useFlowsManagerStore((state) => state.removeFlow);
   const isLoading = useFlowsManagerStore((state) => state.isLoading);
+  const setExamples = useFlowsManagerStore((state) => state.setExamples);
   const flows = useFlowsManagerStore((state) => state.flows);
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
   const setErrorData = useAlertStore((state) => state.setErrorData);
@@ -35,7 +37,7 @@ export default function ComponentsComponent({
 
   useEffect(() => {
     if (isLoading) return;
-    const all = flows
+    let all = flows
       .filter((f) => (f.is_component ?? false) === is_component)
       .sort((a, b) => {
         if (a?.updated_at && b?.updated_at) {
@@ -56,6 +58,10 @@ 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]);
 

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

@@ -29,6 +29,7 @@ export default function HomePage(): JSX.Element {
   const location = useLocation();
   const pathname = location.pathname;
   const [openModal, setOpenModal] = useState(false);
+  const examples = useFlowsManagerStore((state) => state.examples);
   const is_component = pathname === "/components";
   const dropdownOptions = [
     {
@@ -128,10 +129,10 @@ export default function HomePage(): JSX.Element {
         </BaseModal.Header>
         <BaseModal.Content>
           <div className="flex flex-wrap w-full h-full p-4 gap-3">
-            <ExampleCardComponent data={
-              { data: { edges: [], nodes: [], viewport: { x: 0, y: 0, zoom: 1 } }, 
-            description: "test description",id:"teste",name:"test name",}
-            } />
+            {examples.map((example, idx) => {
+              return( 
+              <ExampleCardComponent data={example} />)
+            })}
             <NewFlowCardComponent/>
             </div>
         </BaseModal.Content>

src/frontend/src/stores/flowsManagerStore.ts

@@ -37,6 +37,10 @@ const past = {};
 const future = {};
 
 const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
+  examples:[],
+  setExamples: (examples: FlowType[]) => {
+    set({ examples });
+  },
   currentFlowId: "",
   setCurrentFlowId: (currentFlowId: string) => {
     set((state) => ({

src/frontend/src/types/flow/index.ts

@@ -13,6 +13,8 @@ export type FlowType = {
   updated_at?: string;
   date_created?: string;
   parent?: string;
+  folder?: string;
+  user_id?: string;
 };
 
 export type NodeType = {

src/frontend/src/types/zustand/flowsManager/index.ts

@@ -44,6 +44,8 @@ export type FlowsManagerStoreType = {
   undo: () => void;
   redo: () => void;
   takeSnapshot: () => void;
+  examples: Array<FlowType>;
+  setExamples: (examples: FlowType[]) => void;
 };
 
 export type UseUndoRedoOptions = {