implement registerBeforeNext and onComplete functionalities

app/(dashboard)/dashboard/_components/ProtocolUploader.tsx

@@ -8,9 +8,14 @@ import { AnimatePresence, motion } from 'framer-motion';
 import JobCard from '~/components/ProtocolImport/JobCard';
 import { useCallback } from 'react';
 
-export default function ProtocolUploader() {
-  const { importProtocols, jobs, cancelJob, cancelAllJobs } =
-    useProtocolImport();
+export default function ProtocolUploader({
+  handleProtocolUploaded,
+}: {
+  handleProtocolUploaded?: () => void;
+}) {
+  const { importProtocols, jobs, cancelJob, cancelAllJobs } = useProtocolImport(
+    handleProtocolUploaded,
+  );
 
   const { getRootProps, getInputProps, open } = useDropzone({
     // Disable automatic opening of file dialog - we do it manually to allow for

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

@@ -1,120 +1,93 @@
 'use client';
 
-import { isEqual } from 'lodash';
-import { useQueryState } from 'next-usequerystate';
-import { useEffect, useState } from 'react';
-import { Provider, useSelector } from 'react-redux';
-import usePrevious from '~/hooks/usePrevious';
+import { Provider } from 'react-redux';
 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 { getActiveSession } from '~/lib/interviewer/selectors/session';
 import { store } from '~/lib/interviewer/store';
 import { api } from '~/trpc/client';
 import { useRouter } from 'next/navigation';
-
-// The job of ServerSync is to listen to actions in the redux store, and to sync
-// data with the server.
-const ServerSync = ({ interviewId }: { interviewId: string }) => {
-  const [init, setInit] = useState(false);
-  // Current stage
-  const currentSession = useSelector(getActiveSession);
-  const prevCurrentSession = usePrevious(currentSession);
-  const { mutate: syncSessionWithServer } = api.interview.sync.useMutation();
-
-  useEffect(() => {
-    if (!init) {
-      setInit(true);
-      return;
-    }
-
-    if (
-      isEqual(currentSession, prevCurrentSession) ||
-      !currentSession ||
-      !prevCurrentSession
-    ) {
-      return;
-    }
-
-    // check if current stage index is null (happens when hot reloading)
-    if (currentSession.currentStep === null) {
-      // eslint-disable-next-line no-console
-      console.log('⚠️ Current stage index is null. Skipping sync.');
-      return;
-    }
-
-    // eslint-disable-next-line no-console
-    console.log(`⬆️ Syncing session with server...`);
-    syncSessionWithServer({
-      id: interviewId,
-      network: currentSession.network,
-      currentStep: currentSession.currentStep,
-    });
-  }, [
-    currentSession,
-    prevCurrentSession,
-    interviewId,
-    syncSessionWithServer,
-    init,
-  ]);
-
-  return null;
-};
+import ServerSync from './ServerSync';
+import { parseAsInteger, useQueryState } from 'nuqs';
+import { useEffect, useState } from 'react';
+import { Spinner } from '~/lib/ui/components';
 
 // The job of interview shell is to receive the server-side session and protocol
 // and create a redux store with that data.
 // Eventually it will handle syncing this data back.
 const InterviewShell = ({ interviewID }: { interviewID: string }) => {
-  const [currentStage, setCurrentStage] = useQueryState('stage');
   const router = useRouter();
+  const [initialized, setInitialized] = useState(false);
+
+  const [currentStage, setCurrentStage] = useQueryState(
+    'stage',
+    parseAsInteger,
+  );
 
-  const { isLoading } = api.interview.get.byId.useQuery(
+  const { isLoading, data: serverData } = api.interview.get.byId.useQuery(
     { id: interviewID },
     {
       refetchOnMount: false,
       refetchOnWindowFocus: false,
       refetchOnReconnect: false,
-      onSuccess: async (data) => {
-        if (!data) {
-          return;
-        }
-        if (data.finishTime) {
-          router.push('/interview/finished');
-        }
+    },
+  );
 
-        const { protocol, ...serverSession } = data;
+  useEffect(() => {
+    if (initialized || !serverData) {
+      return;
+    }
 
-        // eslint-disable-next-line no-console
-        console.log(
-          '✅ Received server session. Setting current stage, and initializing redux store...',
-        );
+    // If the interview is finished, redirect to the finish page
+    if (serverData.finishTime) {
+      router.push('/interview/finished');
+      return;
+    }
 
-        if (!currentStage) {
-          await setCurrentStage(serverSession.currentStep.toString());
-        }
+    const { protocol, ...serverSession } = serverData;
+
+    // If we have a current stage in the URL bar, and it is different from the
+    // server session, set the server session to the current stage.
+    //
+    // If we don't have a current stage in the URL bar, set it to the server
+    // session, and set the URL bar to the server session.
+    if (currentStage === null) {
+      void setCurrentStage(serverSession.currentStep);
+    } else if (currentStage !== serverSession.currentStep) {
+      serverSession.currentStep = currentStage;
+    }
 
-        store.dispatch<SetServerSessionAction>({
-          type: SET_SERVER_SESSION,
-          payload: {
-            protocol,
-            session: serverSession,
-          },
-        });
+    // If there's no current stage in the URL bar, set it.
+    store.dispatch<SetServerSessionAction>({
+      type: SET_SERVER_SESSION,
+      payload: {
+        protocol,
+        session: serverSession,
       },
-    },
-  );
+    });
+
+    setInitialized(true);
+  }, [
+    serverData,
+    currentStage,
+    setCurrentStage,
+    router,
+    initialized,
+    setInitialized,
+  ]);
 
   if (isLoading) {
-    return 'Second loading stage...';
+    return <Spinner />;
   }
 
   return (
     <Provider store={store}>
-      <ServerSync interviewId={interviewID} />
-      <ProtocolScreen />
+      <ServerSync interviewId={interviewID}>
+        <ProtocolScreen />
+      </ServerSync>
       <DialogManager />
     </Provider>
   );

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

@@ -0,0 +1,61 @@
+'use client';
+
+import { isEqual } from 'lodash';
+import { type ReactNode, useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+import usePrevious from '~/hooks/usePrevious';
+import { getActiveSession } from '~/lib/interviewer/selectors/session';
+import { api } from '~/trpc/client';
+
+// The job of ServerSync is to listen to actions in the redux store, and to sync
+// data with the server.
+const ServerSync = ({
+  interviewId,
+  children,
+}: {
+  interviewId: string;
+  children: ReactNode;
+}) => {
+  const [init, setInit] = useState(false);
+  // Current stage
+  const currentSession = useSelector(getActiveSession);
+  const prevCurrentSession = usePrevious(currentSession);
+  const { mutate: syncSessionWithServer } = api.interview.sync.useMutation();
+
+  useEffect(() => {
+    if (!init) {
+      setInit(true);
+      return;
+    }
+
+    if (
+      isEqual(currentSession, prevCurrentSession) ||
+      !currentSession ||
+      !prevCurrentSession
+    ) {
+      return;
+    }
+
+    // eslint-disable-next-line no-console
+    console.log(`⬆️ Syncing session with server...`);
+    syncSessionWithServer({
+      id: interviewId,
+      network: currentSession.network,
+      currentStep: currentSession.currentStep ?? 0,
+    });
+  }, [
+    currentSession,
+    prevCurrentSession,
+    interviewId,
+    syncSessionWithServer,
+    init,
+  ]);
+
+  if (!init) {
+    return <div>Sync Loading (no init)...</div>;
+  }
+
+  return children;
+};
+
+export default ServerSync;

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

@@ -10,7 +10,7 @@ export default async function Page({
   searchParams,
 }: {
   searchParams: {
-    identifier?: string;
+    participantIdentifier?: string;
   };
 }) {
   const activeProtocol = await api.protocol.active.get.query();
@@ -45,10 +45,11 @@ export default async function Page({
   // Anonymous recruitment is enabled
 
   // Use the identifier from the URL, or generate a new one
-  const identifier = searchParams.identifier ?? faker.string.uuid();
+  const participantIdentifier =
+    searchParams.participantIdentifier ?? faker.string.uuid();
 
   // Validate the identifier
-  const isValid = participantIdentifierSchema.parse(identifier);
+  const isValid = participantIdentifierSchema.parse(participantIdentifier);
 
   if (!isValid) {
     return (
@@ -60,8 +61,9 @@ export default async function Page({
   }
 
   // Create the interview
-  const { createdInterviewId, error } =
-    await api.interview.create.mutate(identifier);
+  const { createdInterviewId, error } = await api.interview.create.mutate(
+    participantIdentifier,
+  );
 
   if (error) {
     throw new Error('An error occurred while creating the interview');