fix

src/containers/my-quizzes/QuizzesContainer.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useRef } from 'react'
+import { useCallback, useRef, useState } from 'react'
 import Box from '@mui/material/Box'
 
 import { useSnackBarContext } from '~/context/snackbar-context'
@@ -11,6 +11,7 @@ import useBreakpoints from '~/hooks/use-breakpoints'
 import useAxios from '~/hooks/use-axios'
 import usePagination from '~/hooks/table/use-pagination'
 import { authRoutes } from '~/router/constants/authRoutes'
+import { ResourceService } from '~/services/resource-service'
 
 import { defaultResponses, snackbarVariants } from '~/constants'
 import {
@@ -35,6 +36,7 @@ const QuizzesContainer = () => {
   const sortOptions = useSort({ initialSort })
   const searchTitle = useRef<string>('')
   const breakpoints = useBreakpoints()
+  const [selectedItems, setSelectedItems] = useState<string[]>([])
 
   const { sort } = sortOptions
   const itemsPerPage = getScreenBasedLimit(breakpoints, itemsLoadLimit)
@@ -94,9 +96,12 @@ const QuizzesContainer = () => {
     <Box>
       <AddResourceWithInput
         btnText={'myResourcesPage.quizzes.addBtn'}
+        categoryService={ResourceService.getResourcesCategoriesNames}
         fetchData={fetchData}
         link={authRoutes.myResources.newQuiz.path}
         searchRef={searchTitle}
+        selectedItems={selectedItems}
+        setItems={setSelectedItems}
       />
       {loading ? (
         <Loader pageLoad size={50} />

src/containers/my-resources/add-resource-with-input/AddResourceWithInput.styles.ts

@@ -12,5 +12,9 @@ export const styles = {
     border: '1px solid',
     borderColor: 'primary.500',
     borderRadius: '6px'
+  },
+  filterWithInput: {
+    display: 'flex',
+    columnGap: '25px'
   }
 }

src/containers/my-resources/add-resource-with-input/AddResourceWithInput.tsx

@@ -3,7 +3,9 @@ import {
   ChangeEvent,
   FC,
   MutableRefObject,
-  ReactElement
+  ReactElement,
+  Dispatch,
+  SetStateAction
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Link } from 'react-router-dom'
@@ -14,6 +16,8 @@ import Box from '@mui/material/Box'
 import { useDebounce } from '~/hooks/use-debounce'
 import AppButton from '~/components/app-button/AppButton'
 import InputWithIcon from '~/components/input-with-icon/InputWithIcon'
+import FilterSelector from '~/components/filter-selector/FilterSelector'
+import { ServiceFunction } from '~/types'
 
 import { styles } from '~/containers/my-resources/add-resource-with-input/AddResourceWithInput.styles'
 
@@ -23,14 +27,20 @@ interface AddResourceWithInputProps {
   link?: string
   searchRef: MutableRefObject<string>
   button?: ReactElement
+  categoryService?: ServiceFunction<string[], undefined>
+  selectedItems?: string[]
+  setItems?: Dispatch<SetStateAction<string[]>>
 }
 
 const AddResourceWithInput: FC<AddResourceWithInputProps> = ({
   btnText,
   fetchData,
   link,
   searchRef,
-  button
+  button,
+  categoryService,
+  selectedItems,
+  setItems
 }) => {
   const { t } = useTranslation()
   const [searchInput, setSearchInput] = useState<string>('')
@@ -51,6 +61,13 @@ const AddResourceWithInput: FC<AddResourceWithInputProps> = ({
     void fetchData()
   }
 
+  const filterProps = {
+    title: 'Category',
+    service: categoryService,
+    selectedItems: selectedItems,
+    setSelectedItems: setItems
+  }
+
   return (
     <Box sx={styles.container}>
       {!button ? (
@@ -61,15 +78,17 @@ const AddResourceWithInput: FC<AddResourceWithInputProps> = ({
       ) : (
         button
       )}
-
-      <InputWithIcon
-        endAdornment={<SearchIcon sx={styles.searchIcon} />}
-        onChange={onChange}
-        onClear={onClear}
-        placeholder={t('common.search')}
-        sx={styles.input}
-        value={searchInput}
-      />
+      <Box sx={styles.filterWithInput}>
+        {categoryService ? <FilterSelector {...filterProps} /> : ''}
+        <InputWithIcon
+          endAdornment={<SearchIcon sx={styles.searchIcon} />}
+          onChange={onChange}
+          onClear={onClear}
+          placeholder={t('common.search')}
+          sx={styles.input}
+          value={searchInput}
+        />
+      </Box>
     </Box>
   )
 }

src/containers/my-resources/attachments-container/AttachmentsContainer.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useRef } from 'react'
+import { useCallback, useRef, useState } from 'react'
 import Box from '@mui/material/Box'
 import AddIcon from '@mui/icons-material/Add'
 import { useTranslation } from 'react-i18next'
@@ -43,6 +43,7 @@ const AttachmentsContainer = () => {
   const { page, handleChangePage } = usePagination()
   const sortOptions = useSort({ initialSort })
   const searchFileName = useRef<string>('')
+  const [selectedItems, setSelectedItems] = useState<string[]>([])
   const formData = new FormData()
 
   const { sort } = sortOptions
@@ -166,8 +167,11 @@ const AttachmentsContainer = () => {
           variant={ButtonVariantEnum.Contained}
         />
       }
+      categoryService={ResourceService.getResourcesCategoriesNames}
       fetchData={fetchAttachments}
       searchRef={searchFileName}
+      selectedItems={selectedItems}
+      setItems={setSelectedItems}
     />
   )
 

src/containers/my-resources/categories-container/CategoriesContainer.tsx

@@ -59,7 +59,7 @@ const CategoriesContainer = () => {
         limit: itemsPerPage,
         skip: (page - 1) * itemsPerPage,
         sort,
-        title: searchTitle.current
+        name: searchTitle.current
       }),
     [page, itemsPerPage, sort, searchTitle]
   )

src/containers/my-resources/lessons-container/LessonsContainer.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useRef } from 'react'
+import { useCallback, useRef, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import Box from '@mui/material/Box'
 
@@ -40,6 +40,7 @@ const LessonsContainer = () => {
   const sortOptions = useSort({ initialSort })
   const searchTitle = useRef<string>('')
   const breakpoints = useBreakpoints()
+  const [selectedItems, setSelectedItems] = useState<string[]>([])
 
   const { sort } = sortOptions
   const itemsPerPage = getScreenBasedLimit(breakpoints, itemsLoadLimit)
@@ -103,9 +104,12 @@ const LessonsContainer = () => {
     <Box>
       <AddResourceWithInput
         btnText={'myResourcesPage.lessons.addBtn'}
+        categoryService={ResourceService.getResourcesCategoriesNames}
         fetchData={fetchData}
         link={authRoutes.myResources.newLesson.path}
         searchRef={searchTitle}
+        selectedItems={selectedItems}
+        setItems={setSelectedItems}
       />
       {loading ? (
         <Loader pageLoad size={50} />

src/containers/my-resources/questions-container/QuestionsContainer.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useRef } from 'react'
+import { useCallback, useRef, useState } from 'react'
 import Box from '@mui/material/Box'
 
 import { useSnackBarContext } from '~/context/snackbar-context'
@@ -35,6 +35,7 @@ const QuestionsContainer = () => {
   const searchTitle = useRef<string>('')
   const breakpoints = useBreakpoints()
   const { page, handleChangePage } = usePagination()
+  const [selectedItems, setSelectedItems] = useState<string[]>([])
 
   const { sort } = sortOptions
   const itemsPerPage = getScreenBasedLimit(breakpoints, itemsLoadLimit)
@@ -60,9 +61,10 @@ const QuestionsContainer = () => {
         limit: itemsPerPage,
         sort,
         title: searchTitle.current,
-        skip: (page - 1) * itemsPerPage
+        skip: (page - 1) * itemsPerPage,
+        categories: selectedItems
       }),
-    [itemsPerPage, sort, page]
+    [itemsPerPage, sort, page, selectedItems]
   )
 
   const { response, loading, fetchData } = useAxios<
@@ -142,9 +144,12 @@ const QuestionsContainer = () => {
     <Box>
       <AddResourceWithInput
         btnText={'myResourcesPage.questions.addBtn'}
+        categoryService={ResourceService.getResourcesCategoriesNames}
         fetchData={fetchData}
         link={authRoutes.myResources.newQuestion.path}
         searchRef={searchTitle}
+        selectedItems={selectedItems}
+        setItems={setSelectedItems}
       />
       {loading ? (
         <Loader pageLoad size={50} />