From 470e0f0351284fd062e9106a943da5f0b9458522 Mon Sep 17 00:00:00 2001
From: Chris Laplante <chris.laplante@agilent.com>
Date: Sat, 11 May 2024 18:50:01 -0400
Subject: [PATCH] WIP

---
 package-lock.json      | 22 +++++++++++++++-
 package.json           |  4 ++-
 src/components/App.tsx | 59 +++++++++++++++++++++++++++++++++++-------
 src/usePyodide.ts      | 13 +++++++---
 4 files changed, 84 insertions(+), 14 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c9611a2..631b5b6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,11 +11,13 @@
         "@types/react-dom": "^18.2.25",
         "ace-builds": "^1.33.1",
         "classnames": "^2.5.1",
+        "immer": "^10.1.1",
         "pyodide": "^0.25.1",
         "react": "^18.2.0",
         "react-ace": "^11.0.1",
         "react-dom": "^18.2.0",
-        "react-error-boundary": "^4.0.13"
+        "react-error-boundary": "^4.0.13",
+        "use-immer": "^0.9.0"
       },
       "devDependencies": {
         "@babel/core": "^7.24.5",
@@ -6144,6 +6146,15 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immer": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz",
+      "integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
     "node_modules/immutable": {
       "version": "4.3.5",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.5.tgz",
@@ -10014,6 +10025,15 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/use-immer": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/use-immer/-/use-immer-0.9.0.tgz",
+      "integrity": "sha512-/L+enLi0nvuZ6j4WlyK0US9/ECUtV5v9RUbtxnn5+WbtaXYUaOBoKHDNL9I5AETdurQ4rIFIj/s+Z5X80ATyKw==",
+      "peerDependencies": {
+        "immer": ">=2.0.0",
+        "react": "^16.8.0 || ^17.0.1 || ^18.0.0"
+      }
+    },
     "node_modules/use-isomorphic-layout-effect": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz",
diff --git a/package.json b/package.json
index da8d80e..789e737 100644
--- a/package.json
+++ b/package.json
@@ -65,10 +65,12 @@
     "@types/react-dom": "^18.2.25",
     "ace-builds": "^1.33.1",
     "classnames": "^2.5.1",
+    "immer": "^10.1.1",
     "pyodide": "^0.25.1",
     "react": "^18.2.0",
     "react-ace": "^11.0.1",
     "react-dom": "^18.2.0",
-    "react-error-boundary": "^4.0.13"
+    "react-error-boundary": "^4.0.13",
+    "use-immer": "^0.9.0"
   }
 }
diff --git a/src/components/App.tsx b/src/components/App.tsx
index d7ebca3..4b26253 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -1,11 +1,13 @@
 import React, {useEffect, useState} from "react";
 
 
-import {createTheme, MantineColorsTuple, MantineProvider} from '@mantine/core';
+import {AppShell, Burger, createTheme, MantineColorsTuple, MantineProvider} from '@mantine/core';
 import FetchWithProgress from "./FetchWithProgress";
 import AceEditor from "react-ace";
 import "ace-builds/src-noconflict/mode-jsx";
 import {usePyodide} from "../usePyodide";
+import {useDisclosure} from "@mantine/hooks";
+import {useImmer} from "use-immer";
 
 const myColor: MantineColorsTuple = [
     '#e4f8ff',
@@ -29,15 +31,21 @@ const theme = createTheme({
 const Inner: React.FC = () => {
     const [data, setData] = useState<ArrayBuffer | null>(null);
 
-    const pyodide = usePyodide();
+    const {pyodide, status: pyodideStatus } = usePyodide();
 
     const [ran, setRan] = useState<boolean>(false);
 
+    const [output, setOutput] = useImmer<string[]>([]);
+
     useEffect(() => {
         const go = async () => {
             if (data && !ran) {
                 setRan(true);
 
+                pyodide.setStdout({
+                    batched: (msg) => setOutput(o => { o.push(msg); })
+                })
+
                 console.warn("LOADING SQLITE");
                 await pyodide.loadPackage("sqlite3");
                 console.warn("LOADED!");
@@ -187,20 +195,53 @@ print(sys.meta_path)
 
     return <>
         <FetchWithProgress url={"assets/bitbake-2.8.0.zip"} data={data} setData={setData}/>
+        <p>pyodide: {pyodideStatus}</p>
+        <ul>
+            {output.map(e => <li>{e}</li>)}
+        </ul>
     </>;
 }
 
 export const App: React.FC = () => {
+    const [opened, { toggle }] = useDisclosure();
 
     return (
         <MantineProvider theme={theme}>
-            <AceEditor
-                mode="java"
-                theme="github"
-                name="UNIQUE_ID_OF_DIV"
-                editorProps={{$blockScrolling: true}}
-            />
-            <Inner/>
+
+            <AppShell
+                header={{ height: 60 }}
+                navbar={{
+                    width: 300,
+                    breakpoint: 'sm',
+                    collapsed: { mobile: !opened },
+                }}
+                padding="md"
+            >
+                <AppShell.Header>
+                    <Burger
+                        opened={opened}
+                        onClick={toggle}
+                        hiddenFrom="sm"
+                        size="sm"
+                    />
+                    <div>Logo</div>
+                </AppShell.Header>
+
+                <AppShell.Navbar p="md">Navbar</AppShell.Navbar>
+
+                <AppShell.Main>
+
+
+                    <AceEditor
+                        mode="java"
+                        theme="github"
+                        name="UNIQUE_ID_OF_DIV"
+                        editorProps={{$blockScrolling: true}}
+                    />
+                    <Inner/>
+                </AppShell.Main>
+            </AppShell>
+
         </MantineProvider>
     );
 };
\ No newline at end of file
diff --git a/src/usePyodide.ts b/src/usePyodide.ts
index cc972f0..78d1144 100644
--- a/src/usePyodide.ts
+++ b/src/usePyodide.ts
@@ -1,15 +1,21 @@
-import React, { useEffect, useState } from 'react';
+import {useEffect, useState} from 'react';
+
+import pyodide from "pyodide";
 
 export const usePyodide = () => {
-    const [pyodide, setPyodide] = useState(null);
+    const [pyodide, setPyodide] = useState<pyodide>(null);
+    const [status, setStatus] = useState<string>('idle');
 
     useEffect(() => {
         let isActive = true;
 
         const loadPyodide = async () => {
             if (!window.pyodide) {
+                setStatus("importing");
                 const { loadPyodide: loadPyodideModule } = await import("https://cdn.jsdelivr.net/pyodide/v0.25.1/full/pyodide.mjs");
+                setStatus("loading");
                 window.pyodide = await loadPyodideModule();
+                setStatus("done");
             }
             if (isActive) {
                 setPyodide(window.pyodide);
@@ -19,9 +25,10 @@ export const usePyodide = () => {
         loadPyodide();
 
         return () => {
+            setStatus("inactive");
             isActive = false;
         };
     }, []);
 
-    return pyodide;
+    return { pyodide, status } as const;
 };