#51 notification cloud function working

functions/src/callable.ts

@@ -68,3 +68,29 @@ export const requestDoctor = functions.https.onCall(async (_data, context)=>{
     return null;
   }
 });
+
+// send Notification to user
+export const sendNotification = functions.https.onCall(async (_data) => {
+  // get doctor with available slots
+  const message: UserNotification = {
+    title: _data.title,
+    message: _data.message,
+    date: admin.firestore.Timestamp.now(),
+    read: false,
+  };
+  const userId = _data.userId;
+  const userRef = db.doc(`users/${userId}`);
+  const userSnap = await userRef.get();
+
+  return userSnap.ref.update({
+    notifications: admin.firestore.FieldValue.arrayUnion(message),
+  });
+});
+
+interface UserNotification {
+  title: string;
+  message: string;
+  date: admin.firestore.Timestamp;
+  read: boolean;
+}
+

functions/src/index.ts

@@ -1,4 +1,4 @@
-export {requestDoctor, dispatchDoctor} from "./callable";
+export {requestDoctor, dispatchDoctor, sendNotification} from "./callable";
 
 
 // // Start writing Firebase Functions

src/components/dashboard/AdminDashboard/AdminDashboard.tsx

@@ -23,7 +23,7 @@ import AdminTable from './AdminTable/AdminTable';
 import theme from '../../../static/style/theme';
 import UnassignedPatientTable from './UnassignedPatientTable';
 import NotificationsMenuItem from '../../layout/NotificationsMenuItem';
-import { firestore } from '../../../config/firebase_config';
+import Firebase, { firestore } from '../../../config/firebase_config';
 
 const style = {
   position: 'absolute' as const,
@@ -68,6 +68,11 @@ function AdminDashboard() {
 
   const { state, update } = React.useContext(UserContext);
 
+  const handleNotifyTest = () => {
+    const dispatchDoctor = Firebase.functions().httpsCallable('sendNotification');
+    dispatchDoctor({ title: 'Title Test', message: 'testing', userId: state.id });
+  };
+
   useEffect(() => {
     usersRef.onSnapshot(async (snapshot) => {
       let tableData = new Array<UnassignedPatientTableData>();
@@ -109,6 +114,12 @@ function AdminDashboard() {
             <ListItemText primary="Unassigned Patients" />
           </ListItem>
           <NotificationsMenuItem />
+          <ListItem button onClick={handleNotifyTest}>
+            <ListItemIcon>
+              <DashboardOutlinedIcon />
+            </ListItemIcon>
+            <ListItemText primary="Notify Test" />
+          </ListItem>
         </List>
         <Divider />
       </SideBar>

src/components/layout/NotificationsMenuItem.tsx

@@ -2,31 +2,34 @@
 import { Dialog, DialogContent, DialogTitle, Badge, List, ListItem, ListItemIcon, ListItemText, Typography, useMediaQuery, useTheme } from '@mui/material';
 import React, { useEffect, useState } from 'react';
 import NotificationsNoneOutlinedIcon from '@mui/icons-material/NotificationsNoneOutlined';
-import { doc, onSnapshot } from 'firebase/firestore';
+import { doc, onSnapshot, Timestamp } from 'firebase/firestore';
 import { UserContext } from '../../context/UserContext';
 import { firestore } from '../../config/firebase_config';
 
 interface UserNotification {
   title: string;
   message: string;
-  date: Date;
+  date: Timestamp;
   read: boolean;
 }
 
 function NotificationsMenuItem() {
   const [open, setOpen] = React.useState(false);
+  const { state, update } = React.useContext(UserContext);
+  const [notifications, setNotifications] = useState<UserNotification[]>([]);
   const theme = useTheme();
   const fullScreen = useMediaQuery(theme.breakpoints.down('md'));
 
   const handleClickOpen = () => {
     setOpen(true);
+    const user = firestore.collection('users').doc(state.id);
+    const markedRead = notifications.map((notification) => ({ ...notification, read: true }));
+    user.update({ notifications: markedRead });
   };
 
   const handleClose = () => {
     setOpen(false);
   };
-  const { state, update } = React.useContext(UserContext);
-  const [notifications, setNotifications] = useState<UserNotification[]>([]);
 
   useEffect(() => {
     onSnapshot(doc(firestore, 'users', `${state.id}`), (docu) => {
@@ -42,7 +45,7 @@ function NotificationsMenuItem() {
     <>
       <ListItem button onClick={handleClickOpen}>
         <ListItemIcon>
-          <Badge badgeContent={notifications.length} color="primary">
+          <Badge badgeContent={notifications.filter((notification) => !notification.read).length} color="primary">
             <NotificationsNoneOutlinedIcon />
           </Badge>
         </ListItemIcon>
@@ -67,7 +70,7 @@ function NotificationsMenuItem() {
             )}
 
             {notifications?.map((notification) => (
-              <ListItem alignItems="flex-start">
+              <ListItem alignItems="flex-start" key={notification.date.toString()}>
                 <ListItemText
                   primary={notification.title}
                   secondary={notification.message}