From f2395aaee11748c571a03770c19829e917d6f9d1 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Tue, 5 Mar 2024 20:44:11 -0300 Subject: [PATCH] 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 | 3 +++ .../src/pages/MainPage/components/components/index.tsx | 8 +++++++- src/frontend/src/pages/MainPage/index.tsx | 9 +++++---- src/frontend/src/stores/flowsManagerStore.ts | 4 ++++ src/frontend/src/types/flow/index.ts | 2 ++ src/frontend/src/types/zustand/flowsManager/index.ts | 2 ++ 6 files changed, 23 insertions(+), 5 deletions(-) diff --git a/src/frontend/src/components/exampleComponent/index.tsx b/src/frontend/src/components/exampleComponent/index.tsx index af0cf56ea..7dff31254 100644 --- a/src/frontend/src/components/exampleComponent/index.tsx +++ b/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({
+ +
diff --git a/src/frontend/src/pages/MainPage/components/components/index.tsx b/src/frontend/src/pages/MainPage/components/components/index.tsx index 86ee65d0c..0073447c0 100644 --- a/src/frontend/src/pages/MainPage/components/components/index.tsx +++ b/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]); diff --git a/src/frontend/src/pages/MainPage/index.tsx b/src/frontend/src/pages/MainPage/index.tsx index fc8747094..88055ff79 100644 --- a/src/frontend/src/pages/MainPage/index.tsx +++ b/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 {
- + {examples.map((example, idx) => { + return( + ) + })}
diff --git a/src/frontend/src/stores/flowsManagerStore.ts b/src/frontend/src/stores/flowsManagerStore.ts index fac806c5f..96b443152 100644 --- a/src/frontend/src/stores/flowsManagerStore.ts +++ b/src/frontend/src/stores/flowsManagerStore.ts @@ -37,6 +37,10 @@ const past = {}; const future = {}; const useFlowsManagerStore = create((set, get) => ({ + examples:[], + setExamples: (examples: FlowType[]) => { + set({ examples }); + }, currentFlowId: "", setCurrentFlowId: (currentFlowId: string) => { set((state) => ({ diff --git a/src/frontend/src/types/flow/index.ts b/src/frontend/src/types/flow/index.ts index 967d4e424..ffb364d61 100644 --- a/src/frontend/src/types/flow/index.ts +++ b/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 = { diff --git a/src/frontend/src/types/zustand/flowsManager/index.ts b/src/frontend/src/types/zustand/flowsManager/index.ts index 471d4cf17..87fbf9a22 100644 --- a/src/frontend/src/types/zustand/flowsManager/index.ts +++ b/src/frontend/src/types/zustand/flowsManager/index.ts @@ -44,6 +44,8 @@ export type FlowsManagerStoreType = { undo: () => void; redo: () => void; takeSnapshot: () => void; + examples: Array; + setExamples: (examples: FlowType[]) => void; }; export type UseUndoRedoOptions = {