Merge pull request 'Percobaan notfikasi' (#30) from notification/15-dec-25 into staging

Reviewed-on: http://wibugit.wibudev.com/wibu/hipmi-mobile/pulls/30

app/(application)/(user)/home.tsx

@@ -1,9 +1,11 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable react-hooks/exhaustive-deps */
-import { StackCustom, ViewWrapper } from "@/components";
+import { ButtonCustom, StackCustom, ViewWrapper } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { useAuth } from "@/hooks/use-auth";
+import { useNotificationStore } from "@/hooks/use-notification-store";
 import Home_BottomFeatureSection from "@/screens/Home/bottomFeatureSection";
+import HeaderBell from "@/screens/Home/HeaderBell";
 import Home_ImageSection from "@/screens/Home/imageSection";
 import TabSection from "@/screens/Home/tabSection";
 import { tabsHome } from "@/screens/Home/tabsList";
@@ -13,15 +15,19 @@ import { apiVersion } from "@/service/api-config";
 import { Ionicons } from "@expo/vector-icons";
 import { Redirect, router, Stack, useFocusEffect } from "expo-router";
 import { useCallback, useEffect, useState } from "react";
-import { RefreshControl } from "react-native";
+import { RefreshControl, Text, View } from "react-native";
 
 export default function Application() {
   const { token, user, userData } = useAuth();
   const [data, setData] = useState<any>();
   const [refreshing, setRefreshing] = useState(false);
-  console.log("[User] >>", JSON.stringify(user?.id, null, 2));
+  // console.log("[User] >>", JSON.stringify(user?.id, null, 2));
 
+  // const { notifications } = useNotificationStore();
+  // const unreadCount = notifications.filter((n) => !n.read).length;
+  // console.log("UNREAD", notifications)
   // ‼️ Untuk cek apakah: 1. user ada, 2. user punya profile, 3. accept temrs of forum nya ada atau tidak
+
   useFocusEffect(
     useCallback(() => {
       onLoadData();
@@ -82,17 +88,47 @@ export default function Application() {
               }}
             />
           ),
-          headerRight: () => (
+          headerRight: () => <HeaderBell />,
-            <Ionicons
+          // headerRight: () => {
-              disabled={true}
+          //   return (
-              name="notifications"
+          //     <View style={{ position: "relative" }}>
-              size={20}
+          //       <Ionicons
-              color={MainColor.placeholder}
+          //         name="notifications"
-              onPress={() => {
+          //         size={20}
-                router.push("/notifications");
+          //         color={MainColor.yellow}
-              }}
+          //         onPress={() => {
-            />
+          //           router.push("/notifications");
-          ),
+          //         }}
+          //       />
+          //       {unreadCount > 0 && (
+          //         <View
+          //           style={{
+          //             position: "absolute",
+          //             top: -4,
+          //             right: -4,
+          //             backgroundColor: "red",
+          //             borderRadius: 8,
+          //             minWidth: 16,
+          //             height: 16,
+          //             justifyContent: "center",
+          //             alignItems: "center",
+          //             paddingHorizontal: 2,
+          //           }}
+          //         >
+          //           <Text
+          //             style={{
+          //               color: "white",
+          //               fontSize: 10,
+          //               fontWeight: "bold",
+          //             }}
+          //           >
+          //             {unreadCount > 9 ? "9+" : unreadCount}
+          //           </Text>
+          //         </View>
+          //       )}
+          //     </View>
+          //   );
+          // },
         }}
       />
       <ViewWrapper
@@ -109,6 +145,8 @@ export default function Application() {
         }
       >
         <StackCustom>
+          <ButtonCustom onPress={() => router.push("./test-notifications")}>Test Notif</ButtonCustom>
+
           <Home_ImageSection />
 
           <Home_FeatureSection />

app/(application)/(user)/test-notifications.tsx

@@ -0,0 +1,48 @@
+import {
+  ButtonCustom,
+  NewWrapper,
+  StackCustom,
+  TextInputCustom,
+} from "@/components";
+import { apiNotificationsSend } from "@/service/api-notifications";
+import { useState } from "react";
+
+export default function TestNotification() {
+  const [data, setData] = useState("");
+  const handleSubmit = async () => {
+    console.log("[Data Dikirim]", data);
+    const response = await apiNotificationsSend({
+      data: {
+        fcmToken:
+          "cVmHm-3P4E-1vjt6AA9kSF:APA91bHTkHjGTLxrFsb6Le6bZmzboZhwMGYXU4p0FP9yEeXixLDXNKS4F5vLuZV3sRgSnjjQsPpLOgstVLHJB8VJTObctKLdN-CxAp4dnP7Jbc_mH53jWvs",
+        title: "Test dari Backend (App Router)!",
+        body: data,
+      },
+    });
+
+    console.log("[RES SEND NOTIF]", JSON.stringify(response.data, null, 2));
+  };
+
+  return (
+    <>
+      <NewWrapper>
+        <StackCustom>
+          <TextInputCustom
+            required
+            label="Nama"
+            placeholder="Masukkan nama"
+            value={data}
+            onChangeText={(text) => setData(text)}
+          />
+          <ButtonCustom
+            onPress={() => {
+              handleSubmit();
+            }}
+          >
+            Kirim
+          </ButtonCustom>
+        </StackCustom>
+      </NewWrapper>
+    </>
+  );
+}

app/_layout.tsx

@@ -1,40 +1,31 @@
+import NotificationInitializer from "@/components/_ShareComponent/NotificationInitializer";
 import { AuthProvider } from "@/context/AuthContext";
+import { useForegroundNotifications } from "@/hooks/use-foreground-notifications";
+import {
+  NotificationProvider,
+  useNotificationStore,
+} from "@/hooks/use-notification-store";
 import AppRoot from "@/screens/RootLayout/AppRoot";
+import messaging, {
+  FirebaseMessagingTypes,
+} from "@react-native-firebase/messaging";
 import { useEffect } from "react";
 import "react-native-gesture-handler";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 import Toast from "react-native-toast-message";
-import messaging from "@react-native-firebase/messaging";
 
 export default function RootLayout() {
-  useEffect(() => {
-    const testFCM = async () => {
-      if (!messaging().isSupported()) {
-        console.warn("Firebase Messaging not supported (e.g. Expo Go)");
-        return;
-      }
-
-      const authStatus = await messaging().requestPermission();
-      if (authStatus !== messaging.AuthorizationStatus.AUTHORIZED) {
-        console.warn("Permission not granted");
-        return;
-      }
-
-      const token = await messaging().getToken();
-      console.log("✅ FCM Token:", token);
-    };
-
-    testFCM();
-  }, []);
-
   return (
     <>
-      <SafeAreaProvider>
+      <NotificationProvider>
-        <AuthProvider>
+        <SafeAreaProvider>
-          <AppRoot />
+          <AuthProvider>
-        </AuthProvider>
+            <NotificationInitializer />
-      </SafeAreaProvider>
+            <AppRoot />
-      <Toast />
+          </AuthProvider>
+        </SafeAreaProvider>
+        <Toast />
+      </NotificationProvider>
     </>
   );
 }

components/_ShareComponent/NotificationInitializer.tsx

@@ -0,0 +1,49 @@
+// src/components/NotificationInitializer.tsx
+import { useEffect } from "react";
+import messaging from "@react-native-firebase/messaging";
+import { useForegroundNotifications } from "@/hooks/use-foreground-notifications";
+import {
+  useNotificationStore,
+} from "@/hooks/use-notification-store";
+import type { FirebaseMessagingTypes } from "@react-native-firebase/messaging";
+
+export default function NotificationInitializer() {
+  // 1. Ambil token FCM (opsional, hanya untuk log)
+  useEffect(() => {
+    const getFCMToken = async () => {
+      if (!messaging().isSupported()) return;
+      const authStatus = await messaging().requestPermission();
+      if (authStatus === messaging.AuthorizationStatus.AUTHORIZED) {
+        const token = await messaging().getToken();
+        console.log("✅ FCM Token:", token);
+      }
+    };
+    getFCMToken();
+  }, []);
+
+  // 2. Setup handler notifikasi
+  const { addNotification } = useNotificationStore();
+
+  const handleForegroundNotification = (
+    message: FirebaseMessagingTypes.RemoteMessage
+  ) => {
+    const title = message.notification?.title || "Notifikasi";
+    const body = message.notification?.body || "";
+    const rawData = message.data || {};
+
+    const safeData: Record<string, string> = {};
+    for (const key in rawData) {
+      safeData[key] = typeof rawData[key] === "string"
+        ? rawData[key]
+        : JSON.stringify(rawData[key]);
+    }
+
+    console.log("📥 Menambahkan ke store:", { title, body, safeData });
+    addNotification({ title, body, data: safeData });
+    console.log("✅ Notifikasi ditambahkan ke state");
+  };
+
+  useForegroundNotifications(handleForegroundNotification);
+
+  return null; // komponen ini tidak merender apa-apa
+}

hooks/use-foreground-notifications.ts

@@ -0,0 +1,23 @@
+import { useEffect } from "react";
+import messaging, {
+  FirebaseMessagingTypes,
+} from "@react-native-firebase/messaging";
+
+// Gunakan tipe resmi dari library
+type RemoteMessage = FirebaseMessagingTypes.RemoteMessage;
+
+export function useForegroundNotifications(
+  onMessageReceived: (message: RemoteMessage) => void
+) {
+  useEffect(() => {
+    const unsubscribe = messaging().onMessage((remoteMessage) => {
+      console.log(
+        "🔔 Notifikasi diterima saat app aktif:",
+        JSON.stringify(remoteMessage, null, 2)
+      );
+      onMessageReceived(remoteMessage);
+    });
+
+    return unsubscribe;
+  }, [onMessageReceived]);
+}

hooks/use-notification-store.tsx

@@ -0,0 +1,52 @@
+// hooks/useNotificationStore.ts
+import { createContext, useContext, useState, ReactNode } from 'react';
+import type { FirebaseMessagingTypes } from '@react-native-firebase/messaging';
+
+type AppNotification = {
+  id: string;
+  title: string;
+  body: string;
+  data?: Record<string, string>;
+  read: boolean;
+  timestamp: number;
+};
+
+const NotificationContext = createContext<{
+  notifications: AppNotification[];
+  addNotification: (notif: Omit<AppNotification, 'id' | 'read' | 'timestamp'>) => void;
+  markAsRead: (id: string) => void;
+}>({
+  notifications: [],
+  addNotification: () => {},
+  markAsRead: () => {},
+});
+
+export const NotificationProvider = ({ children }: { children: ReactNode }) => {
+  const [notifications, setNotifications] = useState<AppNotification[]>([]);
+
+  const addNotification = (notif: Omit<AppNotification, 'id' | 'read' | 'timestamp'>) => {
+    setNotifications(prev => [
+      {
+        ...notif,
+        id: Date.now().toString(),
+        read: false,
+        timestamp: Date.now(),
+      },
+      ...prev,
+    ]);
+  };
+
+  const markAsRead = (id: string) => {
+    setNotifications(prev =>
+      prev.map(n => (n.id === id ? { ...n, read: true } : n))
+    );
+  };
+
+  return (
+    <NotificationContext.Provider value={{ notifications, addNotification, markAsRead }}>
+      {children}
+    </NotificationContext.Provider>
+  );
+};
+
+export const useNotificationStore = () => useContext(NotificationContext);

screens/Home/HeaderBell.tsx

@@ -0,0 +1,45 @@
+// components/HeaderBell.tsx
+import { Ionicons } from "@expo/vector-icons";
+import { View, Text } from "react-native";
+import { router } from "expo-router";
+import { useNotificationStore } from "@/hooks/use-notification-store";
+import { MainColor } from "@/constants/color-palet";
+
+export default function HeaderBell() {
+  const { notifications } = useNotificationStore();
+  const unreadCount = notifications.filter((n) => !n.read).length;
+  console.log("NOTIF:", JSON.stringify(notifications, null, 2));
+
+  return (
+    <View style={{ position: "relative" }}>
+      <Ionicons
+        name="notifications"
+        size={20}
+        color={MainColor.yellow}
+        onPress={() => {
+          router.push("/notifications");
+        }}
+      />
+      {unreadCount > 0 && (
+        <View
+          style={{
+            position: "absolute",
+            top: -4,
+            right: -4,
+            backgroundColor: "red",
+            borderRadius: 8,
+            minWidth: 16,
+            height: 16,
+            justifyContent: "center",
+            alignItems: "center",
+            paddingHorizontal: 2,
+          }}
+        >
+          <Text style={{ color: "white", fontSize: 10, fontWeight: "bold" }}>
+            {unreadCount > 9 ? "9+" : unreadCount}
+          </Text>
+        </View>
+      )}
+    </View>
+  );
+}

service/api-notifications.ts

@@ -0,0 +1,23 @@
+import { apiConfig } from "./api-config";
+
+
+type NotificationProp = {
+  fcmToken: string
+  title: string,
+  body: Object
+}
+
+
+export async function apiNotificationsSend({ data }: { data: NotificationProp }) {
+  try {
+    const response = await apiConfig.post(`/mobile/notifications`, {
+      data: data,
+    });
+
+    console.log("Fecth Notif", response.data)
+
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}