;
+const months = [
+ 'January',
+ 'February',
+ 'March',
+ 'April',
+ 'May',
+ 'June',
+ 'July',
+ 'August',
+ 'September',
+ 'October',
+ 'November',
+ 'December',
+];
+
const MonthlyCheckInModal: React.FC<{
onClose: () => void;
isOpen: boolean;
@@ -98,18 +113,11 @@ const MonthlyCheckInModal: React.FC<{
} rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500`}
>
-
-
-
-
-
-
-
-
-
-
-
-
+ {months.map((month) => (
+
+ ))}
{errors.title && (
diff --git a/src/components/MonthlyChecking/MenteeMonthlyChecking.tsx b/src/components/MonthlyChecking/MenteeMonthlyChecking.tsx
index c305be53..917fd0b9 100644
--- a/src/components/MonthlyChecking/MenteeMonthlyChecking.tsx
+++ b/src/components/MonthlyChecking/MenteeMonthlyChecking.tsx
@@ -6,83 +6,107 @@ 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';
interface MenteeMonthlyCheckingProps {
menteeId: string;
}
+
interface CheckInItemProps {
checkIn: MonthlyCheckIn;
}
-const CheckInItem: React.FC = ({ checkIn }) => (
-
-
-
-
- {' '}
- {checkIn.title}
-
-
-
General Updates:
-
- {checkIn.generalUpdatesAndFeedback ?? 'No updates provided'}
-
-
-
-
Progress Towards Goals:
-
- {checkIn.progressTowardsGoals ?? 'No progress updates provided'}
-
-
-
-
-
My Submissions
- {checkIn.mediaContentLinks.map((link, index) => (
-
- Click Media Link {index + 1}
-
- ))}
-
-
- Submitted on{' '}
- {format(new Date(checkIn.checkInDate), 'MMMM dd, yyyy, hh:mm a')}
-
+const CheckInItem: React.FC
= ({ checkIn }) => {
+ const [isExpanded, setIsExpanded] = useState(false);
+
+ return (
+
+
{
+ setIsExpanded(!isExpanded);
+ }}
+ >
+
+
+ Submitted on {format(new Date(checkIn.checkInDate), 'MMM dd, yyyy')}
+
-
-
- Mentor Feedback:
-
- {checkIn.mentorFeedback ? (
-
{checkIn.mentorFeedback}
- ) : (
-
No feedback yet
+ {isExpanded && (
+
+
+
+
+ General Updates:
+
+
+ {checkIn.generalUpdatesAndFeedback ?? 'No updates provided'}
+
+
+
+
+ Progress Towards Goals:
+
+
+ {checkIn.progressTowardsGoals ?? 'No progress updates provided'}
+
+
+
+
+
+
+
+ Mentor Feedback:
+
+ {checkIn.mentorFeedback ? (
+
+ {checkIn.mentorFeedback}
+
+ ) : (
+
No feedback yet
+ )}
+
+
+ {checkIn.isCheckedByMentor
+ ? `✓ Checked on ${format(
+ new Date(checkIn.mentorCheckedDate ?? ''),
+ 'MMM dd, yyyy'
+ )}`
+ : '⏳ Pending review'}
+
+
+
+
+
)}
-
-
- {checkIn.isCheckedByMentor
- ? `✓ Checked by mentor on ${format(
- new Date(checkIn.mentorCheckedDate ?? ''),
- 'MMM dd, yyyy, hh:mm a'
- )}`
- : '⏳ Pending review'}
-
-
-);
+ );
+};
const MenteeMonthlyChecking: React.FC
= ({
menteeId,
@@ -93,7 +117,7 @@ const MenteeMonthlyChecking: React.FC = ({
if (isLoading) {
return (
-
+
);
@@ -121,7 +145,7 @@ const MenteeMonthlyChecking: React.FC
= ({
);
return (
-
+
{
diff --git a/src/components/MonthlyChecking/MentorFeedbackForm.component.tsx b/src/components/MonthlyChecking/MentorFeedbackForm.component.tsx
index 3c6fc8cc..bc9322ea 100644
--- a/src/components/MonthlyChecking/MentorFeedbackForm.component.tsx
+++ b/src/components/MonthlyChecking/MentorFeedbackForm.component.tsx
@@ -75,11 +75,6 @@ const MentorFeedbackForm: React.FC = ({
className="form-checkbox h-5 w-5 text-blue-600"
/>
Mark as checked
- {errors.isCheckedByMentor && (
-
- {errors.isCheckedByMentor.message}
-
- )}
+ {errors.isCheckedByMentor && (
+
+ {errors.isCheckedByMentor.message}
+
+ )}
{isSuccess && (
Feedback submitted successfully 🎉
diff --git a/src/components/MonthlyChecking/MentorMonthlyChecking.tsx b/src/components/MonthlyChecking/MentorMonthlyChecking.tsx
index 6bf3be27..f6c19445 100644
--- a/src/components/MonthlyChecking/MentorMonthlyChecking.tsx
+++ b/src/components/MonthlyChecking/MentorMonthlyChecking.tsx
@@ -1,11 +1,12 @@
import React, { useState } from 'react';
+import { format } from 'date-fns';
import MentorFeedbackForm from './MentorFeedbackForm.component';
-import { MonthlyCheckIn } from '../../types';
import Spinner from '../Spinner/Spinner.component';
import NoCheckInsIcon from '../../assets/svg/Icons/NoCheckInsIcon';
-import HistoryToggle from '../Toggle/HistoryToggle';
-import { formatDate } from '../../utils';
+import { MonthlyCheckIn } from '../../types';
import NewSubmissionsToggle from '../Toggle/NewSubmissionToggle';
+import HistoryToggle from '../Toggle/HistoryToggle';
+import ArrowIcon from '../../assets/svg/Icons/ArrowIcon';
interface MentorMonthlyCheckingProps {
menteeId: string;
@@ -15,6 +16,123 @@ interface MentorMonthlyCheckingProps {
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 (
+
+
{
+ setIsExpanded(!isExpanded);
+ }}
+ >
+
+
+ {checkIn.title}
+
+
+
+
+ Submitted on {format(new Date(checkIn.checkInDate), 'MMM dd, yyyy')}
+
+
+
+ {isExpanded && (
+
+
+
+
+ General Updates:
+
+
+ {checkIn.generalUpdatesAndFeedback ?? 'No updates provided'}
+
+
+
+
+ Progress Towards Goals:
+
+
+ {checkIn.progressTowardsGoals ?? 'No progress updates provided'}
+
+
+
+
+
+ {isHistory ? (
+
+
+ Given Feedback:
+
+
+ {checkIn.mentorFeedback}
+
+
+
+ ✓ Checked on{' '}
+ {format(
+ new Date(checkIn.mentorCheckedDate ?? ''),
+ 'MMM dd, yyyy'
+ )}
+
+
+
+ ) : (
+ <>
+ {isSubmitting ? (
+
+
+
+ ) : (
+ !isAdmin && (
+
{
+ await onSubmitFeedback(checkIn.uuid);
+ }}
+ />
+ )
+ )}
+
+ )}
+
+
+ )}
+
-
-
-
- {' '}
- {checkIn.title}
-
-
-
General Updates:
-
- {checkIn.generalUpdatesAndFeedback ?? 'No updates provided'}
-
-
-
-
- Progress Towards Goals:
-
-
- {checkIn.progressTowardsGoals ?? 'No progress updates provided'}
-
-
-
-
-
Submissions
- {checkIn.mediaContentLinks.map((link, index) => (
-
- Click Media Link {index + 1}
-
- ))}
-
-
- Submitted on {formatDate(checkIn.checkInDate)}
-
-
-
+ if (isLoading) {
+ return (
+
+
+ );
+ }
-
- {isHistory ? (
-
-
- Given Feedback:
-
-
- {checkIn.mentorFeedback}
-
-
- ✓ Checked by on {formatDate(checkIn.mentorCheckedDate)}
-
-
- ) : (
- <>
- {submittingFeedback[checkIn.uuid] ? (
-
-
-
- ) : (
- !isAdmin && (
-
{
- await handleFeedbackSubmit(checkIn.uuid);
- }}
- />
- )
- )}
-
- )}
+ if (checkInHistory.length === 0) {
+ return (
+
+
+
+ No Check-ins Found
+
+
+ Mentee has not submitted any monthly check-ins yet.
+
+ );
+ }
+
+ const uncheckedCheckIns = checkInHistory.filter(
+ (checkIn) => !checkIn.isCheckedByMentor
+ );
+ const checkedCheckIns = checkInHistory.filter(
+ (checkIn) => checkIn.isCheckedByMentor
);
- const renderContent = () => {
- if (isLoading) {
- return (
-
-
+ return (
+
+
{
+ setNewSubmissionOpen(!isNewSubmissionOpen);
+ }}
+ newSubmissionsCount={uncheckedCheckIns.length}
+ />
+ {isNewSubmissionOpen && (
+
+ {uncheckedCheckIns.length > 0 ? (
+ uncheckedCheckIns.map((checkIn) => (
+
+ ))
+ ) : (
+
+
+
No new check-ins to review.
+
+ )}
-
-
- No Check-ins Found
-
-
- Mentee has not submitted any monthly check-ins yet.
-
+
{
+ setIsHistoryOpen(!isHistoryOpen);
+ }}
+ checkingCount={checkedCheckIns.length}
+ />
+ {isHistoryOpen && (
+
+ {checkedCheckIns.length > 0 ? (
+ checkedCheckIns.map((checkIn) => (
+
+ ))
+ ) : (
+
No feedback history available.
+ )}
-
{
- setNewSubmissionOpen(!isNewSubmissionOpen);
- }}
- newSubmissionsCount={uncheckedCheckIns.length}
- />
-
- {isNewSubmissionOpen && (
-
-
- {uncheckedCheckIns.length > 0 ? (
- uncheckedCheckIns.map((checkIn) =>
- renderCheckIn(checkIn, false)
- )
- ) : (
-
-
-
- Mentee has not submitted new monthly check-ins yet.
-
-
- )}
-
-
-
- {checkedCheckIns.length > 0 ? (
- checkedCheckIns.map((checkIn) => renderCheckIn(checkIn, true))
- ) : (
-
- No feedback history available.
-
- )}
-
-
{showGuidelines && (
diff --git a/src/components/TagInput/index.tsx b/src/components/TagInput/index.tsx
deleted file mode 100644
index 524d481f..00000000
--- a/src/components/TagInput/index.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import React, { useState, KeyboardEvent } from 'react';
-import { UseFormRegister } from 'react-hook-form';
-
-interface TagInputProps {
- tags: string[];
- setTags: React.Dispatch
>;
- maxTags: number;
- register: UseFormRegister;
- onValidationError?: (error: string) => void;
-}
-
-const TagInput: React.FC = ({
- tags,
- setTags,
- maxTags = 5,
- register,
- onValidationError,
-}) => {
- const [inputValue, setInputValue] = useState('');
- const [tagLimitReached, setTagLimitReached] = useState(false);
-
- const handleKeyDown = (e: KeyboardEvent) => {
- if (e.key === 'Enter' || e.key === ',') {
- e.preventDefault();
- if (inputValue.trim() && !tags.includes(inputValue.trim())) {
- if (tags.length < maxTags) {
- setTags([...tags, inputValue.trim()]);
- setInputValue('');
- if (onValidationError) onValidationError('');
- } else {
- setTagLimitReached(true);
- if (onValidationError)
- onValidationError(`You can only add up to ${maxTags} tags.`);
- }
- } else if (tags.includes(inputValue.trim())) {
- if (onValidationError)
- onValidationError('Duplicate tags are not allowed.');
- }
- }
- };
-
- const handleRemoveTag = (index: number) => {
- const newTags = tags.filter((_, i) => i !== index);
- setTags(newTags);
- setTagLimitReached(false);
- };
-
- return (
-
-
- {tags.map((tag, index) => (
-
- {tag}
-
-
- ))}
-
-
- {tags.length < maxTags && (
-
{
- setInputValue(e.target.value);
- }}
- onKeyDown={handleKeyDown}
- className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 text-sm"
- placeholder="Enter a topic and press Enter"
- {...register}
- />
- )}
-
- {tagLimitReached && (
-
- You can only add up to {maxTags} topics.
-
- )}
-
-
-
-
Monthly Check-Ins
-
+
+ Monthly Check-Ins
+
+
{
{isApproved ? (
<>
-
+
Monthly Check-Ins
diff --git a/src/pages/MyMentees/MyMentees.component.tsx b/src/pages/MyMentees/MyMentees.component.tsx
index 7e7b1190..5830123a 100644
--- a/src/pages/MyMentees/MyMentees.component.tsx
+++ b/src/pages/MyMentees/MyMentees.component.tsx
@@ -182,7 +182,8 @@ const MenteeDetails: React.FC<{ onBack: () => void; isMobile: boolean }> = ({
)}
-