upd: scroll load

Deskripsi:
- list anggota
- list diskusi umum
- list pengumuman

No Issues

app/(application)/announcement/index.tsx

@@ -1,6 +1,4 @@
-import HeaderRightAnnouncementList from "@/components/announcement/headerAnnouncementList";
 import BorderBottomItem from "@/components/borderBottomItem";
-import ButtonBackHeader from "@/components/buttonBackHeader";
 import InputSearch from "@/components/inputSearch";
 import SkeletonContent from "@/components/skeletonContent";
 import { ColorsStatus } from "@/constants/ColorsStatus";
@@ -8,9 +6,9 @@ import Styles from "@/constants/Styles";
 import { apiGetAnnouncement } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
 import { MaterialIcons } from "@expo/vector-icons";
-import { router, Stack } from "expo-router";
+import { router } from "expo-router";
 import { useEffect, useState } from "react";
-import { SafeAreaView, ScrollView, Text, View } from "react-native";
+import { Text, View, VirtualizedList } from "react-native";
 import { useSelector } from "react-redux";
 
 type Props = {
@@ -25,57 +23,77 @@ export default function Announcement() {
    const { token, decryptToken } = useAuthSession()
    const [data, setData] = useState<Props[]>([])
    const [search, setSearch] = useState('')
-   const entityUser = useSelector((state: any) => state.user)
    const update = useSelector((state: any) => state.announcementUpdate)
    const [loading, setLoading] = useState(true)
    const arrSkeleton = Array.from({ length: 5 }, (_, index) => index)
+   const [page, setPage] = useState(1)
+   const [waiting, setWaiting] = useState(false)
 
-   async function handleLoad(loading: boolean) {
+   async function handleLoad(loading: boolean, thisPage: number) {
       try {
+         setWaiting(true)
          setLoading(loading)
+         setPage(thisPage)
          const hasil = await decryptToken(String(token?.current))
-         const response = await apiGetAnnouncement({ user: hasil, search: search })
-         setData(response.data)
+         const response = await apiGetAnnouncement({ user: hasil, search: search, 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)
       }
    }
 
    useEffect(() => {
-      handleLoad(false)
+      handleLoad(false, 1)
    }, [update])
 
    useEffect(() => {
-      handleLoad(true)
+      handleLoad(true, 1)
    }, [search])
 
-   return (
-      <SafeAreaView>
-         <Stack.Screen
-            options={{
-               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
-               headerTitle: 'Pengumuman',
-               headerTitleAlign: 'center',
-               headerRight: () => entityUser.role != 'user' && entityUser.role != 'coadmin' ? <HeaderRightAnnouncementList /> : <></>
-            }}
-         />
+   const loadMoreData = () => {
+      if (waiting) return
+      setTimeout(() => {
+         handleLoad(false, page + 1)
+      }, 1000);
+   };
 
-         <ScrollView>
-            <View style={[Styles.p15, Styles.mb100]}>
-               <InputSearch onChange={setSearch} />
-               {
-                  loading ?
-                     arrSkeleton.map((item, index) => {
-                        return (
-                           <SkeletonContent key={index} />
-                        )
-                     })
-                     :
-                     data.length > 0
-                        ?
-                        data.map((item, index) => {
+   const getItem = (_data: unknown, index: number): Props => ({
+      id: data[index].id,
+      title: data[index].title,
+      desc: data[index].desc,
+      createdAt: data[index].createdAt,
+   })
+
+   return (
+      <View style={[Styles.p15, { flex: 1 }]}>
+         <View>
+            <InputSearch onChange={setSearch} />
+         </View>
+         <View style={[{ flex: 2 }, Styles.mb50]}>
+            {
+               loading ?
+                  arrSkeleton.map((item, index) => {
+                     return (
+                        <SkeletonContent key={index} />
+                     )
+                  })
+                  :
+                  data.length > 0
+                     ?
+                     <VirtualizedList
+                        data={data}
+                        getItemCount={() => data.length}
+                        getItem={getItem}
+                        renderItem={({ item, index }: { item: Props, index: number }) => {
                            return (
                               <BorderBottomItem
                                  key={index}
@@ -91,12 +109,33 @@ export default function Announcement() {
                                  rightTopInfo={item.createdAt}
                               />
                            )
-                        })
-                        :
-                        <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada pengumuman</Text>
-               }
-            </View>
-         </ScrollView>
-      </SafeAreaView>
+                        }}
+                        keyExtractor={(item, index) => String(index)}
+                        onEndReached={loadMoreData}
+                        onEndReachedThreshold={0.5}
+                        showsVerticalScrollIndicator={false}
+                     />
+                     // data.map((item, index) => {
+                     //    return (
+                     //       <BorderBottomItem
+                     //          key={index}
+                     //          onPress={() => { router.push(`/announcement/${item.id}`) }}
+                     //          borderType="bottom"
+                     //          icon={
+                     //             <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
+                     //                <MaterialIcons name="campaign" size={25} color={'#384288'} />
+                     //             </View>
+                     //          }
+                     //          title={item.title}
+                     //          desc={item.desc.replace(/<[^>]*>?/gm, '')}
+                     //          rightTopInfo={item.createdAt}
+                     //       />
+                     //    )
+                     // })
+                     :
+                     <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada pengumuman</Text>
+            }
+         </View>
+      </View>
    )
 }