Implement Monthly-checking Feature for Mentees, Mentors and Admins #199

mayura-andrew · 2024-09-30T21:04:22Z

Purpose

The purpose of this PR is to fix #198 by introducing a comprehensive monthly check-in feature for mentees, mentors, and admins.

Goals

Mentees: Allow mentees to submit their monthly progress, view mentor feedback, and see the history of their submissions.
Mentors: Enable mentors to view their mentees' submissions, provide feedback, and track the history of check-ins.
Admins: Provide admins with the ability to oversee the progress of all mentees, ensuring that mentors are providing timely feedback and that mentees are completing their check-ins.

Approach

Implemented a submission form UI for mentees to submit their monthly progress.
Created a view for mentors to see the submitted check-ins and provide feedback.
Developed an admin dashboard to monitor the progress of all mentees.
Integrated the feedback form into the mentor dashboard.
Integrated the check-in status view into the mentee dashboard.
Integrated the admin dashboard view to oversee the check-in process.
Added necessary hooks and schemas for form validation and submission.

Screenshots

New Mentor Dashboard

New Mentee Dashboard UI

Mentee Monthly-checking Form Modal

Mentor Feedback UI

Checklist

This PR doesn't commit any keys, passwords, tokens, usernames, or other secrets.
I have read and understood the development best practices guidelines ( http://bit.ly/sef-best-practices )
My code follows the style guidelines of this project
I have performed a self-review of my own code
I have commented my code, particularly in hard-to-understand areas
I have made corresponding changes to the documentation

Related PRs

Test environment

NodeJS: 20.15.0
FireFox: 129.0

Learning

Researched best practices for form validation using react-hook-form and zod.
Reviewed UI/UX patterns for feedback forms and admin dashboards.

… mentor and mentee side

- Refactor MonthlyChecking component to include UI changes for viewing submissions in both mentor and mentee side. - Add TagInput functionality to allow users to input and display tags for monthly check-ins.

…ogress Towards Goals; Prevent multiple submissions

Remove menteeName property from MonthlyCheckIn interface in types.ts Refactor useMonthlyCheckIns hook: Update return type to include MonthlyCheckIn[] Update formatDate function in utils.ts: Handle null and invalid date strings Add HistoryClockIcon component Add NewSubmissionsIcon component Refactor MentorFeedbackForm component: Update submit button styling Update MenteeCheckInSchema in schemas.ts: Update validation rules for generalUpdatesAndFeedback and progressTowardsGoals Add HistoryToggle component Add NotificationBadge component Refactor MenteeCheckIn component: Update remove button styling Refactor MenteeMonthlyChecking component: Update media link text and date format

…te media links handling

anjula-sack · 2024-10-05T12:39:19Z

package.json

    "dotenv": "^16.0.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.51.0",
    "react-intersection-observer": "^9.13.1",
    "react-router": "^6.11.2",
    "react-router-dom": "^6.11.2",
+    "react-spring": "^9.7.4",
+    "react-tag-input": "^6.10.3",


We are not using this right?

anjula-sack · 2024-10-05T12:41:28Z

src/components/TagInput/index.tsx

+  onValidationError?: (error: string) => void;
+}
+
+const TagInput: React.FC<TagInputProps> = ({


Remove this unused component

anjula-sack · 2024-10-05T12:43:13Z

package.json

    "dotenv": "^16.0.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.51.0",
    "react-intersection-observer": "^9.13.1",
    "react-router": "^6.11.2",
    "react-router-dom": "^6.11.2",
+    "react-spring": "^9.7.4",


Remov this library as well. We don't need animations for now.

anjula-sack · 2024-10-05T12:43:53Z

src/components/CongratsModal/index.tsx

+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 flex items-center justify-center z-50 bg-black bg-opacity-50">


Try to reuse the existing modal component for this

this is not using, i'll remove this

anjula-sack · 2024-10-05T12:47:27Z

src/components/MonthlyChecking/MenteeCheckInFormModal.component.tsx

+                <option value="">Select a month</option>
+                <option value="January">January</option>
+                <option value="February">February</option>
+                <option value="March">March</option>
+                <option value="April">April</option>
+                <option value="May">May</option>
+                <option value="June">June</option>
+                <option value="July">July</option>
+                <option value="August">August</option>
+                <option value="September">September</option>
+                <option value="October">October</option>
+                <option value="November">November</option>
+                <option value="December">December</option>


Create a loop for this

const months = ['January', 'February', 'March' ....]

months.map()

anjula-sack · 2024-10-05T12:49:35Z

src/components/MonthlyChecking/MonthlyCheckingHeader.tsx

+          {showGuidelines ? (
+            <>
+              <ArrowDownIcon />
+              Guidelines
+            </>
+          ) : (
+            <>
+              <ArrowRightIcon />
+              Guidelines
+            </>
+          )}


Suggested change

{showGuidelines ? (

<>

<ArrowDownIcon />

Guidelines

</>

) : (

<>

<ArrowRightIcon />

Guidelines

</>

)}

{showGuidelines ? <ArrowDownIcon /> : <ArrowRightIcon />} Guidelines

… Improved UI

anjula-sack · 2024-10-06T15:36:47Z

src/App.tsx

                <Route path="/mentors" element={<Mentors />} />
                <Route path="/mentors/:mentorId" element={<MentorProfile />} />
                <Route path="/mentees/:menteeId" element={<MenteeProfile />} />
-                <Route path="/mentee-checkin" element={<MenteeCheckIn />} />
+


Suggested change

anjula-sack · 2024-10-09T08:02:06Z

package.json

@@ -19,9 +19,11 @@
  "license": "ISC",
  "dependencies": {
    "@hookform/resolvers": "^3.3.4",
+    "@react-spring/web": "^9.7.4",


Remove this

Suggested change

"@react-spring/web": "^9.7.4",

anjula-sack · 2024-10-10T05:41:53Z

src/components/MentorProfile/MentorProfile.component.tsx

+  mentor: Mentor;
+}
+
+const MentorProfileCard: React.FC<MentorCardProps> = ({ mentor }) => {


Can't we reuse the existing mentor card?

anjula-sack · 2024-10-10T05:43:24Z

src/components/NotificationBadge/index.tsx

+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        className="w-6 h-6"
+      >
+        <path
+          fill="none"
+          stroke={iconColor}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="1.5"
+          d="M12 6.5V3m0 3.5a5 5 0 015 5v3.5c0 1 .5 2 1.5 2.5H5.5c1-.5 1.5-1.5 1.5-2.5V11.5a5 5 0 015-5zm-3.5 14h7"
+        />
+        {count > 0 && (
+          <>
+            <circle cx="18" cy="6" r="5.5" fill={badgeColor} />
+            <text
+              x="18"
+              y="6"
+              fontFamily="Arial, sans-serif"
+              fontSize="7"
+              fontWeight="bold"
+              fill={textColor}
+              textAnchor="middle"
+              dominantBaseline="central"
+            >
+              {displayCount}
+            </text>
+          </>
+        )}
+      </svg>


Move this to svgs

anjula-sack · 2024-10-10T05:44:33Z

src/components/Spinner/Spinner.component.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+
+const Spinner: React.FC = () => (


Use this https://github.com/sef-global/scholarx-frontend/blob/development/src/assets/svg/Loading.tsx

…rm UI

anjula-sack · 2024-10-14T12:38:17Z

src/assets/svg/Icons/NotificationBellSVG.tsx

+import React from 'react';
+import { NotificationProps } from '../../../types';
+
+const NotificationBellSVG: React.FC<NotificationProps> = ({


Suggested change

const NotificationBellSVG: React.FC<NotificationProps> = ({

const NotificationBell: React.FC<NotificationProps> = ({

Rename the component folder as well NotificationBell

anjula-sack

Good job! @mayura-andrew

mayura-andrew and others added 17 commits September 20, 2024 01:19

implement monthly checking modal, and ui for view submissions in both…

8546766

… mentor and mentee side

Add date-fns library for date manipulation and validation

a1946ec

Refactor MonthlyChecking Modal

afb8a0d

add topic tags input field

a36e23b

Refactor MonthlyChecking component and add TagInput functionality

cc6f97c

- Refactor MonthlyChecking component to include UI changes for viewing submissions in both mentor and mentee side. - Add TagInput functionality to allow users to input and display tags for monthly check-ins.

Refactor MenteeCheckIn component and remove TagInput functionality

d2f2320

Refactor MenteeCheckIn component and remove TagInput functionality

32ffd3f

Merge branch 'sef-global:main' into main

4a09730

Update MonthlyChecking feature: Add General Updates, Feedback, and Pr…

264abb9

…ogress Towards Goals; Prevent multiple submissions

Refactor code: Remove unused MenteeCheckIn component and HistoryToggle

cb7c4d1

Refactor ToggleButton component: Update badge styling

33a6448

Refactor routing: Add new route for AdminMenteeView component

36d80ff

Refactor routing: Update route for AdminMenteeView component

a044bd0

Merge branch 'sef-global:main' into main

82609a3

Refactor code: Update badge styling in ToggleButton component

14f1d12

Refactor MonthlyCheckInModal component: Update media links handling

d97ead1

mayura-andrew requested review from anjula-sack and Madhawa97 and removed request for anjula-sack October 1, 2024 18:45

Refactor MonthlyCheckInModal component: Remove unused import and upda…

fb99966

…te media links handling

anjula-sack changed the base branch from main to development October 5, 2024 12:37

anjula-sack requested changes Oct 5, 2024

View reviewed changes

Refactor code: Remove unused imports and update media links handling,…

4ad7d95

… Improved UI

anjula-sack requested changes Oct 6, 2024

View reviewed changes

Refactor code: Remove unused route and update media links handling

5e07bb6

mayura-andrew requested a review from anjula-sack October 7, 2024 18:40

anjula-sack requested changes Oct 9, 2024

View reviewed changes

Refactor code: Remove unused @react-spring dependencies

77c11b5

anjula-sack requested changes Oct 10, 2024

View reviewed changes

Refactor code: Remove Spinner component and update mentor feedback fo…

882152b

…rm UI

mayura-andrew added hacktoberfest frontend labels Oct 10, 2024

mayura-andrew requested a review from anjula-sack October 10, 2024 18:51

Refactor MentorCard component: Add variant prop and update UI

42859b6

anjula-sack requested changes Oct 14, 2024

View reviewed changes

mayura-andrew and others added 2 commits October 14, 2024 18:46

Merge branch 'development' into main

1c7e853

Renamed NotificationBellSVG to NotificationBell

30eeb37

anjula-sack approved these changes Oct 15, 2024

View reviewed changes

anjula-sack merged commit f23f016 into sef-global:development Oct 15, 2024
1 check failed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement Monthly-checking Feature for Mentees, Mentors and Admins #199

Implement Monthly-checking Feature for Mentees, Mentors and Admins #199

mayura-andrew commented Sep 30, 2024 •

edited

Loading

anjula-sack Oct 5, 2024

anjula-sack Oct 5, 2024

anjula-sack Oct 5, 2024

anjula-sack Oct 5, 2024

mayura-andrew Oct 6, 2024

anjula-sack Oct 5, 2024

anjula-sack Oct 5, 2024

anjula-sack Oct 6, 2024

anjula-sack Oct 9, 2024

anjula-sack Oct 10, 2024

anjula-sack Oct 10, 2024

anjula-sack Oct 10, 2024

anjula-sack Oct 14, 2024

anjula-sack left a comment

		@@ -0,0 +1,6 @@
		import React from 'react';

		const Spinner: React.FC = () => (

	const NotificationBellSVG: React.FC<NotificationProps> = ({
	const NotificationBell: React.FC<NotificationProps> = ({

Implement Monthly-checking Feature for Mentees, Mentors and Admins #199

Implement Monthly-checking Feature for Mentees, Mentors and Admins #199

Conversation

mayura-andrew commented Sep 30, 2024 • edited Loading

Purpose

Goals

Approach

Screenshots

Checklist

Related PRs

Test environment

Learning

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

anjula-sack left a comment

Choose a reason for hiding this comment

mayura-andrew commented Sep 30, 2024 •

edited

Loading