Make the error handling playwright test pass in the new survey form

integrationTesting/tests/organize/surveys/submitting-survey.spec.ts

@@ -165,7 +165,7 @@ test.describe('User submitting a survey', () => {
     expect(data.signature).toBe(null);
   });
 
-  test.skip('preserves inputs on error', async ({ page }) => {
+  test('preserves inputs on error', async ({ page }) => {
     await page.click('input[name="1.options"][value="1"]');
     await page.fill('input[name="2.text"]', 'Topple capitalism');
     await page.click('input[name="sig"][value="anonymous"]');

next.config.js

@@ -1,7 +1,4 @@
 module.exports = {
-  experimental: {
-    serverActions: true,
-  },
   images: {
     domains: [
       `files.${process.env.ZETKIN_API_DOMAIN}`,

package.json

@@ -58,15 +58,15 @@
     "marked": "^4.0.16",
     "mui-rff": "^6.1.2",
     "negotiator": "^0.6.2",
-    "next": "13.5.6",
+    "next": "14.1.0",
     "next-session": "^3.4.0",
     "node-xlsx": "^0.21.0",
     "nprogress": "^0.2.0",
     "random-seed": "^0.3.0",
-    "react": "^18.2.0",
+    "react": "18.3.0-canary-763612647-20240126",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
-    "react-dom": "^18.2.0",
+    "react-dom": "18.3.0-canary-763612647-20240126",
     "react-dropzone": "^14.2.1",
     "react-final-form": "^6.5.9",
     "react-intl": "^6.1.0",

src/app/o/[orgId]/surveys/[surveyId]/page.tsx

@@ -1,7 +1,6 @@
 'use server';
 
 import BackendApiClient from 'core/api/client/BackendApiClient';
-import { submit } from 'features/surveys/actions/submit';
 import SurveyForm from 'features/surveys/components/surveyForm/SurveyForm';
 import { ZetkinSurveyExtended } from 'utils/types/zetkin';
 import { FC, ReactElement } from 'react';
@@ -13,15 +12,15 @@ type PageProps = {
   };
 };
 
-/* @ts-expect-error Server Component */
+// @ts-expect-error Async support missing
 const Page: FC<PageProps> = async ({ params }): Promise<ReactElement> => {
   const { orgId, surveyId } = params;
   const apiClient = new BackendApiClient({});
   const survey = await apiClient.get<ZetkinSurveyExtended>(
     `/api/orgs/${orgId}/surveys/${surveyId}`
   );
 
-  return <SurveyForm action={submit} survey={survey} />;
+  return <SurveyForm survey={survey} />;
 };
 
 export default Page;

src/features/surveys/actions/submit.ts

@@ -2,15 +2,22 @@
 
 import BackendApiClient from 'core/api/client/BackendApiClient';
 import prepareSurveyApiSubmission from 'features/surveys/utils/prepareSurveyApiSubmission';
-import { redirect } from 'next/navigation';
+import { ZetkinSurveyFormStatus } from 'utils/types/zetkin';
 
-export async function submit(formData: FormData) {
+export async function submit(
+  prevState: ZetkinSurveyFormStatus,
+  formData: FormData
+): Promise<ZetkinSurveyFormStatus> {
   const data = Object.fromEntries([...formData.entries()]);
   const submission = prepareSurveyApiSubmission(data, false);
   const apiClient = new BackendApiClient({});
-  await apiClient.post(
-    `/api/orgs/${data.orgId}/surveys/${data.surveyId}/submissions`,
-    submission
-  );
-  redirect(`/o/${data.orgId}/surveys/${data.surveyId}/submitted`);
+  try {
+    await apiClient.post(
+      `/api/orgs/${data.orgId}/surveys/${data.surveyId}/submissions`,
+      submission
+    );
+  } catch (e) {
+    return 'error';
+  }
+  return 'submitted';
 }

src/features/surveys/components/surveyForm/SurveyForm.tsx

@@ -1,39 +1,55 @@
 'use client';
 
 import { FC } from 'react';
+import { submit } from 'features/surveys/actions/submit';
 import SurveyElements from './SurveyElements';
 import SurveyHeading from './SurveyHeading';
 import SurveyPrivacyPolicy from './SurveyPrivacyPolicy';
 import SurveySignature from './SurveySignature';
 import SurveySubmitButton from './SurveySubmitButton';
+import SurveySuccess from './SurveySuccess';
 import {
   ZetkinSurveyExtended,
   ZetkinSurveyFormStatus,
 } from 'utils/types/zetkin';
 
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { useFormState } from 'react-dom';
+
 export type SurveyFormProps = {
-  action: (formData: FormData) => Promise<void>;
   survey: ZetkinSurveyExtended;
 };
 
-const SurveyForm: FC<SurveyFormProps> = ({ action, survey }) => {
-  const status = 'editing' as ZetkinSurveyFormStatus;
+const SurveyForm: FC<SurveyFormProps> = ({ survey }) => {
+  const [status, action] = useFormState<ZetkinSurveyFormStatus>(
+    submit,
+    'editing'
+  );
 
   if (!survey) {
     return null;
   }
 
   return (
     <>
-      <SurveyHeading status={status} survey={survey as ZetkinSurveyExtended} />
-      <form action={action as unknown as string}>
-        <input name="orgId" type="hidden" value={survey.organization.id} />
-        <input name="surveyId" type="hidden" value={survey.id} />
-        <SurveyElements survey={survey as ZetkinSurveyExtended} />
-        <SurveySignature survey={survey as ZetkinSurveyExtended} />
-        <SurveyPrivacyPolicy survey={survey as ZetkinSurveyExtended} />
-        <SurveySubmitButton />
-      </form>
+      {(status === 'editing' || status === 'error') && (
+        <>
+          <SurveyHeading
+            status={status}
+            survey={survey as ZetkinSurveyExtended}
+          />
+          <form action={action as unknown as string}>
+            <input name="orgId" type="hidden" value={survey.organization.id} />
+            <input name="surveyId" type="hidden" value={survey.id} />
+            <SurveyElements survey={survey as ZetkinSurveyExtended} />
+            <SurveySignature survey={survey as ZetkinSurveyExtended} />
+            <SurveyPrivacyPolicy survey={survey as ZetkinSurveyExtended} />
+            <SurveySubmitButton />
+          </form>
+        </>
+      )}
+      {status === 'submitted' && <SurveySuccess survey={survey} />}
     </>
   );
 };