Fix bugs in create test page

src/Mocs/NewTestMoc.ts

@@ -1,3 +1,3 @@
-export const types = ['Select type...', 'single', 'multi'];
-export const difficulties = ['Select difficulty...', 'light', 'medium', 'hard'];
+export const types = ['single', 'multi'];
+export const difficulties = ['light', 'medium', 'hard'];
 export const numberQuestions = [10, 15, 20, 25, 30];

src/api/quizesApi.ts

@@ -1,4 +1,5 @@
 import { FieldValues } from 'react-hook-form';
+import axios from 'axios';
 import { instance } from './Instance/instance';
 import { CardType } from '../types/CardTypes';
 import { CreateQuizType, TopicType } from '../types/CreateQuizType';
@@ -10,7 +11,14 @@ export const quizesApi = {
   getQuiz(cardId: number) {
     return instance.get<CardType>(`quiz/${cardId}`);
   },
-  postQuizes(quizData: CreateQuizType) {
+  postQuizes(quizData: {
+    topicId: axios.AxiosResponse<any> | number;
+    description: string;
+    comment: string;
+    numberOfQuestions: null;
+    id?: number;
+    title: string;
+  }) {
     return instance.post<CreateQuizType>('quiz', quizData);
   },
   postQuestion(questionData: FieldValues) {

src/api/topicApi.ts

@@ -0,0 +1,12 @@
+import { instance } from "./Instance/instance";
+import { TopicType } from "../types/CreateQuizType";
+
+
+export const topicApi = {
+  postTopic(title: string) {
+    return instance.post<TopicType>(`/topic`, { title });
+  },
+  getTopic() {
+    return instance.get<TopicType[]>(`/topic`);
+  },
+};

src/components/common/Tabs/QuestionTabs/QuestionTabs.tsx

@@ -57,7 +57,7 @@ export const QuestionTabs = ({
   );
 
   return (
-    <Box className='my-5'>
+    <Box sx={{ padding:'0.5rem', borderRadius: '1rem', backgroundColor: '' }}>
       <Tabs ref={tabsRef}>
         {amountOfQuestionsTabs.map((id) => (
           <QuestionTabsItem

src/pages/create-test/FieldsComponents/CreateAnswer/CreateAnswer.tsx

@@ -15,107 +15,151 @@ import {
   TextField,
   Typography,
 } from '@mui/material';
-import React from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'next-i18next';
 import { BasketIcon } from '../../../../assets/icons/BasketIcon';
 
 type CreateAnswerPropsType<T extends FieldValues> = {
   control: any;
-  name: any;
+  name: string;
+  // typeOfQuestion: string; // for single multi
 };
 
 const CreateAnswer = <T extends FieldValues>({
   control,
   name,
+  // typeOfQuestion // for single multi
 }: CreateAnswerPropsType<T>) => {
   const { t } = useTranslation('createAnswer');
+  // const [correctAnswers, setCorrectAnswers] = useState<string[]>([]); // for single multi
   const { fields, append, remove } = useFieldArray({
     control,
     name,
   });
-  const handleAppendNewAnswer = () => append({ name: '', checked: false });
+
+  const handleAppendNewAnswer = () => {
+    if (fields.length < 4) {
+      append({ name: '', checked: false });
+    }
+  };
+  // const handleCheckboxChange = (index: number) => {  // for single multi
+  //   const questionAnswer = fields[index].id;
+  //   if (correctAnswers.includes(questionAnswer)) {
+  //     setCorrectAnswers((prevAnswers) =>
+  //       prevAnswers.filter((answer) => answer !== questionAnswer)
+  //     );
+  //   } else {
+  //     setCorrectAnswers((prevAnswers) => [...prevAnswers, questionAnswer]);
+  //   }
+  // };
+  // const checkCorrect = () => {
+  //   if (typeOfQuestion === 'single' && correctAnswers.length === 1) {  // for single multi
+  //     return true
+  //   }
+  //   if (typeOfQuestion === 'multi' && correctAnswers.length === 2) {
+  //     return true
+  //   }
+  //   return false;
+  // };
   return (
     <Stack>
       <Typography>{t('Answer choice :')}</Typography>
-      {fields.map((field, index) => (
-        <Stack
-          sx={{ marginY: '0.7rem' }}
-          direction='row'
-          flexWrap='wrap'
-          key={field.id}
-        >
-          <Box sx={{ flexGrow: 0.1, verticalAlign: 'middle' }}>
-            <Typography>{t(`${index + 1}.`)}</Typography>
-          </Box>
-          <Controller
-            control={control}
-            name={`${name}.${index}.name`}
-            defaultValue=''
-            rules={{ required: true }}
-            render={({ field: { onChange, value }, fieldState: { error } }) => (
-              <Box sx={{ flexGrow: 2 }}>
-                <TextField
-                  fullWidth
-                  InputLabelProps={{ color: 'primary' }}
-                  label=''
-                  variant='outlined'
-                  value={value}
-                  onChange={onChange}
-                  error={!!error}
-                  helperText={error ? t('This field is required') : ''}
-                />
+      {fields.map((field, index) => {
+        if (index < 4) {
+          return (
+            <Stack
+              sx={{ marginY: '0.7rem' }}
+              direction='row'
+              flexWrap='wrap'
+              key={field.id}
+            >
+              <Box sx={{ flexGrow: 0.1, verticalAlign: 'middle' }}>
+                <Typography>{t(`${index + 1}.`)}</Typography>
               </Box>
-            )}
-          />
-          <Controller
-            control={control}
-            name={`${name}.${index}.checked`}
-            defaultValue={false}
-            render={({ field: { onChange, value } }) => (
-              <Box
-                sx={{
-                  flexGrow: 0.1,
-                  backgroundColor: 'background.default',
-                  marginX: '1rem',
-                  borderRadius: '2rem',
-                  textAlign: 'center',
-                }}
-              >
-                <FormControlLabel
-                  sx={{ marginX: '0' }}
-                  control={
-                    <Checkbox
-                      color='primary'
-                      size='small'
-                      checked={value}
+              <Controller
+                control={control}
+                name={`${name}.${index}.name`}
+                defaultValue=''
+                rules={{ required: true }}
+                render={({
+                  field: { onChange, value },
+                  fieldState: { error },
+                }) => (
+                  <Box sx={{ flexGrow: 2 }}>
+                    <TextField
+                      fullWidth
+                      InputLabelProps={{ color: 'primary' }}
+                      label=''
+                      variant='outlined'
+                      value={value}
                       onChange={onChange}
+                      error={!!error}
+                      helperText={error ? t('This field is required') : ''}
                     />
-                  }
-                  label=''
-                />
+                  </Box>
+                )}
+              />
+              <Controller
+                control={control}
+                name={`${name}.${index}.checked`}
+                defaultValue={false}
+                render={({ field: { onChange, value } }) => (
+                  <Box
+                    sx={{
+                      flexGrow: 0.1,
+                      backgroundColor: 'background.default',
+                      marginX: '1rem',
+                      borderRadius: '2rem',
+                      textAlign: 'center',
+                    }}
+                  >
+                    <FormControlLabel
+                      sx={{ marginX: '0' }}
+                      control={
+                        <Checkbox
+                          color='primary'
+                          size='small'
+                          // disabled={checkCorrect()}                    // for single multi
+                          // checked={correctAnswers.includes(field.id)}
+                          // onChange={() => handleCheckboxChange(index)}
+                          checked={value}
+                          onChange={onChange}
+                        />
+                      }
+                      label=''
+                    />
+                  </Box>
+                )}
+              />
+              <Box sx={{ flexGrow: 0.1 }}>
+                <Button
+                  sx={{ backgroundColor: 'background.default' }}
+                  onClick={() => remove(index)}
+                  size='medium'
+                >
+                  <BasketIcon />
+                </Button>
               </Box>
-            )}
-          />
-          <Box sx={{ flexGrow: 0.1 }}>
-            <Button
-              sx={{ backgroundColor: 'background.default' }}
-              onClick={() => remove(index)}
-              size='medium'
-            >
-              <BasketIcon />
-            </Button>
-          </Box>
-        </Stack>
-      ))}
-      <Box sx={{ flexGrow: 0.1, marginY: '0.5rem' }}>
-        <Button
-          variant='contained'
-          color='primary'
-          onClick={handleAppendNewAnswer}
-        >
-          {t('Add Answer')}
-        </Button>
-      </Box>
+            </Stack>
+          );
+        }
+        return null;
+      })}
+      {fields.length < 4 ? (
+        <Box sx={{ flexGrow: 0.1, marginY: '0.5rem' }}>
+          <Button
+            variant='contained'
+            color='primary'
+            onClick={handleAppendNewAnswer}
+          >
+            {t('Add Answer')}
+          </Button>
+        </Box>
+      ) : (
+        <Box sx={{ margin: '1rem' }}>
+          <Typography>Maximum 4 answers !</Typography>
+        </Box>
+      )}
     </Stack>
   );
 };