upd: notifikasi

Deskripsi: - list notifikasi - tanda notifikasi - entiti user login NO Issues
2025-06-26 12:28:36 +08:00
parent ed08953a14
commit 76c0ba0535
9 changed files with 231 additions and 156 deletions
--- a/app/(application)/_layout.tsx
+++ b/app/(application)/_layout.tsx
@@ -3,7 +3,6 @@ import ButtonBackHeader from "@/components/buttonBackHeader";
 import HeaderDiscussionGeneral from "@/components/discussion_general/headerDiscussionGeneral";
 import HeaderRightDivisionList from "@/components/division/headerDivisionList";
 import HeaderRightGroupList from "@/components/group/headerGroupList";
-import { HeaderRightHome } from "@/components/home/headerRightHome";
 import HeaderMemberList from "@/components/member/headerMemberList";
 import HeaderRightPositionList from "@/components/position/headerRightPositionList";
 import HeaderRightProjectList from "@/components/project/headerProjectList";
@@ -81,17 +80,15 @@ export default function RootLayout() {
   return (
      <Provider store={store}>
         <Stack screenOptions={Headers.shadow} >
-            <Stack.Screen name="home" options={{
-               title: 'Home',
-               headerLeft: () => <></>,
-               headerTitle: 'Darmasaba',
-               headerRight: () => <HeaderRightHome />,
-               headerTitleAlign: 'left',
-               headerBackVisible: false,
-            }} />
+            <Stack.Screen name="home" options={{ title: 'Home' }} />
            <Stack.Screen name="feature" options={{ title: 'Fitur' }} />
            <Stack.Screen name="search" options={{ title: 'Pencarian' }} />
-            <Stack.Screen name="notification" options={{ title: 'Notifikasi' }} />
+            <Stack.Screen name="notification" options={{
+               title: 'Notifikasi',
+               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               headerTitle: 'Notifikasi',
+               headerTitleAlign: 'center'
+            }} />
            <Stack.Screen name="profile" options={{ title: 'Profile' }} />
            <Stack.Screen name="member/index" options={{
               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
--- a/app/(application)/feature.tsx
+++ b/app/(application)/feature.tsx
@@ -25,7 +25,7 @@ export default function Feature() {
               <ButtonFiturMenu icon={<MaterialIcons name="campaign" size={35} color="black" />} text="Pengumuman" onPress={() => { router.push('/announcement') }} />
               <ButtonFiturMenu icon={<Ionicons name="chatbubbles-sharp" size={35} color="black" />} text="Diskusi" onPress={() => { router.push('/discussion?active=true') }} />
            </View>
-            <View style={[Styles.rowSpaceBetween, Styles.mb15, (entityUser.role != 'supadmin' && entityUser.role != 'developer' && Styles.w70)]}>
+            <View style={[Styles.rowSpaceBetween, Styles.mb15, (entityUser.role == 'cosupadmin' ? Styles.w70 : entityUser.role == 'supadmin' || entityUser.role == 'developer' ? Styles.w100 : Styles.w40)]}>
               <ButtonFiturMenu icon={<MaterialIcons name="groups" size={35} color="black" />} text="Anggota" onPress={() => { router.push('/member') }} />
               <ButtonFiturMenu icon={<MaterialCommunityIcons name="account-tie" size={35} color="black" />} text="Jabatan" onPress={() => { router.push('/position') }} />
               {
--- a/app/(application)/home.tsx
+++ b/app/(application)/home.tsx
@@ -5,13 +5,42 @@ import DisccussionHome from "@/components/home/discussionHome";
 import DivisionHome from "@/components/home/divisionHome";
 import EventHome from "@/components/home/eventHome";
 import FiturHome from "@/components/home/fiturHome";
+import { HeaderRightHome } from "@/components/home/headerRightHome";
 import ProjectHome from "@/components/home/projectHome";
 import Styles from "@/constants/Styles";
+import { apiGetProfile } from "@/lib/api";
+import { setEntities } from "@/lib/entitiesSlice";
+import { useAuthSession } from "@/providers/AuthProvider";
+import { Stack } from "expo-router";
+import { useEffect } from "react";
 import { SafeAreaView, ScrollView, View } from "react-native";
+import { useDispatch, useSelector } from "react-redux";

 export default function Home() {
+   const entities = useSelector((state: any) => state.entities)
+   const dispatch = useDispatch()
+   const { token, decryptToken } = useAuthSession()
+
+   useEffect(() => {
+      handleUserLogin()
+   }, [dispatch]);
+
+   async function handleUserLogin() {
+      const hasil = await decryptToken(String(token?.current))
+      apiGetProfile({ id: hasil }).then((data) => dispatch(setEntities(data.data)));
+   }
+
   return (
      <SafeAreaView>
+         <Stack.Screen
+            options={{
+               title: 'Home',
+               headerLeft: () => <></>,
+               headerTitle: entities.village,
+               headerRight: () => <HeaderRightHome />,
+               headerTitleAlign: 'left',
+            }}
+         />
         <ScrollView>
            <CaraouselHome />
            <View style={[Styles.ph15]}>
--- a/app/(application)/notification.tsx
+++ b/app/(application)/notification.tsx
@@ -1,128 +1,159 @@
 import BorderBottomItem from "@/components/borderBottomItem";
-import ButtonBackHeader from "@/components/buttonBackHeader";
+import SkeletonTwoItem from "@/components/skeletonTwoItem";
 import { ColorsStatus } from "@/constants/ColorsStatus";
 import Styles from "@/constants/Styles";
+import { apiGetNotification, apiReadOneNotification } from "@/lib/api";
+import { useAuthSession } from "@/providers/AuthProvider";
 import { Feather } from "@expo/vector-icons";
-import { router, Stack } from "expo-router";
-import { SafeAreaView, ScrollView, View } from "react-native";
+import { router } from "expo-router";
+import { useEffect, useState } from "react";
+import { SafeAreaView, Text, View, VirtualizedList } from "react-native";
+
+type Props = {
+   id: string
+   title: string
+   desc: string
+   category: string
+   idContent: string
+   isRead: boolean
+   createdAt: string
+}

 export default function Notification() {
+   const { token, decryptToken } = useAuthSession()
+   const [loading, setLoading] = useState(false)
+   const [data, setData] = useState<Props[]>([])
+   const [page, setPage] = useState(1)
+   const [waiting, setWaiting] = useState(false)
+   const arrSkeleton = Array.from({ length: 5 }, (_, index) => index)
+
+   async function handleLoad(loading: boolean, thisPage: number) {
+      try {
+         setLoading(loading)
+         setPage(thisPage)
+         setWaiting(true)
+         const hasil = await decryptToken(String(token?.current))
+         const response = await apiGetNotification({ user: hasil, page: thisPage })
+         if (thisPage == 1) {
+            setData(response.data)
+         } else if (thisPage > 1 && response.data.length > 0) {
+            setData([...data, ...response.data])
+         } else {
+            return;
+         }
+      } catch (error) {
+         console.error(error)
+      } finally {
+         setLoading(false)
+         setWaiting(false)
+      }
+   }
+
+
+   const loadMoreData = () => {
+      if (waiting) return
+      setTimeout(() => {
+         handleLoad(false, page + 1)
+      }, 1000);
+   };
+
+   useEffect(() => {
+      handleLoad(true, 1)
+   }, [])
+
+
+   const getItem = (_data: unknown, index: number): Props => ({
+      id: data[index].id,
+      title: data[index].title,
+      desc: data[index].desc,
+      category: data[index].category,
+      idContent: data[index].idContent,
+      isRead: data[index].isRead,
+      createdAt: data[index].createdAt,
+   });
+
+   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)
+      }
+   }
+
+   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 (
      <SafeAreaView>
-         <Stack.Screen
-            options={{
-               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
-               headerTitle: 'Notifikasi',
-               headerTitleAlign: 'center'
-            }}
-         />
-         <ScrollView>
-            <View style={[Styles.p15]}>
-               <View style={[Styles.wrapPaper, Styles.mb100]}>
-                  <View style={[Styles.mb05]}>
-                     <BorderBottomItem
-                        borderType="bottom"
-                        icon={
-                           <View style={[Styles.iconContent, ColorsStatus.primary]}>
-                              <Feather name="bell" size={25} color="white" />
-                           </View>
-                        }
-                        title="TU dan Umum"
-                        rightTopInfo="16 Feb 2025"
-                        desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
-                     />
-                     <BorderBottomItem
-                        borderType="bottom"
-                        icon={
-                           <View style={[Styles.iconContent, ColorsStatus.primary]}>
-                              <Feather name="bell" size={25} color="white" />
-                           </View>
-                        }
-                        title="TU dan Umum"
-                        rightTopInfo="16 Feb 2025"
-                        desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
-                     />
-                     <BorderBottomItem
-                        borderType="bottom"
-                        icon={
-                           <View style={[Styles.iconContent, ColorsStatus.primary]}>
-                              <Feather name="bell" size={25} color="white" />
-                           </View>
-                        }
-                        title="TU dan Umum"
-                        rightTopInfo="16 Feb 2025"
-                        desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
-                     />
-                     <BorderBottomItem
-                        borderType="bottom"
-                        icon={
-                           <View style={[Styles.iconContent, ColorsStatus.primary]}>
-                              <Feather name="bell" size={25} color="white" />
-                           </View>
-                        }
-                        title="TU dan Umum"
-                        rightTopInfo="16 Feb 2025"
-                        desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
-                     />
-                     <BorderBottomItem
-                        borderType="bottom"
-                        icon={
-                           <View style={[Styles.iconContent, ColorsStatus.primary]}>
-                              <Feather name="bell" size={25} color="white" />
-                           </View>
-                        }
-                        title="TU dan Umum"
-                        rightTopInfo="16 Feb 2025"
-                        desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
-                     />
-                     <BorderBottomItem
-                        borderType="bottom"
-                        icon={
-                           <View style={[Styles.iconContent, ColorsStatus.primary]}>
-                              <Feather name="bell" size={25} color="white" />
-                           </View>
-                        }
-                        title="TU dan Umum"
-                        rightTopInfo="16 Feb 2025"
-                        desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
-                     />
-                     <BorderBottomItem
-                        borderType="bottom"
-                        icon={
-                           <View style={[Styles.iconContent, ColorsStatus.primary]}>
-                              <Feather name="bell" size={25} color="white" />
-                           </View>
-                        }
-                        title="TU dan Umum"
-                        rightTopInfo="16 Feb 2025"
-                        desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
-                     />
-                     <BorderBottomItem
-                        borderType="bottom"
-                        icon={
-                           <View style={[Styles.iconContent, ColorsStatus.primary]}>
-                              <Feather name="bell" size={25} color="white" />
-                           </View>
-                        }
-                        title="TU dan Umum"
-                        rightTopInfo="16 Feb 2025"
-                        desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
-                     />
-                     <BorderBottomItem
-                        borderType="bottom"
-                        icon={
-                           <View style={[Styles.iconContent, ColorsStatus.primary]}>
-                              <Feather name="bell" size={25} color="white" />
-                           </View>
-                        }
-                        title="TU dan Umum"
-                        rightTopInfo="16 Feb 2025"
-                        desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
-                     />
-                  </View>
-               </View>
+         <View style={[Styles.p15]}>
+            <View style={[Styles.wrapPaper, Styles.mb100]}>
+               {
+                  loading ?
+                     arrSkeleton.map((item, index) => {
+                        return (
+                           <SkeletonTwoItem key={index} />
+                        )
+                     })
+                     :
+                     data.length > 0 ?
+                        <VirtualizedList
+                           data={data}
+                           getItemCount={() => data.length}
+                           getItem={getItem}
+                           renderItem={({ item, index }: { item: Props, index: number }) => {
+                              return (
+                                 <BorderBottomItem
+                                    borderType="bottom"
+                                    icon={
+                                       <View style={[Styles.iconContent, item.isRead ? ColorsStatus.secondary : ColorsStatus.primary]}>
+                                          <Feather name="bell" size={25} color="white" />
+                                       </View>
+                                    }
+                                    title={item.title}
+                                    rightTopInfo={item.createdAt}
+                                    desc={item.desc}
+                                    textColor={item.isRead ? 'gray' : 'black'}
+                                    onPress={() => handleReadNotification(item.id, item.category, item.idContent)}
+                                 />
+                              )
+                           }}
+                           keyExtractor={(item, index) => String(index)}
+                           onEndReached={loadMoreData}
+                           onEndReachedThreshold={0.5}
+                           showsVerticalScrollIndicator={false}
+                        />
+                        :
+                        <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada data</Text>
+               }
            </View>
-         </ScrollView>
+         </View>
      </SafeAreaView>
   )
 }
--- a/app/(application)/profile.tsx
+++ b/app/(application)/profile.tsx
@@ -3,31 +3,17 @@ import ButtonBackHeader from "@/components/buttonBackHeader";
 import { ButtonHeader } from "@/components/buttonHeader";
 import ItemDetailMember from "@/components/itemDetailMember";
 import Styles from "@/constants/Styles";
-import { apiGetProfile } from "@/lib/api";
-import { setEntities } from "@/lib/entitiesSlice";
 import { useAuthSession } from "@/providers/AuthProvider";
 import { AntDesign } from "@expo/vector-icons";
 import { router, Stack } from "expo-router";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { Image, SafeAreaView, ScrollView, Text, View } from "react-native";
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';

 export default function Profile() {
-   const { signOut, token, decryptToken } = useAuthSession()
-   const dispatch = useDispatch()
+   const { signOut } = useAuthSession()
   const entities = useSelector((state: any) => state.entities)
   const [error, setError] = useState(false)
-   const [role, setRole] = useState('developer')
-
-   useEffect(() => {
-      handleUserLogin()
-   }, [dispatch]);
-
-   async function handleUserLogin() {
-      const hasil = await decryptToken(String(token?.current))
-      apiGetProfile({ id: hasil }).then((data) => dispatch(setEntities(data.data)));
-   }
-


   return (
--- a/components/borderBottomItem.tsx
+++ b/components/borderBottomItem.tsx
@@ -17,9 +17,10 @@ type Props = {
   bgColor?: 'white' | 'transparent'
   width?: number
   descEllipsize?: boolean
+   textColor?: string
 }

-export default function BorderBottomItem({ title, subtitle, icon, desc, onPress, rightTopInfo, borderType, leftBottomInfo, rightBottomInfo, titleWeight, bgColor, width, descEllipsize }: Props) {
+export default function BorderBottomItem({ title, subtitle, icon, desc, onPress, rightTopInfo, borderType, leftBottomInfo, rightBottomInfo, titleWeight, bgColor, width, descEllipsize, textColor }: Props) {
   const lebarDim = Dimensions.get("window").width;
   const lebar = width ? lebarDim * width / 100 : 'auto';

@@ -29,23 +30,23 @@ export default function BorderBottomItem({ title, subtitle, icon, desc, onPress,
            {icon}
            <View style={[Styles.rowSpaceBetween, width ? { width: lebar } : { width: '88%' }]}>
               <View style={[Styles.ml10, width ? { width: lebar } : { width: '70%' }]}>
-                  <Text style={[titleWeight == 'normal' ? Styles.textDefault : Styles.textDefaultSemiBold]} numberOfLines={1} ellipsizeMode='tail'>{title}</Text>
+                  <Text style={[titleWeight == 'normal' ? Styles.textDefault : Styles.textDefaultSemiBold, { color: textColor }]} numberOfLines={1} ellipsizeMode='tail'>{title}</Text>
                  {
                     subtitle &&
                        typeof subtitle == "string"
-                        ? <Text style={[Styles.textMediumNormal, { lineHeight: 15 }]}>{subtitle}</Text>
+                        ? <Text style={[Styles.textMediumNormal, { lineHeight: 15, color: textColor }]}>{subtitle}</Text>
                        : <View style={{ alignItems: 'flex-start' }}>
                           {subtitle}
                        </View>
                  }
               </View>
               {
-                  rightTopInfo && <Text style={[Styles.textInformation, Styles.mt05]}>{rightTopInfo}</Text>
+                  rightTopInfo && <Text style={[Styles.textInformation, Styles.mt05, { color: textColor}]}>{rightTopInfo}</Text>
               }
            </View>

         </View>
-         {desc && <Text style={[Styles.textDefault, Styles.mt05, { textAlign: 'justify' }]} numberOfLines={descEllipsize == false ? 0 : 2} ellipsizeMode='tail'>{desc}</Text>}
+         {desc && <Text style={[Styles.textDefault, Styles.mt05, { textAlign: 'justify', color: textColor }]} numberOfLines={descEllipsize == false ? 0 : 2} ellipsizeMode='tail'>{desc}</Text>}
         {
            (leftBottomInfo || rightBottomInfo) &&
            (
--- a/components/buttonHeader.tsx
+++ b/components/buttonHeader.tsx
@@ -1,5 +1,5 @@
 import Styles from "@/constants/Styles";
-import { Pressable, Text, View } from "react-native";
+import { Pressable, View } from "react-native";

 type PropsBtnHeader = {
   onPress: () => void;
@@ -15,7 +15,7 @@ export function ButtonHeader({ onPress, item, valueTop }: PropsBtnHeader) {
         </View>
         {
            valueTop != undefined && valueTop && (
-               <View style={{ position: 'absolute', top: 0, right: 0, backgroundColor: 'red', width: 10, height: 10, borderRadius: 100 }}> </View>
+               <View style={{ position: 'absolute', top: 0, right: 0, backgroundColor: 'red', width: 10, height: 10, borderRadius: 100 }}></View>
            )
         }
      </Pressable>
--- a/components/home/headerRightHome.tsx
+++ b/components/home/headerRightHome.tsx
@@ -1,14 +1,35 @@
-import { View } from "react-native"
-import { router } from "expo-router"
-import Feather from '@expo/vector-icons/Feather';
-import { ButtonHeader } from "../buttonHeader";
 import Styles from "@/constants/Styles";
+import { apiGetDataHome } from "@/lib/api";
+import { useAuthSession } from "@/providers/AuthProvider";
+import Feather from '@expo/vector-icons/Feather';
+import { router } from "expo-router";
+import { useEffect, useState } from "react";
+import { View } from "react-native";
+import { ButtonHeader } from "../buttonHeader";

 export function HeaderRightHome() {
+   const { decryptToken, token } = useAuthSession()
+   const [notification, setNotification] = useState(0)
+
+   async function handleData() {
+      try {
+         const hasil = await decryptToken(String(token?.current))
+         const response = await apiGetDataHome({ cat: "header", user: hasil })
+         setNotification(response.data.totalNotif)
+      } catch (error) {
+         console.error(error)
+      }
+   }
+
+   useEffect(() => {
+      handleData()
+   }, []);
+
+
   return (
      <View style={[Styles.rowSpaceBetween, { width: 140 }]}>
         <ButtonHeader item={<Feather name="search" size={20} color="white" />} onPress={() => { router.push('/search') }} />
-         <ButtonHeader item={<Feather name="bell" size={20} color="white" />} onPress={() => { router.push('/notification') }} />
+         <ButtonHeader valueTop={notification > 0 ? true : false} item={<Feather name="bell" size={20} color="white" />} onPress={() => { router.push('/notification') }} />
         <ButtonHeader item={<Feather name="user" size={20} color="white" />} onPress={() => { router.push('/profile') }} />
      </View>
   )
--- a/lib/api.ts
+++ b/lib/api.ts
@@ -643,4 +643,14 @@ export const apiRegisteredToken = async (data: { user: string, token: string })
 export const apiUnregisteredToken = async (data: { user: string, token: string }) => {
   const response = await api.put(`/mobile/auth-token/`, data)
   return response.data;
+};
+
+export const apiGetNotification = async ({ user, page }: { user: string, page?: number }) => {
+   const response = await api.get(`mobile/home/notification?user=${user}&page=${page}`);
+   return response.data;
+};
+
+export const apiReadOneNotification = async (data: { user: string, id: string }) => {
+   const response = await api.put(`/mobile/home/notification/`, data)
+   return response.data;
 };