Schema 8

.github/workflows/build.yml

@@ -26,10 +26,10 @@ jobs:
       - name: Enable Corepack
         run: corepack enable
 
-      - name: Use Node 20.x
+      - name: Use Node 22.x
         uses: actions/setup-node@v4
         with:
-          node-version: 20.x
+          node-version: 22.x
           cache: 'pnpm'
 
       - name: Install dependencies

Users/jmh629/Library/LaunchAgents/com.WavesAudio.SoundGridStudioSilent.plist

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>Label</key>
+	<string>com.WavesAudio.SoundGridStudioSilent</string>
+	<key>ProgramArguments</key>
+	<array>
+		<string>/Applications/Waves/SoundGrid Studio/SoundGrid Studio.app/Contents/MacOS/SoundGrid Studio</string>
+		<string>--NoSplashScreen</string>
+		<string>--Minimized</string>
+	</array>
+	<key>RunAtLoad</key>
+	<true/>
+</dict>
+</plist>

app/(blobs)/expired/page.tsx

@@ -23,8 +23,8 @@ export default async function Page() {
         Please redeploy a new instance of Fresco to continue using the software.
       </p>
       {env.NODE_ENV === 'development' && (
-        <form action={resetAppSettings}>
-          <SubmitButton className="mt-6 max-w-[20rem]" type="submit">
+        <form action={void resetAppSettings}>
+          <SubmitButton className="mt-6 max-w-[20rem]">
             Dev mode: Reset Configuration
           </SubmitButton>
         </form>

app/(interview)/interview/_components/InterviewShell.tsx

@@ -1,18 +1,18 @@
 'use client';
 
+import { parseAsInteger, useQueryState } from 'nuqs';
+import { useEffect, useState } from 'react';
 import { Provider } from 'react-redux';
+import type { SyncInterviewType } from '~/actions/interviews';
 import DialogManager from '~/lib/interviewer/components/DialogManager';
 import ProtocolScreen from '~/lib/interviewer/containers/ProtocolScreen';
 import {
   SET_SERVER_SESSION,
   type SetServerSessionAction,
 } from '~/lib/interviewer/ducks/modules/setServerSession';
 import { store } from '~/lib/interviewer/store';
-import ServerSync from './ServerSync';
-import { useEffect, useState } from 'react';
-import { parseAsInteger, useQueryState } from 'nuqs';
-import type { SyncInterviewType } from '~/actions/interviews';
 import type { getInterviewById } from '~/queries/interviews';
+import ServerSync from './ServerSync';
 
 // The job of interview shell is to receive the server-side session and protocol
 // and create a redux store with that data.
@@ -45,12 +45,45 @@ const InterviewShell = ({
       serverSession.currentStep = currentStage;
     }
 
+    // You can't store dates in the redux store, so we need to convert them.
+    // If the date is already an ISOstring, we don't need to convert it.
+
+    const toRequiredISOString = (date: string | Date): string => {
+      if (date && date instanceof Date) {
+        return date.toISOString();
+      }
+      return date;
+    };
+
+    const toOptionalISOString = (date: string | Date | null): string | null => {
+      if (!date) return null;
+      if (date instanceof Date) {
+        return date.toISOString();
+      }
+      return date;
+    };
+
+    const serialisableServerSession = {
+      ...serverSession,
+      startTime: toRequiredISOString(serverSession.startTime),
+      lastUpdated: toRequiredISOString(serverSession.lastUpdated),
+      // optional - can be null
+      finishTime: toOptionalISOString(serverSession.finishTime),
+      exportTime: toOptionalISOString(serverSession.exportTime),
+    };
+
+    const serialisableProtocol = {
+      ...protocol,
+      importedAt: toRequiredISOString(protocol.importedAt),
+      lastModified: toRequiredISOString(protocol.lastModified),
+    };
+
     // If there's no current stage in the URL bar, set it.
     store.dispatch<SetServerSessionAction>({
       type: SET_SERVER_SESSION,
       payload: {
-        protocol,
-        session: serverSession,
+        protocol: serialisableProtocol,
+        session: serialisableServerSession,
       },
     });
 

app/dashboard/_components/UserMenu.tsx

@@ -3,8 +3,8 @@ import SubmitButton from '~/components/ui/SubmitButton';
 
 const UserMenu = () => {
   return (
-    <form action={() => logout()}>
-      <SubmitButton variant="secondary" size="sm" type="submit">
+    <form action={() => void logout()}>
+      <SubmitButton variant="secondary" size="sm" type="submit" onClick={() => logout()}>
         Sign out
       </SubmitButton>
     </form>

components/Feedback/SignOutModal.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { type Dispatch, type SetStateAction } from 'react';
+import { logout } from '~/actions/auth';
 import {
   AlertDialog,
   AlertDialogAction,
@@ -11,7 +12,6 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from '../ui/AlertDialog';
-import { logout } from '~/actions/auth';
 
 type SignOutModalProps = {
   openSignOutModal: boolean;
@@ -39,7 +39,7 @@ const SignOutModal = ({
           <AlertDialogCancel onClick={() => setOpenSignOutModal(false)}>
             Cancel
           </AlertDialogCancel>
-          <AlertDialogAction onClick={() => void logout()}>
+          <AlertDialogAction onClick={() => logout()}>
             Sign Out and Hide Banner
           </AlertDialogAction>
         </AlertDialogFooter>

fresco.config.ts

@@ -1,5 +1,6 @@
 export const PROTOCOL_EXTENSION = '.netcanvas';
-export const APP_SUPPORTED_SCHEMA_VERSIONS = [7];
+export const APP_SUPPORTED_SCHEMA_VERSIONS = [7, 8];
+
 // If unconfigured, the app will shut down after 2 hours (7200000 ms)
 export const UNCONFIGURED_TIMEOUT = 7200000;
 

hooks/useProtocolImport.tsx

@@ -1,3 +1,4 @@
+import { validateProtocol } from '@codaco/protocol-validation';
 import { queue } from 'async';
 import { XCircle } from 'lucide-react';
 import { hash } from 'ohash';
@@ -12,7 +13,7 @@ import {
 import { AlertDialogDescription } from '~/components/ui/AlertDialog';
 import { APP_SUPPORTED_SCHEMA_VERSIONS } from '~/fresco.config';
 import { uploadFiles } from '~/lib/uploadthing-client-helpers';
-import { getExistingAssetIds, getProtocolByHash } from '~/queries/protocols';
+import { getNewAssetIds, getProtocolByHash } from '~/queries/protocols';
 import { type AssetInsertType } from '~/schemas/protocol';
 import { DatabaseError } from '~/utils/databaseError';
 import { ensureError } from '~/utils/ensureError';
@@ -87,8 +88,6 @@ export const useProtocolImport = () => {
         return;
       }
 
-      const { validateProtocol } = await import('@codaco/protocol-validation');
-
       const validationResult = await validateProtocol(protocolJson);
 
       if (!validationResult.isValid) {
@@ -130,7 +129,7 @@ export const useProtocolImport = () => {
                       ...validationResult.logicErrors,
                     ].map((validationError, i) => (
                       <li className="flex capitalize" key={i}>
-                        <XCircle className="mr-2 h-4 w-4 text-destructive" />
+                        <XCircle className="text-destructive mr-2 h-4 w-4" />
                         <span>
                           {validationError.message}{' '}
                           <span className="text-xs italic">
@@ -176,30 +175,44 @@ export const useProtocolImport = () => {
         return;
       }
 
-      const assets = await getProtocolAssets(protocolJson, zip);
-
-      const newAssets: typeof assets = [];
+      const { fileAssets, apikeyAssets } = await getProtocolAssets(
+        protocolJson,
+        zip,
+      );
 
+      const newAssets: typeof fileAssets = [];
       const existingAssetIds: string[] = [];
-
-      let newAssetsWithCombinedMetadata: AssetInsertType = [];
+      let newAssetsWithCombinedMetadata: AssetInsertType[] = [];
+      const newApikeyAssets: typeof apikeyAssets = [];
 
       // Check if the assets are already in the database.
       // If yes, add them to existingAssetIds to be connected to the protocol.
-      // If not, add them to newAssets to be uploaded.
-
+      // If not, add files to newAssets to be uploaded
+      // and add apikeys to newApikeyAssets to be created in the database with the protocol
       try {
-        const newAssetIds = await getExistingAssetIds(
-          assets.map((asset) => asset.assetId),
+        const newFileAssetIds = await getNewAssetIds(
+          fileAssets.map((asset) => asset.assetId),
         );
 
-        assets.forEach((asset) => {
-          if (newAssetIds.includes(asset.assetId)) {
+        fileAssets.forEach((asset) => {
+          if (newFileAssetIds.includes(asset.assetId)) {
             newAssets.push(asset);
           } else {
             existingAssetIds.push(asset.assetId);
           }
         });
+
+        const newApikeyAssetIds = await getNewAssetIds(
+          apikeyAssets.map((apiKey) => apiKey.assetId),
+        );
+
+        apikeyAssets.forEach((apiKey) => {
+          if (newApikeyAssetIds.includes(apiKey.assetId)) {
+            newApikeyAssets.push(apiKey);
+          } else {
+            existingAssetIds.push(apiKey.assetId);
+          }
+        });
       } catch (e) {
         throw new Error('Error checking for existing assets');
       }
@@ -304,7 +317,7 @@ export const useProtocolImport = () => {
       const result = await insertProtocol({
         protocol: protocolJson,
         protocolName: fileName,
-        newAssets: newAssetsWithCombinedMetadata,
+        newAssets: [...newAssetsWithCombinedMetadata, ...newApikeyAssets],
         existingAssetIds: existingAssetIds,
       });
 

lib/cache.ts

@@ -10,7 +10,7 @@ type StaticTag =
   | 'getProtocols'
   | 'getInterviewsForExport'
   | 'getProtocolsByHash'
-  | 'getExistingAssetIds'
+  | 'getNewAssetIds'
   | 'interviewCount'
   | 'protocolCount'
   | 'participantCount';

lib/interviewer/behaviours/DragAndDrop/reducer.js

@@ -1,14 +1,14 @@
 import { omit } from 'es-toolkit';
 import { filter, isEmpty, some } from 'es-toolkit/compat';
 
-const UPSERT_TARGET = Symbol('DRAG_AND_DROP/UPSERT_TARGET');
-const RENAME_TARGET = Symbol('DRAG_AND_DROP/RENAME_TARGET');
-const REMOVE_TARGET = Symbol('DRAG_AND_DROP/REMOVE_TARGET');
-const UPSERT_OBSTACLE = Symbol('DRAG_AND_DROP/UPSERT_OBSTACLE');
-const REMOVE_OBSTACLE = Symbol('DRAG_AND_DROP/REMOVE_OBSTACLE');
-const DRAG_START = Symbol('DRAG_AND_DROP/DRAG_START');
-const DRAG_MOVE = Symbol('DRAG_AND_DROP/DRAG_MOVE');
-const DRAG_END = Symbol('DRAG_AND_DROP/DRAG_END');
+const UPSERT_TARGET = 'DRAG_AND_DROP/UPSERT_TARGET';
+const RENAME_TARGET = 'DRAG_AND_DROP/RENAME_TARGET';
+const REMOVE_TARGET = 'DRAG_AND_DROP/REMOVE_TARGET';
+const UPSERT_OBSTACLE = 'DRAG_AND_DROP/UPSERT_OBSTACLE';
+const REMOVE_OBSTACLE = 'DRAG_AND_DROP/REMOVE_OBSTACLE';
+const DRAG_START = 'DRAG_AND_DROP/DRAG_START';
+const DRAG_MOVE = 'DRAG_AND_DROP/DRAG_MOVE';
+const DRAG_END = 'DRAG_AND_DROP/DRAG_END';
 
 const initialState = {
   targets: [],

lib/interviewer/behaviours/DragAndDrop/store.js

@@ -1,10 +1,14 @@
-import thunk from 'redux-thunk';
-import reducer from './reducer';
 import { configureStore } from '@reduxjs/toolkit';
+import reducer from './reducer';
 
 const store = configureStore({
   reducer,
-  middleware: [thunk],
+  // We need to remove the default middleware to avoid errors related to values that can't be serialized (onDrop functions)
+  // We need the thunk middleware, though!
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware({
+      serializableCheck: false,
+    }),
 });
 
 export default store;

lib/interviewer/components/CollapsablePrompts.js

@@ -4,7 +4,7 @@ import { useEffect, useRef, useState } from 'react';
 import Prompts from './Prompts';
 
 const CollapsablePrompts = (props) => {
-  const { currentPromptIndex, dragConstraints } = props;
+  const { currentPromptIndex, dragConstraints, children } = props;
   const ref = useRef(null);
   const [minimized, setMinimized] = useState(false);
 
@@ -66,8 +66,10 @@ const CollapsablePrompts = (props) => {
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
               exit={{ opacity: 0 }}
+              className="flex flex-col items-center"
             >
               <Prompts />
+              {children}
             </motion.div>
           )}
         </AnimatePresence>

lib/interviewer/components/Node.js

@@ -1,14 +1,12 @@
 import { useSelector } from 'react-redux';
+import { getEntityAttributes } from '~/lib/interviewer/ducks/modules/network';
 import UINode from '~/lib/ui/components/Node';
-import {
-  getNodeColor, labelLogic,
-} from '../selectors/network';
+import { getNodeColor, labelLogic } from '../selectors/network';
 import { getProtocolCodebook } from '../selectors/protocol';
-import { getEntityAttributes } from '~/lib/interviewer/ducks/modules/network';
 
 /**
-  * Renders a Node.
-  */
+ * Renders a Node.
+ */
 
 const Node = (props) => {
   const { type } = props;

lib/interviewer/components/Prompts.js

@@ -1,13 +1,10 @@
-import React from 'react';
 import UIPrompts from '~/lib/ui/components/Prompts/Prompts';
-import { useSelector } from 'react-redux';
 import { usePrompts } from '../behaviours/withPrompt';
 
 const Prompts = () => {
   const { prompt, prompts } = usePrompts();
-  const speakable = useSelector((state) => state.deviceSettings.enableExperimentalTTS);
 
-  return <UIPrompts speakable={speakable} currentPromptId={prompt.id} prompts={prompts} />;
+  return <UIPrompts currentPromptId={prompt.id} prompts={prompts} />;
 };
 
 export default Prompts;