Bug Fix: Proper handling of empty assets in deleteProtocols

.eslintrc.cjs

@@ -6,7 +6,8 @@ const config = {
   overrides: [
     {
       extends: [
-        'plugin:@typescript-eslint/recommended-requiring-type-checking',
+        'plugin:@typescript-eslint/stylistic-type-checked',
+        'plugin:@typescript-eslint/recommended-type-checked',
       ],
       files: ['*.ts', '*.tsx'],
       parserOptions: {
@@ -20,13 +21,16 @@ const config = {
   },
   plugins: ['@typescript-eslint', 'eslint-plugin-local-rules'],
   extends: [
-    'next/core-web-vitals',
+    'eslint:recommended',
+    'plugin:@typescript-eslint/stylistic',
     'plugin:@typescript-eslint/recommended',
+    'next/core-web-vitals',
     'plugin:storybook/recommended',
     'prettier',
   ],
-  ignorePatterns: ['node_modules', 'lib', '*.stories.*', '*.test.*'],
+  ignorePatterns: ['node_modules', '*.stories.*', '*.test.*'],
   rules: {
+    "@typescript-eslint/consistent-type-definitions": ['error', 'type'],
     'no-process-env': 'error',
     'no-console': 'error',
     '@typescript-eslint/consistent-type-imports': [

README.md

@@ -1,6 +1,14 @@
-# fresco-setup-test
+# Fresco
 
-## Deploy your own instance of Fresco
+The Fresco project aims to bring Network Canvas interviews to the web browser. It is a pilot project that does not
+add new features to Network Canvas, but rather provides a new way to conduct interviews.
+
+## Known Limitations
+
+- Custom node label workers are not implemented.
+- Videos and audio cannot autoplay on load due to browser limitations. Participants must click the play button to start media.
+
+# Deployment instructions
 
 **1. Set up required servies**
 - Create a database with [PlanetScale](https://planetscale.com/docs/tutorials/planetscale-quick-start-guide)

app/(dashboard)/dashboard/_components/ParticipantsTable/Columns.tsx

@@ -42,11 +42,10 @@ export const ParticipantColumns =
       },
       cell: ({ row }) => (
         <Link
-          target="_blank"
           className="text-blue-500 underline hover:text-blue-300"
-          href={`/interview/${row.original.id}`}
+          href={`/participant/${row.original.id}`}
         >
-          interview/{row.original.id}
+          Participant page
         </Link>
       ),
       enableSorting: false,

app/(dashboard)/dashboard/participants/_components/ParticipantModal.tsx

@@ -18,6 +18,7 @@ import ActionError from '~/components/ActionError';
 import { api } from '~/trpc/client';
 import { participantIdentifierSchema } from '~/shared/schemas';
 import type { Participant } from '@prisma/client';
+import { clientRevalidateTag } from '~/utils/clientRevalidate';
 
 interface ParticipantModalProps {
   open: boolean;
@@ -59,6 +60,7 @@ function ParticipantModal({
         setIsLoading(true);
       },
       async onSuccess() {
+        void clientRevalidateTag('participant.get.all');
         await utils.participant.get.invalidate();
       },
       onError(error) {
@@ -79,6 +81,7 @@ function ParticipantModal({
         setError(error.message);
       },
       onSettled() {
+        void clientRevalidateTag('participant.get.all');
         setIsLoading(false);
       },
     },

app/(interview)/interview/[interviewId]/page.tsx

@@ -4,15 +4,21 @@ import InterviewNavigation from '~/app/(interview)/interview/_components/Intervi
 import type { NcNetwork, Protocol } from '@codaco/shared-consts';
 import Link from 'next/link';
 import { api } from '~/trpc/server';
-import { Button } from '~/components/ui/Button';
+import InterviewShell from '../_components/InterviewShell';
+import NoSSRWrapper from '~/utils/NoSSRWrapper';
+import Test from '../_components/Test';
+
+export const dynamic = 'force-dynamic';
 
 export default async function Page({
-  params: { interviewId },
+  params,
 }: {
   params: { interviewId: string };
 }) {
+  const { interviewId } = params;
   // Fetch interview data from the database
   if (!interviewId) {
+    console.log('no interview ID...creating one');
     return 'No interview id found';
   }
 
@@ -31,16 +37,9 @@ export default async function Page({
       initialNetwork={initialNetwork}
       protocol={interviewProtocol}
     >
-      <div className="flex grow flex-col justify-between p-10">
-        <h1 className="text-3xl">Interview</h1>
-        <Link href="/">
-          <Button>Exit Interview</Button>
-        </Link>
-        <Stage />
-        <aside className="flex items-center justify-center">
-          <InterviewNavigation />
-        </aside>
-      </div>
+      <NoSSRWrapper>
+        <InterviewShell />
+      </NoSSRWrapper>
     </InterviewProvider>
   );
 }

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

@@ -0,0 +1,31 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { useRef } from 'react';
+import { Provider } from 'react-redux';
+import DialogManager from '~/lib/interviewer/components/DialogManager';
+import { SettingsMenu } from '~/lib/interviewer/components/SettingsMenu';
+import ProtocolScreen from '~/lib/interviewer/containers/ProtocolScreen';
+import configureAppStore from '~/lib/interviewer/store';
+import { useInterview } from '~/providers/InterviewProvider';
+
+const InterviewShell = () => {
+  const { protocol, network, currentStageIndex } = useInterview();
+
+  // I'm not sure this needs to be in a ref?
+  const store = useRef(
+    configureAppStore({ protocol, network, currentStageIndex }),
+  );
+
+  return (
+    <motion.div className="grid h-[100vh] grid-cols-2">
+      <Provider store={store.current}>
+        <ProtocolScreen />
+        <SettingsMenu />
+        <DialogManager />
+      </Provider>
+    </motion.div>
+  );
+};
+
+export default InterviewShell;

app/(interview)/interview/layout.tsx

@@ -6,7 +6,11 @@ export const metadata = {
 };
 
 function RootLayout({ children }: { children: React.ReactNode }) {
-  return <main className="min-h-screen bg-violet-200">{children}</main>;
+  return (
+    <main className="min-h-screen " style={{ background: 'var(--background)' }}>
+      {children}
+    </main>
+  );
 }
 
 export default RootLayout;

app/(interview)/interview/new/page.tsx

@@ -1,13 +1,9 @@
-/**
- * The interview/new route should create a new interview item in the database,
- * and then redirect to the interview/[id]/1 route.
- */
-
 import { redirect } from 'next/navigation';
 import { api } from '~/trpc/server';
 import { faker } from '@faker-js/faker';
 import { participantIdentifierSchema } from '~/shared/schemas';
 import { ErrorMessage } from '~/app/(interview)/interview/_components/ErrorMessage';
+
 export const dynamic = 'force-dynamic';
 
 export default async function Page({
@@ -59,13 +55,15 @@ export default async function Page({
   }
 
   // Create the interview
-  const { createdInterview, error } =
+  const { error, createdInterview } =
     await api.interview.create.mutate(identifier);
 
   if (error || !createdInterview) {
     throw new Error(error || 'An error occurred while creating the interview');
   }
 
+  // TODO: check if the identifier already exists.
+
   // Redirect to the interview/[id] route
   redirect(`/interview/${createdInterview.id}`);
 }

app/(interview)/participant/[participantId]/page.tsx

@@ -0,0 +1,17 @@
+import Link from 'next/link';
+import { Button } from '~/components/ui/Button';
+
+export default function Page({
+  params,
+}: {
+  params: { participantId: string };
+}) {
+  return (
+    <div>
+      <h1>Page for {params.participantId}</h1>
+      <Link href={`/interview/new?identifier=${params.participantId}`}>
+        <Button>Start Interview</Button>
+      </Link>
+    </div>
+  );
+}

app/(onboard)/setup/page.tsx

@@ -69,12 +69,12 @@ function Page() {
     }
 
     if (!session && currentStep !== 1) {
-      setCurrentStep(1).catch(() => {});
+      void setCurrentStep(1);
       return;
     }
 
     if (session && currentStep === 1) {
-      setCurrentStep(2).catch(() => {});
+      void setCurrentStep(2);
       return;
     }
   }, [isLoading, session, currentStep, setCurrentStep]);

lib/interviewer/__mocks__/electron-log.js

@@ -0,0 +1,13 @@
+/* eslint-env jest */
+
+module.exports = {
+  transports: {
+    console: {
+    },
+    file: {
+    },
+  },
+  debug: jest.fn(),
+  error: jest.fn(),
+  info: jest.fn(),
+};

lib/interviewer/__mocks__/fs.js

@@ -0,0 +1,9 @@
+/* eslint-env jest */
+
+const rfs = jest.requireActual('fs');
+
+const fs = jest.genMockFromModule('fs');
+
+fs.readFileSync = rfs.readFileSync;
+
+module.exports = fs;

lib/interviewer/__mocks__/path.js

@@ -0,0 +1,5 @@
+const path = {
+  join: (...args) => args.join('/'),
+};
+
+module.exports = path;

lib/interviewer/__mocks__/request-promise-native.js

@@ -0,0 +1,3 @@
+const request = ({ uri }) => Promise.resolve(`DUMMY DATA//${uri}`);
+
+module.exports = request;

lib/interviewer/behaviours/AssetMetaProvider.js

@@ -0,0 +1,18 @@
+import { useSelector } from 'react-redux';
+import { getAssetManifest } from '../selectors/protocol';
+
+const AssetMetaProvider = ({ children, assetId }) => {
+  const codebookAssets = useSelector((state) => getAssetManifest(state));
+
+  const asset = codebookAssets[assetId];
+
+  if (!codebookAssets) {
+    // eslint-disable-next-line no-console
+    console.log('error loading asset!', assetId);
+    return null;
+  }
+
+  return children(asset);
+}
+
+export default AssetMetaProvider;