fix: device notification on notification creation

atlp-rwanda · Jul 20, 2024 · fcb2dc5 · fcb2dc5
1 parent 43543ba
commit fcb2dc5
Show file tree

Hide file tree

Showing 5 changed files with 362 additions and 41 deletions.
diff --git a/app/(app)/ActionMenu/NotificationScreen.tsx b/app/(app)/ActionMenu/NotificationScreen.tsx
@@ -1,33 +1,48 @@
 import React from "react";
-import { FlatList } from "react-native";
+import { FlatList, View } from "react-native";
 
 import { ThemeContext } from "@/ctx/ThemeContext";
 import { useContext } from "react";
 import { useNotifications } from "@/ctx/NotificationsContext";
 import NotificationListing from "@/components/UI/NotificationListing";
+import { ScrollView } from "react-native";
+import { Colors } from "@/constants/Colors";
 
 function NotificationScreen() {
   const { theme, changeTheme } = useContext(ThemeContext);
   const { notifications } = useNotifications();
 
   return (
-    <FlatList
-      style={{ flex: 1, backgroundColor: "white" }}
-      contentContainerStyle={{
+    <View
+      style={{
         height: "100%",
-        padding: 24,
-        backgroundColor: "white",
+        backgroundColor:
+          theme === "light" ? Colors.others.white : Colors.dark._1,
       }}
-      data={notifications}
-      renderItem={({ item: notification }) => (
-        <NotificationListing
-          createdAt={new Date(notification.createdAt)}
-          description={notification.description}
-          title={notification.title}
-          type={notification.type}
-        />
-      )}
-    />
+    >
+      <FlatList
+        scrollEnabled={true}
+        contentContainerStyle={{
+          padding: 24,
+          backgroundColor:
+            theme === "light" ? Colors.others.white : Colors.dark._1,
+          gap: 15,
+        }}
+        data={notifications}
+        renderItem={({ item: notification }) => (
+          <NotificationListing
+            createdAt={new Date(notification.createdAt)}
+            description={notification.description}
+            title={notification.title}
+            type={notification.type}
+          />
+        )}
+        keyExtractor={(item) => item.id.toString()} // Ensure each item has a unique identifier
+        initialNumToRender={10}
+        maxToRenderPerBatch={10}
+        windowSize={5}
+      />
+    </View>
   );
 }
 

diff --git a/components/UI/NotificationListing.tsx b/components/UI/NotificationListing.tsx
@@ -1,5 +1,5 @@
 import { View, Text } from "react-native";
-import React from "react";
+import React, { useContext } from "react";
 import Typography from "@/constants/Typography";
 import { Colors } from "@/constants/Colors";
 import { SvgXml } from "react-native-svg";
@@ -8,6 +8,7 @@ import { calendar2 } from "@/assets/icons/calendar2";
 import { service } from "@/assets/icons/service";
 import { wallet } from "@/assets/icons/wallet";
 import { close } from "@/assets/icons/close";
+import { ThemeContext } from "@/ctx/ThemeContext";
 
 interface Props {
   title: string;
@@ -20,6 +21,7 @@ interface Props {
     | "new_service"
     | "payment_setup"
     | "account_setup";
+  viewed?: boolean;
 }
 
 export const icons = {
@@ -85,10 +87,12 @@ export default function NotificationListing({
   description,
   createdAt,
   type,
+  viewed,
 }: Props) {
+  const { theme } = useContext(ThemeContext);
   return (
     <>
-      <View style={{ gap: 4 }}>
+      <View style={{ gap: 4, padding: 0 }}>
         <View
           style={{ flexDirection: "row", alignItems: "flex-start", gap: 15 }}
         >
@@ -111,14 +115,27 @@ export default function NotificationListing({
             }}
           >
             <Text
-              style={[Typography.bold.large, { color: Colors.grayScale._900 }]}
+              style={[
+                Typography.bold.large,
+                {
+                  color:
+                    theme === "light"
+                      ? Colors.grayScale._900
+                      : Colors.others.white,
+                },
+              ]}
             >
               {title}
             </Text>
             <Text
               style={[
                 Typography.medium.small,
-                { color: Colors.grayScale._700 },
+                {
+                  color:
+                    theme === "light"
+                      ? Colors.grayScale._700
+                      : Colors.grayScale._400,
+                },
               ]}
             >
               {createdAt
@@ -138,15 +155,40 @@ export default function NotificationListing({
                   .replace(" ", "")}
             </Text>
           </View>
-          <View style={{}}></View>
-        </View>
-        <View>
-          <Text
-            style={[Typography.medium.medium, { color: Colors.grayScale._700 }]}
-          >
-            {description}
-          </Text>
+          {viewed && (
+            <View
+              style={{
+                borderRadius: 8,
+                backgroundColor: Colors.main.primary._500,
+                marginLeft: "auto",
+              }}
+            >
+              <Text
+                style={{
+                  paddingHorizontal: 4,
+                  paddingVertical: 2,
+                  color: Colors.others.white,
+                }}
+              >
+                New
+              </Text>
+            </View>
+          )}
         </View>
+        <Text
+          style={[
+            Typography.medium.medium,
+            {
+              color:
+                theme === "light"
+                  ? Colors.grayScale._700
+                  : Colors.grayScale._400,
+              paddingVertical: 1,
+            },
+          ]}
+        >
+          {description.trim()}
+        </Text>
       </View>
     </>
   );

diff --git a/ctx/NotificationsContext.tsx b/ctx/NotificationsContext.tsx
@@ -2,6 +2,15 @@ import { supabase } from "@/lib/supabase";
 import React, { createContext, useContext, useEffect, useState } from "react";
 import { useAuth } from "./AuthContext";
 import { Alert } from "react-native";
+import * as Notifications from "expo-notifications";
+
+Notifications.setNotificationHandler({
+  handleNotification: async () => ({
+    shouldShowAlert: true,
+    shouldPlaySound: true,
+    shouldSetBadge: true,
+  }),
+});
 
 export interface NotificationsType {
   notifications: NotificationType[];
@@ -62,7 +71,8 @@ export default function NotificationsProvider({ children }: Props) {
         const { data, error } = await supabase
           .from("notifications")
           .select("*")
-          .eq("patient_id", patientId);
+          .eq("patient_id", patientId)
+          .order("created_at", { ascending: false });
 
         if (error) error;
 
@@ -96,19 +106,31 @@ export default function NotificationsProvider({ children }: Props) {
             const newNotification = payload.new;
 
             if (newNotification.patient_id === patientId) {
-              setNotifications((prevNotifications) => [
-                ...prevNotifications,
-                {
-                  id: newNotification.id,
-                  createdAt: newNotification.created_at,
+              Notifications.scheduleNotificationAsync({
+                content: {
                   title: newNotification.title,
-                  description: newNotification.description,
-                  patientId: newNotification.patient_id,
-                  viewed: newNotification.viewed,
-                  doctorId: newNotification.doctor_id,
-                  type: newNotification.type,
+                  body: newNotification.description,
                 },
-              ]);
+                trigger: null,
+              });
+
+              setNotifications((prevNotifications) => {
+                const updatedNotifications = [
+                  {
+                    id: newNotification.id,
+                    createdAt: newNotification.created_at,
+                    title: newNotification.title,
+                    description: newNotification.description,
+                    patientId: newNotification.patient_id,
+                    viewed: newNotification.viewed,
+                    doctorId: newNotification.doctor_id,
+                    type: newNotification.type,
+                  },
+                  ...prevNotifications,
+                ];
+
+                return updatedNotifications;
+              });
             }
           }
         )