fix: reload metor registries after approve (#2517)

* feat: implement showing preselected courses after invitation without reloading page * refactor: remove unused imports * refactor: remove redundant type assertion * fix: fix eslit issue
rolling-scopes · Jul 22, 2024 · cca1b59 · cca1b59
1 parent 63fd8c7
commit cca1b59
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 77 deletions.
diff --git a/client/src/modules/MentorRegistry/components/MentorRegistryTableContainer.tsx b/client/src/modules/MentorRegistry/components/MentorRegistryTableContainer.tsx
@@ -1,26 +1,18 @@
-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';
 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<SetStateAction<number>>;
@@ -41,6 +33,13 @@ interface Props {
   handleModalDataChange: (mode: ModalDataMode, record: MentorRegistryDto) => void;
   children: (props: ChildrenProp) => JSX.Element;
   disciplines: DisciplineDto[];
+  tagFilters: string[];
+  setTagFilters: Dispatch<SetStateAction<string[]>>;
+  combinedFilter: CombinedFilter;
+  setCombinedFilter: Dispatch<SetStateAction<CombinedFilter>>;
+  setCurrentPage: Dispatch<SetStateAction<number>>;
+  currentPage: number;
+  total: number;
 }
 
 export interface CombinedFilter {
@@ -52,28 +51,21 @@ export interface CombinedFilter {
   filterTags?: string[];
 }
 
-const mentorRegistryService = new MentorRegistryService();
 export const MentorRegistryTableContainer = ({
   children,
   mentors,
   courses,
   activeTab,
   handleModalDataChange,
   disciplines,
+  tagFilters,
+  setTagFilters,
+  combinedFilter,
+  setCombinedFilter,
+  setCurrentPage,
+  currentPage,
+  total,
 }: Props) => {
-  const [tagFilters, setTagFilters] = useState<string[]>([]);
-  const [combinedFilter, setCombinedFilter] = useState<CombinedFilter>({
-    preferredCourses: [],
-    preselectedCourses: [],
-    technicalMentoring: [],
-    githubId: [],
-    cityName: [],
-  });
-
-  const [currentPage, setCurrentPage] = useState(1);
-  const [total, setTotal] = useState(0);
-  const [loaded, setLoaded] = useState<MentorRegistryDto[] | null>(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<MentorsRegistryColumnKey, FilterValue | string[] | null>,
@@ -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
@@ -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>(MentorRegistryTabsMode.New);
   const [disciplines, setDisciplines] = useState<DisciplineDto[]>([]);
   const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
+  const [tagFilters, setTagFilters] = useState<string[]>([]);
+  const [combinedFilter, setCombinedFilter] = useState<CombinedFilter>({
+    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 => <MentorRegistryTable {...mentorRegistryProps} />}
         </MentorRegistryTableContainer>