implemented reminders list api

src/components/Reminders/ReminderTable.jsx

@@ -1,11 +1,28 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import dataImage1 from "../../assets/images/data-table-user-1.png";
-import dataImage2 from "../../assets/images/data-table-user-2.png";
+import usersService from "../../services/UsersService";
-import dataImage3 from "../../assets/images/data-table-user-3.png";
-import dataImage4 from "../../assets/images/data-table-user-4.png";
 import SelectBox from "../Helpers/SelectBox";
 
 export default function ReminderTable({ className }) {
+  const [userReminders, setUserReminders] = useState([]);
+
+  const api = new usersService();
+  useEffect(() => {
+    getUserReminders();
+  }, []);
+
+  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 (
@@ -39,8 +56,62 @@ export default function ReminderTable({ className }) {
             </tr>
 
             {selectedCategory === "All Categories" ? (
+
               <>
-                <tr className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50">
+               {userReminders.map((reminders, index) => ( 
+
+                <tr key={reminders.id} className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50">
+                  <td className=" py-4">
+                    <div className="flex space-x-2 items-center">
+                      <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
+                        <img
+                          src={dataImage1}
+                          alt="data"
+                          className="w-full h-full"
+                        />
+                      </div>
+                      <div className="flex flex-col">
+                        <h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
+                          Pizza Testing Appointament
+                        </h1>
+                        <span className="text-sm text-thin-light-gray">
+                        
+                          Added <span className="text-purple">{reminders.added}</span>
+                        </span>
+                      </div>
+                    </div>
+                  </td>
+                  <td className="text-center py-4 px-2">
+                    <div className="flex space-x-1 items-center justify-center">
+           
+                      <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
+                      {reminders.start_date}
+                      </span>
+                    </div>
+                  </td>
+                  <td className="text-center py-4 px-2">
+                    <div className="flex space-x-1 items-center justify-center">
+                      <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
+                      {reminders.end_date}
+                      </span>
+                    </div>
+                  </td>
+                  <td className="text-right py-4 px-2">
+                    <span className="text-base text-thin-light-gray whitespace-nowrap">
+                     {reminders.reminder}
+                    </span>
+                  </td>
+                  <td className="text-right py-4 px-2">
+                    <button
+                      type="button"
+                      className="text-sm text-white bg-purple px-2.5 py-1.5 rounded-full"
+                    >
+                      Edit
+                    </button>
+                  </td>
+                </tr>
+              ))}
+                {/* <tr className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50">
                   <td className=" py-4">
                     <div className="flex space-x-2 items-center">
                       <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
@@ -186,57 +257,9 @@ export default function ReminderTable({ className }) {
                       Edit
                     </button>
                   </td>
-                </tr>
+                </tr> */}
-                <tr className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50">
-                  <td className=" py-4">
-                    <div className="flex space-x-2 items-center">
-                      <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
-                        <img
-                          src={dataImage1}
-                          alt="data"
-                          className="w-full h-full"
-                        />
-                      </div>
-                      <div className="flex flex-col">
-                        <h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
-                          Pizza Testing Appointament
-                        </h1>
-                        <span className="text-sm text-thin-light-gray">
-                          Added <span className="text-purple">10-10-2025</span>
-                        </span>
-                      </div>
-                    </div>
-                  </td>
-                  <td className="text-center py-4 px-2">
-                    <div className="flex space-x-1 items-center justify-center">
-           
-                      <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
-                        12-01-25 : 6:30 PM
-                      </span>
-                    </div>
-                  </td>
-                  <td className="text-center py-4 px-2">
-                    <div className="flex space-x-1 items-center justify-center">
-                      <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
-                      12-01-28 : 6:30 PM
-                      </span>
-                    </div>
-                  </td>
-                  <td className="text-right py-4 px-2">
-                    <span className="text-base text-thin-light-gray whitespace-nowrap">
-                     4
-                    </span>
-                  </td>
-                  <td className="text-right py-4 px-2">
-                    <button
-                      type="button"
-                      className="text-sm text-white bg-purple px-2.5 py-1.5 rounded-full"
-                    >
-                      Edit
-                    </button>
-                  </td>
-                </tr>
               </>
+            
             ) : selectedCategory === "Doctors Visit" ? (
               <>
                 <tr className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50">

src/middleware/AuthRoute.jsx

@@ -1,9 +1,30 @@
-import { Navigate, Outlet } from "react-router-dom";
+import React, {useEffect} from "react";
+import { Navigate, Outlet, useNavigate } from "react-router-dom";
+import { toast } from "react-toastify";
 
 const AuthRoute = ({ redirectPath = "/login", children }) => {
   const isLogin = localStorage.getItem("email");
   const profile = localStorage.getItem("profile")
 
+  const navigate = useNavigate();
+
+  //FUNCTION TO EXPIRE SESSION AFETR 5 MINUTES
+  const expireSession = () => {
+    localStorage.removeItem("email");
+    localStorage.removeItem('session_token');
+    localStorage.removeItem('profile');
+    // navigate("/login", { replace: true });
+  };
+
+  useEffect(()=>{
+    setTimeout(()=>{
+      expireSession()
+      toast.success("Opps, session has expired", {
+        icon: `🙂`,
+      });
+    }, 300000) //expires user login session after 5 minutes
+  },[])
+
   if (!isLogin || !profile || (typeof JSON.parse(profile) == 'object' && JSON.parse(profile).firstname == undefined)) {
     return <Navigate to={redirectPath} replace />;
   }

src/services/UsersService.js

@@ -1,4 +1,3 @@
-import React from "react";
 import Axios from "axios";
 
 class usersService {
@@ -24,7 +23,7 @@ class usersService {
     //----------------------------------------  -----
     //----------------------------------------  -----
     getAuxEnd(uri, reqData) {
-        debugger;
+        // debugger;
         const session_token = localStorage.getItem("session_token");
         let axiosConfig = {
             headers: {

src/store/userInfo.js

@@ -1,7 +1,7 @@
 import { createSlice } from "@reduxjs/toolkit";
 
 const initialState = {
-  userInfo: JSON.parse(localStorage.getItem("profile"))
+  userInfo: localStorage.getItem('profile') && JSON.parse(localStorage.getItem("profile"))
 };
 
 export const userSlice = createSlice({

src/views/HomePages.jsx

@@ -1,26 +1,11 @@
 import React, {useEffect} from "react";
 import Home from "../components/Home";
-import { useNavigate } from "react-router-dom";
 import { useDispatch, useSelector } from "react-redux";
 // import { toast } from "react-toastify";
 
 export default function HomePages() {
 
   const { drawer } = useSelector((state) => state.drawer);
-  const dispatch = useDispatch();
-  const navigate = useNavigate();
-  const logOut = () => {
-    localStorage.removeItem("email");
-    localStorage.removeItem('session_token');
-
-    navigate("/login", { replace: true });
-  };
-
-  useEffect(()=>{
-    setTimeout(()=>{
-      logOut()
-    }, 300000) //expires user login session after 5 minutes
-  },[])
   return (
     <>
       <Home />