Notifikasi terhubung ke DB
Add: - components/Notification/ - hooks/use-notification-store.tsx.back Fix: - app.config.js - app/(application)/(user)/_layout.tsx - app/(application)/(user)/home.tsx - app/(application)/(user)/test-notifications.tsx - app/(application)/_layout.tsx - app/_layout.tsx - components/_Icon/IconComponent.tsx - components/_Icon/IconPlus.tsx - components/_ShareComponent/NotificationInitializer.tsx - context/AuthContext.tsx - hooks/use-notification-store.tsx - ios/HIPMIBadungConnect/Info.plist - screens/Home/HeaderBell.tsx - service/api-device-token.ts - service/api-notifications.ts ### No Issue
This commit is contained in:
@@ -1,52 +1,131 @@
|
||||
// hooks/useNotificationStore.ts
|
||||
import { createContext, useContext, useState, ReactNode } from 'react';
|
||||
import type { FirebaseMessagingTypes } from '@react-native-firebase/messaging';
|
||||
import {
|
||||
createContext,
|
||||
ReactNode,
|
||||
useContext,
|
||||
useEffect,
|
||||
useState,
|
||||
} from "react";
|
||||
import { useAuth } from "./use-auth";
|
||||
import {
|
||||
apiGetNotificationsById,
|
||||
apiNotificationUnreadCount,
|
||||
} from "@/service/api-notifications";
|
||||
|
||||
type AppNotification = {
|
||||
id: string;
|
||||
title: string;
|
||||
body: string;
|
||||
data?: Record<string, string>;
|
||||
read: boolean;
|
||||
isRead: boolean;
|
||||
timestamp: number;
|
||||
type: "notification" | "trigger";
|
||||
// untuk id dari setiap kategori app
|
||||
appId?: string;
|
||||
kategoriApp?:
|
||||
| "JOB"
|
||||
| "VOTING"
|
||||
| "EVENT"
|
||||
| "DONASI"
|
||||
| "INVESTASI"
|
||||
| "COLLABORATION"
|
||||
| "FORUM"
|
||||
| "ACCESS"; // Untuk trigger akses user;
|
||||
};
|
||||
|
||||
const NotificationContext = createContext<{
|
||||
type NotificationContextType = {
|
||||
notifications: AppNotification[];
|
||||
addNotification: (notif: Omit<AppNotification, 'id' | 'read' | 'timestamp'>) => void;
|
||||
unreadCount: number;
|
||||
addNotification: (
|
||||
notif: Omit<AppNotification, "id" | "isRead" | "timestamp">
|
||||
) => void;
|
||||
markAsRead: (id: string) => void;
|
||||
}>({
|
||||
syncUnreadCount: () => Promise<void>;
|
||||
};
|
||||
|
||||
const NotificationContext = createContext<NotificationContextType>({
|
||||
notifications: [],
|
||||
unreadCount: 0,
|
||||
addNotification: () => {},
|
||||
markAsRead: () => {},
|
||||
syncUnreadCount: async () => {},
|
||||
});
|
||||
|
||||
export const NotificationProvider = ({ children }: { children: ReactNode }) => {
|
||||
const { user } = useAuth();
|
||||
const [notifications, setNotifications] = useState<AppNotification[]>([]);
|
||||
const [unreadCount, setUnreadCount] = useState(0);
|
||||
|
||||
const addNotification = (notif: Omit<AppNotification, 'id' | 'read' | 'timestamp'>) => {
|
||||
setNotifications(prev => [
|
||||
console.log(
|
||||
"🚀 Notifications Masuk:",
|
||||
JSON.stringify(notifications, null, 2)
|
||||
);
|
||||
|
||||
// Sync unread count dari backend saat provider di-mount
|
||||
useEffect(() => {
|
||||
fetchUnreadCount();
|
||||
}, [user?.id]);
|
||||
|
||||
const fetchUnreadCount = async () => {
|
||||
try {
|
||||
const count = await apiNotificationUnreadCount({
|
||||
id: user?.id as any,
|
||||
}); // ← harus return number
|
||||
const result = count.data;
|
||||
console.log("📖 Unread count:", result);
|
||||
setUnreadCount(result);
|
||||
} catch (error) {
|
||||
console.error("Gagal fetch unread count:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const addNotification = (
|
||||
notif: Omit<AppNotification, "id" | "isRead" | "timestamp">
|
||||
) => {
|
||||
setNotifications((prev) => [
|
||||
{
|
||||
...notif,
|
||||
id: Date.now().toString(),
|
||||
read: false,
|
||||
isRead: false,
|
||||
timestamp: Date.now(),
|
||||
},
|
||||
...prev,
|
||||
]);
|
||||
|
||||
setUnreadCount((prev) => prev + 1);
|
||||
};
|
||||
|
||||
const markAsRead = (id: string) => {
|
||||
setNotifications(prev =>
|
||||
prev.map(n => (n.id === id ? { ...n, read: true } : n))
|
||||
setNotifications((prev) =>
|
||||
prev.map((n) => (n.id === id ? { ...n, isRead: true } : n))
|
||||
);
|
||||
};
|
||||
|
||||
const syncUnreadCount = async () => {
|
||||
try {
|
||||
const count = await apiNotificationUnreadCount({
|
||||
id: user?.id as any,
|
||||
}); // ← harus return number
|
||||
const result = count.data;
|
||||
setUnreadCount(result);
|
||||
} catch (error) {
|
||||
console.warn("⚠️ Gagal sync unread count:", error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<NotificationContext.Provider value={{ notifications, addNotification, markAsRead }}>
|
||||
<NotificationContext.Provider
|
||||
value={{
|
||||
notifications,
|
||||
addNotification,
|
||||
markAsRead,
|
||||
unreadCount,
|
||||
syncUnreadCount,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</NotificationContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export const useNotificationStore = () => useContext(NotificationContext);
|
||||
export const useNotificationStore = () => useContext(NotificationContext);
|
||||
|
||||
113
hooks/use-notification-store.tsx.back
Normal file
113
hooks/use-notification-store.tsx.back
Normal file
@@ -0,0 +1,113 @@
|
||||
// hooks/useNotificationStore.ts
|
||||
import { apiGetNotificationsById } from "@/service/api-notifications";
|
||||
import { createContext, ReactNode, useContext, useState, useEffect } from "react";
|
||||
import { useAuth } from "./use-auth";
|
||||
|
||||
type AppNotification = {
|
||||
id: string;
|
||||
title: string;
|
||||
body: string;
|
||||
data?: Record<string, string>;
|
||||
isRead: boolean;
|
||||
timestamp: number;
|
||||
type: "notification" | "trigger";
|
||||
appId?: string;
|
||||
kategoriApp?:
|
||||
| "JOB"
|
||||
| "VOTING"
|
||||
| "EVENT"
|
||||
| "DONASI"
|
||||
| "INVESTASI"
|
||||
| "COLLABORATION"
|
||||
| "FORUM"
|
||||
| "ACCESS";
|
||||
};
|
||||
|
||||
type NotificationContextType = {
|
||||
notifications: AppNotification[];
|
||||
unreadCount: number;
|
||||
addNotification: (
|
||||
notif: Omit<AppNotification, "id" | "isRead" | "timestamp">
|
||||
) => void;
|
||||
markAsRead: (id: string) => void;
|
||||
syncUnreadCount: () => Promise<void>;
|
||||
};
|
||||
|
||||
const NotificationContext = createContext<NotificationContextType>({
|
||||
notifications: [],
|
||||
unreadCount: 0,
|
||||
addNotification: () => {},
|
||||
markAsRead: () => {},
|
||||
syncUnreadCount: async () => {},
|
||||
});
|
||||
|
||||
export const NotificationProvider = ({ children }: { children: ReactNode }) => {
|
||||
const {user} = useAuth()
|
||||
const [notifications, setNotifications] = useState<AppNotification[]>([]);
|
||||
const [unreadCount, setUnreadCount] = useState(0);
|
||||
|
||||
// 🔔 Sync unread count dari backend saat provider di-mount
|
||||
useEffect(() => {
|
||||
const fetchUnreadCount = async () => {
|
||||
try {
|
||||
const count = await apiGetNotificationsById({
|
||||
id: user?.id as any,
|
||||
category: "count-as-unread"
|
||||
}); // ← harus return number
|
||||
const result = count.data
|
||||
setUnreadCount(result);
|
||||
} catch (error) {
|
||||
console.erro("⚠️ Gagal fetch unread count:", error);
|
||||
}
|
||||
};
|
||||
|
||||
fetchUnreadCount();
|
||||
}, []);
|
||||
|
||||
const addNotification = (
|
||||
notif: Omit<AppNotification, "id" | "isRead" | "timestamp">
|
||||
) => {
|
||||
setNotifications((prev) => [
|
||||
{
|
||||
...notif,
|
||||
id: Date.now().toString(),
|
||||
isRead: false,
|
||||
timestamp: Date.now(),
|
||||
},
|
||||
...prev,
|
||||
]);
|
||||
// Tambahkan ke unread count (untuk notifikasi foreground)
|
||||
setUnreadCount((prev) => prev + 1);
|
||||
};
|
||||
|
||||
const markAsRead = (id: string) => {
|
||||
setNotifications((prev) =>
|
||||
prev.map((n) => (n.id === id ? { ...n, isRead: true } : n))
|
||||
);
|
||||
// Kurangi unread count
|
||||
setUnreadCount((prev) => Math.max(0, prev - 1));
|
||||
};
|
||||
|
||||
const syncUnreadCount = async () => {
|
||||
try {
|
||||
const count = await apiGetNotificationsById({
|
||||
id: user?.id as any,
|
||||
category: "count-as-unread"
|
||||
}); // ← harus return number
|
||||
const result = count.data
|
||||
setUnreadCount(result);
|
||||
} catch (error) {
|
||||
console.warn("⚠️ Gagal sync unread count:", error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<NotificationContext.Provider
|
||||
value={{ notifications, unreadCount, addNotification, markAsRead, syncUnreadCount }}
|
||||
>
|
||||
{children}
|
||||
</NotificationContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export const useNotificationStore = () => useContext(NotificationContext);
|
||||
Reference in New Issue
Block a user