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

… Improved UI
sef-global · Oct 6, 2024 · 4ad7d95 · 4ad7d95
1 parent fb99966
commit 4ad7d95
Show file tree

Hide file tree

Showing 16 changed files with 12,776 additions and 16,076 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -31,8 +31,6 @@
     "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",
     "zod": "^3.22.4"
   },
   "devDependencies": {

diff --git a/src/assets/svg/Icons/ArrowDownIcon.tsx b/src/assets/svg/Icons/ArrowDownIcon.tsx
diff --git a/src/assets/svg/Icons/ArrowIcon.tsx b/src/assets/svg/Icons/ArrowIcon.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+interface ArrowIconProps {
+  isExpanded: boolean;
+}
+
+const ArrowIcon: React.FC<ArrowIconProps> = ({ isExpanded }) => {
+  return (
+    <svg
+      className={`w-5 h-5 text-gray-500 transform transition-transform ${
+        isExpanded ? 'rotate-180' : ''
+      }`}
+      fill="none"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+    >
+      <path d="M19 9l-7 7-7-7" />
+    </svg>
+  );
+};
+
+export default ArrowIcon;
diff --git a/src/assets/svg/Icons/ArrowRightIcon.tsx b/src/assets/svg/Icons/ArrowRightIcon.tsx
diff --git a/src/components/CongratsModal/index.tsx b/src/components/CongratsModal/index.tsx
diff --git a/src/components/MonthlyChecking/MenteeCheckInFormModal.component.tsx b/src/components/MonthlyChecking/MenteeCheckInFormModal.component.tsx
@@ -10,6 +10,21 @@ import CloseIcon from '../../assets/svg/Icons/CloseIcon';
 
 type MenteeCheckInForm = z.infer<typeof MenteeCheckInSchema>;
 
+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`}
               >
                 <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>
+                {months.map((month) => (
+                  <option key={month} value={month}>
+                    {month}
+                  </option>
+                ))}
               </select>
               {errors.title && (
                 <p className="text-red-500 text-xs mt-1">

diff --git 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<CheckInItemProps> = ({ checkIn }) => (
-  <div className="p-4 hover:bg-gray-50 transition-colors duration-150">
-    <div className="flex justify-between items-start">
-      <div>
-        <h4 className="text-lg font-medium text-gray-700 mt-2 mb-4 bg-blue-100 p-2 rounded-md w-30 h-12 flex items-center justify-center">
-          {' '}
-          {checkIn.title}
-        </h4>
-        <div className="mt-2">
-          <h4 className="font-medium text-gray-700">General Updates:</h4>
-          <p className="text-sm text-gray-600">
-            {checkIn.generalUpdatesAndFeedback ?? 'No updates provided'}
-          </p>
-        </div>
-        <div className="mt-2">
-          <h4 className="font-medium text-gray-700">Progress Towards Goals:</h4>
-          <p className="text-sm text-gray-600">
-            {checkIn.progressTowardsGoals ?? 'No progress updates provided'}
-          </p>
-        </div>
-      </div>
-      <div className="flex flex-col items-end">
-        <h4 className="font-medium text-gray-700">My Submissions</h4>
-        {checkIn.mediaContentLinks.map((link, index) => (
-          <a
-            key={index}
-            href={link}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-blue-600 hover:text-blue-800 text-sm mb-1 underline"
-          >
-            Click Media Link {index + 1}
-          </a>
-        ))}
-        <div className="mt-2">
-          <p className="text-sm text-gray-600">
-            Submitted on{' '}
-            {format(new Date(checkIn.checkInDate), 'MMMM dd, yyyy, hh:mm a')}
-          </p>
+const CheckInItem: React.FC<CheckInItemProps> = ({ checkIn }) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  return (
+    <div className="border-b border-gray-200 last:border-b-0">
+      <div
+        className="p-4 cursor-pointer hover:bg-gray-50 transition-colors duration-150"
+        onClick={() => {
+          setIsExpanded(!isExpanded);
+        }}
+      >
+        <div className="flex justify-between items-center">
+          <h4 className="text-lg font-medium text-gray-700 truncate flex-1">
+            {checkIn.title}
+          </h4>
+          <ArrowIcon isExpanded={isExpanded} />
         </div>
+        <p className="text-sm text-gray-500 mt-1">
+          Submitted on {format(new Date(checkIn.checkInDate), 'MMM dd, yyyy')}
+        </p>
       </div>
-    </div>
 
-    <div className="mt-3 bg-gray-50 p-3 rounded-md">
-      <h4 className="mt-2 text-lg text-gray-600 font-bold p-1 rounded">
-        Mentor Feedback:
-      </h4>
-      {checkIn.mentorFeedback ? (
-        <p className="text-md text-gray-600">{checkIn.mentorFeedback}</p>
-      ) : (
-        <p className="text-sm text-gray-600">No feedback yet</p>
+      {isExpanded && (
+        <div className="px-4 pb-4 md:flex md:space-x-4">
+          <div className="md:w-2/3">
+            <div className="mb-4">
+              <h5 className="font-medium text-gray-700 mb-2">
+                General Updates:
+              </h5>
+              <p className="text-sm text-gray-600">
+                {checkIn.generalUpdatesAndFeedback ?? 'No updates provided'}
+              </p>
+            </div>
+            <div className="mb-4">
+              <h5 className="font-medium text-gray-700 mb-2">
+                Progress Towards Goals:
+              </h5>
+              <p className="text-sm text-gray-600">
+                {checkIn.progressTowardsGoals ?? 'No progress updates provided'}
+              </p>
+            </div>
+            <div className="mb-4">
+              <h5 className="font-medium text-gray-700 mb-2">Submissions:</h5>
+              {checkIn.mediaContentLinks.map((link, index) => (
+                <a
+                  key={index}
+                  href={link}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="block text-blue-600 hover:text-blue-800 text-sm mb-1 underline"
+                >
+                  Media Link {index + 1}
+                </a>
+              ))}
+            </div>
+          </div>
+          <div className="md:w-1/3">
+            <div className="bg-gray-50 p-3 rounded-md">
+              <h5 className="font-medium text-gray-700 mb-2">
+                Mentor Feedback:
+              </h5>
+              {checkIn.mentorFeedback ? (
+                <p className="text-sm text-gray-600">
+                  {checkIn.mentorFeedback}
+                </p>
+              ) : (
+                <p className="text-sm text-gray-600">No feedback yet</p>
+              )}
+              <div className="text-right mt-2">
+                <span
+                  className={`text-sm font-medium ${
+                    checkIn.isCheckedByMentor
+                      ? 'text-green-600'
+                      : 'text-yellow-600'
+                  }`}
+                >
+                  {checkIn.isCheckedByMentor
+                    ? `✓ Checked on ${format(
+                        new Date(checkIn.mentorCheckedDate ?? ''),
+                        'MMM dd, yyyy'
+                      )}`
+                    : '⏳ Pending review'}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
       )}
-      <div className="text-right">
-        <span
-          className={`text-sm font-medium ${
-            checkIn.isCheckedByMentor ? 'text-green-600' : 'text-yellow-600'
-          }`}
-        >
-          {checkIn.isCheckedByMentor
-            ? `✓ Checked by mentor on ${format(
-                new Date(checkIn.mentorCheckedDate ?? ''),
-                'MMM dd, yyyy, hh:mm a'
-              )}`
-            : '⏳ Pending review'}
-        </span>
-      </div>
     </div>
-  </div>
-);
+  );
+};
 
 const MenteeMonthlyChecking: React.FC<MenteeMonthlyCheckingProps> = ({
   menteeId,
@@ -93,7 +117,7 @@ const MenteeMonthlyChecking: React.FC<MenteeMonthlyCheckingProps> = ({
 
   if (isLoading) {
     return (
-      <div className="text-center py-4">
+      <div className="flex justify-center items-center h-64">
         <Spinner />
       </div>
     );
@@ -121,7 +145,7 @@ const MenteeMonthlyChecking: React.FC<MenteeMonthlyCheckingProps> = ({
   );
 
   return (
-    <div className="space-y-8">
+    <div className="space-y-6">
       <NewSubmissionsToggle
         isNewSubmissionOpen={isNewSubmissionOpen}
         toggleNewSubmission={() => {

diff --git a/src/components/MonthlyChecking/MentorFeedbackForm.component.tsx b/src/components/MonthlyChecking/MentorFeedbackForm.component.tsx
@@ -75,11 +75,6 @@ const MentorFeedbackForm: React.FC<MentorFeedbackFormProps> = ({
             className="form-checkbox h-5 w-5 text-blue-600"
           />
           <span className="ml-2 text-gray-700">Mark as checked</span>
-          {errors.isCheckedByMentor && (
-            <div className="text-red-600 text-sm mt-1 ml-7">
-              {errors.isCheckedByMentor.message}
-            </div>
-          )}
         </label>
         <button
           type="submit"
@@ -96,6 +91,11 @@ const MentorFeedbackForm: React.FC<MentorFeedbackFormProps> = ({
           )}
         </button>
       </div>
+      {errors.isCheckedByMentor && (
+        <div className="text-red-600 text-sm mt-1 ml-7">
+          {errors.isCheckedByMentor.message}
+        </div>
+      )}
       {isSuccess && (
         <div className="text-green-600 text-sm mt-1">
           Feedback submitted successfully 🎉