Migrate from localStorage to IndexedDB

package.json

@@ -33,6 +33,7 @@
     "@types/ejs": "^3.1.5",
     "@types/lodash.camelcase": "^4.3.9",
     "@types/lodash.debounce": "^4.0.9",
+    "@types/lodash.orderby": "^4.6.9",
     "@types/lodash.upperfirst": "^4.3.9",
     "@types/node": "^18.16.0",
     "@types/react": "^18.3.3",
@@ -69,9 +70,12 @@
     "@types/w3c-web-usb": "^1.0.6",
     "bowser": "^2.11.0",
     "chart.js": "^4.2.1",
+    "fake-indexeddb": "^6.2.5",
     "framer-motion": "^10.2.4",
+    "idb": "^8.0.3",
     "lodash.camelcase": "^4.3.0",
     "lodash.debounce": "^4.0.8",
+    "lodash.orderby": "^4.6.0",
     "lodash.upperfirst": "^4.3.1",
     "ml4f": "git://github.com/microsoft/ml4f#v1.10.1",
     "react": "^18.3.1",
@@ -81,6 +85,7 @@
     "react-intl": "^6.6.8",
     "react-router": "^6.24.0",
     "react-router-dom": "^6.24.0",
+    "uuid": "^13.0.0",
     "zustand": "^4.5.5"
   }
 }

src/App.tsx

@@ -12,13 +12,16 @@ import {
   createWebBluetoothConnection,
   createWebUSBConnection,
 } from "@microbit/microbit-connection";
-import React, { ReactNode, useEffect, useMemo, useRef } from "react";
+import React, { ReactNode, Suspense, useEffect, useMemo, useRef } from "react";
 import { useIntl } from "react-intl";
 import {
+  Await,
   createBrowserRouter,
+  defer,
   Outlet,
   RouterProvider,
   ScrollRestoration,
+  useLoaderData,
   useNavigate,
 } from "react-router-dom";
 import "theme-package/fonts/fonts.css";
@@ -47,7 +50,7 @@ import ImportPage from "./pages/ImportPage";
 import NewPage from "./pages/NewPage";
 import TestingModelPage from "./pages/TestingModelPage";
 import OpenSharedProjectPage from "./pages/OpenSharedProjectPage";
