From 178e82b575da826f75bb800c25f25c4a3d3eb662 Mon Sep 17 00:00:00 2001 From: Mav-Ivan <110425368+Mav-Ivan@users.noreply.github.com> Date: Thu, 28 Sep 2023 22:15:55 +0300 Subject: [PATCH] fix issues --- .../filter-selector/FilterSelector.tsx | 21 +++++++--- .../my-quizzes/QuizzesContainer.tsx | 7 +++- .../AddResourceWithInput.styles.ts | 4 ++ .../AddResourceWithInput.tsx | 41 ++++++++++++++----- .../AttachmentsContainer.tsx | 4 ++ .../CategoriesContainer.tsx | 2 +- .../lessons-container/LessonsContainer.tsx | 6 ++- .../QuestionsContainer.tsx | 11 +++-- 8 files changed, 73 insertions(+), 23 deletions(-) diff --git a/src/components/filter-selector/FilterSelector.tsx b/src/components/filter-selector/FilterSelector.tsx index bd531bb88a..55ed5fade0 100644 --- a/src/components/filter-selector/FilterSelector.tsx +++ b/src/components/filter-selector/FilterSelector.tsx @@ -29,6 +29,11 @@ interface FilterSelectorProps extends Omit { position?: PopoverOrigin['horizontal'] } +type ObjectType = { + id: JSX.Element + name: string +} + const FilterSelector = ({ title, service, @@ -76,16 +81,20 @@ const FilterSelector = ({ const filteredItems = useMemo( () => - response.filter((item) => - item.toLowerCase().includes(inputValue.toLowerCase()) + response.filter((item: ObjectType) => + item.name.toLowerCase().includes(inputValue.toLowerCase()) ), [response, inputValue] ) - const menuItems = filteredItems.map((item) => ( - onMenuItemClick(item)} sx={styles.text}> - - {item} + const menuItems = filteredItems.map((item: ObjectType) => ( + onMenuItemClick(item.name)} + sx={styles.text} + > + + {item.name} )) diff --git a/src/containers/my-quizzes/QuizzesContainer.tsx b/src/containers/my-quizzes/QuizzesContainer.tsx index 2c2cd850b3..af39f00e6d 100644 --- a/src/containers/my-quizzes/QuizzesContainer.tsx +++ b/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('') const breakpoints = useBreakpoints() + const [selectedItems, setSelectedItems] = useState([]) const { sort } = sortOptions const itemsPerPage = getScreenBasedLimit(breakpoints, itemsLoadLimit) @@ -94,9 +96,12 @@ const QuizzesContainer = () => { {loading ? ( diff --git a/src/containers/my-resources/add-resource-with-input/AddResourceWithInput.styles.ts b/src/containers/my-resources/add-resource-with-input/AddResourceWithInput.styles.ts index 4e29aa17ec..332d8f0878 100644 --- a/src/containers/my-resources/add-resource-with-input/AddResourceWithInput.styles.ts +++ b/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' } } diff --git a/src/containers/my-resources/add-resource-with-input/AddResourceWithInput.tsx b/src/containers/my-resources/add-resource-with-input/AddResourceWithInput.tsx index 8b04587e32..47d3e17d00 100644 --- a/src/containers/my-resources/add-resource-with-input/AddResourceWithInput.tsx +++ b/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,6 +27,9 @@ interface AddResourceWithInputProps { link?: string searchRef: MutableRefObject button?: ReactElement + categoryService?: ServiceFunction + selectedItems?: string[] + setItems?: Dispatch> } const AddResourceWithInput: FC = ({ @@ -30,7 +37,10 @@ const AddResourceWithInput: FC = ({ fetchData, link, searchRef, - button + button, + categoryService, + selectedItems, + setItems }) => { const { t } = useTranslation() const [searchInput, setSearchInput] = useState('') @@ -51,6 +61,13 @@ const AddResourceWithInput: FC = ({ void fetchData() } + const filterProps = { + title: 'Category', + service: categoryService, + selectedItems: selectedItems, + setSelectedItems: setItems + } + return ( {!button ? ( @@ -61,15 +78,17 @@ const AddResourceWithInput: FC = ({ ) : ( button )} - - } - onChange={onChange} - onClear={onClear} - placeholder={t('common.search')} - sx={styles.input} - value={searchInput} - /> + + {categoryService ? : ''} + } + onChange={onChange} + onClear={onClear} + placeholder={t('common.search')} + sx={styles.input} + value={searchInput} + /> + ) } diff --git a/src/containers/my-resources/attachments-container/AttachmentsContainer.tsx b/src/containers/my-resources/attachments-container/AttachmentsContainer.tsx index cd0f2b8121..bfb2d17f29 100644 --- a/src/containers/my-resources/attachments-container/AttachmentsContainer.tsx +++ b/src/containers/my-resources/attachments-container/AttachmentsContainer.tsx @@ -41,6 +41,7 @@ const AttachmentsContainer = () => { const sortOptions = useSort({ initialSort }) const searchFileName = useRef('') const [selectedItemId, setSelectedItemId] = useState('') + const [selectedItems, setSelectedItems] = useState([]) 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} /> ) diff --git a/src/containers/my-resources/categories-container/CategoriesContainer.tsx b/src/containers/my-resources/categories-container/CategoriesContainer.tsx index 1d1651fbff..e7b1ec42a8 100644 --- a/src/containers/my-resources/categories-container/CategoriesContainer.tsx +++ b/src/containers/my-resources/categories-container/CategoriesContainer.tsx @@ -63,7 +63,7 @@ const CategoriesContainer = () => { limit: itemsPerPage, skip: (page - 1) * itemsPerPage, sort, - title: searchTitle.current + name: searchTitle.current }), [page, itemsPerPage, sort, searchTitle] ) diff --git a/src/containers/my-resources/lessons-container/LessonsContainer.tsx b/src/containers/my-resources/lessons-container/LessonsContainer.tsx index 4f3b75d7a3..c703a3ccee 100644 --- a/src/containers/my-resources/lessons-container/LessonsContainer.tsx +++ b/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('') const breakpoints = useBreakpoints() + const [selectedItems, setSelectedItems] = useState([]) const { sort } = sortOptions const itemsPerPage = getScreenBasedLimit(breakpoints, itemsLoadLimit) @@ -103,9 +104,12 @@ const LessonsContainer = () => { {loading ? ( diff --git a/src/containers/my-resources/questions-container/QuestionsContainer.tsx b/src/containers/my-resources/questions-container/QuestionsContainer.tsx index 5b6e981156..78975651ac 100644 --- a/src/containers/my-resources/questions-container/QuestionsContainer.tsx +++ b/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' @@ -34,6 +34,7 @@ const QuestionsContainer = () => { const searchTitle = useRef('') const breakpoints = useBreakpoints() const { page, handleChangePage } = usePagination() + const [selectedItems, setSelectedItems] = useState([]) const { sort } = sortOptions const itemsPerPage = getScreenBasedLimit(breakpoints, itemsLoadLimit) @@ -59,9 +60,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< @@ -93,9 +95,12 @@ const QuestionsContainer = () => { {loading ? (