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

…rm UI
sef-global · Oct 10, 2024 · 882152b · 882152b
1 parent 77c11b5
commit 882152b
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 20 deletions.
diff --git a/src/components/MonthlyChecking/MenteeCheckInFormModal.component.tsx b/src/components/MonthlyChecking/MenteeCheckInFormModal.component.tsx
@@ -5,8 +5,8 @@ import { z } from 'zod';
 import { MenteeCheckInSchema } from '../../schemas';
 import { useSubmitCheckIn } from '../../hooks/useSubmitCheckIn';
 import closeIcon from '../../assets/svg/closeIcon.svg';
-import Spinner from '../Spinner/Spinner.component';
 import CloseIcon from '../../assets/svg/Icons/CloseIcon';
+import Loading from '../../assets/svg/Loading';
 
 type MenteeCheckInForm = z.infer<typeof MenteeCheckInSchema>;
 
@@ -221,11 +221,16 @@ const MonthlyCheckInModal: React.FC<{
               <button
                 type="submit"
                 disabled={loading}
-                className={`inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white ${
-                  loading ? 'bg-gray-400' : 'bg-blue-600 hover:bg-blue-700'
-                } focus:outline-none focus:ring focus:ring-blue-500`}
+                className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700
+                focus:outline-none focus:ring focus:ring-blue-500"
               >
-                {loading ? <Spinner /> : 'Submit Check-In'}
+                {loading ? (
+                  <div className="inline-flex items-center justify-center w-6 h-6">
+                    <Loading />
+                  </div>
+                ) : (
+                  'Submit'
+                )}
               </button>
               <button
                 type="button"

diff --git a/src/components/MonthlyChecking/MenteeMonthlyChecking.tsx b/src/components/MonthlyChecking/MenteeMonthlyChecking.tsx
@@ -1,12 +1,12 @@
 import React, { useState } from 'react';
 import { format } from 'date-fns';
-import Spinner from '../Spinner/Spinner.component';
 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;
@@ -118,7 +118,7 @@ const MenteeMonthlyChecking: React.FC<MenteeMonthlyCheckingProps> = ({
   if (isLoading) {
     return (
       <div className="flex justify-center items-center h-64">
-        <Spinner />
+        <Loading />
       </div>
     );
   }

diff --git a/src/components/MonthlyChecking/MentorFeedbackForm.component.tsx b/src/components/MonthlyChecking/MentorFeedbackForm.component.tsx
@@ -3,7 +3,7 @@ import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { MentorFeedbackSchema } from '../../schemas';
 import { useMentorFeedback } from '../../hooks/useSubmitCheckIn';
-import Spinner from '../Spinner/Spinner.component';
+import Loading from '../../assets/svg/Loading';
 
 interface MentorFeedbackFormData {
   menteeId: string;
@@ -53,7 +53,10 @@ const MentorFeedbackForm: React.FC<MentorFeedbackFormProps> = ({
   };
 
   return (
-    <form onSubmit={handleSubmit(handleSubmitFeedback)} className="mt-3">
+    <form
+      onSubmit={handleSubmit(handleSubmitFeedback)}
+      className="mt-3 p-4 bg-gray-100 rounded-md shadow-sm"
+    >
       <input type="hidden" {...register('menteeId')} />
       <input type="hidden" {...register('checkInId')} />
       <textarea
@@ -83,8 +86,7 @@ const MentorFeedbackForm: React.FC<MentorFeedbackFormProps> = ({
         >
           {isSubmitting ? (
             <span className="flex items-center justify-center">
-              <Spinner />
-              <span>Submitting...</span>
+              <Loading />
             </span>
           ) : (
             'Submit Feedback'

diff --git a/src/components/MonthlyChecking/MentorMonthlyChecking.tsx b/src/components/MonthlyChecking/MentorMonthlyChecking.tsx
@@ -1,12 +1,12 @@
 import React, { useState } from 'react';
 import { format } from 'date-fns';
 import MentorFeedbackForm from './MentorFeedbackForm.component';
-import Spinner from '../Spinner/Spinner.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;
@@ -111,7 +111,7 @@ const CheckInItem: React.FC<CheckInItemProps> = ({
               <>
                 {isSubmitting ? (
                   <div className="flex justify-center items-center h-32">
-                    <Spinner />
+                    <Loading />
                   </div>
                 ) : (
                   !isAdmin && (
@@ -155,7 +155,7 @@ const MentorMonthlyChecking: React.FC<MentorMonthlyCheckingProps> = ({
   if (isLoading) {
     return (
       <div className="flex justify-center items-center h-64">
-        <Spinner />
+        <Loading />
       </div>
     );
   }

diff --git a/src/components/Spinner/Spinner.component.tsx b/src/components/Spinner/Spinner.component.tsx