Story 33 - Chat between Medical Staff/Patient

.github/workflows/cypress.yml

@@ -104,4 +104,4 @@ jobs:
 #    - uses: actions/upload-artifact@master
 #      with:
 #        name: videos
-#        path: cypress/videos
+#        path: cypress/videos

firestore.rules

@@ -7,6 +7,11 @@ service cloud.firestore {
       allow read, write: if false;
     }
 
+    match /messages/{docID} {
+      allow read: if request.auth.uid != null;
+      allow create: if canCreateMessage();
+    }
+
     match /users/{userId} {
       allow read: if isLoggedIn() 
           && (belongsTo(userId) || hasRole('admin') || hasRole('medical'));
@@ -29,6 +34,13 @@ service cloud.firestore {
       allow update: if isLoggedIn() && (request.auth.uid == resource.data.uid || hasRole('admin') || hasRole('medical'));
     }
 
+    function canCreateMessage() {
+      let isSignedIn = request.auth.uid != null;
+      let isOwner = request.auth.uid == request.resource.data.uid;
+
+      return isSignedIn && isOwner;
+    }
+
     function getUserById(userid) {
       return get(/databases/$(database)/documents/users/$(userid));
     }

functions/package.json

@@ -28,3 +28,4 @@
   },
   "private": true
 }
+

functions/src/callable.ts

@@ -79,6 +79,7 @@ export const sendNotification = functions.https.onCall(async (_data) => {
     message: _data.message,
     date: admin.firestore.Timestamp.now(),
     read: false,
+    conversationID: null,
   };
   const userId = _data.userId;
   const userRef = db.doc(`users/${userId}`);
@@ -96,3 +97,60 @@ interface UserNotification {
   read: boolean;
 }
 
+
+// send notification if user is marked as unread in conversation
+export const sendNotificationForConversation = functions.https.onCall(async (_data) => {
+  // get doctor with available slots
+  const message: UserNotification = {
+    conversationID: _data.conversationID,
+    title: _data.title,
+    message: _data.message,
+    date: admin.firestore.Timestamp.now(),
+    read: false,
+  };
+  const recipientID = _data.recipientID;
+  const conversationID = _data.conversationID;
+
+  // allow 2 seconds for user to mark as read
+  await delay(2000);
+
+  // check to see if user is unread in conversation
+  const conversationRef = db.doc(`chats/${conversationID}`);
+  const conversationDoc = await conversationRef.get();
+  const conversation = conversationDoc.data();
+  if (conversation && conversation.unreadUserIds && conversation.unreadUserIds.includes(recipientID)) {
+    // filter out notifications that already exist for conversation
+    const userRef = db.doc(`users/${recipientID}`);
+    const recipientDoc = await userRef.get();
+    const recipient = recipientDoc.data();
+    let notifications: UserNotification[] = [];
+    if (recipient && recipient.notifications) {
+      // remove notifications for same conversationID
+      notifications = recipient.notifications.filter((n: UserNotification) => n.conversationID !== conversationID);
+    }
+
+    // send notification
+    return userRef.update({
+      notifications: [...notifications, message],
+    });
+  }
+  // or do nothing if not unread
+  return null;
+});
+
+interface UserNotification {
+  title: string;
+  message: string;
+  date: admin.firestore.Timestamp;
+  read: boolean;
+  conversationID: string | null;
+}
+
+// time is in milliseconds
+const delay = (time:number) => {
+  return new Promise((res) => {
+    setTimeout(() => {
+      res("VALUE TO RESOLVE");
+    }, time);
+  });
+};

functions/src/index.ts

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

package.json

@@ -95,4 +95,4 @@
     "prettier": "^2.5.1",
     "prettier-eslint": "^13.0.0"
   }
-}
+}

src/components/chat/chatroom.css

@@ -0,0 +1,64 @@
+.received{
+    display: flex;
+    align-items: center;
+}
+.message p{
+    margin-right: 5px;
+    margin-left: 5px;
+    padding-left: 10px;
+    padding-right: 10px;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    background: #e5e5e5;
+    border-radius: 17px;
+}
+.sent p{
+    background: #434ce6;
+    color:white;
+
+}
+p{
+    margin:0px;
+    margin-bottom: 3px;
+    margin-right:5px;
+}
+.no-avatar-spacing{
+    margin-bottom: 5px;
+}
+.sent{
+    display: flex;
+    align-items: center;
+    flex-direction: row-reverse;
+}
+.message-input{
+    padding: 20px;
+    width: 100%;
+    border-radius: 20px;
+    border-top-right-radius: 0px;
+    border-top-left-radius: 0;
+    border: 1px solid transparent;
+    background: #ffffff;
+    border-top: 1px solid #e7e7e7;
+    outline: none;
+}
+.messages-container{
+    border-bottom-right-radius: 0px;
+    border-bottom-left-radius: 0;
+    padding-left: 5px;
+    margin-right: -20px;
+    padding-right: 25px;
+    padding-top: 5px;
+}
+
+.send-message-button{
+    position:absolute;
+    background: none;
+    right:3px;
+    top:15px;
+    color: #434ce6;
+    border:none;
+}
+
+.scroll-to{
+    height:5px
+}