Added chose category dropdown for new quiz

src/components/async-autocomlete/AsyncAutocomplete.tsx

@@ -5,7 +5,7 @@ import { TextFieldProps } from '@mui/material/TextField'
 import AppAutoComplete from '~/components/app-auto-complete/AppAutoComplete'
 import useAxios, { UseAxiosProps } from '~/hooks/use-axios'
 import { defaultResponses } from '~/constants'
-import { ServiceFunction } from '~/types'
+import { ServiceFunction, Category } from '~/types'
 
 interface AsyncAutocompleteProps<T, F extends boolean | undefined>
   extends Omit<
@@ -15,7 +15,7 @@ interface AsyncAutocompleteProps<T, F extends boolean | undefined>
   service: ServiceFunction<T[]>
   valueField?: keyof T
   labelField?: keyof T
-  value: T[keyof T] | null
+  value: T[keyof T] | null | Category
   fetchCondition?: boolean
   textFieldProps?: TextFieldProps
   fetchOnFocus?: boolean

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

@@ -62,5 +62,13 @@ export const styles = {
       gap: '12px',
       width: '100%'
     }
+  },
+  labelCategory: {
+    color: 'primary.600',
+    maxWidth: '464px',
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '4px'
   }
 }

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

@@ -7,13 +7,14 @@ 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 PageWrapper from '~/components/page-wrapper/PageWrapper'
@@ -38,7 +39,8 @@ import {
   SizeEnum,
   TextFieldVariantEnum,
   ResourcesTabsEnum,
-  UpdateQuizParams
+  UpdateQuizParams,
+  CategoryNameInterface
 } from '~/types'
 import { styles } from '~/containers/my-quizzes/create-or-edit-quiz-container/CreateOrEditQuizContainer.styles'
 
@@ -59,6 +61,13 @@ const CreateOrEditQuizContainer = ({
   const { id } = useParams()
   const [isCreationOpen, setIsCreationOpen] = useState<boolean>(false)
 
+  const onCategoryChange = (
+    _: React.SyntheticEvent,
+    value: CategoryNameInterface | null
+  ) => {
+    setCategory(value?._id ?? null)
+  }
+
   const handleResponse = () => {
     setAlert({
       severity: snackbarVariants.success,
@@ -199,6 +208,10 @@ const CreateOrEditQuizContainer = ({
           value={description}
           variant={TextFieldVariantEnum.Standard}
         />
+        <CategoryDropdown
+          category={category}
+          onCategoryChange={onCategoryChange}
+        />
         <Divider sx={styles.divider} />
         {questions && (
           <QuestionsList items={questions} setItems={setQuestions} />