From 98951e0382acb65e114190880520437aaf7702a6 Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Thu, 25 Jul 2024 12:32:17 -0400
Subject: [PATCH] move some state over to zustand store

---
 frontend/src/App.tsx                | 15 +++++++---
 frontend/src/store/project-store.ts | 45 +++++++++++++++++++++++++++++
 2 files changed, 56 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/store/project-store.ts

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 1c642b3..fa0b485 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -42,17 +42,24 @@ import TipLink from "./components/core/TipLink";
 import SelectAndEditModeToggleButton from "./components/select-and-edit/SelectAndEditModeToggleButton";
 import { useAppStore } from "./store/app-store";
 import KeyboardShortcutBadge from "./components/core/KeyboardShortcutBadge";
+import { useProjectStore } from "./store/project-store";
 
 function App() {
   const [appState, setAppState] = useState<AppState>(AppState.INITIAL);
-  const [generatedCode, setGeneratedCode] = useState<string>("");
 
-  const [inputMode, setInputMode] = useState<"image" | "video">("image");
+  const {
+    inputMode,
+    setInputMode,
+    isImportedFromCode,
+    setIsImportedFromCode,
+    referenceImages,
+    setReferenceImages,
+    generatedCode,
+    setGeneratedCode,
+  } = useProjectStore();
 
-  const [referenceImages, setReferenceImages] = useState<string[]>([]);
   const [executionConsole, setExecutionConsole] = useState<string[]>([]);
   const [updateInstruction, setUpdateInstruction] = useState("");
-  const [isImportedFromCode, setIsImportedFromCode] = useState<boolean>(false);
 
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
diff --git a/frontend/src/store/project-store.ts b/frontend/src/store/project-store.ts
new file mode 100644
index 0000000..4b2c547
--- /dev/null
+++ b/frontend/src/store/project-store.ts
@@ -0,0 +1,45 @@
+import { create } from "zustand";
+import { History } from "../components/history/history_types";
+
+// Store for app-wide state
+interface ProjectStore {
+  // Inputs
+  inputMode: "image" | "video";
+  setInputMode: (mode: "image" | "video") => void;
+  isImportedFromCode: boolean;
+  setIsImportedFromCode: (imported: boolean) => void;
+  referenceImages: string[];
+  setReferenceImages: (images: string[]) => void;
+
+  // Outputs and other state
+  generatedCode: string;
+  setGeneratedCode: (
+    updater: string | ((currentCode: string) => string)
+  ) => void;
+  currentVersion: number | null;
+  setCurrentVersion: (version: number | null) => void;
+  appHistory: History[];
+  setAppHistory: (history: History[]) => void;
+}
+
+export const useProjectStore = create<ProjectStore>((set) => ({
+  // Inputs and their setters
+  inputMode: "image",
+  setInputMode: (mode) => set({ inputMode: mode }),
+  isImportedFromCode: false,
+  setIsImportedFromCode: (imported) => set({ isImportedFromCode: imported }),
+  referenceImages: [],
+  setReferenceImages: (images) => set({ referenceImages: images }),
+
+  // Outputs and other state
+  generatedCode: "",
+  setGeneratedCode: (updater) =>
+    set((state) => ({
+      generatedCode:
+        typeof updater === "function" ? updater(state.generatedCode) : updater,
+    })),
+  currentVersion: null,
+  setCurrentVersion: (version) => set({ currentVersion: version }),
+  appHistory: [],
+  setAppHistory: (history) => set({ appHistory: history }),
+}));