Feat: add extra_properties type to FormStoreState type, on page reloa…

…d set chosen radio inputs back to chosen input

src/components/ui/RadioGroup.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { PublicQuestionSerializerDetail } from '@/services/client'
 import { FieldErrors, FieldValues, UseFormRegister } from 'react-hook-form'
 import { useTranslations } from 'next-intl'
+import { useFormStore } from '@/store/form_store'
 
 type RadioGroupProps = {
   field: PublicQuestionSerializerDetail
@@ -11,9 +12,25 @@ type RadioGroupProps = {
 
 export const RadioGroup = ({ field, register, errors }: RadioGroupProps) => {
   const t = useTranslations('general.errors')
+  const { formState } = useFormStore()
 
   const errorMessage = errors[field.key]?.message as string
 
+  // Check if the user has already answered a specific question.
+  // Returns true if an answer exists, otherwise returns false.
+  // This is used to determine if the 'defaultChecked' property of a radio input should be set.
+  const getDefaultValueRadioInput = (id: string, key: string) => {
+    const extraProperties = formState.extra_properties.filter(
+      (question) => question.id === id
+    )
+
+    if (typeof extraProperties[0].answer !== 'string') {
+      return extraProperties[0].answer.id === key
+    }
+
+    return false
+  }
+
   return (
     <fieldset aria-invalid={!!errorMessage}>
       <legend>{field.meta.label}</legend>
@@ -38,6 +55,7 @@ export const RadioGroup = ({ field, register, errors }: RadioGroupProps) => {
             id={`${field.key}-${key}`}
             value={key}
             aria-describedby={errorMessage ? `${field.key}-error` : undefined}
+            defaultChecked={getDefaultValueRadioInput(field.key, key)}
           />
           <label htmlFor={`${field.key}-${key}`}>
             {field.meta.values[key]}

src/types/stores.ts

@@ -6,7 +6,18 @@ type FormStoreState = {
   email?: string | null
   phone?: string | null
   sharing_allowed?: boolean
-  extra_properties: object[]
+  extra_properties: Array<{
+    answer:
+      | {
+          id: string
+          label: string
+          info: string
+        }
+      | string
+    category_url: string
+    id: string
+    label: string
+  }>
 }
 
 type FormStore = {