UPDATE: Adds cell and formula editing (#92)

* UPDATE: Adds cell and formula editing

* FIX: Do not loose focus when clicking on the formula we are editing

* FIX: Minimal implementation of browse mode

* FIX: Initial browse mode within sheets

* UPDATE: Webapp

Minimal Web Application

webapp/src/App.tsx

@@ -4,6 +4,15 @@ import "./i18n";
 import styled from "@emotion/styled";
 import init, { Model } from "@ironcalc/wasm";
 import { useEffect, useState } from "react";
+import { FileBar } from "./AppComponents/FileBar";
+import { get_model, uploadFile } from "./AppComponents/rpc";
+import {
+  createNewModel,
+  loadModelFromStorageOrCreate,
+  saveModelToStorage,
+  saveSelectedModelInStorage,
+  selectModelFromStorage,
+} from "./AppComponents/storage";
 import { WorkbookState } from "./components/workbookState";
 
 function App() {
@@ -11,25 +20,29 @@ function App() {
   const [workbookState, setWorkbookState] = useState<WorkbookState | null>(
     null,
   );
+
   useEffect(() => {
     async function start() {
       await init();
       const queryString = window.location.search;
       const urlParams = new URLSearchParams(queryString);
-      const modelName = urlParams.get("model");
-      // If there is a model name ?model=example.ic we try to load it
+      const modelHash = urlParams.get("model");
+      // If there is a model name ?model=modelHash we try to load it
       // if there is not, or the loading failed we load an empty model
-      if (modelName) {
+      if (modelHash) {
+        // Get a remote model
         try {
-          const model_bytes = new Uint8Array(
-            await (await fetch(`./${modelName}`)).arrayBuffer(),
-          );
-          setModel(Model.from_bytes(model_bytes));
+          const model_bytes = await get_model(modelHash);
+          const importedModel = Model.from_bytes(model_bytes);
+          localStorage.removeItem("selected");
+          setModel(importedModel);
         } catch (e) {
-          setModel(new Model("en", "UTC"));
+          alert("Model not found, or failed to load");
         }
       } else {
-        setModel(new Model("en", "UTC"));
+        // try to load from local storage
+        const newModel = loadModelFromStorageOrCreate();
+        setModel(newModel);
       }
       setWorkbookState(new WorkbookState());
     }
@@ -40,11 +53,55 @@ function App() {
     return <Loading>Loading</Loading>;
   }
 
+  // We try to save the model every second
+  setInterval(() => {
+    const queue = model.flushSendQueue();
+    if (queue.length !== 1) {
+      saveSelectedModelInStorage(model);
+    }
+  }, 1000);
+
   // 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.
-  return <Workbook model={model} workbookState={workbookState} />;
+
+  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);
+          }
+        }}
+      />
+      <Workbook model={model} workbookState={workbookState} />
+    </Wrapper>
+  );
 }
 
+const Wrapper = styled("div")`
+  margin: 0px;
+  padding: 0px;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+`;
+
 const Loading = styled("div")`
   height: 100%;
   display: flex;