UPDATE: Add a drawer to store user's workbooks

webapp/app.ironcalc.com/frontend/src/App.tsx

@@ -1,7 +1,8 @@
 import "./App.css";
 import styled from "@emotion/styled";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { FileBar } from "./components/FileBar";
+import LeftDrawer from "./components/LeftDrawer/LeftDrawer";
 import {
   get_documentation_model,
   get_model,
@@ -10,6 +11,8 @@ import {
 import {
   createNewModel,
   deleteSelectedModel,
+  getModelsMetadata,
+  getSelectedUuid,
   loadModelFromStorageOrCreate,
   saveModelToStorage,
   saveSelectedModelInStorage,
@@ -21,6 +24,14 @@ import { IronCalc, IronCalcIcon, Model, init } from "@ironcalc/workbook";
 
 function App() {
   const [model, setModel] = useState<Model | null>(null);
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+  const [modelsMetadata, setModelsMetadata] = useState(getModelsMetadata());
+  const [selectedUuid, setSelectedUuid] = useState(getSelectedUuid());
+
+  const refreshModelsData = useCallback(() => {
+    setModelsMetadata(getModelsMetadata());
+    setSelectedUuid(getSelectedUuid());
+  }, []);
 
   useEffect(() => {
     async function start() {
@@ -38,6 +49,7 @@ function App() {
           const importedModel = Model.from_bytes(model_bytes);
           localStorage.removeItem("selected");
           setModel(importedModel);
+          refreshModelsData();
         } catch (e) {
           alert("Model not found, or failed to load");
         }
@@ -47,17 +59,19 @@ function App() {
           const importedModel = Model.from_bytes(model_bytes);
           localStorage.removeItem("selected");
           setModel(importedModel);
+          refreshModelsData();
         } catch (e) {
           alert("Example file not found, or failed to load");
         }
       } else {
         // try to load from local storage
         const newModel = loadModelFromStorageOrCreate();
         setModel(newModel);
+        refreshModelsData();
       }
     }
     start();
-  }, []);
+  }, [refreshModelsData]);
 
   if (!model) {
     return (
@@ -79,48 +93,80 @@ function App() {
   // We could use context for model, but the problem is that it should initialized to null.
   // Passing the property down makes sure it is always defined.
 
+  // Handlers for model changes that also update our models state
+  const handleNewModel = () => {
+    const newModel = createNewModel();
+    setModel(newModel);
+    refreshModelsData();
+  };
+
+  const handleSetModel = (uuid: string) => {
+    const newModel = selectModelFromStorage(uuid);
+    if (newModel) {
+      setModel(newModel);
+      refreshModelsData();
+    }
+  };
+
+  const handleDeleteModel = () => {
+    const newModel = deleteSelectedModel();
+    if (newModel) {
+      setModel(newModel);
+      refreshModelsData();
+    }
+  };
+
   return (
-    <Wrapper>
-      <FileBar
-        model={model}
-        onModelUpload={async (arrayBuffer: ArrayBuffer, fileName: string) => {
-          const blob = await uploadFile(arrayBuffer, fileName);
-
-          const bytes = new Uint8Array(await blob.arrayBuffer());
-          const newModel = Model.from_bytes(bytes);
-          saveModelToStorage(newModel);
-
-          setModel(newModel);
-        }}
-        newModel={() => {
-          setModel(createNewModel());
-        }}
-        setModel={(uuid: string) => {
-          const newModel = selectModelFromStorage(uuid);
-          if (newModel) {
-            setModel(newModel);
-          }
-        }}
-        onDelete={() => {
-          const newModel = deleteSelectedModel();
-          if (newModel) {
-            setModel(newModel);
-          }
-        }}
+    <AppContainer>
+      <LeftDrawer
+        open={isDrawerOpen}
+        onClose={() => setIsDrawerOpen(false)}
+        newModel={handleNewModel}
+        setModel={handleSetModel}
+        models={modelsMetadata}
+        selectedUuid={selectedUuid}
+        setDeleteDialogOpen={() => {}}
       />
-      <IronCalc model={model} />
-    </Wrapper>
+
+      <MainContent isDrawerOpen={isDrawerOpen}>
+        <FileBar
+          model={model}
+          onModelUpload={async (arrayBuffer: ArrayBuffer, fileName: string) => {
+            const blob = await uploadFile(arrayBuffer, fileName);
+            const bytes = new Uint8Array(await blob.arrayBuffer());
+            const newModel = Model.from_bytes(bytes);
+            saveModelToStorage(newModel);
+            setModel(newModel);
+            refreshModelsData();
+          }}
+          newModel={handleNewModel}
+          setModel={handleSetModel}
+          onDelete={handleDeleteModel}
+          isDrawerOpen={isDrawerOpen}
+          setIsDrawerOpen={setIsDrawerOpen}
+          refreshModelsData={refreshModelsData}
+        />
+        <IronCalc model={model} />
+      </MainContent>
+    </AppContainer>
   );
 }
 
-const Wrapper = styled("div")`
-  margin: 0px;
-  padding: 0px;
+const AppContainer = styled("div")`
+  display: flex;
   width: 100%;
   height: 100%;
+  position: relative;
+  overflow: hidden;
+`;
+
+const MainContent = styled("div")<{ isDrawerOpen: boolean }>`
+  margin-left: ${({ isDrawerOpen }) => (isDrawerOpen ? "0px" : "-264px")};
+  transition: margin-left 0.3s ease;
+  width: ${({ isDrawerOpen }) =>
+    isDrawerOpen ? "calc(100% - 264px)" : "100%"};
   display: flex;
   flex-direction: column;
-  position: absolute;
 `;
 
 const Loading = styled("div")`