fix(notification): refactors and fixes user notifications feature

Author: aimedivin

src/Mutations/notificationMutation.tsx

@@ -43,6 +43,24 @@ export const NotificationSubscription = gql`
     }
   }
 `;
+export const PUSH_NOTIFICATION_SUB = gql`
+  subscription PushNotificationSub($receiverId: String!) {
+    pushNotification(receiverId: $receiverId) {
+      sender {
+        profile {
+          firstName
+          lastName
+          avatar
+        }
+      }
+      createdAt
+      message
+      read
+      receiver
+      id
+    }
+  }
+`;
 export const deleteNotification = gql`
   mutation Mutation($deleteNotificationsId: ID!) {
     deleteNotifications(id: $deleteNotificationsId)

src/components/DashHeader.tsx

@@ -12,6 +12,7 @@ import { UserContext } from '../hook/useAuth';
 import {
   getAllNotification,
   NotificationSubscription,
+  PUSH_NOTIFICATION_SUB,
 } from '../Mutations/notificationMutation';
 import { MenuContext } from '../hook/menuProvider';
 import ToggleThemeButton from './TogglethemeIcon';
@@ -74,6 +75,14 @@ function DashHeader() {
       receiver: user?.userId,
     },
   });
+  useSubscription(PUSH_NOTIFICATION_SUB, {
+    onData: (data) => {
+      setNotificationData([data.data.data.pushNotification, ...notifications]);
+    },
+    variables: {
+      receiverId: user?.userId,
+    },
+  });
 
   /* istanbul ignore next */
   const handleShowProfileDropdown = () =>

src/components/Notification.tsx

@@ -77,7 +77,7 @@ function Notification({
       notifications?.map((notification: any) => {
         // eslint-disable-next-line no-nested-ternary
          /* istanbul ignore next */
-        if (notification.read !== true) {
+        if (!notification.read) {
           // eslint-disable-next-line no-nested-ternary
            /* istanbul ignore next */
           return { ...notification, read: true };
@@ -123,7 +123,7 @@ function Notification({
               >
                 <div
                   className={`flex flex-row justify-between align-center gap-x-[10px] ${
-                    notification.read === 'false'
+                    !notification.read
                       ? 'bg-[#E5EAFF] font-bold dark:bg-dark-tertiary'
                       : 'border-border-dark dark:border-white dark:bg-dark-tertiary opacity-30 hover:bg-[#E5EAFF] hover:opacity-100 dark:hover:bg-dark-tertiary'
                   }`}
@@ -186,14 +186,14 @@ function Notification({
                       {notification.message}
                     </p>
                     <p className="text-[12px] dark:text-white">
-                      {format(new Date(notification.createdAt), 'MMMM dd, p')}
+                      {format(new Date(Number(notification.createdAt)), 'MMMM dd, p')}
                     </p>
                   </div>
 
                   <div className="flex flex-col items-center transition-all">
                     <div
                       className={`h-[15px] w-[15px] rounded-full ${
-                        notification.read === 'false'
+                        notification.read
                           ? 'bg-[#148FB6]'
                           : 'border-border-dark dark:border-white border-[1px]'
                       }  mt-[7px] mb-[10px]`}

src/pages/AdminTraineeDashboard.tsx

@@ -403,6 +403,7 @@ function AdminTraineeDashboard() {
     },
     fetchPolicy: 'network-only',
     onError: (error) => {
+      console.log(error.message);
       toast.error(error.message);
     },
   });