-import { useStore } from "./store";
+import { loadProjectFromStorage, useStore } from "./store";
 import {
   createCodePageUrl,
   createDataSamplesPageUrl,
@@ -57,6 +60,7 @@ import {
   createNewPageUrl,
   createTestingModelPageUrl,
 } from "./urls";
+import LoadingPage from "./components/LoadingPage";
 
 export interface ProviderLayoutProps {
   children: ReactNode;
@@ -112,6 +116,7 @@ const Layout = () => {
   const navigate = useNavigate();
   const toast = useToast();
   const intl = useIntl();
+  const { projectLoaded } = useLoaderData() as { projectLoaded: boolean };
 
   useEffect(() => {
     return useStore.subscribe(
@@ -138,23 +143,36 @@ const Layout = () => {
   }, [intl, navigate, setPostImportDialogState, toast]);
 
   return (
-    // We use this even though we have errorElement as this does logging.
-    <ErrorBoundary>
-      <ScrollRestoration />
-      <ProjectProvider driverRef={driverRef}>
-        <EditCodeDialog ref={driverRef} />
-        <Outlet />
-      </ProjectProvider>
-    </ErrorBoundary>
+    <Suspense fallback={<LoadingPage />}>
+      <Await resolve={projectLoaded}>
+        {/* We use this even though we have errorElement as this does logging. */}
+        <ErrorBoundary>
+          <ScrollRestoration />
+          <ProjectProvider driverRef={driverRef}>
+            <EditCodeDialog ref={driverRef} />
+            <Outlet />
+          </ProjectProvider>
+        </ErrorBoundary>
+      </Await>
+    </Suspense>
   );
 };
 
 const createRouter = () => {
+  let loaderFuncCalled = false;
   return createBrowserRouter([
     {
       id: "root",
       path: "",
       element: <Layout />,
+      loader: () => {
+        if (!loaderFuncCalled) {
+          loaderFuncCalled = true;
+          const projectLoaded = loadProjectFromStorage();
+          return defer({ projectLoaded });
+        }
+        return { projectLoaded: true };
+      },
       // This one gets used for loader errors (typically offline)
       // We set an error boundary inside the routes too that logs render-time errors.
       // ErrorBoundary doesn't work properly in the loader case at least.

src/components/ActionCertaintyCard.tsx

@@ -28,7 +28,7 @@ interface ActionCertaintyCardProps {
   requiredConfidence?: number;
   onThresholdChange: (val: number) => void;
   actionName: string;
-  actionId: number;
+  actionId: string;
   disabled?: boolean;
 }
 
@@ -42,7 +42,7 @@ const ActionCertaintyCard = ({
   const intl = useIntl();
   const barWidth = 240;
   const predictionResult = useStore((s) => s.predictionResult);
-  const isTriggered = predictionResult?.detected?.ID === actionId;
+  const isTriggered = predictionResult?.detected?.id === actionId;
   const colorScheme = useMemo(
     () => (isTriggered ? "brand2.500" : undefined),
     [isTriggered]

src/components/ActionDataSamplesCard.tsx

@@ -46,7 +46,7 @@ interface ActionDataSamplesCardProps {
   selected: boolean;
   onSelectRow?: () => void;
   onRecord?: (recordingOptions: RecordingOptions) => void;
-  newRecordingId?: number;
+  newRecordingId?: string;
   clearNewRecordingId?: () => void;
 }
 
@@ -84,7 +84,7 @@ const ActionDataSamplesCard = ({
           <DataSamplesRowCard
             onSelectRow={onSelectRow}
             selected={selected}
-            key={recording.ID}
+            key={recording.id}
           >
             <CloseButton
               aria-label={intl.formatMessage(
@@ -105,15 +105,15 @@ const ActionDataSamplesCard = ({
               zIndex={1}
               borderColor="blackAlpha.500"
               boxShadow="sm"
-              onClick={() => deleteActionRecording(value.ID, idx)}
+              onClick={() => deleteActionRecording(value.id, recording.id)}
             />
             <DataSample
               recording={recording}
               numRecordings={value.recordings.length}
-              actionId={value.ID}
+              actionId={value.id}
               actionName={value.name}
               recordingIndex={idx}
-              isNew={newRecordingId === recording.ID}
+              isNew={newRecordingId === recording.id}
               onNewAnimationEnd={clearNewRecordingId}
               onDelete={deleteActionRecording}
               view={view}
@@ -146,14 +146,14 @@ const ActionDataSamplesCard = ({
       )}
       {value.recordings.map((recording, idx) => (
         <DataSample
-          key={recording.ID}
-          actionId={value.ID}
+          key={recording.id}
+          actionId={value.id}
           actionName={value.name}
           recordingIndex={idx}
           hasClose={!preview}
           recording={recording}
           numRecordings={value.recordings.length}
-          isNew={newRecordingId === recording.ID}
+          isNew={newRecordingId === recording.id}
           onDelete={deleteActionRecording}
           onNewAnimationEnd={clearNewRecordingId}
           view={view}
@@ -201,7 +201,7 @@ interface RecordingAreaProps extends BoxProps {
 }
 
 export const recordButtonId = (action: ActionData) =>
-  `record-button-${action.ID}`;
+  `record-button-${action.id}`;
 
 const RecordingArea = ({
   action,
@@ -319,12 +319,12 @@ const DataSample = ({
 }: {
   recording: RecordingData;
   numRecordings: number;
-  actionId: number;
+  actionId: string;
   actionName: string;
   recordingIndex: number;
   isNew: boolean;
   onNewAnimationEnd?: () => void;
-  onDelete: (actionId: ActionData["ID"], recordingIdx: number) => void;
+  onDelete: (actionId: string, recordingId: string) => void;
   view: DataSamplesView;
   hasClose?: boolean;
 }) => {
@@ -336,10 +336,10 @@ const DataSample = ({
     view === DataSamplesView.GraphAndDataFeatures;
   const intl = useIntl();
   const handleDelete = useCallback(() => {
-    onDelete(actionId, recordingIndex);
-  }, [actionId, onDelete, recordingIndex]);
+    onDelete(actionId, recording.id);
+  }, [actionId, onDelete, recording.id]);
   return (
-    <HStack key={recording.ID} position="relative">
+    <HStack key={recording.id} position="relative">
       {hasClose && (
         <CloseButton
           position="absolute"