From 882152b7a9fe266395b85a65efa892dea034a3f1 Mon Sep 17 00:00:00 2001
From: mayura-andrew <mayuraalahakoon@gmail.com>
Date: Thu, 10 Oct 2024 15:43:22 +0530
Subject: [PATCH] Refactor code: Remove Spinner component  and update mentor
 feedback form UI

---
 .../MenteeCheckInFormModal.component.tsx          | 15 ++++++++++-----
 .../MonthlyChecking/MenteeMonthlyChecking.tsx     |  4 ++--
 .../MentorFeedbackForm.component.tsx              | 10 ++++++----
 .../MonthlyChecking/MentorMonthlyChecking.tsx     |  6 +++---
 src/components/Spinner/Spinner.component.tsx      |  6 ------
 5 files changed, 21 insertions(+), 20 deletions(-)
 delete mode 100644 src/components/Spinner/Spinner.component.tsx

diff --git a/src/components/MonthlyChecking/MenteeCheckInFormModal.component.tsx b/src/components/MonthlyChecking/MenteeCheckInFormModal.component.tsx
index a54e3916..e91384df 100644
--- 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
index 917fd0b9..c498d0d4 100644
--- 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
index bc9322ea..2c20deab 100644
--- 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
index f6c19445..f1f96303 100644
--- 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
deleted file mode 100644
index 20d418b1..00000000
--- a/src/components/Spinner/Spinner.component.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import React from 'react';
-
-const Spinner: React.FC = () => (
-  <div className="inline-block h-4 w-4 animate-spin rounded-full border-2 border-solid border-blue-500 border-t-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]" />
-);
-export default Spinner;