diff --git a/src/pages/api/mentors.ts b/src/pages/api/mentors.ts index ab1eba1..5ff6ce2 100644 --- a/src/pages/api/mentors.ts +++ b/src/pages/api/mentors.ts @@ -11,11 +11,24 @@ export default async function handler( return res.status(405).json({ error: `Method ${req.method} Not Allowed` }); } try { - const { keyword, yearsExperience, areas, language, focus } = req.query; + const { + keyword, + mentorshipTypes, + yearsExperience, + areas, + language, + focus, + } = req.query; const params = new URLSearchParams(); if (keyword) params.append('keyword', Array.isArray(keyword) ? keyword[0] : keyword); + if (mentorshipTypes) { + params.append( + 'mentorshipTypes', + Array.isArray(mentorshipTypes) ? mentorshipTypes[0] : mentorshipTypes, + ); + } if (yearsExperience) params.append( 'yearsExperience', diff --git a/src/pages/mentorship/mentors.tsx b/src/pages/mentorship/mentors.tsx index 9b4a16c..090b5b9 100644 --- a/src/pages/mentorship/mentors.tsx +++ b/src/pages/mentorship/mentors.tsx @@ -19,7 +19,11 @@ import { useRouter } from 'next/router'; import { useEffect, useState } from 'react'; import { BreadCrumbsDynamic, MentorProfileCard, Title } from '@components'; -import { FILTER_EXPERIENCE_OPTIONS } from '@utils/mentorshipConstants'; +import { + ALL_MENTORSHIP_TYPES, + FILTER_EXPERIENCE_OPTIONS, + FILTER_MENTORSHIP_TYPES_OPTIONS, +} from '@utils/mentorshipConstants'; import { useIsMobile } from '@utils/theme-utils'; // eslint-disable-next-line import/order import { Mentor } from '@utils/types'; @@ -28,6 +32,7 @@ type FilterSection = { types: string[]; skills: { yearsExperience?: number; + mentorshipTypes: string[]; areas: string[]; languages: string[]; mentorshipFocus: string[]; @@ -37,6 +42,8 @@ type FilterSection = { import theme from 'theme'; const filterYearExperienceOptions = FILTER_EXPERIENCE_OPTIONS; +const filterMentorshipTypeOptions = FILTER_MENTORSHIP_TYPES_OPTIONS; + const MentorsPage = () => { const router = useRouter(); const isMobile = useIsMobile(); @@ -46,6 +53,8 @@ const MentorsPage = () => { const [loading, setLoading] = useState(false); const [filtersOpen, setFiltersOpen] = useState(false); const [keyword, setKeyword] = useState(''); + const [selectedMentorshipType, setSelectedMentorshipType] = + useState(''); const [selectedYearsExperience, setSelectedYearsExperience] = useState(''); const [selectedAreas, setSelectedAreas] = useState(''); @@ -59,6 +68,9 @@ const MentorsPage = () => { useEffect(() => { if (!query) return; if (typeof query.keyword === 'string') setKeyword(query.keyword); + if (typeof query.mentorshipTypes === 'string') { + setSelectedMentorshipType(query.mentorshipTypes); + } if (typeof query.yearsExperience === 'string') { setSelectedYearsExperience(query.yearsExperience); } else { @@ -80,6 +92,7 @@ const MentorsPage = () => { const params = new URLSearchParams(); const filterKeys = [ 'keyword', + 'mentorshipTypes', 'yearsExperience', 'areas', 'language', @@ -127,6 +140,7 @@ const MentorsPage = () => { const applyFilters = (opts?: { keyword?: string; + mentorshipTypes?: string; yearsExperience?: string; areas?: string; language?: string; @@ -151,6 +165,7 @@ const MentorsPage = () => { const handleClearFilters = () => { setKeyword(''); + setSelectedMentorshipType(''); setSelectedYearsExperience(''); setSelectedAreas(''); setSelectedLanguage(''); @@ -260,6 +275,38 @@ const MentorsPage = () => { {/* First row: filter dropdowns */} + + + Mentorship type + + + Experience diff --git a/src/utils/mentorshipConstants.ts b/src/utils/mentorshipConstants.ts index d4db893..dc7fecf 100644 --- a/src/utils/mentorshipConstants.ts +++ b/src/utils/mentorshipConstants.ts @@ -27,6 +27,14 @@ export const MENTORSHIP_TYPES: LabelValue[] = [ { label: 'Ad-Hoc', value: 'AD_HOC' }, ]; +export const ALL_MENTORSHIP_TYPES = 'All'; + +export const FILTER_MENTORSHIP_TYPES_OPTIONS = [ + { label: 'All', value: ALL_MENTORSHIP_TYPES }, + { label: 'Long-term', value: 'Long-Term' }, + { label: 'Ad-hoc', value: 'Ad-Hoc' }, +] as const; + export const MENTORSHIP_FOCUS_AREAS: LabelValue[] = [ { label: 'Switch career to IT', value: 'SWITCH_CAREER_TO_IT' }, { label: 'Grow from beginner to mid-level', value: 'GROW_BEGINNER_TO_MID' },