Merge branch 'pratyush/notification-design' of https://github.com/cor…

…nell-dti/carriage-web

frontend/src/components/Notification/Message.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import styles from './notification.module.css';
+import moment from 'moment';
+import { useState } from 'react';
+import { notificationBadge } from '../../icons/other';
+
+type Message = {
+  key: number;
+  time: Date;
+  title: string;
+  body: string;
+  read: boolean;
+  markAsRead: (key: number) => void;
+};
+
+const truncate = (str: string) => {
+  if (str.length <= 30) {
+    return str;
+  }
+  return `${str.slice(0, 30)}...`;
+};
+
+const DisplayMessage = ({
+  key,
+  time,
+  title,
+  body,
+  read,
+  markAsRead,
+}: Message) => {
+  const [trunc, setTrunc] = useState<boolean>(body.length > 30);
+  const [viewed, setViewed] = useState<boolean>(read);
+  const onViewClick = () => {
+    setViewed(true);
+    markAsRead(key);
+    setTrunc((prev) => !prev);
+  };
+  return (
+    <div key={key} className={styles.body}>
+      {viewed ? null : (
+        <img
+          src={notificationBadge}
+          className={styles.messageBadge}
+          alt="notification badge"
+        />
+      )}
+      <div className={styles.user}>
+        <div className={styles.avatar}>
+          <span className={styles.initials}>{title.slice(0, 1)}</span>
+        </div>
+      </div>
+      <div className={styles.msg}>
+        <p className={styles.date}>{moment(time).format('MMMM Do')}</p>
+        <p>{trunc ? truncate(body) : body}</p>
+      </div>
+      <div className={styles.link} onClick={onViewClick}>
+        {trunc ? 'View More' : 'Less'}
+      </div>
+    </div>
+  );
+};
+
+export default DisplayMessage;

frontend/src/components/Notification/Notification.tsx

@@ -7,11 +7,14 @@ import styles from './notification.module.css';
 import 'reactjs-popup/dist/index.css';
 import { notificationBadge, notificationBell } from '../../icons/other';
 import { Ride } from '../../types';
+import DisplayMessage from './Message';
 
 type Message = {
+  key: number;
   time: Date;
   title: string;
   body: string;
+  read: boolean;
 };
 
 type NotificationData = {
@@ -21,47 +24,38 @@ type NotificationData = {
   sentTime: string;
 };
 
-const truncate = (str: string, num: number) => {
-  if (str.length <= num) {
-    return str;
-  }
-  return `${str.slice(0, num)}...`;
-};
-
 const Notification = () => {
   const [newMessages, setNewMessages] = useState<Message[]>([]);
   const [messages, setMessages] = useState<Message[]>([]);
   const [notify, setNotify] = useState(false);
   const popupId = useId();
+  const markAsRead = (key: number) => {
+    setMessages((prevMessages) =>
+      prevMessages.map((message) =>
+        message.key === key ? { ...message, read: true } : message
+      )
+    );
+  };
 
   useEffect(() => {
     navigator.serviceWorker.addEventListener('message', (event) => {
       const { body, ride, sentTime, title }: NotificationData = event.data;
       const newMsg = {
+        key: newMessages.length + 1,
         time: new Date(sentTime),
         title,
         body,
         day: ride.startTime,
+        read: false,
       };
       setNewMessages([newMsg, ...newMessages]);
       setNotify(true);
     });
   }, []);
 
   const mapMessages = (msgs: Message[]) =>
-    msgs.map(({ time, title, body }, i) => (
-      <div key={i} className={styles.body}>
-        <div className={styles.user}>
-          <div className={styles.avatar}>
-            <span className={styles.initials}>C</span>
-          </div>
-        </div>
-        <div className={styles.msg}>
-          <p className={styles.date}>{moment(time).format('MMMM Do')}</p>
-          <p>{body}</p>
-        </div>
-        <div className={styles.link}>View</div>
-      </div>
+    msgs.map((message) => (
+      <DisplayMessage {...message} key={message.key} markAsRead={markAsRead} />
     ));
 
   useEffect(() => {

frontend/src/components/Notification/notification.module.css

@@ -10,8 +10,18 @@
 }
 
 .badge {
-  width: 44px;
-  height: 44px;
+  position: absolute;
+  right: 6px;
+  top: 3px;
+  width: 10px;
+  height: 10px;
+}
+
+.messageBadge {
+  position: absolute;
+  left: 15px;
+  width: 10px;
+  height: 10px;
 }
 
 .body {
@@ -66,6 +76,7 @@
 }
 
 .link {
+  cursor: pointer;
   font-size: 10px;
   color: #0084f4;
 }