feat: adding notifications integration (#17)

GCStatus · Sep 30, 2024 · b9b7b27 · b9b7b27
1 parent 9194eb6
commit b9b7b27
Show file tree

Hide file tree

Showing 10 changed files with 438 additions and 87 deletions.
diff --git a/DONE.md b/DONE.md
@@ -138,3 +138,12 @@
   - [x] Make a system to check user transactions with coins
   - [x] Notify user with an email
   - [x] Integrate transactions with API
+- [x] Integrate notifications
+  - [x] Get notifications from API
+  - [x] Mark notification as read
+  - [x] Mark notification as unread
+  - [x] Mark all as read
+  - [x] Mark all as unread
+  - [x] Delete notification
+  - [x] Delete all notfiications
+  - [x] Get notifications count from API
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -1,6 +1,7 @@
 import { Box } from '@mui/material'
 
 import { MOCK_HOME } from '@/mocks'
+import { useGetNotificationsQuery } from '@/services/api'
 
 import { HeaderCarousel, Navbar } from './modules'
 
@@ -10,14 +11,24 @@ interface HeaderProps {
 
 function Header(props: HeaderProps) {
   const { withCarousel } = props
+  const { notifications, isLoading } = useGetNotificationsQuery(
+    undefined,
+    {
+      selectFromResult: ({ data = [], isLoading, isFetching }) => ({
+        notifications: data,
+        isLoading: isLoading || isFetching,
+      }),
+    },
+  )
 
   const home = MOCK_HOME
 
   return (
     <Box component="header">
       <Navbar
-        notifications={home.notifications}
+        notifications={notifications}
         withCarousel={withCarousel}
+        loadingNotifications={isLoading}
       />
 
       {withCarousel ? (

diff --git a/src/components/Header/modules/Menu.tsx b/src/components/Header/modules/Menu.tsx
@@ -26,7 +26,7 @@ function Menu(props: MenuProps) {
 
   return (
     <Stack
-      className={`fixed top-0 right-0 h-full md:w-1/3 w-full dark:bg-zinc-900 bg-white shadow-lg z-50 transform transition-transform duration-300 opacity-90 p-8 ${
+      className={`fixed top-0 right-0 h-full lg:w-1/3 w-full dark:bg-zinc-900 bg-white shadow-lg z-50 transform transition-transform duration-300 opacity-90 p-8 ${
         open ? 'translate-x-0' : 'translate-x-full'
       }`}>
       <Box className="flex items-center justify-between">
@@ -44,7 +44,7 @@ function Menu(props: MenuProps) {
         {user && (
           <Typography variant="h5">Welcome, {user.name}!</Typography>
         )}
-        <Box className="hidden md:flex items-center relative w-full my-3">
+        <Box className="flex items-center relative w-full my-3">
           <input
             type="text"
             value={search}

diff --git a/src/components/Header/modules/Navbar.tsx b/src/components/Header/modules/Navbar.tsx
@@ -19,10 +19,11 @@ import { Menu, Notifications } from '.'
 interface NavbarProps {
   notifications: Notification[]
   withCarousel: boolean
+  loadingNotifications: boolean
 }
 
 function Navbar(props: NavbarProps) {
-  const { notifications, withCarousel } = props
+  const { notifications, withCarousel, loadingNotifications } = props
   const go = useNavigate()
   const { user } = useAccount()
   const { query = '' } = useParams()
@@ -120,7 +121,11 @@ function Navbar(props: NavbarProps) {
               <IconButton
                 className="relative bg-transparent group"
                 onClick={toggleNotification}>
-                <Badge badgeContent={notifications.length} color="warning">
+                <Badge
+                  badgeContent={
+                    notifications.filter(({ read_at }) => !read_at).length
+                  }
+                  color="warning">
                   <IoNotificationsOutline className="text-white group-hover:text-yellow-500 transition-colors duration-300" />
                 </Badge>
               </IconButton>
@@ -139,6 +144,7 @@ function Navbar(props: NavbarProps) {
         open={notificationsOpen}
         toggle={toggleNotification}
         notifications={notifications}
+        loading={loadingNotifications}
       />
 
       <Menu