upd: notifikasi

Deskripsi:
- list notifikasi
- tanda notifikasi
- entiti user login

NO Issues

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={{
+            <Stack.Screen name="home" options={{ title: 'Home' }} />
-               title: 'Home',
-               headerLeft: () => <></>,
-               headerTitle: 'Darmasaba',
-               headerRight: () => <HeaderRightHome />,
-               headerTitleAlign: 'left',
-               headerBackVisible: false,
-            }} />
             <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() }} />,

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') }} />
                {

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]}>

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 { router } from "expo-router";
-import { SafeAreaView, ScrollView, View } from "react-native";
+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]}>
+               {
+                  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, ColorsStatus.primary]}>
+                                       <View style={[Styles.iconContent, item.isRead ? ColorsStatus.secondary : ColorsStatus.primary]}>
                                           <Feather name="bell" size={25} color="white" />
                                        </View>
                                     }
-                        title="TU dan Umum"
+                                    title={item.title}
-                        rightTopInfo="16 Feb 2025"
+                                    rightTopInfo={item.createdAt}
-                        desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
+                                    desc={item.desc}
+                                    textColor={item.isRead ? 'gray' : 'black'}
+                                    onPress={() => handleReadNotification(item.id, item.category, item.idContent)}
                                  />
-                     <BorderBottomItem
+                              )
-                        borderType="bottom"
+                           }}
-                        icon={
+                           keyExtractor={(item, index) => String(index)}
-                           <View style={[Styles.iconContent, ColorsStatus.primary]}>
+                           onEndReached={loadMoreData}
-                              <Feather name="bell" size={25} color="white" />
+                           onEndReachedThreshold={0.5}
-                           </View>
+                           showsVerticalScrollIndicator={false}
+                        />
+                        :
+                        <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada data</Text>
                }
-                        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>
-         </ScrollView>
       </SafeAreaView>
    )
 }

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 { signOut } = useAuthSession()
-   const dispatch = useDispatch()
    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 (

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) &&
             (

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;

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>
    )

lib/api.ts

@@ -644,3 +644,13 @@ 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;
+};