refactored dropdown

src/containers/my-quizzes/create-or-edit-quiz-container/CreateOrEditQuizContainer.tsx

@@ -3,21 +3,20 @@ import { useTranslation } from 'react-i18next'
 import { Link, useNavigate, useParams } from 'react-router-dom'
 import { AxiosResponse } from 'axios'
 import Box from '@mui/material/Box'
-import Typography from '@mui/material/Typography'
 import Divider from '@mui/material/Divider'
 import EditIcon from '@mui/icons-material/Edit'
 import AddIcon from '@mui/icons-material/Add'
 
-import useAxios from '~/hooks/use-axios'
+import AddResources from '~/containers/add-resources/AddResources'
+import CreateOrEditQuizQuestion from '~/containers/my-quizzes/create-or-edit-quiz-question/CreateOrEditQuizQuestion'
+import CategoryDropdown from '~/containers/category-dropdown/CategoryDropdown'
+import QuestionsList from '~/containers/questions-list/QuestionsList'
 import { useModalContext } from '~/context/modal-context'
 import { useSnackBarContext } from '~/context/snackbar-context'
 import { ResourceService } from '~/services/resource-service'
-import QuestionsList from '~/containers/questions-list/QuestionsList'
-import AddResources from '~/containers/add-resources/AddResources'
-import CreateOrEditQuizQuestion from '~/containers/my-quizzes/create-or-edit-quiz-question/CreateOrEditQuizQuestion'
+import useAxios from '~/hooks/use-axios'
 import AppButton from '~/components/app-button/AppButton'
 import AppTextField from '~/components/app-text-field/AppTextField'
-import AsyncAutocomplete from '~/components/async-autocomlete/AsyncAutocomplete'
 import PageWrapper from '~/components/page-wrapper/PageWrapper'
 import Loader from '~/components/loader/Loader'
 
@@ -41,8 +40,7 @@ import {
   TextFieldVariantEnum,
   ResourcesTabsEnum,
   UpdateQuizParams,
-  TypographyVariantEnum,
-  Category
+  CategoryNameInterface
 } from '~/types'
 import { styles } from '~/containers/my-quizzes/create-or-edit-quiz-container/CreateOrEditQuizContainer.styles'
 
@@ -65,7 +63,7 @@ const CreateOrEditQuizContainer = ({
 
   const onCategoryChange = (
     _: React.SyntheticEvent,
-    value: Category | null
+    value: CategoryNameInterface | null
   ) => {
     setCategory(value?._id ?? null)
   }
@@ -210,22 +208,10 @@ const CreateOrEditQuizContainer = ({
           value={description}
           variant={TextFieldVariantEnum.Standard}
         />
-        <Box sx={styles.labelCategory}>
-          <Typography variant={TypographyVariantEnum.Body2}>
-            {t('questionPage.chooseCategory')}
-          </Typography>
-          <AsyncAutocomplete
-            fetchOnFocus
-            labelField='name'
-            onChange={onCategoryChange}
-            service={ResourceService.getResourcesCategoriesNames}
-            textFieldProps={{
-              label: t('common.categoryDropdown')
-            }}
-            value={category}
-            valueField='_id'
-          />
-        </Box>
+        <CategoryDropdown
+          category={category}
+          onCategoryChange={onCategoryChange}
+        />
         <Divider sx={styles.divider} />
         {questions && (
           <QuestionsList items={questions} setItems={setQuestions} />

src/pages/new-quiz/NewQuiz.constants.tsx

@@ -8,7 +8,7 @@ import CreateOrEditQuizContainer from '~/containers/my-quizzes/create-or-edit-qu
 import ViewQuizContainer from '~/containers/my-quizzes/view-quiz-container/ViewQuizContainer'
 import QuizSettingsContainer from '~/containers/my-quizzes/quiz-settings-container/QuizSettingsContainer'
 
-import { Category, CreateQuizParams, Question } from '~/types'
+import { CreateQuizParams, Question } from '~/types'
 
 export interface QuizContentProps {
   title: string
@@ -17,7 +17,7 @@ export interface QuizContentProps {
   setDescription: Dispatch<SetStateAction<CreateQuizParams['description']>>
   questions: Question[]
   setQuestions: Dispatch<SetStateAction<Question[]>>
-  category: Category | null
+  category: string | null
   setCategory: Dispatch<SetStateAction<string | null>>
 }