fix: 🐛 country selection works

Author: marc101101

frontend/src/components/forms/choices-question-editor.tsx

@@ -94,28 +94,26 @@ export const ChoicesQuestionEditor = ({
   const choicesText = question.configuration.choices.join(separator);
 
   return (
-    <>
-      <FlexRowContainer>
-        <FlexRowColumnContainer>
-          <TextInput
-            type={TextInputType.Area}
-            title="Options (one per line)"
-            placeholder="no options"
-            value={choicesText}
-            onChange={handleChoicesUpdate}
-          />
-        </FlexRowColumnContainer>
-        <Spacer />
-        <FlexRowColumnContainer>
-          <Checkboxes
-            values={appearanceOptions}
-            selected={selectedAppearanceOptions}
-            onChange={handleAppearanceChange}
-            title="Appearance"
-            radio
-          />
-        </FlexRowColumnContainer>
-      </FlexRowContainer>
-    </>
+    <FlexRowContainer>
+      <FlexRowColumnContainer>
+        <TextInput
+          type={TextInputType.Area}
+          title="Options (one per line)"
+          placeholder="no options"
+          value={choicesText}
+          onChange={handleChoicesUpdate}
+        />
+      </FlexRowColumnContainer>
+      <Spacer />
+      <FlexRowColumnContainer>
+        <Checkboxes
+          values={appearanceOptions}
+          selected={selectedAppearanceOptions}
+          onChange={handleAppearanceChange}
+          title="Appearance"
+          radio
+        />
+      </FlexRowColumnContainer>
+    </FlexRowContainer>
   );
 };

frontend/src/components/forms/country-question-editor.tsx

@@ -1,5 +1,7 @@
 import * as React from "react";
-import { countryNames } from "./country-question";
+import countries from "country-json/src/country-by-abbreviation.json";
+
+const countryNames = countries.map((country) => country.country);
 
 /**
  * A pseud-editor for country questions.

frontend/src/components/forms/country-question.tsx

@@ -4,19 +4,18 @@ import type {
   CountryQuestionConfigurationDTO,
   QuestionDTO,
 } from "../../api/types/dto";
-import { Autocomplete, TextField } from "@mui/material";
+import { Autocomplete, Box, TextField } from "@mui/material";
 import { FormField } from "../base/form-field";
 import { useCallback } from "react";
 
 /**
  * A list of countries known to tilt.
  */
-export const countryNames = countries.map(({ country }) => country).sort();
 
 interface ICountryQuestionProps {
   question: QuestionDTO<CountryQuestionConfigurationDTO>;
   valueInput: string;
-  onChange: (event: React.SyntheticEvent, value: string) => any;
+  onChange: (value: string) => any;
   isDisabled?: boolean;
 }
 
@@ -30,25 +29,37 @@ export const CountryQuestion = ({
   question,
   isDisabled,
 }: ICountryQuestionProps) => {
-  const handleChange = useCallback(
-    (event: React.SyntheticEvent, value: string | null) =>
-      onChange(event, value!),
-    [onChange],
-  );
-
   return (
     <div>
       <FormField title={question.title} mandatory={question.mandatory}>
         <Autocomplete
           disablePortal
-          options={countryNames}
+          options={countries}
+          getOptionLabel={(option) => option.country}
           fullWidth
+          autoHighlight
+          onChange={(e, v) => onChange(v?.country ?? "")}
           renderInput={(params) => (
             <TextField {...params} label={question.description} />
           )}
+          value={countries.find((c) => c.country === valueInput) ?? null}
           disabled={isDisabled}
-          onChange={handleChange}
-          value={valueInput}
+          renderOption={(props, option) => (
+            <Box
+              component="li"
+              sx={{ "& > img": { mr: 2, flexShrink: 0 } }}
+              {...props}
+            >
+              <img
+                loading="lazy"
+                width="20"
+                srcSet={`https://flagcdn.com/w40/${option.abbreviation.toLowerCase()}.png 2x`}
+                src={`https://flagcdn.com/w20/${option.abbreviation.toLowerCase()}.png`}
+                alt=""
+              />
+              {option.country}
+            </Box>
+          )}
         />
       </FormField>
     </div>

frontend/src/components/forms/form.tsx

@@ -112,12 +112,15 @@ export const Form = ({ type }: IFormProps) => {
     useState<Nullable<readonly AnswerDTO[]>>(null);
 
   const handleSubmit = useCallback(() => {
-    setSynchronizedAnswers(
-      [...Object.entries(state)].map<AnswerDTO>(([questionID, value]) => ({
-        questionID: Number(questionID),
-        value,
-      })),
-    );
+    {
+      console.log(state);
+      return setSynchronizedAnswers(
+        [...Object.entries(state)].map<AnswerDTO>(([questionID, value]) => ({
+          questionID: Number(questionID),
+          value,
+        })),
+      );
+    }
   }, [state]);
 
   const { updateUser } = useLoginContext();