Keep open tabs up-to-date using broadcast channel

Author: microbit-robert

src/components/ActionNameCard.tsx

@@ -11,7 +11,7 @@ import {
   Input,
   useToast,
 } from "@chakra-ui/react";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useIntl } from "react-intl";
 import { Action } from "../model";
 import { useStore } from "../store";
@@ -57,6 +57,10 @@ const ActionNameCard = ({
   const setActionIcon = useStore((s) => s.setActionIcon);
   const { icon, id } = value;
   const [localName, setLocalName] = useState<string>(value.name);
+  useEffect(() => {
+    // Occurs when the name is updated in another tab.
+    setLocalName(value.name);
+  }, [value.name]);
   const predictionResult = useStore((s) => s.predictionResult);
   const isTriggered =
     viewMode === ActionCardNameViewMode.ReadOnly

src/components/DataSamplesTableRow.tsx

@@ -41,51 +41,49 @@ const DataSamplesTableRow = ({
   const intl = useIntl();
 
   return (
-    <>
-      <Box
-        ref={selected ? renameShortcutScopeRef : undefined}
-        role="region"
-        aria-label={intl.formatMessage(
-          {
-            id: "action-region",
-          },
-          { action: action.name }
-        )}
-        display="contents"
-        onFocusCapture={onSelectRow}
-      >
+    <Box
+      ref={selected ? renameShortcutScopeRef : undefined}
+      role="region"
+      aria-label={intl.formatMessage(
+        {
+          id: "action-region",
+        },
+        { action: action.name }
+      )}
+      display="contents"
+      onFocusCapture={onSelectRow}
+    >
+      <GridItem>
+        <ActionNameCard
+          value={action}
+          onDeleteAction={onDeleteAction}
+          onSelectRow={onSelectRow}
+          selected={selected}
+          viewMode={
+            preview
+              ? ActionCardNameViewMode.Preview
+              : ActionCardNameViewMode.Editable
+          }
+        />
+      </GridItem>
+      {showHints ? (
+        <DataSamplesTableHints action={action} onRecord={onRecord} />
+      ) : (
         <GridItem>
-          <ActionNameCard
-            value={action}
-            onDeleteAction={onDeleteAction}
-            onSelectRow={onSelectRow}
-            selected={selected}
-            viewMode={
-              preview
-                ? ActionCardNameViewMode.Preview
-                : ActionCardNameViewMode.Editable
-            }
-          />
+          {(action.name.length > 0 || action.recordings.length > 0) && (
+            <ActionDataSamplesCard
+              preview={preview}
+              newRecordingId={newRecordingId}
+              value={action}
+              selected={selected}
+              onSelectRow={onSelectRow}
+              onRecord={onRecord}
+              clearNewRecordingId={clearNewRecordingId}
+            />
+          )}
         </GridItem>
-        {showHints ? (
-          <DataSamplesTableHints action={action} onRecord={onRecord} />
-        ) : (
-          <GridItem>
-            {(action.name.length > 0 || action.recordings.length > 0) && (
-              <ActionDataSamplesCard
-                preview={preview}
-                newRecordingId={newRecordingId}
-                value={action}
-                selected={selected}
-                onSelectRow={onSelectRow}
-                onRecord={onRecord}
-                clearNewRecordingId={clearNewRecordingId}
-              />
-            )}
-          </GridItem>
-        )}
-      </Box>
-    </>
+      )}
+    </Box>
   );
 };
 

src/components/LiveGraphLabels.tsx

@@ -84,8 +84,8 @@ const LiveGraphLabels = () => {
 
   return (
     <Box w={10} h={40} position="relative">
-      {labelConfig.map((config, idx) => (
-        <React.Fragment key={idx}>
+      {labelConfig.map((config) => (
+        <React.Fragment key={config.label}>
           <Box
             ref={config.arrowHeightRef}
             ml={-7}

src/components/RecordingFingerprint.tsx

@@ -37,10 +37,10 @@ const RecordingFingerprint = ({
       templateColumns={`repeat(${Object.keys(dataFeatures).length}, 1fr)`}
       {...rest}
     >
-      {Object.keys(dataFeatures).map((k, idx) => (
+      {Object.keys(dataFeatures).map((k) => (
         <ClickableTooltip
           placement="end-end"
-          key={idx}
+          key={k}
           label={
             <Text p={3}>
               <FormattedMessage id={`fingerprint-${k}-tooltip`} />

src/components/TestingModelTable.tsx

@@ -83,11 +83,11 @@ const TestingModelTable = () => {
             h="fit-content"
             alignSelf="start"
           >
-            {actions.map((action, idx) => {
+            {actions.map((action) => {
               const { requiredConfidence: threshold } = action;
               return (
                 <Box
-                  key={idx}
+                  key={action.id}
                   role="region"
                   aria-label={intl.formatMessage(
                     {

src/storage.ts

@@ -24,7 +24,7 @@ interface MakeCodeData {
   projectEdited: boolean;
 }
 
-export enum DatabaseStore {
+enum DatabaseStore {
   PROJECT_DATA = "project-data",
   MAKECODE = "makecode-project",
   RECORDINGS = "recordings",

src/store.ts

@@ -56,6 +56,11 @@ import { getTotalNumSamples } from "./utils/actions";
 import { defaultIcons, MakeCodeIcon } from "./utils/icons";
 import { getDetectedAction } from "./utils/prediction";
 
+export enum BroadcastChannelMessages {
+  RELOAD_PROJECT = "reload-project",
+}
+const broadcastChannel = new BroadcastChannel("ml");
+
 const storage = new Database();
 
 export const modelUrl = "indexeddb://micro:bit-ai-creator-model";
@@ -1541,9 +1546,11 @@ const storageWithErrHandling = async <T>(
 ) => {
   try {
     if (Array.isArray(callback)) {
-      return await Promise.all(callback);
+      await Promise.all(callback);
+    } else {
+      await callback();
     }
-    return await callback();
+    broadcastChannel.postMessage(BroadcastChannelMessages.RELOAD_PROJECT);
   } catch (err) {
     if (err instanceof DOMException && err.name === "QuotaExceededError") {
       console.error("Storage quota exceeded!", err);
@@ -1559,3 +1566,9 @@ export const loadProjectFromStorage = async () => {
   await loadProjectFromStorage();
   return true;
 };
+
+broadcastChannel.onmessage = async (event) => {
+  if (event.data === BroadcastChannelMessages.RELOAD_PROJECT) {
+    await loadProjectFromStorage();
+  }
+};