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
2025-07-15 12:08:55 +08:00
parent ae420ec560
commit 4a10655582
12 changed files with 249 additions and 63 deletions
--- a/app/(application)/division/[id]/(fitur-division)/calendar/index.tsx
+++ b/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 [data, setData] = useState<Props[]>([]);
-   const { token, decryptToken } = useAuthSession();
-   const { id } = useLocalSearchParams<{ id: string }>();
-   const [dataIndicator, setDataIndicator] = useState<any>([]);
-   const [month, setMonth] = useState<number>(new Date().getMonth());
+   const [selected, setSelected] = useState<any>(new Date())
+   const [data, setData] = useState<Props[]>([])
+   const { token, decryptToken } = useAuthSession()
+   const { id } = useLocalSearchParams<{ id: string }>()
+   const [dataIndicator, setDataIndicator] = useState<any>([])
+   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
--- a/app/(application)/division/[id]/(fitur-division)/discussion/index.tsx
+++ b/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
--- a/app/(application)/division/[id]/(fitur-division)/document/index.tsx
+++ b/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 { token, decryptToken } = useAuthSession();
-   const { id } = useLocalSearchParams<{ id: string }>();
-   const [path, setPath] = useState("home");
-   const [data, setData] = useState<Props[]>([]);
-   const [dataJalur, setDataJalur] = useState<PropsPath[]>([]);
-   const [dariSelectAll, setDariSelectAll] = useState(false);
-   const [selectedFiles, setSelectedFiles] = useState<any>([]);
-   const [selectAll, setSelectAll] = useState(false);
-   const [shareSelected, setShareSelected] = useState(false);
-   const [copyAllowed, setCopyAllowed] = useState(true);
-   const [modalMore, setModalMore] = useState(false);
-   const [isRename, setRename] = useState(false);
+   const [isShare, setShare] = useState(false)
+   const { token, decryptToken } = useAuthSession()
+   const { id } = useLocalSearchParams<{ id: string }>()
+   const [path, setPath] = useState("home")
+   const [data, setData] = useState<Props[]>([])
+   const [dataJalur, setDataJalur] = useState<PropsPath[]>([])
+   const [dariSelectAll, setDariSelectAll] = useState(false)
+   const [selectedFiles, setSelectedFiles] = useState<any>([])
+   const [selectAll, setSelectAll] = useState(false)
+   const [shareSelected, setShareSelected] = useState(false)
+   const [copyAllowed, setCopyAllowed] = useState(true)
+   const [modalMore, setModalMore] = 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]}>
                  {
--- a/app/(application)/division/[id]/(fitur-division)/task/index.tsx
+++ b/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 [isList, setList] = useState(false);
-   const { token, decryptToken } = useAuthSession();
-   const [data, setData] = useState<Props[]>([]);
-   const [search, setSearch] = useState("");
+   const { id, status } = useLocalSearchParams<{ id: string; status: string }>()
+   const [isList, setList] = useState(false)
+   const { token, decryptToken } = useAuthSession()
+   const [data, setData] = useState<Props[]>([])
+   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
--- a/app/(application)/division/index.tsx
+++ b/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 { token, decryptToken } = useAuthSession();
-   const [search, setSearch] = useState("");
-   const [nameGroup, setNameGroup] = useState("");
-   const [data, setData] = useState<Props[]>([]);
+   const entityUser = useSelector((state: any) => state.user)
+   const { token, decryptToken } = useAuthSession()
+   const [search, setSearch] = useState("")
+   const [nameGroup, setNameGroup] = useState("")
+   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>
                     )