Create components for each survey element

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

@@ -1,4 +1,4 @@
 import { expect } from '@playwright/test';
 
 import KPD from '../../../mockData/orgs/KPD';
 import KPDMembershipSurvey from '../../../mockData/orgs/KPD/surveys/MembershipSurvey';
@@ -44,11 +44,11 @@
       `${appUri}/o/${KPDMembershipSurvey.organization.id}/surveys/${KPDMembershipSurvey.id}`
     );
 
-    await page.fill('input', 'Topple capitalism');
+    await page.fill('input[name="2.text"]', 'Topple capitalism');
     await page.click('data-testid=Survey-acceptTerms');
     await Promise.all([
       await page.click('data-testid=Survey-submit'),
       page.waitForResponse((res) => res.request().method() == 'POST'),
     ]);
 
     const reqLog = moxy.log(`/v1${apiPostPath}`);

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

@@ -0,0 +1,70 @@
+import { FC } from 'react';
+import {
+  Checkbox,
+  FormControl,
+  FormControlLabel,
+  FormGroup,
+  FormLabel,
+  MenuItem,
+  Radio,
+  RadioGroup,
+  Select,
+} from '@mui/material';
+import {
+  ZetkinSurveyOption,
+  ZetkinSurveyOptionsQuestionElement,
+} from 'utils/types/zetkin';
+
+const OptionsQuestion: FC<{ element: ZetkinSurveyOptionsQuestionElement }> = ({
+  element,
+}) => {
+  return (
+    <FormControl>
+      <FormLabel id="demo-radio-buttons-group-label">
+        {element.question.question}
+      </FormLabel>
+      {element.question.response_config.widget_type === 'checkbox' && (
+        <FormGroup aria-labelledby="demo-radio-buttons-group-label">
+          {element.question.options!.map((option: ZetkinSurveyOption) => (
+            <FormControlLabel
+              key={option.id}
+              control={<Checkbox />}
+              label={option.text}
+              name={`${element.id}.options`}
+              value={option.id}
+            />
+          ))}
+        </FormGroup>
+      )}
+      {element.question.response_config.widget_type === 'radio' && (
+        <RadioGroup
+          aria-labelledby="demo-radio-buttons-group-label"
+          name={`${element.id}.options`}
+        >
+          {element.question.options!.map((option: ZetkinSurveyOption) => (
+            <FormControlLabel
+              key={option.id}
+              control={<Radio />}
+              label={option.text}
+              value={option.id}
+            />
+          ))}
+        </RadioGroup>
+      )}
+      {element.question.response_config.widget_type === 'select' && (
+        <Select
+          aria-labelledby="demo-radio-buttons-group-label"
+          name={`${element.id}.options`}
+        >
+          {element.question.options!.map((option: ZetkinSurveyOption) => (
+            <MenuItem key={option.id} value={option.id}>
+              {option.text}
+            </MenuItem>
+          ))}
+        </Select>
+      )}
+    </FormControl>
+  );
+};
+
+export default OptionsQuestion;

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

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { ZetkinSurveyTextElement } from 'utils/types/zetkin';
+
+const TextBlock: FC<{ element: ZetkinSurveyTextElement }> = ({ element }) => {
+  return <p>{element.text_block.content}</p>;
+};
+
+export default TextBlock;

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

@@ -0,0 +1,22 @@
+import { FC } from 'react';
+import { ZetkinSurveyTextQuestionElement } from 'utils/types/zetkin';
+import { FormControl, FormLabel, TextField } from '@mui/material';
+
+const OptionsQuestion: FC<{ element: ZetkinSurveyTextQuestionElement }> = ({
+  element,
+}) => {
+  return (
+    <FormControl>
+      <FormLabel id="demo-radio-buttons-group-label">
+        {element.question.question}
+      </FormLabel>
+      <TextField
+        id={`input-${element.id}`}
+        name={`${element.id}.text`}
+        type="text"
+      />
+    </FormControl>
+  );
+};
+
+export default OptionsQuestion;

src/pages/o/[orgId]/surveys/[surveyId]/index.tsx

@@ -7,6 +7,15 @@ import messageIds from 'features/surveys/l10n/messageIds';
 import { parse } from 'querystring';
 import { scaffold } from 'utils/next';
 import useCurrentUser from 'features/user/hooks/useCurrentUser';
+import {
+  ZetkinSurveyOptionsQuestionElement,
+  ZetkinSurveyTextElement,
+  ZetkinSurveyTextQuestionElement,
+} from 'utils/types/zetkin';
+
+import OptionsQuestion from 'features/surveys/components/surveyForm/OptionsQuestion';
+import TextBlock from 'features/surveys/components/surveyForm/TextBlock';
+import TextQuestion from 'features/surveys/components/surveyForm/TextQuestion';
 import useSurvey from 'features/surveys/hooks/useSurvey';
 import useSurveyElements from 'features/surveys/hooks/useSurveyElements';
 import ZUIAvatar from 'zui/ZUIAvatar';
@@ -179,32 +188,22 @@ const Page: FC<PageProps> = ({ orgId, surveyId }) => {
         {(elements.data || []).map((element) => (
           <div key={element.id}>
             {element.type === 'question' && (
-              <Box display="flex" flexDirection="column" maxWidth={256}>
-                <label htmlFor={`input-${element.id}`}>
-                  {element.question.question}
-                </label>
+              <>
                 {element.question.response_type === 'text' && (
-                  <input
-                    id={`input-${element.id}`}
-                    name={`${element.id}.text`}
-                    type="text"
+                  <TextQuestion
+                    element={element as ZetkinSurveyTextQuestionElement}
                   />
                 )}
                 {element.question.response_type === 'options' && (
-                  <select
-                    id={`input-${element.id}`}
-                    name={`${element.id}.options`}
-                  >
-                    {element.question.options!.map((option) => (
-                      <option key={option.id} value={option.id}>
-                        {option.text}
-                      </option>
-                    ))}
-                  </select>
+                  <OptionsQuestion
+                    element={element as ZetkinSurveyOptionsQuestionElement}
+                  />
                 )}
-              </Box>
+              </>
+            )}
+            {element.type === 'text' && (
+              <TextBlock element={element as ZetkinSurveyTextElement} />
             )}
-            {element.type === 'text' && <p>{element.text_block.content}</p>}
           </div>
         ))}
         <Typography>