diff --git a/client/src/modules/MentorRegistry/components/MentorRegistryTableContainer.tsx b/client/src/modules/MentorRegistry/components/MentorRegistryTableContainer.tsx index a7c912c48..dbf90e74f 100644 --- a/client/src/modules/MentorRegistry/components/MentorRegistryTableContainer.tsx +++ b/client/src/modules/MentorRegistry/components/MentorRegistryTableContainer.tsx @@ -1,17 +1,11 @@ -import { Dispatch, SetStateAction, useMemo, useState } from 'react'; +import { Dispatch, SetStateAction } from 'react'; import { GithubUserLink } from 'components/GithubUserLink'; import { SafetyCertificateTwoTone } from '@ant-design/icons'; import { colorTagRenderer, getColumnSearchProps, stringSorter, tagsRenderer, dateSorter } from 'components/Table'; import { formatDate } from 'services/formatter'; import { Course } from 'services/models'; import CopyToClipboardButton from 'components/CopyToClipboardButton'; -import { - MentorsRegistryColumnKey, - MentorsRegistryColumnName, - TABS, - MentorRegistryTabsMode, - PAGINATION, -} from '../constants'; +import { MentorsRegistryColumnKey, MentorsRegistryColumnName, TABS, MentorRegistryTabsMode } from '../constants'; import { FilterValue } from 'antd/lib/table/interface'; import { Button, Dropdown, Tooltip, message } from 'antd'; import { MoreOutlined, MessageTwoTone } from '@ant-design/icons'; @@ -19,8 +13,6 @@ import { ColumnType } from 'antd/lib/table'; import { DisciplineDto, MentorRegistryDto } from 'api'; import { ModalDataMode } from 'pages/admin/mentor-registry'; import css from 'styled-jsx/css'; -import { MentorRegistryService } from 'services/mentorRegistry'; -import { useAsync } from 'react-use'; interface ChildrenProp { setCurrentPage: Dispatch>; @@ -41,6 +33,13 @@ interface Props { handleModalDataChange: (mode: ModalDataMode, record: MentorRegistryDto) => void; children: (props: ChildrenProp) => JSX.Element; disciplines: DisciplineDto[]; + tagFilters: string[]; + setTagFilters: Dispatch>; + combinedFilter: CombinedFilter; + setCombinedFilter: Dispatch>; + setCurrentPage: Dispatch>; + currentPage: number; + total: number; } export interface CombinedFilter { @@ -52,7 +51,6 @@ export interface CombinedFilter { filterTags?: string[]; } -const mentorRegistryService = new MentorRegistryService(); export const MentorRegistryTableContainer = ({ children, mentors, @@ -60,20 +58,14 @@ export const MentorRegistryTableContainer = ({ activeTab, handleModalDataChange, disciplines, + tagFilters, + setTagFilters, + combinedFilter, + setCombinedFilter, + setCurrentPage, + currentPage, + total, }: Props) => { - const [tagFilters, setTagFilters] = useState([]); - const [combinedFilter, setCombinedFilter] = useState({ - preferredCourses: [], - preselectedCourses: [], - technicalMentoring: [], - githubId: [], - cityName: [], - }); - - const [currentPage, setCurrentPage] = useState(1); - const [total, setTotal] = useState(0); - const [loaded, setLoaded] = useState(null); - const renderPreselectedCourses = (courses: Course[]) => { return (values: number[], record: MentorRegistryDto) => { return values @@ -117,28 +109,6 @@ export const MentorRegistryTableContainer = ({ ); }; - const filteredData = useMemo(() => { - return mentors.filter( - mentor => - (combinedFilter.technicalMentoring.length - ? mentor.technicalMentoring.some(value => combinedFilter.technicalMentoring.includes(value)) - : true) && - (combinedFilter.preselectedCourses.length - ? mentor.preselectedCourses.some(value => combinedFilter.preselectedCourses.includes(value)) - : true) && - (combinedFilter.preferredCourses.length - ? mentor.preferedCourses.some(value => combinedFilter.preferredCourses.includes(value)) - : true) && - (combinedFilter.githubId?.length - ? mentor.githubId.toLowerCase().includes(combinedFilter.githubId[0].toLocaleLowerCase()) || - mentor.name.toLowerCase().includes(combinedFilter.githubId[0].toLocaleLowerCase()) - : true) && - (combinedFilter.cityName?.length - ? mentor.cityName?.toLowerCase().includes(combinedFilter.cityName[0].toLocaleLowerCase()) - : true), - ); - }, [combinedFilter, mentors]); - const handleTableChange = async ( _: any, filters: Record, @@ -389,35 +359,9 @@ export const MentorRegistryTableContainer = ({ setTagFilters([]); }; - useAsync(async () => { - try { - const { mentors, total } = await mentorRegistryService.getMentors({ - pageSize: PAGINATION, - currentPage, - githubId: combinedFilter.githubId?.[0] ?? undefined, - cityName: combinedFilter.cityName?.[0] ?? undefined, - preferedCourses: combinedFilter.preferredCourses?.length - ? combinedFilter.preferredCourses.map(Number) - : undefined, - preselectedCourses: combinedFilter.preselectedCourses?.length - ? combinedFilter.preselectedCourses.map(Number) - : undefined, - technicalMentoring: combinedFilter.technicalMentoring?.length - ? (combinedFilter.technicalMentoring as string[]) - : undefined, - }); - setLoaded(mentors); - setTotal(total); - } catch (e) { - message.error('An error occurred. No filters have been applied.'); - setLoaded(filteredData); - setTotal(filteredData.length); - } - }, [JSON.stringify(combinedFilter), currentPage]); - return children({ tagFilters, - filteredData: loaded || filteredData, + filteredData: mentors, columns: getColumns(combinedFilter, courses), currentPage, total, diff --git a/client/src/pages/admin/mentor-registry.tsx b/client/src/pages/admin/mentor-registry.tsx index 23ed94396..f93605335 100644 --- a/client/src/pages/admin/mentor-registry.tsx +++ b/client/src/pages/admin/mentor-registry.tsx @@ -11,8 +11,11 @@ import { ModalForm } from 'components/Forms'; import { MentorRegistryResendModal } from 'modules/MentorRegistry/components/MentorRegistryResendModal'; import { MentorRegistryDeleteModal } from 'modules/MentorRegistry/components/MentorRegistryDeleteModal'; import { MentorRegistryTable } from 'modules/MentorRegistry/components/MentorRegistryTable'; -import { MentorRegistryTableContainer } from 'modules/MentorRegistry/components/MentorRegistryTableContainer'; -import { MentorRegistryTabsMode } from 'modules/MentorRegistry/constants'; +import { + CombinedFilter, + MentorRegistryTableContainer, +} from 'modules/MentorRegistry/components/MentorRegistryTableContainer'; +import { MentorRegistryTabsMode, PAGINATION } from 'modules/MentorRegistry/constants'; import { useLoading } from 'components/useLoading'; import { AdminPageLayout } from 'components/PageLayout'; import { tabRenderer } from 'components/TabsWithCounter/renderers'; @@ -61,6 +64,16 @@ function Page() { const [activeTab, setActiveTab] = useState(MentorRegistryTabsMode.New); const [disciplines, setDisciplines] = useState([]); const [isModalOpen, setIsModalOpen] = useState(false); + const [tagFilters, setTagFilters] = useState([]); + const [combinedFilter, setCombinedFilter] = useState({ + preferredCourses: [], + preselectedCourses: [], + technicalMentoring: [], + githubId: [], + cityName: [], + }); + const [currentPage, setCurrentPage] = useState(1); + const [total, setTotal] = useState(0); const updateData = (showAll: boolean, allData: MentorRegistryDto[]) => { setShowAll(showAll); @@ -70,9 +83,25 @@ function Page() { }; const loadData = withLoading(async () => { - const [allData, courses] = await Promise.all([mentorRegistryService.getMentors(), coursesService.getCourses()]); + const [allData, courses] = await Promise.all([ + mentorRegistryService.getMentors({ + pageSize: PAGINATION, + currentPage, + githubId: combinedFilter.githubId?.[0] ?? undefined, + cityName: combinedFilter.cityName?.[0] ?? undefined, + preferedCourses: combinedFilter.preferredCourses?.length + ? combinedFilter.preferredCourses.map(Number) + : undefined, + preselectedCourses: combinedFilter.preselectedCourses?.length + ? combinedFilter.preselectedCourses.map(Number) + : undefined, + technicalMentoring: combinedFilter.technicalMentoring?.length ? combinedFilter.technicalMentoring : undefined, + }), + coursesService.getCourses(), + ]); const { data: disciplines } = await disciplinesApi.getDisciplines(); setAllData(allData.mentors); + setTotal(allData.total); setCourses(courses); updateData(showAll, allData.mentors); setDisciplines(disciplines); @@ -97,7 +126,7 @@ function Page() { } }); - useAsync(loadData, []); + useAsync(loadData, [combinedFilter, currentPage]); const openNotificationWithIcon = (type: NotificationType) => { api[type]({ @@ -231,6 +260,13 @@ function Page() { activeTab={activeTab} disciplines={disciplines} handleModalDataChange={handleModalDataChange} + tagFilters={tagFilters} + setTagFilters={setTagFilters} + combinedFilter={combinedFilter} + setCombinedFilter={setCombinedFilter} + setCurrentPage={setCurrentPage} + currentPage={currentPage} + total={total} > {mentorRegistryProps => }