fix(#284):show skeleton whenever data is loading and labels to modal (#…

…275)
atlp-rwanda · Dec 5, 2024 · b4d5377 · b4d5377
1 parent 325c5ef
commit b4d5377
Show file tree

Hide file tree

Showing 8 changed files with 120 additions and 42 deletions.
diff --git a/src/components/Cohort/addCohortModal.tsx b/src/components/Cohort/addCohortModal.tsx
@@ -49,10 +49,10 @@ const AddCohortModal = ({ open, onClose }) => {
   };
 
   return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 dark:">
-      <div className=" rounded-lg w-[30%] p-6 relative bg-white dark:bg-dark-frame-bg">
-        <div className="flex justify-between items-center mb-6">
-         <h2 className="text-black text-xl font-semibold dark:text-white">
+    <div className=" fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50  dark:">
+      <div className="max-h-full text-sm rounded-lg w-[30%] p-6 relative bg-white dark:bg-dark-frame-bg md:h-[60%] ">
+        <div className="flex justify-between items-center mb-3">
+          <h2 className="text-black text-xl font-semibold dark:text-white">
             ADD NEW COHORT
           </h2>
           <button
@@ -63,11 +63,12 @@ const AddCohortModal = ({ open, onClose }) => {
           </button>
         </div>
 
-        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+        <form onSubmit={handleSubmit(onSubmit)} className="space-y-1">
+          <label className="inline-block pt-2 pl-1">Name</label>
           <input
             type="text"
-            placeholder="Name"
-            className="w-full p-3 rounded bg-transparent border border-gray-600 placeholder:text-black  focus:outline-none dark:placeholder:text-white"
+            placeholder="Enter cohort name"
+            className="w-full p-2 rounded bg-transparent border border-gray-600 placeholder:text-black  focus:outline-none dark:placeholder:text-gray-400"
             {...register("title", {
               required: "Title is required",
               minLength: {
@@ -79,12 +80,16 @@ const AddCohortModal = ({ open, onClose }) => {
           {errors.title && (
             <p className="text-red-500">{errors.title?.message}</p>
           )}
+          <label className="inline-block pt-2 pl-1">Application cycle</label>
 
           <select
-            className="w-full p-3 rounded bg-transparent border border-gray-600 text-black focus:outline-none dark:text-white"
+            className="w-full p-2 rounded bg-transparent border border-gray-600 text-black focus:outline-none dark:text-white"
             {...register("cycle", { required: "Cycle is required" })}
           >
-            <option value="" className="bg-gray-200 dark:bg-[#1e2124]">
+            <option
+              value=""
+              className="text-gray-500 bg-gray-200 dark:bg-[#1e2124]"
+            >
               Select Cycle
             </option>
             {cycleData.map((cycle) => (
@@ -100,12 +105,12 @@ const AddCohortModal = ({ open, onClose }) => {
           {errors.cycle && (
             <p className="text-red-500">{errors.cycle?.message}</p>
           )}
-
+          <label className="inline-block pt-2 pl-1">Program</label>
           <select
-            className="w-full p-3 rounded bg-transparent border border-gray-600 text-black focus:outline-none dark:text-white"
+            className="w-full p-2 rounded bg-transparent border border-gray-600 text-black focus:outline-none dark:text-white"
             {...register("program", { required: "Program is required" })}
           >
-            <option value="" className="bg-gray-200 dark:bg-[#1e2124]">
+            <option value="" className="bg-gray-500 dark:bg-[#1e2124]">
               Select Program
             </option>
             {programData.map((program) => (
@@ -121,12 +126,16 @@ const AddCohortModal = ({ open, onClose }) => {
           {errors.program && (
             <p className="text-red-500">{errors.program?.message}</p>
           )}
-
+          <label className="inline-block pt-2 pl-1">Phase</label>
           <select
-            className="w-full p-3 rounded bg-transparent border border-gray-600 text-black focus:outline-none dark:text-white"
+            className="w-full p-2 rounded bg-transparent border border-gray-600 text-black focus:outline-none dark:text-white"
             {...register("phase", { required: "Phase is required" })}
           >
-            <option value="" className="bg-gray-200 dark:bg-[#1e2124]">
+            <option
+              value=""
+              color={"red"}
+              className="text-gray-500 dark:bg-[#1e2124]"
+            >
               Phase
             </option>
             <option
@@ -140,25 +149,27 @@ const AddCohortModal = ({ open, onClose }) => {
             <p className="text-red-500">{errors.phase?.message}</p>
           )}
 
+          <label className="inline-block pt-2 pl-1">Starting Date</label>
           <input
             type="date"
-            className="w-full p-3 rounded bg-transparent border border-gray-600 text-black focus:outline-none dark:text-white"
+            className="w-full p-2 rounded bg-transparent border border-gray-600 text-black focus:outline-none dark:text-white"
             {...register("start", { required: "Starting date is required" })}
           />
           {errors.start && (
             <p className="text-red-500">{errors.start?.message}</p>
           )}
 
+          <label className="inline-block pt-2 pl-1">Ending Date</label>
           <input
             type="date"
-            className="w-full  p-3 rounded bg-transparent border border-gray-600 text-black focus:outline-none dark:text-white"
+            className="w-full  p-2 rounded bg-transparent border border-gray-600 text-black focus:outline-none dark:text-white"
             {...register("end", { required: "Ending date is required" })}
           />
           {errors.end && <p className="text-red-500">{errors.end?.message}</p>}
 
           <button
             type="submit"
-            className="w-full p-3 flex justify-center items-centerr bg-[#56C870] text-white rounded font-medium hover:bg-green-600 transition-colors"
+            className="w-full p-2  flex justify-center items-centerr bg-[#56C870] text-white rounded font-medium hover:bg-green-600 transition-colors"
           >
             {isSubmitting ? (
               <ThreeDots height="20" width="30" color="#ffffff" />

diff --git a/src/components/Cohort/updateCohortmodal.tsx b/src/components/Cohort/updateCohortmodal.tsx
@@ -60,8 +60,8 @@ const UpdateCohortModal = ({ open, onClose, cohortData }) => {
 
   return (
     <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-      <div className="rounded-lg w-[30%] p-6 relative bg-white dark:bg-dark-frame-bg">
-        <div className="flex justify-between items-center mb-6">
+      <div className="max-h-full text-sm rounded-lg w-[30%] p-6 relative bg-white dark:bg-dark-frame-bg">
+        <div className="flex justify-between items-center mb-3">
           <h2 className="text-black text-xl font-semibold dark:text-white">
             UPDATE COHORT
           </h2>
@@ -73,16 +73,18 @@ const UpdateCohortModal = ({ open, onClose, cohortData }) => {
           </button>
         </div>
 
-        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+        <form onSubmit={handleSubmit(onSubmit)} className="space-y-1">
+          <label className="inline-block pt-2 pl-1">Name</label>
           <input
             type="text"
-            placeholder="Name"
-            className="w-full p-3 rounded bg-transparent border border-gray-600 placeholder:text-black  focus:outline-none dark:placeholder:text-white"
+            placeholder="Enter cohort name"
+            className="w-full p-2 rounded bg-transparent border border-gray-600 placeholder:text-black  focus:outline-none dark:placeholder:text-white"
             {...register("title")}
           />
+          <label className="inline-block pt-2 pl-1">Application cycle</label>
 
           <select
-            className="w-full  p-3 rounded bg-transparent border border-gray-600 text-black focus:outline-none dark:text-white"
+            className="w-full  p-2 rounded bg-transparent border border-gray-600 text-black focus:outline-none dark:text-white"
             {...register("cycle")}
           >
             <option value="" className="bg-gray-200 dark:bg-[#1e2124]">
@@ -98,9 +100,9 @@ const UpdateCohortModal = ({ open, onClose, cohortData }) => {
               </option>
             ))}
           </select>
-
+          <label className="inline-block pt-2 pl-1">Program</label>
           <select
-            className="w-full  p-3 rounded bg-transparent border border-gray-600 text-black focus:outline-none dark:text-white"
+            className="w-full  p-2 rounded bg-transparent border border-gray-600 text-black focus:outline-none dark:text-white"
             {...register("program")}
           >
             <option value="" className="bg-gray-200 dark:bg-[#1e2124]">
@@ -116,9 +118,9 @@ const UpdateCohortModal = ({ open, onClose, cohortData }) => {
               </option>
             ))}
           </select>
-
+          <label className="inline-block pt-2 pl-1">Phase</label>
           <select
-            className="w-full  p-3 rounded bg-transparent border border-gray-600 text-black focus:outline-none dark:text-white"
+            className="w-full  p-2 rounded bg-transparent border border-gray-600 text-black focus:outline-none dark:text-white"
             {...register("phase")}
           >
             <option value="" className="bg-gray-200 dark:bg-[#1e2124]">
@@ -143,22 +145,22 @@ const UpdateCohortModal = ({ open, onClose, cohortData }) => {
               Apprenticeship
             </option>
           </select>
-
+          <label className="inline-block pt-2 pl-1">Starting Date</label>
           <input
             type="date"
-            className="w-full  p-3 rounded bg-transparent border border-gray-600 text-black focus:outline-none dark:text-white"
+            className="w-full  p-2 rounded bg-transparent border border-gray-600 text-black focus:outline-none dark:text-white"
             {...register("start")}
           />
-
+          <label className="inline-block pt-2 pl-1">Ending Date</label>
           <input
             type="date"
-            className="w-full  p-3 rounded bg-transparent border border-gray-600 text-black focus:outline-none dark:text-white"
+            className="w-full  p-2 rounded bg-transparent border border-gray-600 text-black focus:outline-none dark:text-white"
             {...register("end")}
           />
 
           <button
             type="submit"
-            className="w-full p-3 flex justify-center items-center bg-[#56C870] text-white rounded font-medium hover:bg-green-600 transition-colors"
+            className="w-full p-2 flex justify-center items-center bg-[#56C870] text-white rounded font-medium hover:bg-green-600 transition-colors"
           >
             {isSubmitting ? (
               <ThreeDots height="20" width="30" color="#ffffff" />

diff --git a/src/pages/Cohort/Cohort.tsx b/src/pages/Cohort/Cohort.tsx
@@ -15,6 +15,8 @@ import { Link } from "react-router-dom";
 import { toast } from "react-toastify";
 import UpdateCohortModal from "../../components/Cohort/updateCohortmodal";
 import { Spinner } from "flowbite-react";
+import { CohortSkeleton } from "../../skeletons/cohortSkeleton";
+
 
 const CohortsPage = () => {
   const [anchorEl, setAnchorEl] = useState({});
@@ -89,8 +91,8 @@ const CohortsPage = () => {
       setCurrentPage(newPage);
     }
   };
-  if (isLoading) {
-    return <Spinner className="mt-96" />;
+  if (isLoading || !data) {
+    return <CohortSkeleton />;
   }
 
   return (

diff --git a/src/pages/Cohort/CohortDetailPage.tsx b/src/pages/Cohort/CohortDetailPage.tsx
@@ -8,6 +8,7 @@ import { getCohort, getAllTraineeApplicants, acceptTrainee } from "../../redux/a
 import { useAppDispatch, useAppSelector } from "../../hooks/hooks";
 import { useParams } from "react-router-dom";
 import { Spinner } from "flowbite-react";
+import { CohortDetailSkeleton } from "../../skeletons/singleCohortSketon";
 
 const CohortsDetailPage = () => {
   const [anchorEl, setAnchorEl] = useState(null);
@@ -69,9 +70,9 @@ const CohortsDetailPage = () => {
 
   const traineesWithoutCohort = trainees?.filter((trainee) => !trainee.cohort);
 
-  if (isLoading) {
-    return <Spinner className="mt-96" />;
-  }
+  if (!traineeCohort || isLoading) {
+  return <CohortDetailSkeleton />;
+}
 
   const trainee = traineeCohort?.trainees || [];
 

diff --git a/src/redux/actions/cohortActions.ts b/src/redux/actions/cohortActions.ts
@@ -99,6 +99,7 @@ export const getCohort = (getCohortId: any) => async (dispatch: any) => {
     });
     const cohortData = await response.data.data.getCohort;
     dispatch(creator(GET_TRAINEE_COHORT, cohortData));
+    return cohortData.length;
   } catch (error) {
     if (error) {
       return console.log(error);

diff --git a/src/redux/reducers/cohortReducer.ts b/src/redux/reducers/cohortReducer.ts
@@ -27,16 +27,13 @@ export default (state = initialState, { type, payload }: any) => {
         ...state,
         isLoading: false,
         data: payload,
-        errors: null,
       };
 
     case GET_TRAINEE_COHORT:
       return {
         ...state,
         isLoading: false,
-        isLoaded: true,
-        traineeCohort: payload,
-        errors: null,
+        traineeCohort: payload
       };
     case CREATE_COHORT_SUCCESS:
       return {
@@ -48,12 +45,14 @@ export default (state = initialState, { type, payload }: any) => {
       return {
         ...state,
         isLoading: false,
+        isLoaded: true,
         errors: payload,
       };
     case GET_ALL_TRAINEES:
       return {
         ...state,
         isLoading: false,
+        isLoaded: true,
         trainees: payload,
       };
     case ADD_TRAINEE_IN_COHORT:

diff --git a/src/skeletons/cohortSkeleton.tsx b/src/skeletons/cohortSkeleton.tsx
@@ -0,0 +1,24 @@
+export const CohortSkeleton = () => {
+  return (
+    <div className="space-y-4 mr-32  bg-white dark:bg-dark-bg shadow-lg py-8 rounded-md w-[90%]">
+      <div className="h-12 flex items-center gap-4 rounded w-[98%] mb-2 px-4 ml-4">
+        <div className="bg-gray-600 h-10 rounded w-[10%] mb-2 space-x-4 px-4"></div>
+          </div>
+        <div className="bg-gray-600 h-7 rounded w-[10%] mb-2 space-x-4 px-4 ml-8"></div>
+      <div className="bg-gray-600 h-12 rounded w-[96%] mb-2 space-x-8 px-4 ml-8"></div>
+      {Array(5)
+        .fill(0)
+        .map((_, i) => (
+          <div
+            key={i}
+            className="animate-pulse flex items-center space-x-8 px-4 ml-4"
+          >
+            <div className="bg-gray-600 h-6 rounded w-1/4 md:w-1/6 lg:w-1/4"></div>
+            <div className="bg-gray-600 h-6 rounded w-1/4 md:w-1/6 lg:w-1/4"></div>
+            <div className="bg-gray-600 h-6 rounded w-1/4 md:w-1/6 lg:w-1/4"></div>
+            <div className="bg-gray-600 h-6 rounded w-1/4 md:w-1/8 lg:w-1/4"></div>
+          </div>
+        ))}
+    </div>
+  );
+};
diff --git a/src/skeletons/singleCohortSketon.tsx b/src/skeletons/singleCohortSketon.tsx
@@ -0,0 +1,38 @@
+export const CohortDetailSkeleton = () => {
+  return (
+    <div className="space-y-6 bg-white dark:bg-dark-bg shadow-lg py-8 rounded-md w-[90%] mx-auto">
+      {/* Title */}
+      <div className="h-8 bg-gray-600 rounded w-1/4 ml-4 mb-4"></div>
+
+      {/* Information Section */}
+      <div className="bg-gray-200 dark:bg-dark-tertiary rounded-lg w-[50%] ml-4 p-6 space-y-4">
+        {Array(6)
+          .fill(0)
+          .map((_, i) => (
+            <div
+              key={i}
+              className="flex justify-between  bg-gray-600 h-6 rounded w-[60%] px-4"
+            ></div>
+          ))}
+      </div>
+
+      {/* Trainees Section */}
+      <div className="w-[70%] ml-4 mt-8">
+        <div className="flex justify-between items-center pb-5">
+          <div className="bg-gray-600 h-8 rounded w-1/4"></div>
+          <div className="bg-gray-600 h-10 rounded w-1/6"></div>
+        </div>
+        <div className="space-y-3">
+          {Array(4)
+            .fill(0)
+            .map((_, i) => (
+              <div
+                key={i}
+                className="flex items-center justify-between space-x-4 bg-gray-600 h-8 rounded w-full"
+              ></div>
+            ))}
+        </div>
+      </div>
+    </div>
+  );
+};