Enhance Mentor Filter Functionality

README.md

@@ -3,6 +3,8 @@ Frontend dashboard of the scholarX platform
 
 ## Setup Development Environment
 
+### **Project setup walkthrough :- https://youtu.be/1STopJMM2nM**
+
 1. Clone your forked repository
     ```
     git clone https://github.com/USERNAME/scholarx-frontend

package.json

@@ -18,7 +18,10 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@emotion/react": "^11.13.5",
+    "@emotion/styled": "^11.13.5",
     "@hookform/resolvers": "^3.3.4",
+    "@mui/material": "^6.3.1",
     "@tanstack/react-query": "^5.28.4",
     "@tanstack/react-query-devtools": "^5.37.1",
     "axios": "^1.4.0",

src/components/Layout/Navbar/index.tsx

@@ -74,6 +74,20 @@ const Navbar: React.FC = () => {
     };
   }, []);
 
+  useEffect(() => {
+    if (user) {
+      if (isUserMentor) {
+        navigate('/mentor/dashboard');
+      } else if (isUserAdmin) {
+        navigate('/admin/dashboard/mentor-applications');
+      } else if (isUserMentee) {
+        navigate('/mentee/dashboard');
+      } else {
+        navigate('/');
+      }
+    }
+  }, [user]);
+
   return (
     <div className="fixed top-0 start-0 flex justify-between w-full z-20">
       <nav className="bg-white border-gray-200 container mx-auto">

src/components/MenteeCard/index.tsx

@@ -39,7 +39,7 @@ const MenteeCard: React.FC<MenteeCardProps> = ({
           </p>
         ) : (
           <>
-            <p className="text-sm">{mentee.application.position}</p>,
+            <p className="text-sm">{mentee.application.position}</p>
             <p className="text-xs text-gray-500">
               {mentee.application.company}
             </p>

src/components/MonthlyChecking/MenteeCheckInFormModal.component.tsx

@@ -39,7 +39,7 @@ const MonthlyCheckInModal: React.FC<{
   } = useForm<MenteeCheckInForm>({
     resolver: zodResolver(MenteeCheckInSchema),
     defaultValues: {
-      title: '',
+      month: '',
       progressTowardsGoals: '',
       generalUpdatesAndFeedback: '',
       mediaContentLinks: [],
@@ -107,9 +107,9 @@ const MonthlyCheckInModal: React.FC<{
                 Select the month for which you are submitting the progress.
               </p>
               <select
-                {...register('title', { required: 'Month is required' })}
+                {...register('month', { required: 'Month is required' })}
                 className={`mt-1 block w-full border ${
-                  errors.title ? 'border-red-500' : 'border-gray-300'
+                  errors.month ? 'border-red-500' : 'border-gray-300'
                 } rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500`}
               >
                 <option value="">Select a month</option>
@@ -119,9 +119,9 @@ const MonthlyCheckInModal: React.FC<{
                   </option>
                 ))}
               </select>
-              {errors.title && (
+              {errors.month && (
                 <p className="text-red-500 text-xs mt-1">
-                  {errors.title.message}
+                  {errors.month.message}
                 </p>
               )}
             </div>

src/components/MonthlyChecking/MenteeMonthlyChecking.tsx

@@ -29,7 +29,7 @@ const CheckInItem: React.FC<CheckInItemProps> = ({ checkIn }) => {
       >
         <div className="flex justify-between items-center">
           <h4 className="text-lg font-medium text-gray-700 truncate flex-1">
-            {checkIn.title}
+            {checkIn.month}
           </h4>
           <ArrowIcon isExpanded={isExpanded} />
         </div>

src/components/MonthlyChecking/MentorMonthlyChecking.tsx

@@ -45,7 +45,7 @@ const CheckInItem: React.FC<CheckInItemProps> = ({
       >
         <div className="flex justify-between items-center">
           <h4 className="text-lg font-medium text-gray-700 truncate flex-1">
-            {checkIn.title}
+            {checkIn.month}
           </h4>
           <ArrowIcon isExpanded={isExpanded} />
         </div>

src/hooks/useCountries.ts

@@ -0,0 +1,22 @@
+import { useQuery } from '@tanstack/react-query';
+import { API_URL } from '../constants';
+import axios from 'axios';
+
+const useCountries = () => {
+  const { isLoading, error, data } = useQuery({
+    queryKey: ['countries'],
+    initialData: [],
+    queryFn: async () => {
+      const { data } = await axios.get(`${API_URL}/countries`);
+      return data.data;
+    },
+  });
+
+  return {
+    isLoading,
+    error,
+    data,
+  };
+};
+
+export default useCountries;

src/pages/Dashboard/scenes/OngoingMentorshipPrograms/OngoingMentorshipPrograms.tsx

@@ -52,7 +52,7 @@ const OngoingMentorshipPrograms: React.FC = () => {
     <div className="flex flex-col md:flex-row min-h-screen">
       <div className="md:w-1/4 p-4 bg-blue-50">
         <h2 className="text-2xl font-semibold mb-4">Approved Mentees</h2>
-        <div className="h-96 overflow-y-auto md:overflow-y-visible">
+        <div className="h-96 md:h-[32rem] overflow-y-auto md:overflow-y-auto">
           {approvedMentees.map(renderMenteeLink)}
           {approvedMentees.length === 0 && (
             <p className="text-gray-600">No approved mentees available.</p>

src/pages/MentorProfile/MentorProfile.component.tsx

@@ -193,22 +193,28 @@ const MentorProfile: React.FC = () => {
         </div>
         <div className="flex flex-row md:gap-9 md:m-5 gap-4 mt-4">
           <span className="w-0.5 h-24 bg-gray-300 md:block hidden"></span>
-          <a
-            href={mentor?.application.linkedin}
-            target="_blank"
-            rel="noreferrer"
-            className="text-blue-500 underline"
-          >
-            Linkedin
-          </a>
-          <a
-            href={mentor?.application.website}
-            target="_blank"
-            rel="noreferrer"
-            className="text-blue-500 underline"
-          >
-            Website
-          </a>
+
+          {mentor?.application.linkedin && (
+            <a
+              href={mentor.application.linkedin}
+              target="_blank"
+              rel="noreferrer"
+              className="text-blue-500 underline"
+            >
+              Linkedin
+            </a>
+          )}
+
+          {mentor?.application.website && (
+            <a
+              href={mentor.application.website}
+              target="_blank"
+              rel="noreferrer"
+              className="text-blue-500 underline"
+            >
+              Website
+            </a>
+          )}
         </div>
       </div>
       <div className="pb-4">

src/pages/MentorRegistration/MentorRegistration.component.tsx

@@ -14,6 +14,7 @@ import { useLoginModalContext } from '../../contexts/LoginModalContext';
 import useMentor from '../../hooks/useMentor';
 import { Link } from 'react-router-dom';
 import TermsAgreementModalMentor from '../../components/TermsAgreementModal';
+import useCountries from '../../hooks/useCountries';
 
 const steps = [
   {
@@ -63,6 +64,12 @@ const MentorRegistrationPage: React.FC = () => {
     error: categoriesError,
   } = useCategories();
 
+  const {
+    data: allCountries,
+    isLoading: countriesLoading,
+    error: countriesError,
+  } = useCountries();
+
   const {
     createMentorApplication,
     applicationError,
@@ -265,14 +272,25 @@ const MentorRegistrationPage: React.FC = () => {
               register={register}
               error={errors.contactNo}
             />
-            <FormInput
-              type="text"
-              placeholder="United States"
-              name="country"
-              label="Country"
-              register={register}
-              error={errors.country}
-            />
+            <div className="mb-4">
+              <label className="block text-sm font-medium text-gray-600">
+                Country
+              </label>
+              {!countriesLoading && (
+                <select
+                  className="mt-1 p-2 w-1/2 border rounded-md"
+                  {...register('country')}
+                >
+                  {allCountries.map(
+                    (country: { uuid: string; name: string }) => (
+                      <option key={country.uuid} value={country.uuid}>
+                        {country.name}
+                      </option>
+                    )
+                  )}
+                </select>
+              )}
+            </div>
           </>
         )}
         {currentStep === 1 && (