+
+
+ );
+};
+
+export default OpenIcon;
diff --git a/src/components/Layout/Navbar/index.tsx b/src/components/Layout/Navbar/index.tsx
index be88769b..07ad6a5b 100644
--- a/src/components/Layout/Navbar/index.tsx
+++ b/src/components/Layout/Navbar/index.tsx
@@ -1,6 +1,5 @@
import { RefObject, useContext, useEffect, useRef, useState } from 'react';
import { Link, useLocation, useNavigate } from 'react-router-dom';
-
import { useLoginModalContext } from '../../../contexts/LoginModalContext';
import { UserContext, UserContextType } from '../../../contexts/UserContext';
import StickyBanner from '../../Banner/StickyBanner';
@@ -84,13 +83,14 @@ const Navbar: React.FC = () => {
src="/scholarx-logo.png"
className="md:h-12 h-10"
alt="ScholarX Logo"
+ referrerPolicy="no-referrer"
/>
-
+
- Find a mentor @@ -99,7 +99,7 @@ const Navbar: React.FC = () => {
- About @@ -107,7 +107,7 @@ const Navbar: React.FC = () => {
- Initiatives @@ -115,17 +115,17 @@ const Navbar: React.FC = () => {
- Join Us {!isUserMentor && ( -
- +
-
@@ -137,7 +137,7 @@ const Navbar: React.FC = () => {
diff --git a/src/components/MenteeApplication/MenteeApplication.component.tsx b/src/components/MenteeApplication/MenteeApplication.component.tsx
index c543c0d7..926caac7 100644
--- a/src/components/MenteeApplication/MenteeApplication.component.tsx
+++ b/src/components/MenteeApplication/MenteeApplication.component.tsx
@@ -143,6 +143,7 @@ const MenteeApplication: React.FC = () => {
src={mentee?.mentor.profile.image_url}
className="w-14 h-14 rounded-full object-cover"
alt=""
+ referrerPolicy="no-referrer"
/>
diff --git a/src/components/MentorCard/MentorCard.component.tsx b/src/components/MentorCard/MentorCard.component.tsx index 3b651555..f836e544 100644 --- a/src/components/MentorCard/MentorCard.component.tsx +++ b/src/components/MentorCard/MentorCard.component.tsx @@ -5,9 +5,47 @@ import ProfilePic from '../ProfilePic/index.tsx'; interface MentorCardProps { mentor: Mentor; + variant?: 'default' | 'profile'; } -const MentorCard: React.FC
= ({ mentor }) => { +const MentorCard: React.FC = ({ + mentor, + variant = 'default', +}) => { + if (variant === 'profile') { + return ( + + +++ {!mentor.availability && ( + + ⏳ ++ )} +++ + ); + } + return ( ; + +const months = [ + 'January', + 'February', + 'March', + 'April', + 'May', + 'June', + 'July', + 'August', + 'September', + 'October', + 'November', + 'December', +]; + +const MonthlyCheckInModal: React.FC<{ + onClose: () => void; + isOpen: boolean; + menteeId: string; +}> = ({ onClose, isOpen, menteeId }) => { + const { + register, + setValue, + handleSubmit, + reset, + formState: { errors }, + } = useForm+ {mentor.application.firstName} {mentor.application.lastName} +
++ {mentor.application.position} +
++ {mentor.application.institution} +
+({ + resolver: zodResolver(MenteeCheckInSchema), + defaultValues: { + title: '', + progressTowardsGoals: '', + generalUpdatesAndFeedback: '', + mediaContentLinks: [], + }, + }); + + const [mediaLinks, setMediaLinks] = useState ++ + ); +}; + +export default MonthlyCheckInModal; diff --git a/src/components/MonthlyChecking/MenteeMonthlyChecking.tsx b/src/components/MonthlyChecking/MenteeMonthlyChecking.tsx new file mode 100644 index 00000000..c498d0d4 --- /dev/null +++ b/src/components/MonthlyChecking/MenteeMonthlyChecking.tsx @@ -0,0 +1,193 @@ +import React, { useState } from 'react'; +import { format } from 'date-fns'; +import NoCheckInsIcon from '../../assets/svg/Icons/NoCheckInsIcon'; +import { useMonthlyCheckIns } from '../../hooks/useSubmitCheckIn'; +import { MonthlyCheckIn } from '../../types'; +import NewSubmissionsToggle from '../Toggle/NewSubmissionToggle'; +import HistoryToggle from '../Toggle/HistoryToggle'; +import ArrowIcon from '../../assets/svg/Icons/ArrowIcon'; +import Loading from '../../assets/svg/Loading'; + +interface MenteeMonthlyCheckingProps { + menteeId: string; +} + +interface CheckInItemProps { + checkIn: MonthlyCheckIn; +} + +const CheckInItem: React.FC++++ +Monthly Check-In
+ += ({ checkIn }) => { + const [isExpanded, setIsExpanded] = useState(false); + + return ( + ++ ); +}; + +const MenteeMonthlyChecking: React.FC{ + setIsExpanded(!isExpanded); + }} + > ++ + {isExpanded && ( ++++ {checkIn.title} +
++ + Submitted on {format(new Date(checkIn.checkInDate), 'MMM dd, yyyy')} +
+++ )} ++++++ General Updates: +
++ {checkIn.generalUpdatesAndFeedback ?? 'No updates provided'} +
++++ Progress Towards Goals: +
++ {checkIn.progressTowardsGoals ?? 'No progress updates provided'} +
+++Submissions:
+ {checkIn.mediaContentLinks.map((link, index) => ( + + Media Link {index + 1} + + ))} ++++++ Mentor Feedback: +
+ {checkIn.mentorFeedback ? ( ++ {checkIn.mentorFeedback} +
+ ) : ( +No feedback yet
+ )} ++ + {checkIn.isCheckedByMentor + ? `✓ Checked on ${format( + new Date(checkIn.mentorCheckedDate ?? ''), + 'MMM dd, yyyy' + )}` + : '⏳ Pending review'} + ++= ({ + menteeId, +}) => { + const { data: checkInHistory = [], isLoading } = useMonthlyCheckIns(menteeId); + const [isNewSubmissionOpen, setNewSubmissionOpen] = useState(true); + const [isHistoryOpen, setIsHistoryOpen] = useState(false); + + if (isLoading) { + return ( + ++ ); + } + + if (checkInHistory.length === 0) { + return ( ++ ++ ); + } + + const uncheckedCheckIns = checkInHistory.filter( + (checkIn: MonthlyCheckIn) => !checkIn.isCheckedByMentor + ); + const checkedCheckIns = checkInHistory.filter( + (checkIn: MonthlyCheckIn) => checkIn.isCheckedByMentor + ); + + return ( ++ + No monthly check-ins yet +
++ Start by submitting your first monthly check-in! +
+++ ); +}; + +export default MenteeMonthlyChecking; diff --git a/src/components/MonthlyChecking/MentorFeedbackForm.component.tsx b/src/components/MonthlyChecking/MentorFeedbackForm.component.tsx new file mode 100644 index 00000000..2c20deab --- /dev/null +++ b/src/components/MonthlyChecking/MentorFeedbackForm.component.tsx @@ -0,0 +1,115 @@ +import React from 'react'; +import { useForm } from 'react-hook-form'; +import { zodResolver } from '@hookform/resolvers/zod'; +import { MentorFeedbackSchema } from '../../schemas'; +import { useMentorFeedback } from '../../hooks/useSubmitCheckIn'; +import Loading from '../../assets/svg/Loading'; + +interface MentorFeedbackFormData { + menteeId: string; + checkInId: string; + mentorFeedback: string; + isCheckedByMentor: boolean; +} + +interface MentorFeedbackFormProps { + menteeId: string; + checkInId: string; + onSubmit: () => Promise{ + setNewSubmissionOpen(!isNewSubmissionOpen); + }} + newSubmissionsCount={uncheckedCheckIns.length} + /> + {isNewSubmissionOpen && ( + + {uncheckedCheckIns.length > 0 ? ( + uncheckedCheckIns.map((checkIn) => ( ++ )} + ++ )) + ) : ( + ++ )} ++ No new check-ins to display.
+{ + setIsHistoryOpen(!isHistoryOpen); + }} + checkingCount={checkedCheckIns.length} + /> + {isHistoryOpen && ( + + {checkedCheckIns.length > 0 ? ( + checkedCheckIns.map((checkIn) => ( ++ )} ++ )) + ) : ( + No feedback history available.
+ )} +; +} + +const MentorFeedbackForm: React.FC = ({ + menteeId, + checkInId, + onSubmit, +}) => { + const { + register, + handleSubmit, + reset, + formState: { errors, isSubmitting }, + } = useForm ({ + resolver: zodResolver(MentorFeedbackSchema), + defaultValues: { + menteeId, + checkInId, + mentorFeedback: '', + isCheckedByMentor: false, + }, + }); + const { submitMentorFeedback, isSuccess, isError, error } = + useMentorFeedback(); + + const handleSubmitFeedback = async (data: MentorFeedbackFormData) => { + try { + await submitMentorFeedback(data); + await onSubmit(); + reset(); + } catch (error) { + console.error('Error submitting feedback:', error); + } finally { + reset(); + } + }; + + return ( + + ); +}; + +export default MentorFeedbackForm; diff --git a/src/components/MonthlyChecking/MentorMonthlyChecking.tsx b/src/components/MonthlyChecking/MentorMonthlyChecking.tsx new file mode 100644 index 00000000..f1f96303 --- /dev/null +++ b/src/components/MonthlyChecking/MentorMonthlyChecking.tsx @@ -0,0 +1,245 @@ +import React, { useState } from 'react'; +import { format } from 'date-fns'; +import MentorFeedbackForm from './MentorFeedbackForm.component'; +import NoCheckInsIcon from '../../assets/svg/Icons/NoCheckInsIcon'; +import { MonthlyCheckIn } from '../../types'; +import NewSubmissionsToggle from '../Toggle/NewSubmissionToggle'; +import HistoryToggle from '../Toggle/HistoryToggle'; +import ArrowIcon from '../../assets/svg/Icons/ArrowIcon'; +import Loading from '../../assets/svg/Loading'; + +interface MentorMonthlyCheckingProps { + menteeId: string; + checkInHistory: MonthlyCheckIn[]; + isLoading: boolean; + refetch: () => Promise ; + isAdmin?: boolean; +} + +interface CheckInItemProps { + checkIn: MonthlyCheckIn; + isHistory?: boolean; + onSubmitFeedback: (checkInId: string) => Promise ; + isSubmitting: boolean; + menteeId: string; + isAdmin?: boolean; +} + +const CheckInItem: React.FC = ({ + checkIn, + isHistory, + onSubmitFeedback, + isSubmitting, + menteeId, + isAdmin, +}) => { + const [isExpanded, setIsExpanded] = useState(false); + + return ( + ++ ); +}; + +const MentorMonthlyChecking: React.FC{ + setIsExpanded(!isExpanded); + }} + > ++ + {isExpanded && ( ++++ {checkIn.title} +
++ + Submitted on {format(new Date(checkIn.checkInDate), 'MMM dd, yyyy')} +
+++ )} ++++++ General Updates: +
++ {checkIn.generalUpdatesAndFeedback ?? 'No updates provided'} +
++++ Progress Towards Goals: +
++ {checkIn.progressTowardsGoals ?? 'No progress updates provided'} +
+++Submissions:
+ {checkIn.mediaContentLinks.map((link, index) => ( + + Media Link {index + 1} + + ))} ++ {isHistory ? ( ++++ ) : ( + <> + {isSubmitting ? ( ++ Given Feedback: +
++ {checkIn.mentorFeedback} +
++ + ✓ Checked on{' '} + {format( + new Date(checkIn.mentorCheckedDate ?? ''), + 'MMM dd, yyyy' + )} + ++++ ) : ( + !isAdmin && ( ++ { + await onSubmitFeedback(checkIn.uuid); + }} + /> + ) + )} + + )} + = ({ + menteeId, + checkInHistory, + isLoading, + refetch, + isAdmin, +}) => { + const [submittingFeedback, setSubmittingFeedback] = useState< + Record ++ ); + } + + if (checkInHistory.length === 0) { + return ( ++ ++ ); + } + + const uncheckedCheckIns = checkInHistory.filter( + (checkIn) => !checkIn.isCheckedByMentor + ); + const checkedCheckIns = checkInHistory.filter( + (checkIn) => checkIn.isCheckedByMentor + ); + + return ( ++ + No Check-ins Found +
++ Mentee has not submitted any monthly check-ins yet. +
+++ ); +}; + +export default MentorMonthlyChecking; diff --git a/src/components/MonthlyChecking/MonthlyCheckingHeader.tsx b/src/components/MonthlyChecking/MonthlyCheckingHeader.tsx new file mode 100644 index 00000000..45cca4f4 --- /dev/null +++ b/src/components/MonthlyChecking/MonthlyCheckingHeader.tsx @@ -0,0 +1,87 @@ +import React from 'react'; +import ArrowIcon from '../../assets/svg/Icons/ArrowIcon'; + +interface MonthlyCheckingHeaderProps { + isMentorView: boolean; + handleAddCheckIn?: () => void; + toggleGuidelines: () => void; + menteeId?: string; + showGuidelines: boolean; +} + +const MonthlyCheckInHeader: React.FC{ + setNewSubmissionOpen(!isNewSubmissionOpen); + }} + newSubmissionsCount={uncheckedCheckIns.length} + /> + {isNewSubmissionOpen && ( + + {uncheckedCheckIns.length > 0 ? ( + uncheckedCheckIns.map((checkIn) => ( ++ )} + ++ )) + ) : ( + ++ )} ++ No new check-ins to review.
+{ + setIsHistoryOpen(!isHistoryOpen); + }} + checkingCount={checkedCheckIns.length} + /> + {isHistoryOpen && ( + + {checkedCheckIns.length > 0 ? ( + checkedCheckIns.map((checkIn) => ( ++ )} ++ )) + ) : ( + No feedback history available.
+ )} += ({ + isMentorView, + toggleGuidelines, + showGuidelines, +}) => { + return ( + <> + + ++ {showGuidelines && ( +++ )} + + ); +}; + +export default MonthlyCheckInHeader; diff --git a/src/components/NotificationBadge/index.tsx b/src/components/NotificationBadge/index.tsx new file mode 100644 index 00000000..85695992 --- /dev/null +++ b/src/components/NotificationBadge/index.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import NotificationBell from '../../assets/svg/Icons/NotificationBell'; +import { NotificationProps } from '../../types'; + +const NotificationBadge: React.FC+++ Monthly Check-in Guidelines +
++++++ Guidelines: +
+-
+ {isMentorView ? (
+ <>
+
- Review monthly updates submitted by your mentees. +
- Provide constructive feedback on their progress. +
- + Ensure mentees are meeting their submission + requirements. + + + ) : ( + <> +
- + Submit monthly updates on your progress via the ScholarX + platform. + +
- + Make at least 3 media submissions during the 6-month + period. + +
- + Include links to your media submissions in the monthly + check-ins. + +
- Share your progress on social media and tag us. + + )} +
+++ Types of Media: +
+-
+
- 📝 Written: Blogs, Medium +
- 🎥 Video: YouTube, Facebook +
- 🎙️ Audio: Podcasts, Spotify +
- 💻 Code: GitHub repositories +
= ({ + count, + className = '', + iconColor = 'currentColor', + badgeColor = '#EF4444', + textColor = 'white', +}) => { + return ( + ++ ); +}; + +export default NotificationBadge; diff --git a/src/components/TermsAgreementModal/index.tsx b/src/components/TermsAgreementModal/index.tsx new file mode 100644 index 00000000..52a56202 --- /dev/null +++ b/src/components/TermsAgreementModal/index.tsx @@ -0,0 +1,165 @@ +import React from 'react'; +import { useForm } from 'react-hook-form'; +import { z } from 'zod'; +import { zodResolver } from '@hookform/resolvers/zod'; +import Tooltip from '../Tooltip'; +import OpenIcon from '../../assets/svg/Icons/OpenIcon'; +import { + menteeTermsAgreementModalSchema, + mentorTermsAgreementModalSchema, +} from '../../schemas'; + +type MentorFormData = z.infer+ ; +type MenteeFormData = z.infer ; + +interface TermsAgreementModalProps { + isOpen: boolean; + onClose: () => void; + onAgree: (data: MentorFormData | MenteeFormData) => void; + isMentor: boolean; + guideUrl: string; +} + +const TermsAgreementModal: React.FC = ({ + isOpen, + onClose, + onAgree, + isMentor, + guideUrl, +}) => { + const schema = isMentor + ? mentorTermsAgreementModalSchema + : menteeTermsAgreementModalSchema; + const { + register, + handleSubmit, + formState: { errors, isValid }, + } = useForm({ + resolver: zodResolver(schema), + mode: 'onChange', + defaultValues: isMentor + ? { agreed: false, canCommit: false } + : { agreed: false, consentGiven: false }, + }); + + const onSubmit = (data: MentorFormData | MenteeFormData) => { + if (isValid) { + onAgree(data); + } else { + console.error('Form is invalid. Errors:', errors); + } + }; + + if (!isOpen) return null; + + const guideType = isMentor ? 'Mentor' : 'Mentee'; + const title = isMentor + ? 'One Last Step to Join as a ScholarX Mentor' + : 'ScholarX Mentee Terms and Privacy'; + + return ( + ++ ); +}; + +export default TermsAgreementModal; diff --git a/src/components/Toggle/ButtonToggle.tsx b/src/components/Toggle/ButtonToggle.tsx new file mode 100644 index 00000000..0843654e --- /dev/null +++ b/src/components/Toggle/ButtonToggle.tsx @@ -0,0 +1,41 @@ +import React, { ReactElement } from 'react'; +import NotificationBadge from '../NotificationBadge'; +import ArrowIcon from '../../assets/svg/Icons/ArrowIcon'; + +interface ToggleButtonProps { + isOpen: boolean; + toggle: () => void; + icon?: ReactElement; + text: string; + badgeCount?: number; + useNotificationBadge?: boolean; +} + +const ToggleButton: React.FC+ ++= ({ + isOpen, + toggle, + text, + badgeCount, + useNotificationBadge = false, +}) => ( + +); + +export default ToggleButton; diff --git a/src/components/Toggle/HistoryToggle.tsx b/src/components/Toggle/HistoryToggle.tsx new file mode 100644 index 00000000..402bce9d --- /dev/null +++ b/src/components/Toggle/HistoryToggle.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import ToggleButton from './ButtonToggle'; + +interface HistoryToggleProps { + isHistoryOpen: boolean; + toggleHistory: () => void; + checkingCount: number; +} + +const HistoryToggle: React.FC = ({ + isHistoryOpen, + toggleHistory, + checkingCount, +}) => ( + +); + +export default HistoryToggle; diff --git a/src/components/Toggle/NewSubmissionToggle.tsx b/src/components/Toggle/NewSubmissionToggle.tsx new file mode 100644 index 00000000..dae242ee --- /dev/null +++ b/src/components/Toggle/NewSubmissionToggle.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import NewSubmissionsIcon from '../../assets/svg/Icons/NewSubmissionsIcon'; +import ToggleButton from './ButtonToggle'; + +interface NewSubmissionsToggleProps { + isNewSubmissionOpen: boolean; + toggleNewSubmission: () => void; + newSubmissionsCount: number; +} + +const NewSubmissionsToggle: React.FC = ({ + isNewSubmissionOpen, + toggleNewSubmission, + newSubmissionsCount, +}) => ( + } + text="New Submissions" + badgeCount={newSubmissionsCount} + useNotificationBadge={true} + /> +); + +export default NewSubmissionsToggle; diff --git a/src/enums.ts b/src/enums.ts index af349f63..d4df8bf5 100644 --- a/src/enums.ts +++ b/src/enums.ts @@ -8,6 +8,7 @@ export enum ApplicationStatus { REJECTED = 'rejected', APPROVED = 'approved', COMPLETED = 'completed', + REVOKED = 'revoked', } export enum StatusUpdatedBy { diff --git a/src/hooks/useSubmitCheckIn.ts b/src/hooks/useSubmitCheckIn.ts new file mode 100644 index 00000000..37d0de39 --- /dev/null +++ b/src/hooks/useSubmitCheckIn.ts @@ -0,0 +1,100 @@ +import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; +import axios, { AxiosError } from 'axios'; +import { API_URL } from '../constants'; + +import { + MenteeCheckInForm, + MentorFeedbackForm, + MonthlyCheckIn, +} from '../types'; + +const useSubmitCheckIn = () => { + const queryClient = useQueryClient(); + + const { + mutateAsync: submitCheckIn, + isSuccess, + isError, + error, + } = useMutation({ + mutationFn: async (data: MenteeCheckInForm) => { + await axios.post(`${API_URL}/mentees/checkin`, data, { + withCredentials: true, + }); + }, + onSuccess: () => { + void queryClient.invalidateQueries({ queryKey: ['menteeCheckIns'] }); + }, + }); + + return { + submitCheckIn, + isSuccess, + isError, + error, + }; +}; + +const useMonthlyCheckIns = (menteeId: string) => { + const queryClient = useQueryClient(); + + const { isLoading, error, data, refetch } = useQuery< + MonthlyCheckIn[], + AxiosError, + MonthlyCheckIn[] + >({ + queryKey: ['menteeCheckIns', menteeId], + queryFn: async () => { + if (menteeId != null) { + try { + const { data } = await axios.get( + `${API_URL}/mentees/checkin/${menteeId}`, + { + withCredentials: true, + } + ); + return data.checkIns as MonthlyCheckIn[]; + } catch (error) { + if (axios.isAxiosError(error) && error.response?.status === 401) { + void queryClient.invalidateQueries({ queryKey: ['currentUser'] }); + } + throw error; + } + } + return []; + }, + enabled: menteeId != null, + initialData: undefined, + }); + + return { isLoading, error, data, refetch }; +}; + +const useMentorFeedback = () => { + const queryClient = useQueryClient(); + + const { + mutateAsync: submitMentorFeedback, + isSuccess, + isError, + error, + } = useMutation({ + mutationFn: async (data: MentorFeedbackForm) => { + await axios.put(`${API_URL}/mentees/checking/feedback`, data, { + withCredentials: true, + }); + }, + onSuccess: () => { + void queryClient.invalidateQueries({ queryKey: ['mentorCheckIns'] }); + }, + }); + + return { + submitMentorFeedback, + isSuccess, + isError, + error, + }; +}; + +export { useSubmitCheckIn, useMonthlyCheckIns, useMentorFeedback }; diff --git a/src/pages/Dashboard/Dashboard.tsx b/src/pages/Dashboard/Dashboard.tsx index 582a4ddb..da3bd592 100644 --- a/src/pages/Dashboard/Dashboard.tsx +++ b/src/pages/Dashboard/Dashboard.tsx @@ -70,7 +70,7 @@ const Dashboard: React.FC = () => { element={ } /> } /> } /> diff --git a/src/pages/Dashboard/scenes/OngoingMentorshipPrograms/OngoingMentorshipPrograms.tsx b/src/pages/Dashboard/scenes/OngoingMentorshipPrograms/OngoingMentorshipPrograms.tsx index 7cbf5fac..7e0952f6 100644 --- a/src/pages/Dashboard/scenes/OngoingMentorshipPrograms/OngoingMentorshipPrograms.tsx +++ b/src/pages/Dashboard/scenes/OngoingMentorshipPrograms/OngoingMentorshipPrograms.tsx @@ -1,9 +1,98 @@ import React from 'react'; +import { useMentees } from '../../../../hooks/useMentees'; +import { Routes, Route, useParams } from 'react-router'; +import { Link } from 'react-router-dom'; +import UserIcon from '../../../../assets/svg/Icons/UserIcon'; +import MentorMonthlyChecking from '../../../../components/MonthlyChecking/MentorMonthlyChecking'; +import { ApplicationStatus } from '../../../../enums'; +import { useMonthlyCheckIns } from '../../../../hooks/useSubmitCheckIn'; +import { Mentee } from '../../../../types'; +import MenteeProfile from '../../../MenteeProfile/MenteeProfile.component'; const OngoingMentorshipPrograms: React.FC = () => { + const { data: mentees } = useMentees(); + + const approvedMentees = + mentees?.filter((mentee) => mentee.state === ApplicationStatus.APPROVED) || + []; + + const renderMenteeLink = (mentee: Mentee) => ( + + ++ + ); + + return ( ++ {mentee.profile.image_url ? ( +++ ) : ( +
++ )} ++ +++++ {mentee.application.firstName} {mentee.application.lastName} +
+++ ); +}; + +const AdminMenteeDetails: React.FC = () => { + const { menteeId } = useParams<{ menteeId: string }>(); + + const { + data: checkInHistory = [], + isLoading, + refetch, + } = useMonthlyCheckIns(menteeId ?? ''); + return (++Approved Mentees
++ {approvedMentees.map(renderMenteeLink)} + {approvedMentees.length === 0 && ( ++No approved mentees available.
+ )} ++++ +} /> + -); }; diff --git a/src/pages/EditProfileForm/EditProfileForm.component.tsx b/src/pages/EditProfileForm/EditProfileForm.component.tsx index 75dae3e0..6cb85e60 100644 --- a/src/pages/EditProfileForm/EditProfileForm.component.tsx +++ b/src/pages/EditProfileForm/EditProfileForm.component.tsx @@ -141,6 +141,7 @@ const EditProfileForm: React.FC = () => { src={profile.profilePic} alt="Profile" className="w-[90px] h-[90px] rounded-full object-cover" + referrerPolicy="no-referrer" /> ) : (Ongoing Mentorship Programs
++
++ Monthly Check-Ins +
+++ diff --git a/src/pages/MenteeApplicationsView/MenteeApplications.component.tsx b/src/pages/MenteeApplicationsView/MenteeApplications.component.tsx index c88cccbb..0ef7b44c 100644 --- a/src/pages/MenteeApplicationsView/MenteeApplications.component.tsx +++ b/src/pages/MenteeApplicationsView/MenteeApplications.component.tsx @@ -9,6 +9,7 @@ const MenteeApplications: React.FC = () => { const { mentor } = useContext(UserContext) as UserContextType; const { data: mentees } = useMyMentees(); const [isAvailable, setIsAvailable] = useState(mentor?.availability); + const { updateAvailability } = useMentor(mentor?.uuid); const handleAvailability = async (availability: boolean) => { diff --git a/src/pages/MenteeCheckIn/MenteeCheckIn.component.tsx b/src/pages/MenteeCheckIn/MenteeCheckIn.component.tsx deleted file mode 100644 index 6652fa62..00000000 --- a/src/pages/MenteeCheckIn/MenteeCheckIn.component.tsx +++ /dev/null @@ -1,118 +0,0 @@ -import React from 'react'; -import { useForm } from 'react-hook-form'; -import { zodResolver } from '@hookform/resolvers/zod'; -import { z } from 'zod'; -import { MenteeCheckInSchema } from '../../schemas'; - -type MenteeCheckInForm = z.infer; - -const MenteeCheckIn: React.FC = () => { - const { - register, - handleSubmit, - setValue, - formState: { errors }, - } = useForm ({ - resolver: zodResolver(MenteeCheckInSchema), - }); - - const onSubmit = async (data: MenteeCheckInForm) => { - console.log(data); - //! TODO : Handle form submission - }; - - return ( - -- ); -}; - -export default MenteeCheckIn; diff --git a/src/pages/MenteeCheckIn/MenteeCheckIn.stories.tsx b/src/pages/MenteeCheckIn/MenteeCheckIn.stories.tsx deleted file mode 100644 index d687e7f9..00000000 --- a/src/pages/MenteeCheckIn/MenteeCheckIn.stories.tsx +++ /dev/null @@ -1,90 +0,0 @@ -import { expect } from '@storybook/jest'; -import type { Meta, StoryObj } from '@storybook/react'; -import { waitFor, within, userEvent } from '@storybook/testing-library'; - -import MenteeCheckIn from './MenteeCheckIn.component'; - -const meta: Meta- Monthly Progress -
- -= { - component: MenteeCheckIn, - title: 'Mentee CheckIn Form', - tags: ['autodocs'], -}; - -export default meta; - -type Story = StoryObj ; - -export const DefaultForm: Story = { - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - - const generalUpdate = canvas.getByLabelText('General Updates and Feedback'); - const progressUpdate = canvas.getByLabelText('Progress Towards Goals'); - const mediaLink = canvas.getByLabelText('Media Content Link'); - const submitButton = canvas.getByRole('button', { name: 'Check-In' }); - - expect(generalUpdate).toBeVisible(); - expect(progressUpdate).toBeVisible(); - expect(mediaLink).toBeVisible(); - expect(submitButton).toBeVisible(); - }, -}; - -export const FilledForm: Story = { - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - - const generalUpdate = canvas.getByLabelText('General Updates and Feedback'); - const progressUpdate = canvas.getByLabelText('Progress Towards Goals'); - const mediaLink = canvas.getByLabelText('Media Content Link'); - const submitButton = canvas.getByRole('button', { name: 'Check-In' }); - - userEvent.type(generalUpdate, 'Communication is regular and productive.'); - userEvent.type( - progressUpdate, - 'Made significant progress on project goals.' - ); - userEvent.type(mediaLink, 'https://example.com/media-content'); - - expect(generalUpdate).toHaveValue( - 'Communication is regular and productive.' - ); - expect(progressUpdate).toHaveValue( - 'Made significant progress on project goals.' - ); - expect(mediaLink).toHaveValue('https://example.com/media-content'); - - userEvent.click(submitButton); - }, -}; - -export const ClearMediaLink: Story = { - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - - const mediaLink = canvas.getByLabelText('Media Content Link'); - const clearButton = canvas.getByRole('button', { name: 'Clear' }); - - userEvent.type(mediaLink, 'https://example.com/media-content'); - expect(mediaLink).toHaveValue('https://example.com/media-content'); - - userEvent.click(clearButton); - expect(mediaLink).toHaveValue(''); - }, -}; - -export const ValidationErrors: Story = { - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - - const submitButton = canvas.getByRole('button', { name: 'Check-In' }); - - userEvent.click(submitButton); - - await waitFor(() => { - expect(canvas.getByText('Please provide general updates')).toBeVisible(); - expect(canvas.getByText('Please summarize your progress')).toBeVisible(); - expect(canvas.getByText('Please provide a media link')).toBeVisible(); - }); - }, -}; diff --git a/src/pages/MenteeDashboard/index.tsx b/src/pages/MenteeDashboard/index.tsx index aae3d6de..53d84eee 100644 --- a/src/pages/MenteeDashboard/index.tsx +++ b/src/pages/MenteeDashboard/index.tsx @@ -1,9 +1,14 @@ -import React from 'react'; +import React, { useState } from 'react'; import { ApplicationStatus } from '../../enums'; import useMyApplications from '../../hooks/useMyApplications'; import MentorCard from '../../components/MentorCard/MentorCard.component'; +import MonthlyCheckInHeader from '../../components/MonthlyChecking/MonthlyCheckingHeader'; +import MenteeMonthlyChecking from '../../components/MonthlyChecking/MenteeMonthlyChecking'; +import MonthlyCheckInModal from '../../components/MonthlyChecking/MenteeCheckInFormModal.component'; const MenteeDashboard: React.FC = () => { + const [showGuidelines, setShowGuidelines] = useState(true); + const { data: mentees } = useMyApplications('mentee'); const approvedApplications = mentees?.filter((mentee) => mentee.state === ApplicationStatus.APPROVED) ?? @@ -12,34 +17,93 @@ const MenteeDashboard: React.FC = () => { mentees?.filter((mentee) => mentee.state === ApplicationStatus.PENDING) ?? []; + const toggleGuidelines = () => { + setShowGuidelines((prev) => !prev); + }; + const [isModalOpen, setIsModalOpen] = useState(false); + + const closeModal = () => { + setIsModalOpen(false); + }; + + const openModal = () => { + setIsModalOpen(true); + }; + + const isApproved = approvedApplications.length > 0; + + const menteeId = isApproved ? approvedApplications[0].uuid : ''; + return ( - -- Mentors ----My Mentor:
-- {approvedApplications?.length > 0 - ? approvedApplications.map(({ mentor, uuid }) => ( --- )) - : 'No mentors'} - -); }; diff --git a/src/pages/MentorRegistration/MentorRegistration.component.tsx b/src/pages/MentorRegistration/MentorRegistration.component.tsx index 8e02c51b..aed43ad0 100644 --- a/src/pages/MentorRegistration/MentorRegistration.component.tsx +++ b/src/pages/MentorRegistration/MentorRegistration.component.tsx @@ -13,6 +13,7 @@ import useProfile from '../../hooks/useProfile'; import { useLoginModalContext } from '../../contexts/LoginModalContext'; import useMentor from '../../hooks/useMentor'; import { Link } from 'react-router-dom'; +import TermsAgreementModalMentor from '../../components/TermsAgreementModal'; const steps = [ { @@ -44,6 +45,7 @@ const MentorRegistrationPage: React.FC = () => { setError, setValue, unregister, + getValues, formState: { errors }, } = useForm- Your pending mentee applications: -
-- {pendingApplications?.length > 0 - ? pendingApplications.map(({ mentor, uuid }) => ( -+ {isModalOpen ? ( +- )) - : 'No mentors'} + <> + +-++ {isApproved ? ( + <> ++++ + ) : ( ++ Monthly Check-Ins +
++ +++ + ++ )} ++ Your pending mentee applications: +
++ {pendingApplications.length > 0 + ? pendingApplications.map(({ mentor, uuid }) => ( +++ )) + : 'No mentors'} + ++++ Your approved mentee applications: +
++ {approvedApplications.length > 0 + ? approvedApplications.map(({ mentor, uuid }) => ( +++ )) + : 'No mentors'} + + ) : null} + ); }; diff --git a/src/pages/MenteeRegistration/index.tsx b/src/pages/MenteeRegistration/index.tsx index 76cd3a1d..ee344fec 100644 --- a/src/pages/MenteeRegistration/index.tsx +++ b/src/pages/MenteeRegistration/index.tsx @@ -11,6 +11,7 @@ import { API_URL } from '../../constants'; import useProfile from '../../hooks/useProfile'; import { MenteeApplicationSchema } from '../../schemas'; import { MenteeApplication } from '../../types'; +import TermsAgreementModal from '../../components/TermsAgreementModal'; const steps = [ { @@ -35,9 +36,11 @@ const MenteeRegistration: React.FC = () => { setError, clearErrors, trigger, + getValues, formState: { errors }, } = useForm ({ resolver: zodResolver(MenteeApplicationSchema), + mode: 'onChange', defaultValues: { firstName: user?.first_name, lastName: user?.last_name, @@ -51,6 +54,8 @@ const MenteeRegistration: React.FC = () => { const [currentStep, setCurrentStep] = useState(0); const [image, setImage] = useState (null); const [profilePic, setProfilePic] = useState(user?.image_url); + const [isModalOpen, setIsModalOpen] = useState(false); + const [isSubmitting, setIsSubmitting] = useState(false); const handleProfilePicChange = (event: ChangeEvent ) => { if (event.target.files != null) { @@ -89,7 +94,7 @@ const MenteeRegistration: React.FC = () => { } } - const output = await trigger(fields as [keyof MenteeApplication], { + const output = await trigger(fields as Array , { shouldFocus: true, }); @@ -101,10 +106,31 @@ const MenteeRegistration: React.FC = () => { setCurrentStep((prevStep) => prevStep - 1); }; - const onSubmit: SubmitHandler = async (data) => { - await applyForMentor(data); - if (image) { - await updateProfile({ profile: null, image }); + const onSubmit: SubmitHandler = async () => { + setIsModalOpen(true); + }; + + const handleModalAgree = async (agreedData: { + agreed: boolean; + consentGive?: boolean; + canCommit?: boolean; + }) => { + setIsModalOpen(false); + setIsSubmitting(true); + const formData = getValues(); + try { + const validatedData = MenteeApplicationSchema.parse({ + ...formData, + ...agreedData, + }); + await applyForMentor(validatedData); + if (image) { + await updateProfile({ profile: null, image }); + } + } catch (error) { + console.error('Error submitting application:', error); + } finally { + setIsSubmitting(false); } }; @@ -175,6 +201,7 @@ const MenteeRegistration: React.FC = () => { src={profilePic} alt="Profile" className="w-[90px] h-[90px] rounded-full object-cover" + referrerPolicy="no-referrer" /> ) : ( @@ -355,22 +382,6 @@ const MenteeRegistration: React.FC = () => { register={register} error={errors.submission} /> -+- Privacy Statement
-- Sustainable Foundation Education assures that your video - submission will be used exclusively for application evaluation - purposes. We are committed to protecting your privacy and will not - use your video for any other activities, such as general AI - training or public distribution. Your personal information and - video content will be handled with the utmost confidentiality. -
)} {status === 'error' ? ( @@ -425,6 +436,7 @@ const MenteeRegistration: React.FC = () => { {currentStep === 2 && !applicationSuccess && ({ + setIsModalOpen(false); + }} + onAgree={handleModalAgree} + isMentor={false} + guideUrl="https://docs.google.com/document/d/1gIYte14FIQtqUhGiMErZRovhNErdUrFdQ0LnCFFnfag/" + /> ({ resolver: zodResolver(MentorApplicationSchema), @@ -73,6 +75,8 @@ const MentorRegistrationPage: React.FC = () => { const [image, setImage] = useState (null); const [profilePic, setProfilePic] = useState(user?.image_url); const [currentStep, setCurrentStep] = useState(0); + const [isModalOpen, setIsModalOpen] = useState(false); + const [isSubmitting, setIsSubmitting] = useState(false); const handleNext = async (): Promise => { let fields = steps[currentStep].fields; @@ -115,12 +119,8 @@ const MentorRegistrationPage: React.FC = () => { } }, [watch('isPastMentor')]); - const onSubmit: SubmitHandler = async (data) => { - const { profilePic, ...application } = data; - await createMentorApplication(application as MentorApplication); - if (image) { - await updateProfile({ profile: null, image }); - } + const onSubmit: SubmitHandler = async () => { + setIsModalOpen(true); }; const handleProfilePicChange = (event: ChangeEvent ) => { @@ -145,6 +145,30 @@ const MentorRegistrationPage: React.FC = () => { document.getElementById('profilePic')?.click(); }; + const handleModalAgree = async (data: { + agreed: boolean; + canCommit?: boolean; + consentGiven?: boolean; + }) => { + setIsModalOpen(false); + setIsSubmitting(true); + const formData = getValues(); + try { + const validatedData = MentorApplicationSchema.parse({ + ...formData, + ...data, + }); + await createMentorApplication(validatedData); + if (image) { + await updateProfile({ profile: null, image }); + } + } catch (error) { + console.error('Error submitting application:', error); + } finally { + setIsSubmitting(false); + } + }; + return ( ); }; diff --git a/src/pages/MyMentees/MyMentees.component.tsx b/src/pages/MyMentees/MyMentees.component.tsx index 34cec752..5830123a 100644 --- a/src/pages/MyMentees/MyMentees.component.tsx +++ b/src/pages/MyMentees/MyMentees.component.tsx @@ -1,79 +1,205 @@ -import React from 'react'; +import React, { useState, useEffect } from 'react'; import { useMentees } from '../../hooks/useMentees'; -import { Link, Route, Routes } from 'react-router-dom'; +import { Link, Route, Routes, useParams, useNavigate } from 'react-router-dom'; import MenteeProfile from '../../components/MenteeProfile'; import UserIcon from '../../assets/svg/Icons/UserIcon'; +import MonthlyCheckInHeader from '../../components/MonthlyChecking/MonthlyCheckingHeader'; +import MentorMonthlyChecking from '../../components/MonthlyChecking/MentorMonthlyChecking'; +import { ApplicationStatus } from '../../enums'; +import { useMonthlyCheckIns } from '../../hooks/useSubmitCheckIn'; +import { Mentee } from '../../types'; const MyMentees: React.FC = () => { const { data: menteeApplications } = useMentees(); + const [activeTab, setActiveTab] = useStateBecome a Mentor@@ -181,6 +205,7 @@ const MentorRegistrationPage: React.FC = () => { src={profilePic} alt="Profile" className="w-[90px] h-[90px] rounded-full object-cover" + referrerPolicy="no-referrer" /> ) : (@@ -404,16 +429,9 @@ const MentorRegistrationPage: React.FC = () => { )}-)} + {categoriesError !== null ? ( { {categoriesError.message}) : null} + {isApplicationError && applicationError instanceof AxiosError ? ({ {applicationError.response?.data.message}) : null} + {applicationSuccess ? ({ you!) : null} +
{ Previous )} + {currentStep < 2 && ( )} + {currentStep === 2 && !applicationSuccess && ( )} + {applicationSuccess && ( { )}+{ + setIsModalOpen(false); + }} + onAgree={handleModalAgree} + isMentor={true} + guideUrl="https://docs.google.com/document/d/1uMMcGWJ35nblOj1zZ1XzJuYm-LOi1Lyj02yYRNsaOkY/" + /> ( + ApplicationStatus.APPROVED + ); + const [isMobile, setIsMobile] = useState(window.innerWidth < 768); + const navigate = useNavigate(); - return ( - ---Mentee Applications
+ useEffect(() => { + const handleResize = () => { + setIsMobile(window.innerWidth < 768); + }; + + window.addEventListener('resize', handleResize); + return () => { + window.removeEventListener('resize', handleResize); + }; + }, []); + + const filteredApplications = + menteeApplications?.filter((mentee) => mentee.state === activeTab) || []; + + const tabData = [ + { status: ApplicationStatus.APPROVED, label: 'Approved' }, + { status: ApplicationStatus.PENDING, label: 'Pending' }, + ]; + + const renderMenteeLink = (mentee: Mentee) => ( + +++ {mentee.profile.image_url ? ( +-++ )}+ - {menteeApplications?.length} Application(s) -
-- {menteeApplications - ?.filter((mentee) => mentee.state !== 'revoked') - .map((mentee) => ( - -+ + ); --- - ))} +- {mentee.profile.image_url !== '' ? ( ---- )} -- --- {mentee.application.firstName}{' '} - {mentee.application.lastName} -
- {mentee.application.isUndergrad ? ( -- {mentee.application.university} -
- ) : ( -- {mentee.application.position} - {', '} - {mentee.application.company} -
- )} -+++ {mentee.application.firstName} {mentee.application.lastName} +
+-- - ← - - -+ const renderMenteeList = () => ( +++ ); + + return ( +++Mentee Applications
++ {tabData.map((tab) => ( + + ))} +++ {filteredApplications.map(renderMenteeLink)} + {filteredApplications.length === 0 && ( ++No mentee applications available.
+ )} ++ {isMobile ? (+ ); +}; + +const WelcomeMessage: React.FC = () => ( +- + ) : ( + <> + {renderMenteeList()} +} /> + + { + navigate('/mentor/dashboard'); + }} + isMobile={isMobile} + /> + } + /> ++ + )} ++ +} /> + {}} isMobile={isMobile} /> + } + /> + ++); + +const MenteeDetails: React.FC<{ onBack: () => void; isMobile: boolean }> = ({ + onBack, + isMobile, +}) => { + const { menteeId } = useParams<{ menteeId: string }>(); + const [showGuidelines, setShowGuidelines] = useState(true); + + const toggleGuidelines = () => { + setShowGuidelines((prev) => !prev); + }; + + const { + data: checkInHistory = [], + isLoading, + refetch, + } = useMonthlyCheckIns(menteeId ?? ''); + + return ( ++ Welcome to the ScholarX Mentee Dashboard! +
++ Here, you can view your mentees and provide feedback on their monthly + check-ins. Click on a mentee to view their profile and their monthly + check-in submissions. +
++ {isMobile && ( + + )} +); diff --git a/src/schemas.ts b/src/schemas.ts index b72bec90..e1f8ed34 100644 --- a/src/schemas.ts +++ b/src/schemas.ts @@ -4,7 +4,11 @@ export const MenteeApplicationSchema = z.object({ firstName: z.string().min(1, { message: 'First name cannot be empty' }), lastName: z.string().min(1, { message: 'Last name cannot be empty' }), email: z.string().email({ message: 'Invalid email address' }), - contactNo: z.string().min(1, { message: 'Contact number cannot be empty' }), + contactNo: z + .string() + .min(1, { message: 'Contact number cannot be empty' }) + .startsWith('+', { message: "Must start with '+' for country code" }) + .regex(/^\+\d{6,14}$/, { message: 'Invalid contact number' }), company: z.string().min(1, { message: 'Company cannot be empty' }).optional(), profilePic: z .string() @@ -13,19 +17,23 @@ export const MenteeApplicationSchema = z.object({ .string() .min(1, { message: 'Position cannot be empty' }) .optional(), - cv: z.string().min(1, { message: 'CV cannot be empty' }), + cv: z + .string() + .min(1, { message: 'CV cannot be empty' }) + .url({ message: 'Please enter a valid link' }), isUndergrad: z.boolean(), - consentGiven: z.boolean().refine((val) => val, { - message: 'You must give your consent to proceed.', - }), graduatedYear: z .number({ invalid_type_error: 'Graduated year is required' }) + .int({ message: 'Graduated year must be an integer' }) .refine( (data) => { - return data === undefined || (!isNaN(data) && data >= 1980); + return ( + data === undefined || + (!isNaN(data) && data >= 1980 && data <= new Date().getFullYear()) + ); }, { - message: 'Graduated year must be a year', + message: 'Graduated year must be a valid year', } ) .optional(), @@ -35,6 +43,7 @@ export const MenteeApplicationSchema = z.object({ .optional(), yearOfStudy: z .number({ invalid_type_error: 'Year of study is required' }) + .int({ message: 'Year of study must be an integer' }) .gte(1, { message: 'Year must be greater than 0' }) .lte(4, { message: 'Year must be less than or equal 4' }) .optional(), @@ -43,13 +52,18 @@ export const MenteeApplicationSchema = z.object({ submission: z .string() .url({ message: 'Please submit a valid video submission' }), + consentGiven: z.boolean().optional(), }); export const MentorApplicationSchema = z.object({ firstName: z.string().min(1, { message: 'First name cannot be empty' }), lastName: z.string().min(1, { message: 'Last name cannot be empty' }), email: z.string().email({ message: 'Invalid email address' }), - contactNo: z.string().min(1, { message: 'Contact number cannot be empty' }), + contactNo: z + .string() + .min(1, { message: 'Contact number cannot be empty' }) + .startsWith('+', { message: "Must start with '+' for country code" }) + .regex(/^\+\d{6,14}$/, { message: 'Invalid contact number' }), country: z.string().min(1, { message: 'Country cannot be empty' }), position: z.string().min(1, { message: 'Position cannot be empty' }), expertise: z.string().min(1, { message: 'Expertise cannot be empty' }), @@ -65,22 +79,34 @@ export const MentorApplicationSchema = z.object({ profilePic: z .string() .min(1, { message: 'The profile picture cannot be empty' }), - cv: z.string().min(1, { message: 'CV cannot be empty' }), + cv: z + .string() + .min(1, { message: 'CV cannot be empty' }) + .url({ message: 'Please enter a valid link' }), menteeExpectations: z .string() .min(1, { message: 'Mentee expectations cannot be empty' }), mentoringPhilosophy: z .string() .min(1, { message: 'Mentoring philosophy cannot be empty' }), - noOfMentees: z.number().min(0, { - message: 'Number of mentees must be greater than or equal to 0', - }), - canCommit: z.boolean().refine((val) => val, { - message: 'You must mention if you can commit', - }), + noOfMentees: z + .number({ invalid_type_error: 'Number of mentees is required' }) + .min(1, { message: 'Number of mentees must be greater than or equal to 1' }) + .int({ message: 'Number of mentees must be an integer number' }), mentoredYear: z .number({ invalid_type_error: 'Mentored year is required' }) - .or(z.number().min(0)) + .int({ message: 'Mentored year must be a valid year' }) + .refine( + (data) => { + return ( + data === undefined || + (!isNaN(data) && data >= 2018 && data <= new Date().getFullYear()) + ); + }, + { + message: 'Mentored year must be a valid year', + } + ) .optional(), category: z.string().min(1, { message: 'Category cannot be empty' }), institution: z.string().min(1, { message: 'Institution cannot be empty' }), @@ -94,13 +120,43 @@ export const MentorApplicationSchema = z.object({ .url({ message: 'Invalid website URL' }) .optional() .or(z.literal('')), + canCommit: z.boolean().optional(), }); export const MenteeCheckInSchema = z.object({ - generalUpdate: z.string().min(1, 'Please provide general updates'), - progressUpdate: z.string().min(1, 'Please summarize your progress'), - mediaLink: z + title: z.string().min(1, 'Title is required'), + generalUpdatesAndFeedback: z .string() - .url('Please provide a valid URL') - .min(1, 'Please provide a media link'), + .min(5, 'Please provide general updates'), + progressTowardsGoals: z.string().min(5, 'Please summarize your progress'), + mediaContentLinks: z + .array(z.string().url('Please provide a valid URL')) + .min(1, 'Please provide at least 1 media links'), +}); + +export const MentorFeedbackSchema = z.object({ + menteeId: z.string().min(1, 'Mentee ID is required'), + checkInId: z.string().min(1, 'Check-in ID is required'), + mentorFeedback: z.string().optional(), + isCheckedByMentor: z.literal(true, { + errorMap: () => ({ message: 'You must mark this as checked' }), + }), +}); + +export const mentorTermsAgreementModalSchema = z.object({ + agreed: z.boolean().refine((val) => val, { + message: 'You must agree to the ScholarX Mentor Guide', + }), + canCommit: z.boolean().refine((val) => val, { + message: 'You must mention if you can commit', + }), +}); + +export const menteeTermsAgreementModalSchema = z.object({ + agreed: z.boolean().refine((val) => val, { + message: 'You must agree to the ScholarX Mentee Guide', + }), + consentGiven: z.boolean().refine((val) => val, { + message: 'You must give consent to proceed', + }), }); diff --git a/src/types.ts b/src/types.ts index 2c4bfe98..15d4bba7 100644 --- a/src/types.ts +++ b/src/types.ts @@ -2,6 +2,7 @@ import { type z } from 'zod'; import { type MentorApplicationSchema, type MenteeApplicationSchema, + MenteeCheckInSchema, } from './schemas'; import { type StatusUpdatedBy, @@ -102,3 +103,38 @@ export interface PasswordUpdateData { token: string; newPassword: string; } + +export type MenteeCheckInForm = z.infer+
+++++ Monthly Check-Ins +
++ ; + +export interface MonthlyCheckIn { + uuid: string; + title: string; + checkInDate: string; + mediaContentLinks: string[]; + isCheckedByMentor: boolean; + mentorCheckedDate: string; + mentorFeedback: string; + generalUpdatesAndFeedback: string; + progressTowardsGoals?: string; + mentee: Mentee; +} + +export interface MonthlyCheckingProps { + isMentorView: boolean; + menteeId: string; +} + +export interface MentorFeedbackForm { + checkInId: string; + menteeId: string; + mentorFeedback: string; + isCheckedByMentor: boolean; +} + +export interface NotificationProps { + iconColor?: string; + badgeColor?: string; + textColor?: string; + count?: number; + className?: string; +} diff --git a/src/utils.ts b/src/utils.ts index 92425c82..b5003fbd 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -1,3 +1,5 @@ +import { format, isValid, parseISO } from 'date-fns'; + export const getStateColor = (state: string | undefined) => { switch (state) { case 'pending': @@ -12,3 +14,11 @@ export const getStateColor = (state: string | undefined) => { return 'bg-gray-100 text-gray-700'; } }; + +export const formatDate = (dateString: string | null | undefined): string => { + if (!dateString) return 'Date not available'; + const date = parseISO(dateString); + return isValid(date) + ? format(date, 'MMMM dd, yyyy, hh:mm a') + : 'Invalid date'; +};