Fixed the ability to save answer of question when type is Open Answer

src/components/question-editor/QuestionEditor.constants.tsx

@@ -3,6 +3,7 @@ import ListIcon from '@mui/icons-material/List'
 import ShortTextIcon from '@mui/icons-material/ShortText'
 
 import { SizeEnum, QuestionTypesEnum } from '~/types'
+import { emptyField } from '~/utils/validations/common'
 
 export const sortQuestions = [
   {
@@ -28,3 +29,10 @@ export const determineQuestionType = (type: QuestionTypesEnum) => {
   const isSingleChoice = type === sortQuestions[2].value
   return { isMultipleChoice, isOpenAnswer, isSingleChoice }
 }
+
+export const validateOpenAnswer = (value: string) => {
+  if (value.length === 0) {
+    return emptyField({ value: value }) ?? ''
+  }
+  return ''
+}

src/components/question-editor/QuestionEditor.styles.ts

@@ -1,3 +1,4 @@
+import { theme } from '~/styles/app-theme/custom-mui.styles'
 import { commonShadow } from '~/styles/app-theme/custom-shadows'
 
 const divider = {
@@ -66,6 +67,12 @@ export const styles = {
     justifyContent: 'space-between',
     alignItems: 'center'
   },
+  openAnswer: {
+    mt: theme.spacing(1)
+  },
+  emptyAnswer: {
+    color: 'primary.300'
+  },
   iconWrapper: {
     display: 'flex',
     padding: '8px',

src/components/question-editor/QuestionEditor.tsx

@@ -21,16 +21,20 @@ import Button from '~scss-components/button/Button'
 import AppSelect from '~/components/app-select/AppSelect'
 import {
   determineQuestionType,
-  sortQuestions
+  sortQuestions,
+  validateOpenAnswer
 } from '~/components/question-editor/QuestionEditor.constants'
 
 import { styles } from '~/components/question-editor/QuestionEditor.styles'
 import {
   QuestionForm,
   SizeEnum,
   TextFieldVariantEnum,
-  QuestionFormAnswer
+  QuestionFormAnswer,
+  UseFormErrors
 } from '~/types'
+import { Typography } from '@mui/material'
+import { spliceSx } from '~/utils/helper-functions'
 
 interface QuestionEditorProps {
   data: QuestionForm
@@ -46,8 +50,9 @@ interface QuestionEditorProps {
   onSave?: () => Promise<void>
   loading?: boolean
   isQuizQuestion?: boolean
+  handleErrors: (key: keyof QuestionForm, error: string) => void
+  errors: UseFormErrors<QuestionForm>
 }
-
 const QuestionEditor: FC<QuestionEditorProps> = ({
   data,
   handleInputChange,
@@ -56,12 +61,14 @@ const QuestionEditor: FC<QuestionEditorProps> = ({
   onEdit,
   onSave,
   loading,
-  isQuizQuestion
+  isQuizQuestion,
+  handleErrors,
+  errors
 }) => {
   const { t } = useTranslation()
   const { openMenu, renderMenu, closeMenu } = useMenu()
 
-  const { type, text, answers, openAnswer } = data
+  const { type, text, answers } = data
   const { isMultipleChoice, isOpenAnswer, isSingleChoice } =
     determineQuestionType(type)
 
@@ -114,17 +121,17 @@ const QuestionEditor: FC<QuestionEditorProps> = ({
 
   const addNewOneAnswer = (event: MouseEvent<HTMLInputElement>) => {
     event.preventDefault()
-    if (!isEmptyAnswer) {
-      const addAnswer = [
-        ...data.answers,
-        {
-          id: data.answers.length,
-          text: '',
-          isCorrect: false
-        }
-      ]
-      handleNonInputValueChange('answers', addAnswer)
-    }
+    if (isEmptyAnswer) return
+
+    handleNonInputValueChange('answers', [
+      ...data.answers,
+      {
+        id: data.answers.length,
+        text: '',
+        isCorrect: isOpenAnswer,
+        isEditing: isOpenAnswer || undefined
+      }
+    ])
   }
 
   const deleteRadioButton = (id: number) => {
@@ -169,6 +176,31 @@ const QuestionEditor: FC<QuestionEditorProps> = ({
     </Box>
   ))
 
+  const openAnswerOptions = answersWithId.map((item) => (
+    <Box key={item.id} sx={spliceSx(styles.answer, styles.openAnswer)}>
+      {item.isEditing ? (
+        <AppTextField
+          errorMsg={t(errors.answers)}
+          fullWidth
+          label={t('questionPage.answer')}
+          onBlur={() => handleBlur(item.id)}
+          onChange={(e) => onChangeInput(e, item.id)}
+          value={item.text}
+          variant={TextFieldVariantEnum.Outlined}
+        />
+      ) : (
+        <InputBase
+          fullWidth
+          onChange={(e) => onChangeInput(e, item.id)}
+          placeholder={t('questionPage.writeYourAnswer')}
+          value={item.text}
+        />
+      )}
+      <IconButton onClick={() => deleteRadioButton(item.id)}>
+        <CloseIcon fontSize={SizeEnum.Small} />
+      </IconButton>
+    </Box>
+  ))
   const showMoreMenu = renderMenu(
     <MenuItem onClick={onAction}>
       <Box sx={styles.editIconWrapper}>
@@ -178,7 +210,18 @@ const QuestionEditor: FC<QuestionEditorProps> = ({
     </MenuItem>
   )
 
-  const isButtonVisible = text && (isOpenAnswer ? openAnswer : answers[0]?.text)
+  const handleBlur = (index: number) => {
+    const updatedAnswers = [...answers]
+    const { text } = updatedAnswers[index]
+
+    if (text.trim()) {
+      updatedAnswers[index].isEditing = false
+      handleNonInputValueChange('answers', updatedAnswers)
+    } else {
+      handleErrors('answers', validateOpenAnswer(text))
+    }
+  }
+  const isButtonVisible = text
 
   return (
     <Box sx={styles.editorBlock}>
@@ -216,36 +259,32 @@ const QuestionEditor: FC<QuestionEditorProps> = ({
 
       {isSingleChoice && <RadioGroup sx={styles.group}>{options}</RadioGroup>}
 
-      {!isOpenAnswer && (
-        <Box
-          data-testid='addNewAnswerBtn'
-          onClick={addNewOneAnswer}
-          sx={styles.addRadio(isEmptyAnswer)}
-        >
+      {isOpenAnswer && openAnswerOptions}
+
+      <Box
+        data-testid='addNewAnswerBtn'
+        onClick={addNewOneAnswer}
+        sx={
+          isOpenAnswer
+            ? spliceSx(styles.addRadio(isEmptyAnswer), styles.openAnswer)
+            : styles.addRadio(isEmptyAnswer)
+        }
+      >
+        {isOpenAnswer ? (
+          <Typography color={isEmptyAnswer ? 'primary.300' : ''}>
+            {t('questionPage.addNewOne')}
+          </Typography>
+        ) : (
           <FormControlLabel
             checked={false}
             control={isMultipleChoice ? <Checkbox /> : <RadioButton label='' />}
             disabled={isEmptyAnswer}
             label={t('questionPage.addNewOne')}
             value={0}
           />
-          <AddIcon
-            fontSize={SizeEnum.Small}
-            sx={styles.addIcon(isEmptyAnswer)}
-          />
-        </Box>
-      )}
-
-      {isOpenAnswer && (
-        <AppTextField
-          fullWidth
-          label={t('questionPage.answer')}
-          onChange={handleInputChange('openAnswer')}
-          value={openAnswer}
-          variant={TextFieldVariantEnum.Outlined}
-        />
-      )}
-
+        )}
+        <AddIcon fontSize={SizeEnum.Small} sx={styles.addIcon(isEmptyAnswer)} />
+      </Box>
       {onCancel && onSave && (
         <>
           <Divider sx={styles.buttonsDivider} />

src/containers/my-quizzes/create-or-edit-quiz-question/CreateOrEditQuizQuestion.tsx

@@ -1,11 +1,4 @@
-import {
-  useCallback,
-  FC,
-  useState,
-  useEffect,
-  Dispatch,
-  SetStateAction
-} from 'react'
+import React from 'react'
 import Box from '@mui/material/Box'
 
 import { useModalContext } from '~/context/modal-context'
@@ -32,25 +25,25 @@ import { getErrorKey } from '~/utils/get-error-key'
 
 interface CreateOrEditQuizQuestionProps {
   question?: Question
-  setQuestions: Dispatch<SetStateAction<Question[]>>
+  setQuestions: React.Dispatch<React.SetStateAction<Question[]>>
   onCancel: () => void
 }
 
-const CreateOrEditQuizQuestion: FC<CreateOrEditQuizQuestionProps> = ({
+const CreateOrEditQuizQuestion: React.FC<CreateOrEditQuizQuestionProps> = ({
   question,
   setQuestions,
   onCancel
 }) => {
   const dispatch = useAppDispatch()
-  const [isNewQuestion, setIsNewQuestion] = useState<boolean>(!!question)
+  const [isNewQuestion, setIsNewQuestion] = React.useState<boolean>(!!question)
   const { openModal, closeModal } = useModalContext()
 
-  const createQuestionService = useCallback(
+  const createQuestionService = React.useCallback(
     (data?: QuestionForm) => ResourceService.createQuestion(data),
     []
   )
 
-  const updateQuestionService = useCallback(
+  const updateQuestionService = React.useCallback(
     (params?: UpdateQuestionParams) => ResourceService.updateQuestion(params),
     []
   )
@@ -112,9 +105,16 @@ const CreateOrEditQuizQuestion: FC<CreateOrEditQuizQuestionProps> = ({
     onResponseError
   })
 
-  const { data, handleInputChange, handleNonInputValueChange, handleSubmit } =
-    useForm<QuestionForm>({ initialValues: initialValues(question) })
-
+  const {
+    data,
+    handleInputChange,
+    handleNonInputValueChange,
+    handleSubmit,
+    handleErrors,
+    errors
+  } = useForm<QuestionForm>({
+    initialValues: initialValues(question)
+  })
   const onCloseCreation = () => {
     closeModal()
     onCancel()
@@ -127,13 +127,30 @@ const CreateOrEditQuizQuestion: FC<CreateOrEditQuizQuestionProps> = ({
     closeModal()
   }
 
-  const onCreateQuestion = async () => {
-    await createQuestion(data)
-  }
+  const onCreateQuestion = React.useCallback(async () => {
+    const updatedData = data.openAnswer
+      ? {
+          ...data,
+          answers: [
+            ...data.answers,
+            {
+              text: data.openAnswer,
+              isCorrect: true,
+              id: data.answers.length
+            }
+          ],
+          openAnswer: ''
+        }
+      : data
 
-  const onUpdateQuestion = async () => {
-    question && (await updateQuestion({ ...data, id: question._id }))
-  }
+    await createQuestion(updatedData)
+  }, [data, createQuestion])
+
+  const onUpdateQuestion = React.useCallback(async () => {
+    if (question) {
+      await updateQuestion({ ...data, id: question._id })
+    }
+  }, [question, data, updateQuestion])
 
   const onOpenCreateQuestionModal = () => {
     openModal({
@@ -147,15 +164,17 @@ const CreateOrEditQuizQuestion: FC<CreateOrEditQuizQuestionProps> = ({
     })
   }
 
-  useEffect(() => {
+  React.useEffect(() => {
     !question && onOpenCreateQuestionModal()
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+  }, [question])
 
   return isNewQuestion ? (
     <Box component={ComponentEnum.Form} onSubmit={handleSubmit}>
       <QuestionEditor
         data={data}
+        errors={errors}
+        handleErrors={handleErrors}
         handleInputChange={handleInputChange}
         handleNonInputValueChange={handleNonInputValueChange}
         isQuizQuestion

src/containers/quiz/question-answer/Answer.styles.ts

@@ -28,7 +28,8 @@ export const styles = {
       borderRadius: 2,
       display: 'flex',
       alignItems: 'center',
-      bgcolor
+      bgcolor,
+      height: isOpenAnswer ? '48px' : undefined
     }
   },
   label: {

src/containers/quiz/quiz-question/Question.tsx

@@ -64,7 +64,7 @@ const QuizQuestion: FC<QuizQuestionProps> = ({
     shouldShowAnswersCorrectness &&
     (isCorrect ? <CheckIcon sx={iconStyles} /> : <CloseIcon sx={iconStyles} />)
 
-  const showCorrectAnswers = shouldShowCorrectAnswers && !isOpenAnswer
+  const showCorrectAnswers = shouldShowCorrectAnswers
 
   const correctAnswersList =
     showCorrectAnswers &&
@@ -135,7 +135,7 @@ const QuizQuestion: FC<QuizQuestionProps> = ({
 
   const answersBlock = isOpenAnswer ? (
     <Answer
-      isCorrect
+      isCorrect={isCorrect}
       isEditable={isEditable}
       label={question.text}
       onTextInputChange={handleInputChange}

src/pages/create-or-edit-question/CreateOrEditQuestion.tsx

@@ -133,7 +133,9 @@ const CreateOrEditQuestion = () => {
     handleDataChange,
     handleInputChange,
     handleNonInputValueChange,
-    handleSubmit
+    handleSubmit,
+    handleErrors,
+    errors
   } = useForm<CreateOrEditQuestionForm>({
     initialValues: initialValues,
     onSubmit: async () => {
@@ -203,6 +205,8 @@ const CreateOrEditQuestion = () => {
         <Divider sx={styles.mainDivider} />
         <QuestionEditor
           data={data}
+          errors={errors}
+          handleErrors={handleErrors}
           handleInputChange={handleInputChange}
           handleNonInputValueChange={handleNonInputValueChange}
         />