Merge pull request #46 from quadratichq/example-on-first-load

load an example file on first open

Author: davidkircos

src/core/actions/gridFile/OpenGridFile.ts

@@ -1,31 +1,31 @@
-import { GridFileSchema } from "./GridFileSchema";
-import { qdb } from "../../gridDB/db";
-import { UpdateCellsDB } from "../../gridDB/Cells/UpdateCellsDB";
-import { UpdateDGraphDB } from "../../gridDB/DGraph/UpdateDGraphDB";
-import QuadraticDependencyGraph from "../../dgraph/QuadraticDependencyGraph";
+import { GridFileSchema } from './GridFileSchema';
+import { qdb } from '../../gridDB/db';
+import { UpdateCellsDB } from '../../gridDB/Cells/UpdateCellsDB';
+import { UpdateDGraphDB } from '../../gridDB/DGraph/UpdateDGraphDB';
+import QuadraticDependencyGraph from '../../dgraph/QuadraticDependencyGraph';
 
 const readFileAsync = async (file: File) => {
   // takes a File object and returns it as a string
   return new Promise<string>((resolve, reject) => {
     let reader = new FileReader();
 
     reader.onload = () => {
-      resolve(reader.result?.toString() || "");
+      resolve(reader.result?.toString() || '');
     };
 
     reader.onerror = reject;
 
-    reader.readAsText(file, "UTF-8");
+    reader.readAsText(file, 'UTF-8');
   });
 };
 
 const openFileMenuAsync = async () => {
   // opens a input file menu for a single .grid file
   // once a file is selected, the File object is returned
   return new Promise<File>((resolve, reject) => {
-    const elem = window.document.createElement("input");
-    elem.type = "file";
-    elem.accept = ".grid";
+    const elem = window.document.createElement('input');
+    elem.type = 'file';
+    elem.accept = '.grid';
     document.body.appendChild(elem);
     elem.click();
     document.body.removeChild(elem);
@@ -41,21 +41,25 @@ const openFileMenuAsync = async () => {
   });
 };
 
-export const OpenGridFile = async () => {
-  // take file input selection from user
-  const fileToLoad = await openFileMenuAsync();
-  const result = await readFileAsync(fileToLoad);
-
-  // parse file
-  const gridFile = JSON.parse(result) as GridFileSchema;
-
+export const LoadGridFromJSON = async (gridFileJSON: GridFileSchema) => {
   // clear current grid
   await qdb.cells.clear();
   await qdb.qgrid.clear();
 
   // Open file cells and dgraph
-  await UpdateCellsDB(gridFile.cells);
+  await UpdateCellsDB(gridFileJSON.cells);
   let qdg = new QuadraticDependencyGraph();
-  qdg.load_from_json(gridFile.dgraph);
+  qdg.load_from_json(gridFileJSON.dgraph);
   await UpdateDGraphDB(qdg);
 };
+
+export const OpenGridFile = async () => {
+  // take file input selection from user
+  const fileToLoad = await openFileMenuAsync();
+  const result = await readFileAsync(fileToLoad);
+
+  // parse file
+  const gridFileJSON = JSON.parse(result) as GridFileSchema;
+
+  await LoadGridFromJSON(gridFileJSON);
+};

src/quadratic/QuadraticApp.tsx

@@ -6,6 +6,7 @@ import { useLoading } from '../contexts/LoadingContext';
 import { QuadraticLoading } from '../ui/QuadtraticLoading';
 import { loadPython } from '../core/computations/python/loadPython';
 import { TopBarLoading } from '../ui/components/TopBarLoading';
+import { WelcomeComponent } from './WelcomeComponent';
 
 export default function QuadraticApp() {
   const { loading, setLoading } = useLoading();
@@ -20,6 +21,8 @@ export default function QuadraticApp() {
 
   return (
     <RecoilRoot>
+      {/* Welcome Component for first time users */}
+      {!loading && <WelcomeComponent></WelcomeComponent>}
       {/* Provider of WebGL Canvas and Quadratic Grid */}
       <QuadraticGrid></QuadraticGrid>
       {/* Provider of All React UI Components */}

src/quadratic/WelcomeComponent.tsx

@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+import useLocalStorage from '../hooks/useLocalStorage';
+import { GridFileSchema } from '../core/actions/gridFile/GridFileSchema';
+import { LoadGridFromJSON } from '../core/actions/gridFile/OpenGridFile';
+import { qdb } from '../core/gridDB/db';
+import { example_grid } from './example_grid';
+
+export const WelcomeComponent = () => {
+  const [firstTime, setFirstTime] = useLocalStorage('firstTime', true);
+
+  useEffect(() => {
+    // On first load, open an example file.
+    if (firstTime) {
+      setFirstTime(false);
+      // Only open example file if the grid is empty.
+      qdb.cells.count().then((number_of_cells) => {
+        if (number_of_cells === 0)
+          LoadGridFromJSON(example_grid as GridFileSchema);
+      });
+    }
+  }, [firstTime, setFirstTime]);
+
+  return null;
+};