Get server action working

next.config.js

@@ -1,4 +1,7 @@
 module.exports = {
+  experimental: {
+    serverActions: true,
+  },
   images: {
     domains: [
       `files.${process.env.ZETKIN_API_DOMAIN}`,
@@ -59,7 +62,7 @@ module.exports = {
       },
       // all paths with /o redirected to Gen2
       {
-        source: '/o/:path*',
+        source: '/o/(!.+\\/surveys):path*',
         destination: `http://${process.env.ZETKIN_API_DOMAIN}/o/:path*`,
         permanent: false,
       },

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

@@ -1,11 +1,8 @@
-import BackendApiClient from 'core/api/client/BackendApiClient';
-import { Container } from '@mui/material';
+'use server';
+
 import { FC } from 'react';
-import prepareSurveyApiSubmission from 'features/surveys/utils/prepareSurveyApiSubmission';
+import { submit } from 'features/surveys/actions/submit';
 import SurveyForm from 'features/surveys/components/surveyForm/SurveyForm';
-// import { useRouter } from 'next/navigation';
-import useSurvey from 'features/surveys/hooks/useSurvey';
-import { ZetkinSurveyExtended } from 'utils/types/zetkin';
 
 type PageProps = {
   params: {
@@ -15,33 +12,12 @@ type PageProps = {
 };
 
 const Page: FC<PageProps> = ({ params }) => {
-  // const router = useRouter();
-
-  const { data: survey } = useSurvey(
-    parseInt(params.orgId, 10),
-    parseInt(params.surveyId, 10)
-  );
-
-  const submit = async (formData: FormData): Promise<void> => {
-    const submission = prepareSurveyApiSubmission(
-      Object.fromEntries([...formData.entries()]),
-      false
-    );
-    const apiClient = new BackendApiClient({});
-    await apiClient.post(
-      `/api/orgs/${params.orgId}/surveys/${params.surveyId}/submissions`,
-      submission
-    );
-  };
-
-  if (!survey) {
-    return null;
-  }
-
   return (
-    <Container style={{ height: '100vh' }}>
-      <SurveyForm action={submit} survey={survey as ZetkinSurveyExtended} />
-    </Container>
+    <SurveyForm
+      action={submit}
+      orgId={params.orgId}
+      surveyId={params.surveyId}
+    />
   );
 };
 

src/features/surveys/actions/submit.ts

@@ -0,0 +1,16 @@
+'use server';
+
+import BackendApiClient from 'core/api/client/BackendApiClient';
+import prepareSurveyApiSubmission from 'features/surveys/utils/prepareSurveyApiSubmission';
+import { redirect } from 'next/navigation';
+
+export async function submit(formData: FormData) {
+  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`);
+}

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

@@ -6,26 +6,39 @@ import SurveyHeading from './SurveyHeading';
 import SurveyPrivacyPolicy from './SurveyPrivacyPolicy';
 import SurveySignature from './SurveySignature';
 import SurveySubmitButton from './SurveySubmitButton';
+import useSurvey from 'features/surveys/hooks/useSurvey';
 import {
   ZetkinSurveyExtended,
   ZetkinSurveyFormStatus,
 } from 'utils/types/zetkin';
 
 export type SurveyFormProps = {
   action: (formData: FormData) => Promise<void>;
-  survey: ZetkinSurveyExtended;
+  orgId: string;
+  surveyId: string;
 };
 
-const SurveyForm: FC<SurveyFormProps> = ({ action, survey }) => {
+const SurveyForm: FC<SurveyFormProps> = ({ action, orgId, surveyId }) => {
   const status = 'editing' as ZetkinSurveyFormStatus;
 
+  const { data: survey } = useSurvey(
+    parseInt(orgId, 10),
+    parseInt(surveyId, 10)
+  );
+
+  if (!survey) {
+    return null;
+  }
+
   return (
     <>
       <SurveyHeading status={status} survey={survey as ZetkinSurveyExtended} />
       <form action={action as unknown as string}>
-        <SurveyElements survey={survey} />
-        <SurveySignature survey={survey} />
-        <SurveyPrivacyPolicy survey={survey} />
+        <input name="orgId" type="hidden" value={orgId} />
+        <input name="surveyId" type="hidden" value={surveyId} />
+        <SurveyElements survey={survey as ZetkinSurveyExtended} />
+        <SurveySignature survey={survey as ZetkinSurveyExtended} />
+        <SurveyPrivacyPolicy survey={survey as ZetkinSurveyExtended} />
         <SurveySubmitButton />
       </form>
     </>