From 00e25c9495f4029bcfb72d9b6267ca8f5c159c1d Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Mon, 25 Sep 2023 20:59:04 -0300 Subject: [PATCH] feat(typesContext.tsx): add support for saving components to local storage - Added import statements for necessary types and utility functions - Added `saveComponent` function to the `typesContextType` interface - Implemented `saveComponent` function to save a component to local storage fix(nodeToolbarComponent/index.tsx): fix typo in case statement - Fixed typo in case statement for "Download" option feat(nodeToolbarComponent/index.tsx): add logic to handle "SaveAll" option - Added logic to handle the "SaveAll" option in the switch statement - Added condition to check if user is authenticated - Added condition to check if user is auto-logged in - Added console logs for debugging purposes feat(entities/index.ts): add type definition for local storage user data - Added `localStorageUserType` type definition to represent the structure of user data stored in local storage feat(typesContext/index.ts): add type definition for node data - Added `NodeDataType` type definition to represent the structure of node data feat(utils.ts): add utility function to check if local storage key exists - Added `checkLocalStorageKey` function to check if a given key exists in local storage --- src/frontend/src/contexts/typesContext.tsx | 18 ++++++++++++++ .../components/nodeToolbarComponent/index.tsx | 24 ++++++++++++++++++- src/frontend/src/types/entities/index.ts | 6 +++++ src/frontend/src/types/typesContext/index.ts | 2 ++ src/frontend/src/utils/utils.ts | 4 ++++ 5 files changed, 53 insertions(+), 1 deletion(-) diff --git a/src/frontend/src/contexts/typesContext.tsx b/src/frontend/src/contexts/typesContext.tsx index 7caf5eccc..da7eca216 100644 --- a/src/frontend/src/contexts/typesContext.tsx +++ b/src/frontend/src/contexts/typesContext.tsx @@ -8,7 +8,10 @@ import { import { Node, ReactFlowInstance } from "reactflow"; import { getAll, getHealth } from "../controllers/API"; import { APIKindType } from "../types/api"; +import { localStorageUserType } from "../types/entities"; +import { NodeDataType } from "../types/flow"; import { typesContextType } from "../types/typesContext"; +import { checkLocalStorageKey } from "../utils/utils"; import { alertContext } from "./alertContext"; import { AuthContext } from "./authContext"; @@ -28,6 +31,7 @@ const initialValue: typesContextType = { fetchError: false, setFilterEdge: (filter) => {}, getFilterEdge: [], + saveComponent: (component: NodeDataType, key: string) => {}, }; export const typesContext = createContext(initialValue); @@ -102,9 +106,23 @@ export function TypesProvider({ children }: { children: ReactNode }) { .filter((edge) => edge.source !== idx && edge.target !== idx) ); } + + function saveComponent(component: NodeDataType, id: string) { + if (checkLocalStorageKey(id)) { + let savedComponents = localStorage.getItem(id)!; + let savedComponentsJSON: localStorageUserType = + JSON.parse(savedComponents); + let components = savedComponentsJSON.components; + components[component.type]; + savedComponentsJSON.components = components; + localStorage.setItem(id, JSON.stringify(savedComponentsJSON)); + } + } + return ( !prev); updateNodeInternals(data.id); break; - case "SaveAll": + case "Download": //TODO add logic to save node on backend and update toolbar downloadNode(createFlowComponent(data)); break; + case "SaveAll": + if (isAuthenticated) { + if (autoLogin) { + console.log("save all"); + } else { + } + } + console.log(isAuthenticated); + console.log(userData); + console.log(autoLogin); + break; } }; @@ -178,6 +191,15 @@ export default function NodeToolbarComponent({ Save{" "} {" "} + +
+ {" "} + Download{" "} +
{" "} + {isMinimal && (
diff --git a/src/frontend/src/types/entities/index.ts b/src/frontend/src/types/entities/index.ts index 3730492ce..5900f428a 100644 --- a/src/frontend/src/types/entities/index.ts +++ b/src/frontend/src/types/entities/index.ts @@ -1,6 +1,12 @@ +import { NodeDataType } from "../flow"; + export type sidebarNavigationItemType = { name: string; href: string; icon: React.ForwardRefExoticComponent>; current: boolean; }; + +export type localStorageUserType = { + components: { [key: string]: NodeDataType }; +}; diff --git a/src/frontend/src/types/typesContext/index.ts b/src/frontend/src/types/typesContext/index.ts index ff877b9d4..e572ed8d6 100644 --- a/src/frontend/src/types/typesContext/index.ts +++ b/src/frontend/src/types/typesContext/index.ts @@ -1,6 +1,7 @@ import { Edge, Node, ReactFlowInstance } from "reactflow"; import { AlertItemType } from "../alerts"; import { APIClassType, APIDataType } from "../api"; +import { NodeDataType } from "../flow"; const types: { [char: string]: string } = {}; const template: { [char: string]: APIClassType } = {}; @@ -20,6 +21,7 @@ export type typesContextType = { setFetchError: (newState: boolean) => void; setFilterEdge: (newState) => void; getFilterEdge: any[]; + saveComponent: (component: NodeDataType, key: string) => void; }; export type alertContextType = { diff --git a/src/frontend/src/utils/utils.ts b/src/frontend/src/utils/utils.ts index 111b1ce51..19f70aaf5 100644 --- a/src/frontend/src/utils/utils.ts +++ b/src/frontend/src/utils/utils.ts @@ -525,3 +525,7 @@ export function tabsArray(codes: string[], method: number) { }, ]; } + +export function checkLocalStorageKey(key: string): boolean { + return localStorage.getItem(key) !== null; +}