FIX: Integration of Welcome dialog

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

@@ -11,6 +11,7 @@ import {
 import {
   createNewModel,
   deleteSelectedModel,
+  isStorageEmpty,
   loadModelFromStorageOrCreate,
   saveModelToStorage,
   saveSelectedModelInStorage,
@@ -22,7 +23,7 @@ import { IronCalc, IronCalcIcon, Model, init } from "@ironcalc/workbook";
 
 function App() {
   const [model, setModel] = useState<Model | null>(null);
-  const [showWelcomeDialog, setShowWelcomeDialog] = useState(true);
+  const [showWelcomeDialog, setShowWelcomeDialog] = useState(false);
 
   useEffect(() => {
     async function start() {
@@ -55,9 +56,15 @@ function App() {
       } else {
         // try to load from local storage
         const newModel = loadModelFromStorageOrCreate();
+        if (!newModel) {
+          setShowWelcomeDialog(true);
+          const createdModel = new Model("template", "en", "UTC");
+          setModel(createdModel);
+        } else {
           setModel(newModel);
         }
       }
+    }
     start();
   }, []);
 
@@ -95,7 +102,7 @@ function App() {
           setModel(newModel);
         }}
         newModel={() => {
-          setModel(createNewModel());
+          setShowWelcomeDialog(true);
         }}
         setModel={(uuid: string) => {
           const newModel = selectModelFromStorage(uuid);
@@ -112,7 +119,32 @@ function App() {
       />
       <IronCalc model={model} />
       {showWelcomeDialog && (
-        <WelcomeDialog onClose={() => setShowWelcomeDialog(false)} />
+        <WelcomeDialog
+          onClose={() => {
+            if (isStorageEmpty()) {
+              const createdModel = createNewModel();
+              setModel(createdModel);
+            }
+            setShowWelcomeDialog(false);
+          }}
+          onSelectTemplate={async (templateId) => {
+            switch (templateId) {
+              case "blank": {
+                const createdModel = createNewModel();
+                setModel(createdModel);
+                break;
+              }
+              default: {
+                const model_bytes = await get_documentation_model(templateId);
+                const importedModel = Model.from_bytes(model_bytes);
+                saveModelToStorage(importedModel);
+                setModel(importedModel);
+                break;
+              }
+            }
+            setShowWelcomeDialog(false);
+          }}
+        />
       )}
     </Wrapper>
   );

webapp/app.ironcalc.com/frontend/src/components/WelcomeDialog/WelcomeDialog.tsx

@@ -6,8 +6,9 @@ import IronCalcIcon from "./ironcalc_icon_white.svg";
 
 function WelcomeDialog(properties: {
   onClose: () => void;
+  onSelectTemplate: (templateId: string) => void;
 }) {
-  const [selectedTemplate, setSelectedTemplate] = useState<string | null>(
+  const [selectedTemplate, setSelectedTemplate] = useState<string>(
     "blank",
   );
 
@@ -59,21 +60,23 @@ function WelcomeDialog(properties: {
             description="Estimate payments, interest, and overall cost."
             icon={<House />}
             iconColor="#2F80ED"
-            active={selectedTemplate === "mortgage"}
-            onClick={() => handleTemplateSelect("mortgage")}
+            active={selectedTemplate === "mortgage_calculator"}
+            onClick={() => handleTemplateSelect("mortgage_calculator")}
           />
           <TemplatesListItem
             title="Travel expenses tracker"
             description="Track trip costs and stay on budget."
             icon={<TicketsPlane />}
             iconColor="#EB5757"
-            active={selectedTemplate === "travel"}
-            onClick={() => handleTemplateSelect("travel")}
+            active={selectedTemplate === "travel_expenses_tracker"}
+            onClick={() => handleTemplateSelect("travel_expenses_tracker")}
           />
         </TemplatesListWrapper>
       </DialogContent>
       <DialogFooter>
-        <DialogFooterButton>Create workbook</DialogFooterButton>
+        <DialogFooterButton onClick={() => properties.onSelectTemplate(selectedTemplate)}>
+          Create workbook
+        </DialogFooterButton>
       </DialogFooter>
     </DialogWrapper>
   );

webapp/app.ironcalc.com/frontend/src/components/storage.ts

@@ -60,7 +60,7 @@ export function createNewModel(): Model {
   return model;
 }
 
-export function loadModelFromStorageOrCreate(): Model {
+export function loadModelFromStorageOrCreate(): Model | null {
   const uuid = localStorage.getItem("selected");
   if (uuid) {
     // We try to load the selected model
@@ -68,14 +68,22 @@ export function loadModelFromStorageOrCreate(): Model {
     if (modelBytesString) {
       return Model.from_bytes(base64ToBytes(modelBytesString));
     }
-    // If it doesn't exist we create one at that uuid
-    const newModel = new Model("Workbook1", "en", "UTC");
-    localStorage.setItem("selected", uuid);
-    localStorage.setItem(uuid, bytesToBase64(newModel.toBytes()));
-    return newModel;
   }
-  // If there was no selected model we create a new one
-  return createNewModel();
+  return null;
+}
+
+// check if storage is empty
+export function isStorageEmpty(): boolean {
+  const modelsJson = localStorage.getItem("models");
+  if (!modelsJson) {
+    return true;
+  }
+  try {
+    const models = JSON.parse(modelsJson);
+    return Object.keys(models).length === 0;
+  } catch (e) {
+    return true;
+  }
 }
 
 export function saveSelectedModelInStorage(model: Model) {