Add status to the query in admin emails dashboard, mentee and mentor …

…registration - part 2
sef-global · Sep 7, 2024 · 3bebf5b · 3bebf5b
1 parent c5d4654
commit 3bebf5b
Show file tree

Hide file tree

Showing 5 changed files with 111 additions and 85 deletions.
diff --git 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
@@ -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
@@ -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 && (
           <div className="flex mb-3">
-            {filters.map(({ label, status }) => {
-              const count = mentees?.filter((mentee) =>
-                status.length > 0 ? mentee.state === status : true
-              ).length;
+            {filters.map(({ label, status, count, isLoaded }) => {
               return (
                 <button
                   key={label}
@@ -61,7 +101,7 @@ const MenteeApplications: React.FC = () => {
                     setFilter(status);
                   }}
                 >
-                  {label} ({count})
+                  {label} {isLoaded && `(${count})`}
                 </button>
               );
             })}

diff --git 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<Category[]>([]);
   const pageSize = 10;
 
   const { ref, inView } = useInView();
@@ -26,41 +25,33 @@ 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) {
       void fetchNextPage();
     }
   }, [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<HTMLSelectElement>
   ) => {
@@ -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 && (
           <div className="flex mb-3">
-            {filters.map(({ label, status }) => {
-              const count = mentors.filter((mentor) =>
-                status.length > 0 ? mentor.state === status : true
-              ).length;
+            {filters.map(({ label, status, count, isLoaded }) => {
               return (
                 <button
                   key={label}
@@ -117,7 +125,7 @@ const MentorApplications: React.FC = () => {
                     setFilter(status);
                   }}
                 >
-                  {label} ({count})
+                  {label} {isLoaded ? `(${count})` : ''}
                 </button>
               );
             })}
@@ -168,13 +176,13 @@ const MentorApplications: React.FC = () => {
               className="p-2 mb-4 border border-gray-300 rounded-md ml-4"
             >
               <option value="">All Categories</option>
-              {allCategories.map(
-                (category: { uuid: string; category: string }) => (
+              {categoriesData?.pages
+                ?.flatMap((page) => page.items)
+                .map((category: { uuid: string; category: string }) => (
                   <option key={category.uuid} value={category.uuid}>
                     {category.category}
                   </option>
-                )
-              )}
+                ))}
             </select>
           </div>
           <p className="text-md m-4">Total Mentee Slots: {totalMentees}</p>

diff --git a/src/pages/MenteeRegistration/index.tsx b/src/pages/MenteeRegistration/index.tsx
@@ -1,17 +1,17 @@
 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';
 
 import FormCheckbox from '../../components/FormFields/MenteeApplication/FormCheckbox';
 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<Mentor[]>([]);
-
-  const {
-    data,
-    fetchNextPage,
-    hasNextPage,
-    // isFetchingNextPage,
-    // status: mentorsStatus,
-  } = usePublicMentors(null, 10);
 
   const [currentStep, setCurrentStep] = useState(0);
   const [image, setImage] = useState<File | null>(null);
   const [profilePic, setProfilePic] = useState(user?.image_url);
+  const { data: mentor, isLoading: isMentorLoading } = useMentor(mentorId);
 
   const handleProfilePicChange = (event: ChangeEvent<HTMLInputElement>) => {
     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 (
     <div className="relative w-full">
       <div className="text-2xl font-semibold mb-2">Become a Mentee</div>
@@ -349,19 +330,12 @@ const MenteeRegistration: React.FC = () => {
               <label className="block text-sm font-medium text-gray-600">
                 Mentor
               </label>
-              <select
-                className="mt-1 p-2 w-1/2 border rounded-md"
-                {...register('mentorId')}
-              >
-                {allMentors
-                  ?.filter((mentor: Mentor) => mentor.availability)
-                  .map((mentor: Mentor) => (
-                    <option key={mentor.uuid} value={mentor.uuid}>
-                      {mentor.application.firstName}{' '}
-                      {mentor.application.lastName}
-                    </option>
-                  ))}
-              </select>
+              <p>
+                {isMentorLoading &&
+                  `${mentor?.application?.firstName ?? ''} ${
+                    mentor?.application?.lastName ?? ''
+                  }`}
+              </p>
             </div>
             <FormInput
               type="text"