From 167e9fe6cd25e2fb4be96f86719e7a5633f6f8b8 Mon Sep 17 00:00:00 2001
From: ryanwong <techwithryanpwong@gmail.com>
Date: Mon, 18 Nov 2024 14:11:51 -0500
Subject: [PATCH] switch state management to context api

---
 src/components/ConfigPanel.tsx   |  10 +-
 src/components/SomeComponent.tsx |  19 ++++
 src/index.tsx                    |  13 +++
 src/store/FlowContext.tsx        | 161 +++++++++++++++++++++++++++++++
 4 files changed, 194 insertions(+), 9 deletions(-)
 create mode 100644 src/components/SomeComponent.tsx
 create mode 100644 src/index.tsx
 create mode 100644 src/store/FlowContext.tsx

diff --git a/src/components/ConfigPanel.tsx b/src/components/ConfigPanel.tsx
index b30fc13..0a47795 100644
--- a/src/components/ConfigPanel.tsx
+++ b/src/components/ConfigPanel.tsx
@@ -323,15 +323,7 @@ export function ConfigPanel({ node, onClose, onUpdateNode }: ConfigPanelProps) {
                 type="text"
                 name="path"
                 value={node.data.path}
-                onBlur={(e) => {
-                  handleChange(e);
-                  const queryParams = extractQueryParams(e.target.value);
-                  onUpdateNode(node.id, {
-                    ...node.data,
-                    path: e.target.value,
-                    queryFields: queryParams,
-                  });
-                }}
+                onChange={handleChange}
                 className="w-full p-2 border rounded"
                 placeholder="/api/users/:id"
               />
diff --git a/src/components/SomeComponent.tsx b/src/components/SomeComponent.tsx
new file mode 100644
index 0000000..2f74158
--- /dev/null
+++ b/src/components/SomeComponent.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { useFlowContext } from '../store/FlowContext';
+
+const SomeComponent = () => {
+  const { nodes, setNodes } = useFlowContext();
+
+  // Example usage
+  const addNode = () => {
+    setNodes([...nodes, { id: 'new-node', data: {}, position: { x: 0, y: 0 } }]);
+  };
+
+  return (
+    <div>
+      <button onClick={addNode}>Add Node</button>
+    </div>
+  );
+};
+
+export default SomeComponent; 
\ No newline at end of file
diff --git a/src/index.tsx b/src/index.tsx
new file mode 100644
index 0000000..f39bcd4
--- /dev/null
+++ b/src/index.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+import { FlowProvider } from './store/FlowContext';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <FlowProvider>
+      <App />
+    </FlowProvider>
+  </React.StrictMode>,
+  document.getElementById('root')
+); 
\ No newline at end of file
diff --git a/src/store/FlowContext.tsx b/src/store/FlowContext.tsx
new file mode 100644
index 0000000..53e79d8
--- /dev/null
+++ b/src/store/FlowContext.tsx
@@ -0,0 +1,161 @@
+import React, { createContext, useContext, useState, ReactNode } from 'react';
+import { Node, Edge } from 'reactflow';
+
+interface Model {
+  id: string;
+  name: string;
+  fields: {
+    name: string;
+    type: string;
+    defaultValue: string;
+    validation: string;
+    mapping?: string;
+  }[];
+}
+
+interface Role {
+  id: string;
+  name: string;
+  slug: string;
+  permissions: {
+    authRequired: boolean;
+    routes: string[];
+    canCreateUsers?: boolean;
+    canEditUsers?: boolean;
+    canDeleteUsers?: boolean;
+    canManageRoles?: boolean;
+  };
+}
+
+interface Route {
+  id: string;
+  name: string;
+  method: string;
+  url: string;
+  flowData?: {
+    nodes: any[];
+    edges: any[];
+  };
+}
+
+interface Settings {
+  globalKey: string;
+  databaseType: string;
+  authType: string;
+  timezone: string;
+  dbHost: string;
+  dbPort: string;
+  dbUser: string;
+  dbPassword: string;
+  dbName: string;
+}
+
+interface FlowState {
+  nodes: Node[];
+  edges: Edge[];
+  selectedNode: Node | null;
+  models: Model[];
+  roles: Role[];
+  routes: Route[];
+  settings: Settings;
+  defaultTablesShown: boolean;
+  setNodes: (nodes: Node[] | ((prev: Node[]) => Node[])) => void;
+  setEdges: (edges: Edge[] | ((prev: Edge[]) => Edge[])) => void;
+  setSelectedNode: (node: Node | null) => void;
+  updateNodeData: (nodeId: string, newData: any) => void;
+  addModel: (model: Model) => void;
+  updateModel: (model: Model) => void;
+  addRole: (role: Role) => void;
+  updateRole: (role: Role) => void;
+  deleteRole: (roleId: string) => void;
+  addRoute: (route: Route) => void;
+  updateRoute: (route: Route) => void;
+  deleteRoute: (routeId: string) => void;
+  updateSettings: (settings: Settings) => void;
+  setDefaultTablesShown: (shown: boolean) => void;
+  updateNode: (nodeId: string, newData: any) => void;
+}
+
+const FlowContext = createContext<FlowState | undefined>(undefined);
+
+export const FlowProvider = ({ children }: { children: ReactNode }) => {
+  const [nodes, setNodes] = useState<Node[]>([]);
+  const [edges, setEdges] = useState<Edge[]>([]);
+  const [selectedNode, setSelectedNode] = useState<Node | null>(null);
+  const [models, setModels] = useState<Model[]>([]);
+  const [roles, setRoles] = useState<Role[]>([]);
+  const [routes, setRoutes] = useState<Route[]>([]);
+  const [settings, setSettings] = useState<Settings>({
+    globalKey: `key_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+    databaseType: "mysql",
+    authType: "session",
+    timezone: "UTC",
+    dbHost: "localhost",
+    dbPort: "3306",
+    dbUser: "root",
+    dbPassword: "root",
+    dbName: `database_${new Date().toISOString().split("T")[0]}`,
+  });
+  const [defaultTablesShown, setDefaultTablesShown] = useState<boolean>(false);
+
+  const updateNodeData = (nodeId: string, newData: any) => {
+    setNodes((prevNodes) =>
+      prevNodes.map((node) =>
+        node.id === nodeId ? { ...node, data: { ...node.data, ...newData } } : node
+      )
+    );
+  };
+
+  const addModel = (model: Model) => setModels((prev) => [...prev, model]);
+  const updateModel = (model: Model) => setModels((prev) => prev.map((m) => (m.id === model.id ? model : m)));
+  const addRole = (role: Role) => setRoles((prev) => [...prev, role]);
+  const updateRole = (role: Role) => setRoles((prev) => prev.map((r) => (r.id === role.id ? role : r)));
+  const deleteRole = (roleId: string) => setRoles((prev) => prev.filter((r) => r.id !== roleId));
+  const addRoute = (route: Route) => setRoutes((prev) => [...prev, route]);
+  const updateRoute = (route: Route) => setRoutes((prev) => prev.map((r) => (r.id === route.id ? route : r)));
+  const deleteRoute = (routeId: string) => setRoutes((prev) => prev.filter((r) => r.id !== routeId));
+  const updateNode = (nodeId: string, newData: any) => {
+    console.log("Updating node in store:", nodeId, newData);
+    updateNodeData(nodeId, newData);
+  };
+
+  return (
+    <FlowContext.Provider
+      value={{
+        nodes,
+        edges,
+        selectedNode,
+        models,
+        roles,
+        routes,
+        settings,
+        defaultTablesShown,
+        setNodes,
+        setEdges,
+        setSelectedNode,
+        updateNodeData,
+        addModel,
+        updateModel,
+        addRole,
+        updateRole,
+        deleteRole,
+        addRoute,
+        updateRoute,
+        deleteRoute,
+        updateSettings: setSettings,
+        setDefaultTablesShown,
+        updateNode,
+      }}
+    >
+      {children}
+    </FlowContext.Provider>
+  );
+};
+
+export const useFlowContext = () => {
+  const context = useContext(FlowContext);
+  if (!context) {
+    throw new Error("useFlowContext must be used within a FlowProvider");
+  }
+  return context;
+}; 
\ No newline at end of file