Refactor to accept multiquestion

.gitignore

@@ -6,5 +6,6 @@ vite.config.ts.timestamp-*.mjs
 .vscode
 .yarn
 .yarnrc*
+.idea
 
 package.json.backup

package.json

@@ -44,5 +44,5 @@
   "engines": {
     "npm": "please use yarn",
     "yarn": ">= 1.19.1 && < 2"
-  }
+   }
 }

packages/chakra-components/src/components/Election/Questions/Confirmation.tsx

@@ -3,55 +3,69 @@ import { Box, Text } from '@chakra-ui/layout'
 import { ModalBody, ModalCloseButton, ModalFooter, ModalHeader } from '@chakra-ui/modal'
 import { chakra, omitThemingProps, useMultiStyleConfig } from '@chakra-ui/system'
 import { useClient } from '@vocdoni/react-providers'
-import { ElectionResultsTypeNames, PublishedElection } from '@vocdoni/sdk'
+import { ElectionResultsTypeNames } from '@vocdoni/sdk'
 import { FieldValues } from 'react-hook-form'
 import { useConfirm } from '../../layout'
+import { FormFieldValues } from './Form'
+import { ElectionStateStorage } from './Questions'
 
 export type QuestionsConfirmationProps = {
-  answers: FieldValues
-  election: PublishedElection
+  answers: FormFieldValues
+  elections: ElectionStateStorage
 }
 
