Merge branch 'master' of https://gitlab.chiefsoft.net/MyFit/users-myfit into task13-reminder-name

src/components/Reminders/ReminderTable.jsx

@@ -1,11 +1,13 @@
 import React, { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
 import dataImage1 from "../../assets/images/data-table-user-1.png";
 import usersService from "../../services/UsersService";
 import SelectBox from "../Helpers/SelectBox";
 
+
 export default function ReminderTable({ className }) {
   const [userReminders, setUserReminders] = useState([]);
-
+  const filterCategories = ["All Categories", "Appointments","Exercise/Gym", "Medication"];
   const api = new usersService();
   useEffect(() => {
     getUserReminders();
@@ -14,16 +16,13 @@ export default function ReminderTable({ className }) {
   const getUserReminders = async () => {
     try {
       const res = await api.getUserReminders();
-     
       setUserReminders(res.data.reminders);
-      console.log("res", res);
       
     } catch (error) {
       console.log("Error from User Reminders", error);
     }
   };
 
-  const filterCategories = ["All Categories", "Doctors Visit", "Medications"];
   const [selectedCategory, setCategory] = useState(filterCategories[0]);
   return (
     <div
@@ -44,6 +43,21 @@ export default function ReminderTable({ className }) {
           contentBodyClasses="w-auto min-w-max"
         />
       </div>
+      {userReminders.map((reminders, index) =>{
+        if (userReminders.length < 1 ) {
+          return(
+            <div  className="lg:flex justify-center">
+              <div style={{ transform: 'translateY(150px)' }}>
+                <Link
+                  to="/add-reminder"
+                  className="btn-gradient lg:flex hidden w-[300px] h-[50px] rounded-full text-white justify-center items-center"
+                >
+                  0 Reminders Start Reminder
+                </Link>
+              </div>
+          </div>
+          )} else{
+            return (
               <div className="relative w-full overflow-x-auto sm:rounded-lg">
               <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
                 <tbody>
@@ -72,7 +86,7 @@ export default function ReminderTable({ className }) {
                             </div>
                             <div className="flex flex-col">
                               <h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
-                        {reminders.description}
+                              {reminders.description.substring(0,30) + "..."}
                               </h1>
                               <span className="text-sm text-thin-light-gray">
                               
@@ -320,6 +334,22 @@ export default function ReminderTable({ className }) {
                 </tbody>
               </table>
             </div>
+
+            )
+           
+    
+
+          }
+      })} 
+      
+         
+        
+        
+           
+             
+
+
+      
     </div>
   );
 }