diff --git a/src/hooks/admin/useMentees.ts b/src/hooks/admin/useMentees.ts index 619232f5..ab99918e 100644 --- a/src/hooks/admin/useMentees.ts +++ b/src/hooks/admin/useMentees.ts @@ -87,6 +87,7 @@ const useMentees = (menteeStatus: string | null, pageSize = 10) => { }); const mentees = data?.pages.flatMap((page) => page.items) ?? []; + const totalItemCount = data?.pages[0]?.totalItemCount ?? 0; return { data: mentees, @@ -95,6 +96,7 @@ const useMentees = (menteeStatus: string | null, pageSize = 10) => { isFetchingNextPage, status, updateStatus, + totalItemCount, }; }; diff --git a/src/hooks/admin/useMentors.ts b/src/hooks/admin/useMentors.ts index f4d399da..0e6ecb23 100644 --- a/src/hooks/admin/useMentors.ts +++ b/src/hooks/admin/useMentors.ts @@ -94,6 +94,7 @@ export const useMentors = ( }); const mentors = data?.pages.flatMap((page) => page.items) ?? []; + const totalItemCount = data?.pages[0]?.totalItemCount ?? 0; return { data: mentors, @@ -102,5 +103,6 @@ export const useMentors = ( isFetchingNextPage, status, updateStatus, + totalItemCount, }; }; diff --git a/src/pages/Dashboard/scenes/MenteeApplications/MenteeApplications.tsx b/src/pages/Dashboard/scenes/MenteeApplications/MenteeApplications.tsx index 66389a8e..a261e2a4 100644 --- a/src/pages/Dashboard/scenes/MenteeApplications/MenteeApplications.tsx +++ b/src/pages/Dashboard/scenes/MenteeApplications/MenteeApplications.tsx @@ -19,6 +19,24 @@ const MenteeApplications: React.FC = () => { isFetchingNextPage, status: menteesStatus, } = useMentees(filter, pageSize); + const { status: allMenteesStatus, totalItemCount: totalAllItemCount } = + useMentees(null, 1); + const { + status: approvedMenteesStatus, + totalItemCount: totalApprovedItemCount, + } = useMentees('approved', 1); + const { + status: pendingMenteesStatus, + totalItemCount: totalPendingItemCount, + } = useMentees('pending', 1); + const { + status: rejectedMenteesStatus, + totalItemCount: totalRejectedItemCount, + } = useMentees('rejected', 1); + const { + status: completedMenteesStatus, + totalItemCount: totalCompletedItemCount, + } = useMentees('completed', 1); useEffect(() => { if (inView && hasNextPage) { @@ -28,21 +46,43 @@ const MenteeApplications: React.FC = () => { const renderFilters = () => { const filters = [ - { label: 'All', status: '' }, - { label: 'Approved', status: 'approved' }, - { label: 'Pending', status: 'pending' }, - { label: 'Rejected', status: 'rejected' }, - { label: 'Completed', status: 'completed' }, + { + label: 'All', + status: '', + count: totalAllItemCount, + isLoaded: allMenteesStatus === 'success', + }, + { + label: 'Approved', + status: 'approved', + count: totalApprovedItemCount, + isLoaded: approvedMenteesStatus === 'success', + }, + { + label: 'Pending', + status: 'pending', + count: totalPendingItemCount, + isLoaded: pendingMenteesStatus === 'success', + }, + { + label: 'Rejected', + status: 'rejected', + count: totalRejectedItemCount, + isLoaded: rejectedMenteesStatus === 'success', + }, + { + label: 'Completed', + status: 'completed', + count: totalCompletedItemCount, + isLoaded: completedMenteesStatus === 'success', + }, ]; return ( <> {mentees !== undefined && (
- {filters.map(({ label, status }) => { - const count = mentees?.filter((mentee) => - status.length > 0 ? mentee.state === status : true - ).length; + {filters.map(({ label, status, count, isLoaded }) => { return ( ); })} diff --git a/src/pages/Dashboard/scenes/MentorApplications/MentorApplications.tsx b/src/pages/Dashboard/scenes/MentorApplications/MentorApplications.tsx index ed5fc3ec..e56617b7 100644 --- a/src/pages/Dashboard/scenes/MentorApplications/MentorApplications.tsx +++ b/src/pages/Dashboard/scenes/MentorApplications/MentorApplications.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useMemo, useState } from 'react'; -import { Category, type Mentor } from '../../../../types'; +import { type Mentor } from '../../../../types'; import { useMentors } from '../../../../hooks/admin/useMentors'; import useCategories from '../../../../hooks/useCategories'; import { useQueryClient } from '@tanstack/react-query'; @@ -10,7 +10,6 @@ import Loading from '../../../../assets/svg/Loading'; const MentorApplications: React.FC = () => { const [filter, setFilter] = useState(''); const [searchTerm, setSearchTerm] = useState(''); - const [allCategories, setAllCategories] = useState([]); const pageSize = 10; const { ref, inView } = useInView(); @@ -26,13 +25,26 @@ const MentorApplications: React.FC = () => { status: mentorsStatus, } = useMentors(categoryFilter, filter, pageSize); + const { status: allMentorsStatus, totalItemCount: totalAllItemCount } = + useMentors(categoryFilter, null, 1); + const { + status: approvedMentorsStatus, + totalItemCount: totalApprovedItemCount, + } = useMentors(categoryFilter, 'approved', 1); + const { + status: pendingMentorsStatus, + totalItemCount: totalPendingItemCount, + } = useMentors(categoryFilter, 'pending', 1); + const { + status: rejectedMentorsStatus, + totalItemCount: totalRejectedItemCount, + } = useMentors(categoryFilter, 'rejected', 1); + const { data: categoriesData, isLoading: categoriesLoading, error: categoriesError, - fetchNextPage: fetchNextCategories, - hasNextPage: hasNextCategoriesPage, - } = useCategories(pageSize); + } = useCategories(100); useEffect(() => { if (inView && hasNextPage) { @@ -40,27 +52,6 @@ const MentorApplications: React.FC = () => { } }, [inView, fetchNextPage, hasNextPage]); - useEffect(() => { - if (categoriesData) { - const fetchedCategories = categoriesData.pages.flatMap( - (page) => page.items - ); - setAllCategories((prevCategories) => { - const uniqueCategories = [...prevCategories]; - fetchedCategories.forEach((category) => { - if (!uniqueCategories.some((c) => c.uuid === category.uuid)) { - uniqueCategories.push(category); - } - }); - return uniqueCategories; - }); - - if (hasNextCategoriesPage) { - void fetchNextCategories(); - } - } - }, [categoriesData, hasNextCategoriesPage, fetchNextCategories]); - const handleCategoryChange = async ( e: React.ChangeEvent ) => { @@ -85,20 +76,37 @@ const MentorApplications: React.FC = () => { const renderFilters = () => { const filters = [ - { label: 'All', status: '' }, - { label: 'Approved', status: 'approved' }, - { label: 'Pending', status: 'pending' }, - { label: 'Rejected', status: 'rejected' }, + { + label: 'All', + status: '', + count: totalAllItemCount, + isLoaded: allMentorsStatus === 'success', + }, + { + label: 'Approved', + status: 'approved', + count: totalApprovedItemCount, + isLoaded: approvedMentorsStatus === 'success', + }, + { + label: 'Pending', + status: 'pending', + count: totalPendingItemCount, + isLoaded: pendingMentorsStatus === 'success', + }, + { + label: 'Rejected', + status: 'rejected', + count: totalRejectedItemCount, + isLoaded: rejectedMentorsStatus === 'success', + }, ]; return ( <> {mentors && (
- {filters.map(({ label, status }) => { - const count = mentors.filter((mentor) => - status.length > 0 ? mentor.state === status : true - ).length; + {filters.map(({ label, status, count, isLoaded }) => { return ( ); })} @@ -168,13 +176,13 @@ const MentorApplications: React.FC = () => { className="p-2 mb-4 border border-gray-300 rounded-md ml-4" > - {allCategories.map( - (category: { uuid: string; category: string }) => ( + {categoriesData?.pages + ?.flatMap((page) => page.items) + .map((category: { uuid: string; category: string }) => ( - ) - )} + ))}

Total Mentee Slots: {totalMentees}

diff --git a/src/pages/MenteeRegistration/index.tsx b/src/pages/MenteeRegistration/index.tsx index 1120feb9..f18387a7 100644 --- a/src/pages/MenteeRegistration/index.tsx +++ b/src/pages/MenteeRegistration/index.tsx @@ -1,7 +1,7 @@ import { zodResolver } from '@hookform/resolvers/zod'; import { useMutation } from '@tanstack/react-query'; import axios, { AxiosError } from 'axios'; -import { ChangeEvent, useEffect, useState } from 'react'; +import { ChangeEvent, useState } from 'react'; import { SubmitHandler, useForm } from 'react-hook-form'; import { Link, useParams } from 'react-router-dom'; @@ -9,9 +9,9 @@ import FormCheckbox from '../../components/FormFields/MenteeApplication/FormChec import FormInput from '../../components/FormFields/MenteeApplication/FormInput'; import { API_URL } from '../../constants'; import useProfile from '../../hooks/useProfile'; -import { usePublicMentors } from '../../hooks/usePublicMentors'; import { MenteeApplicationSchema } from '../../schemas'; -import { MenteeApplication, Mentor } from '../../types'; +import { MenteeApplication } from '../../types'; +import useMentor from '../../hooks/useMentor'; const steps = [ { @@ -48,19 +48,11 @@ const MenteeRegistration: React.FC = () => { isUndergrad: true, }, }); - const [allMentors, setAllMentors] = useState([]); - - const { - data, - fetchNextPage, - hasNextPage, - // isFetchingNextPage, - // status: mentorsStatus, - } = usePublicMentors(null, 10); const [currentStep, setCurrentStep] = useState(0); const [image, setImage] = useState(null); const [profilePic, setProfilePic] = useState(user?.image_url); + const { data: mentor, isLoading: isMentorLoading } = useMentor(mentorId); const handleProfilePicChange = (event: ChangeEvent) => { if (event.target.files != null) { @@ -140,17 +132,6 @@ const MenteeRegistration: React.FC = () => { }, }); - useEffect(() => { - if (data) { - const allMentors = data.pages.flatMap((page) => page.items); - setAllMentors(allMentors); - } - - if (hasNextPage) { - void fetchNextPage(); - } - }, [data]); - return (
Become a Mentee
@@ -349,19 +330,12 @@ const MenteeRegistration: React.FC = () => { - +

+ {isMentorLoading && + `${mentor?.application?.firstName ?? ''} ${ + mentor?.application?.lastName ?? '' + }`} +