upd: pull to refresh

Deskripsi:
- list banner
- lit grouop
- list position
- list member
- list diskusi umum
- list pengumuman
- list project
- list divisi
- list tugas divisi
- list diskusi divisi
- list kalender divisi
- list dokumen divisi

No Issues

app/(application)/announcement/index.tsx

@@ -8,7 +8,7 @@ import { useAuthSession } from "@/providers/AuthProvider";
 import { MaterialIcons } from "@expo/vector-icons";
 import { router } from "expo-router";
 import { useEffect, useState } from "react";
-import { Text, View, VirtualizedList } from "react-native";
+import { RefreshControl, Text, View, VirtualizedList } from "react-native";
 import { useSelector } from "react-redux";
 
 type Props = {
@@ -28,6 +28,7 @@ export default function Announcement() {
    const arrSkeleton = Array.from({ length: 5 }, (_, index) => index)
    const [page, setPage] = useState(1)
    const [waiting, setWaiting] = useState(false)
+   const [refreshing, setRefreshing] = useState(false)
 
    async function handleLoad(loading: boolean, thisPage: number) {
       try {
@@ -66,6 +67,13 @@ export default function Announcement() {
       }, 1000);
    };
 
+   const handleRefresh = async () => {
+      setRefreshing(true)
+      handleLoad(false, 1)
+      await new Promise(resolve => setTimeout(resolve, 2000));
+      setRefreshing(false)
+   };
+
    const getItem = (_data: unknown, index: number): Props => ({
       id: data[index].id,
       title: data[index].title,
@@ -114,6 +122,12 @@ export default function Announcement() {
                         onEndReached={loadMoreData}
                         onEndReachedThreshold={0.5}
                         showsVerticalScrollIndicator={false}
+                        refreshControl={
+                           <RefreshControl
+                              refreshing={refreshing}
+                              onRefresh={handleRefresh}
+                           />
+                        }
                      />
                      :
                      <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada pengumuman</Text>

app/(application)/banner/index.tsx

@@ -11,15 +11,16 @@ import { useAuthSession } from "@/providers/AuthProvider"
 import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons"
 import { router, Stack } from "expo-router"
 import { useState } from "react"
-import { Image, SafeAreaView, ScrollView, ToastAndroid, View } from "react-native"
+import { Image, RefreshControl, SafeAreaView, ScrollView, ToastAndroid, View } from "react-native"
 import { useDispatch, useSelector } from "react-redux"
 
 export default function BannerList() {
-   const { decryptToken, token } = useAuthSession();
+   const { decryptToken, token } = useAuthSession()
    const [isModal, setModal] = useState(false)
    const entities = useSelector((state: any) => state.banner)
    const [dataId, setDataId] = useState('')
-   const dispatch = useDispatch();
+   const dispatch = useDispatch()
+   const [refreshing, setRefreshing] = useState(false)
 
    const handleDeleteEntity = async () => {
       try {
@@ -39,7 +40,16 @@ export default function BannerList() {
       } finally {
          setModal(false)
       }
+   };
 
+   const handleRefresh = async () => {
+      setRefreshing(true)
+      const hasil = await decryptToken(String(token?.current));
+      apiGetBanner({ user: hasil }).then((data) =>
+         dispatch(setEntities(data.data))
+      );
+      await new Promise(resolve => setTimeout(resolve, 2000));
+      setRefreshing(false)
    };
 
    return (
@@ -53,7 +63,14 @@ export default function BannerList() {
             }}
          />
 
-         <ScrollView>
+         <ScrollView
+            refreshControl={
+               <RefreshControl
+                  refreshing={refreshing}
+                  onRefresh={handleRefresh}
+               />
+            }
+         >
             <View style={[Styles.p15, Styles.mb100]}>
                {entities.map((index: any, key: number) => (
                   <BorderBottomItem

app/(application)/discussion/index.tsx

@@ -10,7 +10,7 @@ import { useAuthSession } from "@/providers/AuthProvider";
 import { AntDesign, Feather, Ionicons, MaterialIcons } from "@expo/vector-icons";
 import { router, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
-import { Text, View, VirtualizedList } from "react-native";
+import { RefreshControl, Text, View, VirtualizedList } from "react-native";
 import { useSelector } from "react-redux";
 
 
@@ -36,6 +36,7 @@ export default function Discussion() {
    const [status, setStatus] = useState<'true' | 'false'>('true')
    const [page, setPage] = useState(1)
    const [waiting, setWaiting] = useState(false)
+   const [refreshing, setRefreshing] = useState(false)
 
    async function handleLoad(loading: boolean, thisPage: number) {
       try {
@@ -77,6 +78,13 @@ export default function Discussion() {
       }, 1000);
    };
 
+   const handleRefresh = async () => {
+      setRefreshing(true)
+      handleLoad(false, 1)
+      await new Promise(resolve => setTimeout(resolve, 2000));
+      setRefreshing(false)
+   };
+
    const getItem = (_data: unknown, index: number): Props => ({
       id: data[index].id,
       title: data[index].title,
@@ -160,6 +168,12 @@ export default function Discussion() {
                         onEndReached={loadMoreData}
                         onEndReachedThreshold={0.5}
                         showsVerticalScrollIndicator={false}
+                        refreshControl={
+                           <RefreshControl
+                              refreshing={refreshing}
+                              onRefresh={handleRefresh}
+                           />
+                        }
                      />
                      // data.map((item: any, i: number) => {
                      //    return (

app/(application)/division/[id]/(fitur-division)/calendar/index.tsx

@@ -11,7 +11,7 @@ import dayjs from "dayjs";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import moment from "moment";
 import { useEffect, useState } from "react";
-import { Pressable, SafeAreaView, ScrollView, Text, View } from "react-native";
+import { Pressable, RefreshControl, SafeAreaView, ScrollView, Text, View } from "react-native";
 import Datepicker, {
    CalendarComponents,
    CalendarDay
@@ -32,15 +32,16 @@ type Props = {
 };
 
 export default function CalendarDivision() {
-   const [selected, setSelected] = useState<any>(new Date());
+   const [selected, setSelected] = useState<any>(new Date())
-   const [data, setData] = useState<Props[]>([]);
+   const [data, setData] = useState<Props[]>([])
-   const { token, decryptToken } = useAuthSession();
+   const { token, decryptToken } = useAuthSession()
-   const { id } = useLocalSearchParams<{ id: string }>();
+   const { id } = useLocalSearchParams<{ id: string }>()
-   const [dataIndicator, setDataIndicator] = useState<any>([]);
+   const [dataIndicator, setDataIndicator] = useState<any>([])
-   const [month, setMonth] = useState<number>(new Date().getMonth());
+   const [month, setMonth] = useState<number>(new Date().getMonth())
    const update = useSelector((state: any) => state.calendarUpdate)
    const [loading, setLoading] = useState(true)
    const [loadingBtn, setLoadingBtn] = useState(false)
+   const [refreshing, setRefreshing] = useState(false)
 
 
    async function handleLoad(loading: boolean) {
@@ -90,6 +91,13 @@ export default function CalendarDivision() {
       handleLoadIndicator();
    }, [month, update.data]);
 
+   const handleRefresh = async () => {
+      setRefreshing(true)
+      handleLoad(false)
+      await new Promise(resolve => setTimeout(resolve, 2000));
+      setRefreshing(false)
+   };
+
    const components: CalendarComponents = {
       Day: (day: CalendarDay) => {
          const now = String(day.date);
@@ -127,7 +135,13 @@ export default function CalendarDivision() {
                headerRight: () => <HeaderRightCalendarList />,
             }}
          />
-         <ScrollView>
+         <ScrollView
+            refreshControl={
+               <RefreshControl
+                  refreshing={refreshing}
+                  onRefresh={handleRefresh}
+               />
+            }>
             <View style={[Styles.p15]}>
                <View style={[Styles.wrapPaper, Styles.p10]}>
                   <Datepicker

app/(application)/division/[id]/(fitur-division)/discussion/index.tsx

@@ -10,7 +10,7 @@ import { useAuthSession } from "@/providers/AuthProvider";
 import { AntDesign, Feather, Ionicons } from "@expo/vector-icons";
 import { router, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
-import { Text, View, VirtualizedList } from "react-native";
+import { RefreshControl, Text, View, VirtualizedList } from "react-native";
 import { useSelector } from "react-redux";
 
 
@@ -32,12 +32,13 @@ export default function DiscussionDivision() {
    const [data, setData] = useState<Props[]>([])
    const { token, decryptToken } = useAuthSession()
    const [search, setSearch] = useState('')
-   const update = useSelector((state: any) => state.discussionUpdate);
+   const update = useSelector((state: any) => state.discussionUpdate)
    const [loading, setLoading] = useState(true)
    const arrSkeleton = Array.from({ length: 5 })
    const [page, setPage] = useState(1)
    const [waiting, setWaiting] = useState(false)
    const [status, setStatus] = useState<'true' | 'false'>('true')
+   const [refreshing, setRefreshing] = useState(false)
 
    async function handleLoad(loading: boolean, thisPage: number) {
       try {
@@ -77,6 +78,13 @@ export default function DiscussionDivision() {
       }, 1000);
    }
 
+   const handleRefresh = async () => {
+      setRefreshing(true)
+      handleLoad(false, 1)
+      await new Promise(resolve => setTimeout(resolve, 2000));
+      setRefreshing(false)
+   };
+
    const getItem = (_data: unknown, index: number): Props => ({
       id: data[index].id,
       title: data[index].title,
@@ -155,6 +163,12 @@ export default function DiscussionDivision() {
                         onEndReached={loadMoreData}
                         onEndReachedThreshold={0.5}
                         showsVerticalScrollIndicator={false}
+                        refreshControl={
+                           <RefreshControl
+                              refreshing={refreshing}
+                              onRefresh={handleRefresh}
+                           />
+                        }
                      />
                      // data.map((item, index) => (
                      //    <BorderBottomItem

app/(application)/division/[id]/(fitur-division)/document/index.tsx

@@ -34,6 +34,7 @@ import {
    Alert,
    Platform,
    Pressable,
+   RefreshControl,
    SafeAreaView,
    ScrollView,
    Text,
@@ -62,23 +63,24 @@ type PropsPath = {
 };
 
 export default function DocumentDivision() {
-   const [isShare, setShare] = useState(false);
+   const [isShare, setShare] = useState(false)
-   const { token, decryptToken } = useAuthSession();
+   const { token, decryptToken } = useAuthSession()
-   const { id } = useLocalSearchParams<{ id: string }>();
+   const { id } = useLocalSearchParams<{ id: string }>()
-   const [path, setPath] = useState("home");
+   const [path, setPath] = useState("home")
-   const [data, setData] = useState<Props[]>([]);
+   const [data, setData] = useState<Props[]>([])
-   const [dataJalur, setDataJalur] = useState<PropsPath[]>([]);
+   const [dataJalur, setDataJalur] = useState<PropsPath[]>([])
-   const [dariSelectAll, setDariSelectAll] = useState(false);
+   const [dariSelectAll, setDariSelectAll] = useState(false)
-   const [selectedFiles, setSelectedFiles] = useState<any>([]);
+   const [selectedFiles, setSelectedFiles] = useState<any>([])
-   const [selectAll, setSelectAll] = useState(false);
+   const [selectAll, setSelectAll] = useState(false)
-   const [shareSelected, setShareSelected] = useState(false);
+   const [shareSelected, setShareSelected] = useState(false)
-   const [copyAllowed, setCopyAllowed] = useState(true);
+   const [copyAllowed, setCopyAllowed] = useState(true)
-   const [modalMore, setModalMore] = useState(false);
+   const [modalMore, setModalMore] = useState(false)
-   const [isRename, setRename] = useState(false);
+   const [isRename, setRename] = useState(false)
    const dispatch = useDispatch();
    const [loading, setLoading] = useState(true)
    const arrSkeleton = Array.from({ length: 3 })
-   const update = useSelector((state: any) => state.dokumenUpdate);
+   const update = useSelector((state: any) => state.dokumenUpdate)
+   const [refreshing, setRefreshing] = useState(false)
    const [bodyRename, setBodyRename] = useState({
       id: "",
       name: "",
@@ -87,9 +89,9 @@ export default function DocumentDivision() {
       extension: "",
    });
 
-   async function handleLoad() {
+   async function handleLoad(loading: boolean) {
       try {
-         setLoading(true)
+         setLoading(loading)
          const hasil = await decryptToken(String(token?.current));
          const response = await apiGetDocument({
             user: hasil,
@@ -107,7 +109,7 @@ export default function DocumentDivision() {
    }
 
    useEffect(() => {
-      handleLoad();
+      handleLoad(true);
    }, [path, update]);
 
    const handleCheckboxChange = (index: number) => {
@@ -297,6 +299,13 @@ export default function DocumentDivision() {
       });
    };
 
+   const handleRefresh = async () => {
+      setRefreshing(true)
+      handleLoad(false)
+      await new Promise(resolve => setTimeout(resolve, 2000));
+      setRefreshing(false)
+   };
+
    return (
       <SafeAreaView>
          <Stack.Screen
@@ -336,7 +345,14 @@ export default function DocumentDivision() {
                   ),
             }}
          />
-         <ScrollView style={{ height: "100%" }}>
+         <ScrollView
+            style={{ height: "100%" }}
+            refreshControl={
+               <RefreshControl
+                  refreshing={refreshing}
+                  onRefresh={handleRefresh}
+               />
+            }>
             <View style={[Styles.p15, Styles.mb100]}>
                <View style={[Styles.rowItemsCenter]}>
                   {

app/(application)/division/[id]/(fitur-division)/task/index.tsx

@@ -17,7 +17,7 @@ import {
 } from "@expo/vector-icons";
 import { router, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
-import { Pressable, ScrollView, Text, View, VirtualizedList } from "react-native";
+import { Pressable, RefreshControl, ScrollView, Text, View, VirtualizedList } from "react-native";
 import { useSelector } from "react-redux";
 
 type Props = {
@@ -30,17 +30,18 @@ type Props = {
 };
 
 export default function ListTask() {
-   const { id, status } = useLocalSearchParams<{ id: string; status: string }>();
+   const { id, status } = useLocalSearchParams<{ id: string; status: string }>()
-   const [isList, setList] = useState(false);
+   const [isList, setList] = useState(false)
-   const { token, decryptToken } = useAuthSession();
+   const { token, decryptToken } = useAuthSession()
-   const [data, setData] = useState<Props[]>([]);
+   const [data, setData] = useState<Props[]>([])
-   const [search, setSearch] = useState("");
+   const [search, setSearch] = useState("")
    const update = useSelector((state: any) => state.taskUpdate)
    const [loading, setLoading] = useState(true)
    const arrSkeleton = Array.from({ length: 3 })
    const [statusFix, setStatusFix] = useState<'0' | '1' | '2' | '3'>('0')
    const [page, setPage] = useState(1)
    const [waiting, setWaiting] = useState(false)
+   const [refreshing, setRefreshing] = useState(false)
 
    async function handleLoad(loading: boolean, thisPage: number) {
       try {
@@ -85,6 +86,13 @@ export default function ListTask() {
       }, 1000);
    }
 
+   const handleRefresh = async () => {
+      setRefreshing(true)
+      handleLoad(false, 1)
+      await new Promise(resolve => setTimeout(resolve, 2000));
+      setRefreshing(false)
+   };
+
    const getItem = (_data: unknown, index: number): Props => ({
       id: data[index].id,
       title: data[index].title,
@@ -208,6 +216,12 @@ export default function ListTask() {
                               onEndReached={loadMoreData}
                               onEndReachedThreshold={0.5}
                               showsVerticalScrollIndicator={false}
+                              refreshControl={
+                                 <RefreshControl
+                                    refreshing={refreshing}
+                                    onRefresh={handleRefresh}
+                                 />
+                              }
                            />
                            {/* {data.map((item, index) => (
                               <BorderBottomItem
@@ -268,6 +282,12 @@ export default function ListTask() {
                               onEndReached={loadMoreData}
                               onEndReachedThreshold={0.5}
                               showsVerticalScrollIndicator={false}
+                              refreshControl={
+                                 <RefreshControl
+                                    refreshing={refreshing}
+                                    onRefresh={handleRefresh}
+                                 />
+                              }
                            />
                            {/* {data.map((item, index) => (
                               <PaperGridContent

app/(application)/division/index.tsx

@@ -17,7 +17,7 @@ import {
 } from "@expo/vector-icons";
 import { router, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
-import { Pressable, Text, View, VirtualizedList } from "react-native";
+import { Pressable, RefreshControl, Text, View, VirtualizedList } from "react-native";
 import { useSelector } from "react-redux";
 
 type Props = {
@@ -34,11 +34,11 @@ export default function ListDivision() {
       cat?: string;
    }>();
    const [isList, setList] = useState(false);
-   const entityUser = useSelector((state: any) => state.user);
+   const entityUser = useSelector((state: any) => state.user)
-   const { token, decryptToken } = useAuthSession();
+   const { token, decryptToken } = useAuthSession()
-   const [search, setSearch] = useState("");
+   const [search, setSearch] = useState("")
-   const [nameGroup, setNameGroup] = useState("");
+   const [nameGroup, setNameGroup] = useState("")
-   const [data, setData] = useState<Props[]>([]);
+   const [data, setData] = useState<Props[]>([])
    const update = useSelector((state: any) => state.divisionUpdate)
    const arrSkeleton = Array.from({ length: 3 }, (_, index) => index)
    const [loading, setLoading] = useState(false)
@@ -46,6 +46,7 @@ export default function ListDivision() {
    const [category, setCategory] = useState<'divisi-saya' | 'semua'>('divisi-saya')
    const [page, setPage] = useState(1)
    const [waiting, setWaiting] = useState(false)
+   const [refreshing, setRefreshing] = useState(false)
 
    async function handleLoad(loading: boolean, thisPage: number) {
       try {
@@ -95,6 +96,13 @@ export default function ListDivision() {
       }, 1000);
    };
 
+   const handleRefresh = async () => {
+      setRefreshing(true)
+      handleLoad(false, 1)
+      await new Promise(resolve => setTimeout(resolve, 2000));
+      setRefreshing(false)
+   };
+
    const getItem = (_data: unknown, index: number): Props => ({
       id: data[index].id,
       name: data[index].name,
@@ -235,6 +243,12 @@ export default function ListDivision() {
                               onEndReached={loadMoreData}
                               onEndReachedThreshold={0.5}
                               showsVerticalScrollIndicator={false}
+                              refreshControl={
+                                 <RefreshControl
+                                    refreshing={refreshing}
+                                    onRefresh={handleRefresh}
+                                 />
+                              }
                            />
                         </View>
                      ) : (
@@ -264,6 +278,12 @@ export default function ListDivision() {
                               onEndReached={loadMoreData}
                               onEndReachedThreshold={0.5}
                               showsVerticalScrollIndicator={false}
+                              refreshControl={
+                                 <RefreshControl
+                                    refreshing={refreshing}
+                                    onRefresh={handleRefresh}
+                                 />
+                              }
                            />
                         </View>
                      )

app/(application)/group/index.tsx

@@ -14,7 +14,7 @@ import { setUpdateGroup } from "@/lib/groupSlice";
 import { useAuthSession } from "@/providers/AuthProvider";
 import { AntDesign, Feather, MaterialCommunityIcons } from "@expo/vector-icons";
 import { useEffect, useState } from "react";
-import { SafeAreaView, ScrollView, Text, ToastAndroid, View } from "react-native";
+import { RefreshControl, SafeAreaView, ScrollView, Text, ToastAndroid, View } from "react-native";
 import { useDispatch, useSelector } from "react-redux";
 
 type Props = {
@@ -36,6 +36,7 @@ export default function Index() {
    const [idChoose, setIdChoose] = useState('')
    const [activeChoose, setActiveChoose] = useState(true)
    const [titleChoose, setTitleChoose] = useState('')
+   const [refreshing, setRefreshing] = useState(false)
 
    const dispatch = useDispatch()
    const update = useSelector((state: any) => state.groupUpdate)
@@ -99,12 +100,24 @@ export default function Index() {
       handleLoad(true)
    }, [status, search])
 
-
+   const handleRefresh = async () => {
+      setRefreshing(true)
+      handleLoad(false)
+      await new Promise(resolve => setTimeout(resolve, 2000));
+      setRefreshing(false)
+   };
 
 
    return (
       <SafeAreaView>
-         <ScrollView>
+         <ScrollView
+            refreshControl={
+               <RefreshControl
+                  refreshing={refreshing}
+                  onRefresh={handleRefresh}
+               />
+            }
+         >
             <View style={[Styles.p15]}>
                <View style={[Styles.wrapBtnTab]}>
                   <ButtonTab

app/(application)/member/index.tsx

@@ -9,7 +9,7 @@ import { useAuthSession } from "@/providers/AuthProvider";
 import { AntDesign, Feather } from "@expo/vector-icons";
 import { router, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
-import { Text, View, VirtualizedList } from "react-native";
+import { RefreshControl, Text, View, VirtualizedList } from "react-native";
 import { useSelector } from "react-redux";
 
 type Props = {
@@ -39,6 +39,7 @@ export default function Index() {
    const [status, setStatus] = useState<'true' | 'false'>('true')
    const [page, setPage] = useState(1)
    const [waiting, setWaiting] = useState(false)
+   const [refreshing, setRefreshing] = useState(false)
 
    async function handleLoad(loading: boolean, thisPage: number) {
       try {
@@ -78,8 +79,12 @@ export default function Index() {
       handleLoad(true, 1)
    }, [group, search, status])
 
-
+   const handleRefresh = async () => {
-
+      setRefreshing(true)
+      handleLoad(false, 1)
+      await new Promise(resolve => setTimeout(resolve, 2000));
+      setRefreshing(false)
+   };
 
    const getItem = (_data: unknown, index: number): Props => ({
       id: data[index].id,
@@ -155,6 +160,12 @@ export default function Index() {
                         onEndReached={loadMoreData}
                         onEndReachedThreshold={0.5}
                         showsVerticalScrollIndicator={false}
+                        refreshControl={
+                           <RefreshControl
+                              refreshing={refreshing}
+                              onRefresh={handleRefresh}
+                           />
+                        }
                      />
                      :
                      <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada data</Text>

app/(application)/position/index.tsx

@@ -15,7 +15,7 @@ import { useAuthSession } from "@/providers/AuthProvider";
 import { AntDesign, Feather, MaterialCommunityIcons } from "@expo/vector-icons";
 import { useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
-import { SafeAreaView, ScrollView, Text, ToastAndroid, View } from "react-native";
+import { RefreshControl, SafeAreaView, ScrollView, Text, ToastAndroid, View } from "react-native";
 import { useDispatch, useSelector } from "react-redux";
 
 type Props = {
@@ -42,6 +42,7 @@ export default function Index() {
    const [error, setError] = useState({
       name: false,
    });
+   const [refreshing, setRefreshing] = useState(false)
 
    const dispatch = useDispatch()
    const update = useSelector((state: any) => state.positionUpdate)
@@ -119,9 +120,21 @@ export default function Index() {
       handleEdit()
    }
 
+   const handleRefresh = async () => {
+      setRefreshing(true)
+      handleLoad(false)
+      await new Promise(resolve => setTimeout(resolve, 2000));
+      setRefreshing(false)
+   };
+
    return (
       <SafeAreaView>
-         <ScrollView>
+         <ScrollView refreshControl={
+            <RefreshControl
+               refreshing={refreshing}
+               onRefresh={handleRefresh}
+            />
+         }>
             <View style={[Styles.p15]}>
                <View style={[Styles.wrapBtnTab]}>
                   <ButtonTab

app/(application)/project/index.tsx

@@ -17,7 +17,7 @@ import {
 } from "@expo/vector-icons";
 import { router, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
-import { Pressable, ScrollView, Text, View, VirtualizedList } from "react-native";
+import { Pressable, RefreshControl, ScrollView, Text, View, VirtualizedList } from "react-native";
 import { useSelector } from "react-redux";
 
 type Props = {
@@ -38,16 +38,17 @@ export default function ListProject() {
    }>();
    const [statusFix, setStatusFix] = useState<'0' | '1' | '2' | '3'>('0')
    const { token, decryptToken } = useAuthSession();
-   const entityUser = useSelector((state: any) => state.user);
+   const entityUser = useSelector((state: any) => state.user)
-   const [search, setSearch] = useState("");
+   const [search, setSearch] = useState("")
-   const [nameGroup, setNameGroup] = useState("");
+   const [nameGroup, setNameGroup] = useState("")
-   const [data, setData] = useState<Props[]>([]);
+   const [data, setData] = useState<Props[]>([])
-   const [isList, setList] = useState(false);
+   const [isList, setList] = useState(false)
    const update = useSelector((state: any) => state.projectUpdate)
    const [loading, setLoading] = useState(true)
    const arrSkeleton = Array.from({ length: 3 }, (_, index) => index)
    const [page, setPage] = useState(1)
    const [waiting, setWaiting] = useState(false)
+   const [refreshing, setRefreshing] = useState(false)
 
    async function handleLoad(loading: boolean, thisPage: number) {
       try {
@@ -96,7 +97,14 @@ export default function ListProject() {
       setTimeout(() => {
          handleLoad(false, page + 1)
       }, 1000);
-   };
+   }
+
+   const handleRefresh = async () => {
+      setRefreshing(true)
+      handleLoad(false, 1)
+      await new Promise(resolve => setTimeout(resolve, 2000));
+      setRefreshing(false)
+   }
 
    const getItem = (_data: unknown, index: number): Props => ({
       id: data[index].id,
@@ -189,14 +197,14 @@ export default function ListProject() {
                      (entityUser.role == "supadmin" || entityUser.role == "developer") && nameGroup
                   }
                   {
-                     (entityUser.role == 'user' || entityUser.role == 'coadmin')
+                     (entityUser.role == 'user' || entityUser.role == 'coadmin' || entityUser.role == 'cosupadmin')
                         ? (cat == 'null' || cat == 'undefined' || cat == undefined || cat == '' || cat == 'data-saya') ? 'Kegiatan Saya' : 'Semua Kegiatan'
                         : ''
                   }
                </Text>
             </View>
          </View>
-         <View style={[{ flex: 2}]}>
+         <View style={[{ flex: 2 }]}>
             {
                loading ?
                   isList ?
@@ -239,6 +247,12 @@ export default function ListProject() {
                               onEndReached={loadMoreData}
                               onEndReachedThreshold={0.5}
                               showsVerticalScrollIndicator={false}
+                              refreshControl={
+                                 <RefreshControl
+                                    refreshing={refreshing}
+                                    onRefresh={handleRefresh}
+                                 />
+                              }
                            />
                            {/* {
                               data.map((item, index) => {
@@ -311,6 +325,12 @@ export default function ListProject() {
                               onEndReached={loadMoreData}
                               onEndReachedThreshold={0.5}
                               showsVerticalScrollIndicator={false}
+                              refreshControl={
+                                 <RefreshControl
+                                    refreshing={refreshing}
+                                    onRefresh={handleRefresh}
+                                 />
+                              }
                            />
                            {/* {data.map((item, index) => {
                               return (