Notification Hospital Portal

frontend/hospital-portal/src/layouts/dashboard/header/LanguagePopover.tsx

@@ -39,6 +39,7 @@ export default function LanguagePopover() {
   const handleChangeLanguage = (language) => {
     localStorage.setItem('currentLocale', language);
     setCurrentLocale(language);
+    window.location.reload();
   };
 
   return (

frontend/hospital-portal/src/layouts/dashboard/header/NotificationsPopover.tsx

@@ -1,5 +1,5 @@
 import { noCase } from 'change-case';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 // @mui
 import {
   Box,
@@ -18,19 +18,32 @@ import {
 // utils
 import { fToNow } from '@/utils/formatTime';
 // _mock_
-import { _notifications } from '@/_mock';
+//import { _notifications } from '@/_mock';
 // components
 import Iconify from '@/components/Iconify';
 import Scrollbar from '@/components/Scrollbar';
 import MenuPopover from '@/components/MenuPopover';
 import { IconButtonAnimate } from '@/components/animate';
+import axios from '@/utils/axios';
+import { useSnackbar } from 'notistack';
 
 // ----------------------------------------------------------------------
 
 export default function NotificationsPopover() {
-  const [notifications, setNotifications] = useState(_notifications);
+  const [notifications, setNotifications] = useState([]);
+  const {enqueueSnackbar} = useSnackbar();
+  useEffect(() => {
+    axios
+      .get('notifications/1')
+      .then((response) => {
+        setNotifications(response.data.data.notifications);
+      })
+      .catch((error) => {
+        enqueueSnackbar(error.response.data.meta.message, {variant : "error"});
+      });
+  }, []); 
 
-  const totalUnRead = notifications.filter((item) => item.isUnRead === true).length;
+  const totalUnRead = notifications.filter((item) => item.isUnRead === 1).length;
 
   const [open, setOpen] = useState<HTMLElement | null>(null);
 
@@ -46,7 +59,7 @@ export default function NotificationsPopover() {
     setNotifications(
       notifications.map((notification) => ({
         ...notification,
-        isUnRead: false,
+        isUnRead: 0,
       }))
     );
   };
@@ -98,7 +111,7 @@ export default function NotificationsPopover() {
             }
           >
             {notifications.slice(0, 2).map((notification) => (
-              <NotificationItem key={notification.id} notification={notification} />
+              <NotificationItem key={notification.id} notification={notification} onClick={notification.id}/>
             ))}
           </List>
 
@@ -111,18 +124,18 @@ export default function NotificationsPopover() {
             }
           >
             {notifications.slice(2, 5).map((notification) => (
-              <NotificationItem key={notification.id} notification={notification} />
+              <NotificationItem key={notification.id} notification={notification} onClick={notification.id}/>
             ))}
           </List>
         </Scrollbar>
 
         <Divider sx={{ borderStyle: 'dashed' }} />
 
-        <Box sx={{ p: 1 }}>
+        {/* <Box sx={{ p: 1 }}>
           <Button fullWidth disableRipple>
             View All
           </Button>
-        </Box>
+        </Box> */}
       </MenuPopover>
     </>
   );
@@ -140,11 +153,30 @@ type NotificationItemProps = {
   isUnRead: boolean;
 };
 
-function NotificationItem({ notification }: { notification: NotificationItemProps }) {
+function NotificationItem({ notification, onClick }: { notification: NotificationItemProps, onClick: (id: string) => void}) {
   const { avatar, title } = renderContent(notification);
+  const {enqueueSnackbar} = useSnackbar();
+  const handleClick = () => {
+    const data = {
+      'hospital_id' : 1,
+      'id' : notification.id,
+    };
+    if(notification.isUnRead)
+    {
+      axios
+      .post('set-read-notification', data)
+      .then((response) => {
+        enqueueSnackbar(response.data.meta.message, {variant : "success"});
+      })
+      .catch((error) => {
+        enqueueSnackbar(error.response.data.meta.message, {variant : "error"});
+      });
+    }
+  };
 
   return (
     <ListItemButton
+    onClick={handleClick}
       sx={{
         py: 1.5,
         px: 2.5,
@@ -212,7 +244,7 @@ function renderContent(notification: NotificationItemProps) {
       title,
     };
   }
-  if (notification.type === 'mail') {
+  if (notification.type === 'mail' || notification.type === 'request_document') {
     return {
       avatar: (
         <img

frontend/hospital-portal/src/layouts/dashboard/header/index.tsx

@@ -93,8 +93,8 @@ export default function DashboardHeader({
 
         <Stack direction="row" alignItems="center" spacing={{ xs: 0.5, sm: 1.5 }}>
           <LanguagePopover />
-          {/*<NotificationsPopover />
-          <ContactsPopover />*/}
+          <NotificationsPopover />
+          {/* <ContactsPopover /> */}
           <AccountPopover />
         </Stack>
       </Toolbar>