Making SurveyFooter a server component

error

 ⨯ node_modules/@emotion/react/dist/emotion-element-c16c303e.esm.js (14:41) @ React
 ⨯ createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component
    at eval (webpack-internal:///(rsc)/./node_modules/@emotion/react/dist/emotion-element-c16c303e.esm.js:35:92)
    at (rsc)/./node_modules/@emotion/react/dist/emotion-element-c16c303e.esm.js (/Users/henrycatalinismith/zetkin/app.zetkin.org/.next/server/vendor-chunks/@emotion.js:210:1)
    at __webpack_require__ (/Users/henrycatalinismith/zetkin/app.zetkin.org/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/@emotion/styled/base/dist/emotion-styled-base.esm.js:9:72)
    at (rsc)/./node_modules/@emotion/styled/base/dist/emotion-styled-base.esm.js (/Users/henrycatalinismith/zetkin/app.zetkin.org/.next/server/vendor-chunks/@emotion.js:250:1)
    at __webpack_require__ (/Users/henrycatalinismith/zetkin/app.zetkin.org/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/@emotion/styled/dist/emotion-styled.esm.js:5:95)
    at (rsc)/./node_modules/@emotion/styled/dist/emotion-styled.esm.js (/Users/henrycatalinismith/zetkin/app.zetkin.org/.next/server/vendor-chunks/@emotion.js:260:1)
    at __webpack_require__ (/Users/henrycatalinismith/zetkin/app.zetkin.org/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/@mui/styled-engine/index.js:11:73) {
  type: 'TypeError',
  page: '/o/1/surveys/5'
}
nul

git diff | pbcopy

diff --git a/src/app/o/[orgId]/surveys/[surveyId]/page.tsx b/src/app/o/[orgId]/surveys/[surveyId]/page.tsx
index 34387f236..1ef220046 100644
--- a/src/app/o/[orgId]/surveys/[surveyId]/page.tsx
+++ b/src/app/o/[orgId]/surveys/[surveyId]/page.tsx
@@ -7,6 +7,7 @@ import { FC, ReactElement } from 'react';
 import SurveyForm from 'features/surveys/components/surveyForm/SurveyForm';
 import BackendApiClient from 'core/api/client/BackendApiClient';
 import { ZetkinSurveyExtended, ZetkinUser } from 'utils/types/zetkin';
+import SurveyFooter from 'features/surveys/components/surveyForm/SurveyFooter';
 
 type PageProps = {
   params: {
@@ -52,7 +53,12 @@ const Page: FC<PageProps> = async ({ params }): Promise<ReactElement> => {
     `/api/orgs/${orgId}/surveys/${surveyId}`
   );
 
-  return <SurveyForm survey={survey} user={user} />;
+  return (
+    <>
+      <SurveyForm survey={survey} user={user} />
+      <SurveyFooter />
+    </>
+  );
 };
 
 export default Page;
diff --git a/src/features/surveys/components/surveyForm/SurveyFooter.tsx b/src/features/surveys/components/surveyForm/SurveyFooter.tsx
index d416698ed..d703e7c4c 100644
--- a/src/features/surveys/components/surveyForm/SurveyFooter.tsx
+++ b/src/features/surveys/components/surveyForm/SurveyFooter.tsx
@@ -23,12 +23,12 @@ const SurveyFooter: FC = () => {
           messages.surveyForm.policy.link(),
         text: messages.surveyFooter.links.privacy(),
       },
-      ...(typeof process.env.NEXT_PUBLIC_INSTANCE_OWNER_NAME === 'string' &&
-      typeof process.env.NEXT_PUBLIC_INSTANCE_OWNER_NAME_HREF === 'string'
+      ...(typeof process.env.INSTANCE_OWNER_NAME === 'string' &&
+      typeof process.env.INSTANCE_OWNER_NAME_HREF === 'string'
         ? [
             {
-              href: process.env.NEXT_PUBLIC_INSTANCE_OWNER_NAME_HREF,
-              text: process.env.NEXT_PUBLIC_INSTANCE_OWNER_NAME,
+              href: process.env.INSTANCE_OWNER_NAME_HREF,
+              text: process.env.INSTANCE_OWNER_NAME,
             },
           ]
         : []),
@@ -49,7 +49,7 @@ const SurveyFooter: FC = () => {
             <Msg id={messageIds.surveyFooter.text} />
           </Typography>
         </Box>
-        {typeof process.env.NEXT_PUBLIC_INSTANCE_OWNER_NAME === 'string' && (
+        {typeof process.env.INSTANCE_OWNER_NAME === 'string' && (
           <Box pb={4}>
             <Typography
               color={theme.palette.secondary.light}
@@ -60,7 +60,7 @@ const SurveyFooter: FC = () => {
               <Msg
                 id={messageIds.surveyFooter.hostingOrganization}
                 values={{
-                  name: process.env.NEXT_PUBLIC_INSTANCE_OWNER_NAME,
+                  name: process.env.INSTANCE_OWNER_NAME,
                 }}
               />
             </Typography>
diff --git a/src/features/surveys/components/surveyForm/SurveyForm.tsx b/src/features/surveys/components/surveyForm/SurveyForm.tsx
index c7b2f7fbc..08a08b030 100644
--- a/src/features/surveys/components/surveyForm/SurveyForm.tsx
+++ b/src/features/surveys/components/surveyForm/SurveyForm.tsx
@@ -22,7 +22,6 @@ import {
   ZetkinSurveyFormStatus,
   ZetkinUser,
 } from 'utils/types/zetkin';
-import SurveyFooter from './SurveyFooter';
 
 export type SurveyFormProps = {
   survey: ZetkinSurveyExtended;
@@ -48,22 +47,19 @@ const SurveyForm: FC<SurveyFormProps> = ({ survey, user }) => {
     >
       <SurveyHeading status={status} survey={survey as ZetkinSurveyExtended} />
       {(status === 'editing' || status === 'error') && (
-        <>
-          <form action={action as unknown as string}>
-            <input name="orgId" type="hidden" value={survey.organization.id} />
-            <input name="surveyId" type="hidden" value={survey.id} />
-            <Box display="flex" flexDirection="column" gap={4}>
-              <SurveyElements survey={survey as ZetkinSurveyExtended} />
-              <SurveySignature
-                survey={survey as ZetkinSurveyExtended}
-                user={user}
-              />
-              <SurveyPrivacyPolicy survey={survey as ZetkinSurveyExtended} />
-              <SurveySubmitButton />
-            </Box>
-          </form>
-          <SurveyFooter />
-        </>
+        <form action={action as unknown as string}>
+          <input name="orgId" type="hidden" value={survey.organization.id} />
+          <input name="surveyId" type="hidden" value={survey.id} />
+          <Box display="flex" flexDirection="column" gap={4}>
+            <SurveyElements survey={survey as ZetkinSurveyExtended} />
+            <SurveySignature
+              survey={survey as ZetkinSurveyExtended}
+              user={user}
+            />
+            <SurveyPrivacyPolicy survey={survey as ZetkinSurveyExtended} />
+            <SurveySubmitButton />
+          </Box>
+        </form>
       )}
       {status === 'submitted' && <SurveySuccess survey={survey} />}
     </Box>