upd: notifikasi
Deskripsi: - update notifikasi push routing ketika di klik No Issues
This commit is contained in:
@@ -7,10 +7,12 @@ import HeaderMemberList from "@/components/member/headerMemberList";
|
||||
import HeaderRightPositionList from "@/components/position/headerRightPositionList";
|
||||
import HeaderRightProjectList from "@/components/project/headerProjectList";
|
||||
import { Headers } from "@/constants/Headers";
|
||||
import { apiReadOneNotification } from "@/lib/api";
|
||||
import { pushToPage } from "@/lib/pushToPage";
|
||||
import store from "@/lib/store";
|
||||
import { useAuthSession } from "@/providers/AuthProvider";
|
||||
import messaging from "@react-native-firebase/messaging";
|
||||
import { Redirect, router, Stack, usePathname } from "expo-router";
|
||||
import { Redirect, router, Stack } from "expo-router";
|
||||
import { StatusBar } from 'expo-status-bar';
|
||||
import { useEffect } from "react";
|
||||
import { Text } from "react-native";
|
||||
@@ -18,56 +20,37 @@ import { Easing, Notifier } from 'react-native-notifier';
|
||||
import { Provider } from "react-redux";
|
||||
|
||||
export default function RootLayout() {
|
||||
const pathname = usePathname();
|
||||
const { token, decryptToken, isLoading } = useAuthSession()
|
||||
|
||||
const handleNotificationPress = (category: any, content: any) => {
|
||||
switch (category) {
|
||||
case 'announcement':
|
||||
router.push(`/announcement/${content}`);
|
||||
break;
|
||||
case 'discussion':
|
||||
router.push(`/discussion/${content}`);
|
||||
break;
|
||||
case 'division':
|
||||
router.push(`/division/${content}`);
|
||||
break;
|
||||
case 'member':
|
||||
router.push(`/member/${content}`);
|
||||
break;
|
||||
case 'project':
|
||||
router.push(`/project/${content}`);
|
||||
break;
|
||||
case 'announcement':
|
||||
router.push(`/announcement/${content}`);
|
||||
break;
|
||||
// Add other cases as needed
|
||||
default:
|
||||
// Handle unknown category
|
||||
console.warn(`Unknown category: ${category}`);
|
||||
async function handleReadNotification(id: string, category: string, idContent: string) {
|
||||
try {
|
||||
const hasil = await decryptToken(String(token?.current))
|
||||
const response = await apiReadOneNotification({ user: hasil, id: id })
|
||||
pushToPage(category, idContent)
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const unsubscribe = messaging().onMessage(async remoteMessage => {
|
||||
const id = remoteMessage?.data?.id;
|
||||
const category = remoteMessage?.data?.category;
|
||||
const content = remoteMessage?.data?.content;
|
||||
if (category != pathname.substring(1)) {
|
||||
Notifier.showNotification({
|
||||
title: remoteMessage.notification?.title,
|
||||
description: remoteMessage.notification?.body,
|
||||
duration: 3000,
|
||||
animationDuration: 300,
|
||||
showEasing: Easing.ease,
|
||||
onPress: () => handleNotificationPress(category, content),
|
||||
hideOnPress: true,
|
||||
});
|
||||
}
|
||||
Notifier.showNotification({
|
||||
title: remoteMessage.notification?.title,
|
||||
description: remoteMessage.notification?.body,
|
||||
duration: 3000,
|
||||
animationDuration: 300,
|
||||
showEasing: Easing.ease,
|
||||
onPress: () => handleReadNotification(String(id), String(category), String(content)),
|
||||
hideOnPress: true,
|
||||
});
|
||||
});
|
||||
|
||||
return unsubscribe;
|
||||
}, []);
|
||||
|
||||
const { token, isLoading } = useAuthSession()
|
||||
|
||||
if (isLoading) {
|
||||
return <Text>Loading...</Text>;
|
||||
|
||||
@@ -3,11 +3,13 @@ import SkeletonTwoItem from "@/components/skeletonTwoItem";
|
||||
import { ColorsStatus } from "@/constants/ColorsStatus";
|
||||
import Styles from "@/constants/Styles";
|
||||
import { apiGetNotification, apiReadOneNotification } from "@/lib/api";
|
||||
import { setUpdateNotification } from "@/lib/notificationSlice";
|
||||
import { pushToPage } from "@/lib/pushToPage";
|
||||
import { useAuthSession } from "@/providers/AuthProvider";
|
||||
import { Feather } from "@expo/vector-icons";
|
||||
import { router } from "expo-router";
|
||||
import { useEffect, useState } from "react";
|
||||
import { SafeAreaView, Text, View, VirtualizedList } from "react-native";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
|
||||
type Props = {
|
||||
id: string
|
||||
@@ -26,6 +28,8 @@ export default function Notification() {
|
||||
const [page, setPage] = useState(1)
|
||||
const [waiting, setWaiting] = useState(false)
|
||||
const arrSkeleton = Array.from({ length: 5 }, (_, index) => index)
|
||||
const dispatch = useDispatch()
|
||||
const updateNotification = useSelector((state: any) => state.notificationUpdate)
|
||||
|
||||
async function handleLoad(loading: boolean, thisPage: number) {
|
||||
try {
|
||||
@@ -77,37 +81,38 @@ export default function Notification() {
|
||||
const hasil = await decryptToken(String(token?.current))
|
||||
const response = await apiReadOneNotification({ user: hasil, id: id })
|
||||
pushToPage(category, idContent)
|
||||
dispatch(setUpdateNotification(!updateNotification))
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
}
|
||||
}
|
||||
|
||||
function pushToPage(category: string, idContent: string) {
|
||||
const cat = category.split('/')
|
||||
if (cat.length > 1) {
|
||||
if (cat[2] == 'calendar') {
|
||||
router.push(`/division/${cat[1]}/calendar/${idContent}`)
|
||||
} else if (cat[2] == 'discussion') {
|
||||
router.push(`/division/${cat[1]}/discussion/${idContent}`)
|
||||
} else if (cat[2] == 'document') {
|
||||
router.push(`/division/${cat[1]}/document/${idContent}`)
|
||||
} else if (cat[2] == 'task') {
|
||||
router.push(`/division/${cat[1]}/task/${idContent}`)
|
||||
}
|
||||
} else {
|
||||
if (cat[0] == 'announcement') {
|
||||
router.push(`/announcement/${idContent}`)
|
||||
} else if (cat[0] == 'discussion-general') {
|
||||
router.push(`/discussion/${idContent}`)
|
||||
} else if (cat[0] == 'division') {
|
||||
router.push(`/division/${idContent}`)
|
||||
} else if (cat[0] == 'member') {
|
||||
router.push(`/member/${idContent}`)
|
||||
} else if (cat[0] == 'project') {
|
||||
router.push(`/project/${idContent}`)
|
||||
}
|
||||
}
|
||||
}
|
||||
// function pushToPage(category: string, idContent: string) {
|
||||
// const cat = category.split('/')
|
||||
// if (cat.length > 1) {
|
||||
// if (cat[2] == 'calendar') {
|
||||
// router.push(`/division/${cat[1]}/calendar/${idContent}`)
|
||||
// } else if (cat[2] == 'discussion') {
|
||||
// router.push(`/division/${cat[1]}/discussion/${idContent}`)
|
||||
// } else if (cat[2] == 'document') {
|
||||
// router.push(`/division/${cat[1]}/document/${idContent}`)
|
||||
// } else if (cat[2] == 'task') {
|
||||
// router.push(`/division/${cat[1]}/task/${idContent}`)
|
||||
// }
|
||||
// } else {
|
||||
// if (cat[0] == 'announcement') {
|
||||
// router.push(`/announcement/${idContent}`)
|
||||
// } else if (cat[0] == 'discussion-general') {
|
||||
// router.push(`/discussion/${idContent}`)
|
||||
// } else if (cat[0] == 'division') {
|
||||
// router.push(`/division/${idContent}`)
|
||||
// } else if (cat[0] == 'member') {
|
||||
// router.push(`/member/${idContent}`)
|
||||
// } else if (cat[0] == 'project') {
|
||||
// router.push(`/project/${idContent}`)
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
return (
|
||||
@@ -140,7 +145,10 @@ export default function Notification() {
|
||||
rightTopInfo={item.createdAt}
|
||||
desc={item.desc}
|
||||
textColor={item.isRead ? 'gray' : 'black'}
|
||||
onPress={() => handleReadNotification(item.id, item.category, item.idContent)}
|
||||
onPress={() => {
|
||||
handleReadNotification(item.id, item.category, item.idContent)
|
||||
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
|
||||
@@ -5,11 +5,13 @@ import Feather from '@expo/vector-icons/Feather';
|
||||
import { router } from "expo-router";
|
||||
import { useEffect, useState } from "react";
|
||||
import { View } from "react-native";
|
||||
import { useSelector } from "react-redux";
|
||||
import { ButtonHeader } from "../buttonHeader";
|
||||
|
||||
export function HeaderRightHome() {
|
||||
const { decryptToken, token } = useAuthSession()
|
||||
const [notification, setNotification] = useState(0)
|
||||
const updateNotification = useSelector((state: any) => state.notificationUpdate)
|
||||
|
||||
async function handleData() {
|
||||
try {
|
||||
@@ -23,7 +25,7 @@ export function HeaderRightHome() {
|
||||
|
||||
useEffect(() => {
|
||||
handleData()
|
||||
}, []);
|
||||
}, [updateNotification]);
|
||||
|
||||
|
||||
return (
|
||||
|
||||
14
lib/notificationSlice.ts
Normal file
14
lib/notificationSlice.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
import { createSlice } from '@reduxjs/toolkit';
|
||||
|
||||
const notificationUpdate = createSlice({
|
||||
name: 'notificationUpdate',
|
||||
initialState: false,
|
||||
reducers: {
|
||||
setUpdateNotification: (state, action) => {
|
||||
return action.payload;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const { setUpdateNotification } = notificationUpdate.actions;
|
||||
export default notificationUpdate.reducer;
|
||||
28
lib/pushToPage.ts
Normal file
28
lib/pushToPage.ts
Normal file
@@ -0,0 +1,28 @@
|
||||
import { router } from "expo-router"
|
||||
|
||||
export function pushToPage(category: string, idContent: string) {
|
||||
const cat = category.split('/')
|
||||
if (cat.length > 1) {
|
||||
if (cat[2] == 'calendar') {
|
||||
return router.push(`/division/${cat[1]}/calendar/${idContent}`)
|
||||
} else if (cat[2] == 'discussion') {
|
||||
return router.push(`/division/${cat[1]}/discussion/${idContent}`)
|
||||
} else if (cat[2] == 'document') {
|
||||
return router.push(`/division/${cat[1]}/document/${idContent}`)
|
||||
} else if (cat[2] == 'task') {
|
||||
return router.push(`/division/${cat[1]}/task/${idContent}`)
|
||||
}
|
||||
} else {
|
||||
if (cat[0] == 'announcement') {
|
||||
return router.push(`/announcement/${idContent}`)
|
||||
} else if (cat[0] == 'discussion-general') {
|
||||
return router.push(`/discussion/${idContent}`)
|
||||
} else if (cat[0] == 'division') {
|
||||
return router.push(`/division/${idContent}`)
|
||||
} else if (cat[0] == 'member') {
|
||||
return router.push(`/member/${idContent}`)
|
||||
} else if (cat[0] == 'project') {
|
||||
return router.push(`/project/${idContent}`)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -12,6 +12,7 @@ import filterSlice from './filterSlice';
|
||||
import groupUpdate from './groupSlice';
|
||||
import memberChoose from './memberChoose';
|
||||
import memberUpdate from './memberSlice';
|
||||
import notificationUpdate from './notificationSlice';
|
||||
import positionUpdate from './positionSlice';
|
||||
import projectUpdate from './projectUpdate';
|
||||
import taskCreate from './taskCreate';
|
||||
@@ -38,6 +39,7 @@ const store = configureStore({
|
||||
taskUpdate: taskUpdate,
|
||||
divisionCreate: divisionCreate,
|
||||
dokumenUpdate: dokumenUpdate,
|
||||
notificationUpdate: notificationUpdate,
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user