-export const QuestionsConfirmation = ({ answers, election, ...rest }: QuestionsConfirmationProps) => {
+export const QuestionsConfirmation = ({ answers, elections, ...rest }: QuestionsConfirmationProps) => {
   const mstyles = useMultiStyleConfig('ConfirmModal')
   const styles = useMultiStyleConfig('QuestionsConfirmation', rest)
   const { cancel, proceed } = useConfirm()
   const props = omitThemingProps(rest)
   const { localize } = useClient()
-
   return (
     <>
       <ModalHeader sx={mstyles.header}>{localize('confirm.title')}</ModalHeader>
       <ModalCloseButton sx={mstyles.close} />
       <ModalBody sx={mstyles.body}>
+        <Text sx={styles.description}>{localize('vote.confirm')}</Text>
         <Box {...props} sx={styles.box}>
-          <Text sx={styles.description}>{localize('vote.confirm')}</Text>
-          {election.questions.map((q, k) => {
-            if (election.resultsType.name === ElectionResultsTypeNames.SINGLE_CHOICE_MULTIQUESTION) {
-              const choice = q.choices.find((v) => v.value === parseInt(answers[k.toString()], 10))
+          {Object.values(elections).map(({ election, isAbleToVote }) => {
+            if (!isAbleToVote)
               return (
-                <chakra.div key={k} __css={styles.question}>
-                  <chakra.div __css={styles.title}>{q.title.default}</chakra.div>
-                  <chakra.div __css={styles.answer}>{choice?.title.default}</chakra.div>
+                <chakra.div __css={styles.question} key={election.id}>
+                  <chakra.div __css={styles.title}>{election.title.default}</chakra.div>
+                  <chakra.div __css={styles.answer}>{localize('vote.not_able_to_vote')}</chakra.div>
                 </chakra.div>
               )
-            }
-            const choices = answers[0]
-              .map((a: string) =>
-                q.choices[Number(a)] ? q.choices[Number(a)].title.default : localize('vote.abstain')
-              )
-              .map((a: string) => (
-                <span>
-                  - {a}
-                  <br />
-                </span>
-              ))
-
             return (
-              <chakra.div key={k} __css={styles.question}>
-                <chakra.div __css={styles.title}>{q.title.default}</chakra.div>
-                <chakra.div __css={styles.answer}>{choices}</chakra.div>
-              </chakra.div>
+              <>
+                {election.questions.map((q, k) => {
+                  if (election.resultsType.name === ElectionResultsTypeNames.SINGLE_CHOICE_MULTIQUESTION) {
+                    const choice = q.choices.find((v) => v.value === parseInt(answers[election.id][k.toString()], 10))
+                    return (
+                      <chakra.div key={k} __css={styles.question}>
+                        <chakra.div __css={styles.title}>{q.title.default}</chakra.div>
+                        <chakra.div __css={styles.answer}>{choice?.title.default}</chakra.div>
+                      </chakra.div>
+                    )
+                  }
+                  const choices = answers[election.id][0]
+                    .map((a: string) =>
+                      q.choices[Number(a)] ? q.choices[Number(a)].title.default : localize('vote.abstain')
+                    )
+                    .map((a: string) => (
+                      <span>
+                        - {a}
+                        <br />
+                      </span>
+                    ))
+
+                  return (
+                    <chakra.div key={k} __css={styles.question}>
+                      <chakra.div __css={styles.title}>{q.title.default}</chakra.div>
+                      <chakra.div __css={styles.answer}>{choices}</chakra.div>
+                    </chakra.div>
+                  )
+                })}
+              </>
             )
           })}
         </Box>

packages/chakra-components/src/components/Election/Questions/Fields.tsx

@@ -12,19 +12,26 @@ import { QuestionTip } from './Tip'
 export type QuestionProps = {
   index: string
   question: IQuestion
+  isDisabled?: boolean
 }
 
 export type QuestionFieldProps = ChakraProps & QuestionProps
 
-export const QuestionField = ({ question, index }: QuestionFieldProps) => {
+export const QuestionField = ({ question, index, isDisabled }: QuestionFieldProps) => {
   const styles = useMultiStyleConfig('ElectionQuestions')
   const {
     formState: { errors },
   } = useFormContext()
 
+  const [election, qi] = index.split('.')
+  const questionIndex = Number(qi)
+  let isInvalid = false
+  if (errors[election] && Array.isArray(errors[election]) && errors[election][questionIndex]) {
+    isInvalid = !!errors[election][questionIndex]
+  }
   return (
     <chakra.div __css={styles.question}>
-      <FormControl isInvalid={!!errors[index]}>
+      <FormControl isInvalid={isInvalid}>
         <chakra.div __css={styles.header}>
           <chakra.label __css={styles.title}>{question.title.default}</chakra.label>
         </chakra.div>
@@ -34,7 +41,7 @@ export const QuestionField = ({ question, index }: QuestionFieldProps) => {
               <Markdown>{question.description.default}</Markdown>
             </chakra.div>
           )}
-          <FieldSwitcher index={index} question={question} />
+          <FieldSwitcher index={index} question={question} isDisabled={isDisabled} />
           <QuestionTip />
         </chakra.div>
       </FormControl>
@@ -58,7 +65,7 @@ export const FieldSwitcher = (props: QuestionProps) => {
   }
 }
 
-export const MultiChoice = ({ index, question }: QuestionProps) => {
+export const MultiChoice = ({ index, question, isDisabled }: QuestionProps) => {
   const styles = useMultiStyleConfig('ElectionQuestions')
   const {
     election,
@@ -71,7 +78,7 @@ export const MultiChoice = ({ index, question }: QuestionProps) => {
 
   if (!(election instanceof PublishedElection)) return null
 
-  const isNotAbleToVote = election?.status !== ElectionStatus.ONGOING || !isAbleToVote || voting
+  const disabled = election?.status !== ElectionStatus.ONGOING || !isAbleToVote || voting || isDisabled
 
   if (!(election && election.resultsType.name === ElectionResultsTypeNames.MULTIPLE_CHOICE)) {
     return null
@@ -85,7 +92,7 @@ export const MultiChoice = ({ index, question }: QuestionProps) => {
     <Stack sx={styles.stack}>
       <Controller
         control={control}
-        disabled={isNotAbleToVote}
+        disabled={disabled}
         rules={{
           validate: (v) => {
             // allow a single selection if is an abstain
@@ -114,7 +121,7 @@ export const MultiChoice = ({ index, question }: QuestionProps) => {
                     key={ck}
                     sx={styles.checkbox}
                     value={choice.value.toString()}
-                    isDisabled={isNotAbleToVote || maxSelected}
+                    isDisabled={disabled || maxSelected}
                     isChecked={currentValues.includes(choice.value.toString())}
                     onChange={(e) => {
                       if (values.includes(e.target.value)) {
@@ -139,7 +146,7 @@ export const MultiChoice = ({ index, question }: QuestionProps) => {
   )
 }
 
-export const ApprovalChoice = ({ index, question }: QuestionProps) => {
+export const ApprovalChoice = ({ index, question, isDisabled }: QuestionProps) => {
   const styles = useMultiStyleConfig('ElectionQuestions')
   const {
     election,
@@ -152,7 +159,7 @@ export const ApprovalChoice = ({ index, question }: QuestionProps) => {
 
   if (!(election instanceof PublishedElection)) return null
 
-  const isNotAbleToVote = election?.status !== ElectionStatus.ONGOING || !isAbleToVote || voting
+  const disabled = election?.status !== ElectionStatus.ONGOING || !isAbleToVote || voting || isDisabled
 
   if (!(election && election.resultsType.name === ElectionResultsTypeNames.APPROVAL)) {
     return null
@@ -164,7 +171,7 @@ export const ApprovalChoice = ({ index, question }: QuestionProps) => {
     <Stack sx={styles.stack}>
       <Controller
         control={control}
-        disabled={isNotAbleToVote}
+        disabled={disabled}
         rules={{
           validate: (v) => {
             return (v && v.length > 0) || localize('validation.at_least_one')
@@ -181,7 +188,7 @@ export const ApprovalChoice = ({ index, question }: QuestionProps) => {
                     key={ck}
                     sx={styles.checkbox}
                     value={choice.value.toString()}
-                    isDisabled={isNotAbleToVote}
+                    isDisabled={disabled}
                     onChange={(e) => {
                       if (values.includes(e.target.value)) {
                         onChange(values.filter((v: string) => v !== e.target.value))
@@ -203,7 +210,7 @@ export const ApprovalChoice = ({ index, question }: QuestionProps) => {
   )
 }
 
-export const SingleChoice = ({ index, question }: QuestionProps) => {
+export const SingleChoice = ({ index, question, isDisabled }: QuestionProps) => {
   const styles = useMultiStyleConfig('ElectionQuestions')
   const {
     election,
@@ -218,7 +225,7 @@ export const SingleChoice = ({ index, question }: QuestionProps) => {
 
   if (!(election instanceof PublishedElection)) return null
 
-  const disabled = election?.status !== ElectionStatus.ONGOING || !isAbleToVote || voting
+  const disabled = election?.status !== ElectionStatus.ONGOING || !isAbleToVote || voting || isDisabled
   return (
     <Controller
       control={control}
@@ -227,7 +234,7 @@ export const SingleChoice = ({ index, question }: QuestionProps) => {
         required: localize('validation.required'),
       }}
       name={index}
-      render={({ field }) => (
+      render={({ field, fieldState: { error: fieldError } }) => (
         <RadioGroup sx={styles.radioGroup} {...field} isDisabled={disabled}>
           <Stack direction='column' sx={styles.stack}>
             {question.choices.map((choice, ck) => (
@@ -236,7 +243,7 @@ export const SingleChoice = ({ index, question }: QuestionProps) => {
               </Radio>
             ))}
           </Stack>
-          <FormErrorMessage sx={styles.error}>{errors[index]?.message as string}</FormErrorMessage>
+          <FormErrorMessage sx={styles.error}>{fieldError?.message as string}</FormErrorMessage>
         </RadioGroup>
       )}
     />