Refactoring of Notifications

frontend/src/components/NotificationsList.tsx

@@ -1,25 +1,38 @@
+import { Spinner } from "react-activity";
 import useNotifications from "../hooks/useNotifications";
 import NotificationCard from "./NotificationCard";
 
 const NotificationsList = () => {
-  const { notifications, haveNotification } = useNotifications();
+  const { notifications, haveNotification, loading } = useNotifications();
   return (
-    <div className="w-full h-auto bg-gray-400 rounded-lg bg-clip-padding backdrop-filter backdrop-blur-sm bg-opacity-10">
+    <div className="w-full h-auto bg-gray-400 rounded-lg bg-clip-padding backdrop-filter backdrop-blur-sm bg-opacity-10 p-5">
       <div>
         <h1 className="text-4xl font-syke-bold">Notifications</h1>
       </div>
 
       <div
-        className="w-full h-[20rem] overflow-y-auto"
+        className="w-full h-[15rem] overflow-y-auto"
         id="listcontainer">
-        <div className="flex flex-col overflow-y-auto h-80 scrollbar-thin scrollbar text-white p-5">
+        <div className="flex flex-col overflow-y-auto h-full scrollbar-thin scrollbar text-white p-5 space-y-3">
           {haveNotification ? (
             notifications?.map((notification) => (
-              <NotificationCard notification={notification} />
+              <div
+                key={notification.id}
+                className="cursor-pointer hover:bg-secondgrey">
+                <NotificationCard notification={notification} />
+              </div>
             ))
           ) : (
             <p className="flex justify-center items-center m-3">
-              No Notifications
+              {loading ? (
+                <Spinner
+                  size={40}
+                  color="#008000"
+                  animating={loading}
+                />
+              ) : (
+                "No Notifications"
+              )}
             </p>
           )}
         </div>

frontend/src/hooks/useNotifications.ts

@@ -7,32 +7,40 @@
   const [notifications, setNotifications] = useState<UserNotification[]>();
   const [haveNotification, setHaveNotification] = useState<boolean>(false);
   const { auth, navigate, refresh } = useFetchWithAuthExports();
+  const [loading, setLoading] = useState<boolean>();
 
   useEffect(() => {
+    setLoading(true);
     const getNotifications = async () => {
-      const response = await fetchWithAuth(
-        navigate,
-        refresh,
-        auth,
-        "/notification/get-by-user",
-        "get"
-      );
-
-      if (response.status === 404) {
-        setHaveNotification(false);
-        return;
+      try {
+        const response = await fetchWithAuth(
+          navigate,
+          refresh,
+          auth,
+          "/notification/get-by-user",
+          "get"
+        );
+
+        if (response.status === 404) {
+          setHaveNotification(false);
+          return;
+        }
+
+        setHaveNotification(true);
+
+        const noticationsAPI = await response.json();
+        setNotifications(noticationsAPI);
+      } catch (error) {
+        alert(error);
+      } finally {
+        setLoading(false);
       }
-
-      setHaveNotification(true);
-
-      const noticationsAPI = await response.json();
-      setNotifications(noticationsAPI);
     };
 
     getNotifications();
   }, []);
 
-  return { notifications, haveNotification };
+  return { notifications, haveNotification, loading };
 };
 
 export default useNotifications;

frontend/src/pages/HomePage.tsx

@@ -2,17 +2,18 @@ import Header from "../components/Header";
 import { useNavigate } from "react-router-dom";
 import useUser from "../hooks/useUser";
 import NotificationsList from "../components/NotificationsList";
+import Loading from "../components/Loading";
 
 const HomePage = () => {
   const navigate = useNavigate();
-  const { data: data } = useUser();
-
-  console.log(data);
+  const { data: data, loading } = useUser();
 
   const handleRegisterButton = () => {
     navigate("/register-driver");
   };
-
+  if (loading) {
+    return <Loading loading={loading} />;
+  }
   return (
     <div className="flex flex-col items-center bg-homepage-bg bg-cover bg-no-repeat sm:bg-top md:bg-right lg:bg-left h-screen">
       <div>