upd: load scroll

Deskripsi:
- kegiatan
- divisi
- tugas divisi
- diskusi
- history kalender

No Issues

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

@@ -1,13 +1,12 @@
-import ButtonBackHeader from "@/components/buttonBackHeader";
-import ItemHistoryEvent from "@/components/calendar/itemHistoryEvent";
 import InputSearch from "@/components/inputSearch";
 import Skeleton from "@/components/skeleton";
+import { ColorsStatus } from "@/constants/ColorsStatus";
 import Styles from "@/constants/Styles";
 import { apiGetCalendarHistory } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
-import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
-import { SafeAreaView, ScrollView, View } from "react-native";
+import { FlatList, Text, View, VirtualizedList } from "react-native";
 
 type Props = {
    dateStart: Date
@@ -21,47 +20,92 @@ export default function CalendarHistory() {
    const [search, setSearch] = useState('')
    const [loading, setLoading] = useState(true)
    const arrSkeleton = Array.from({ length: 5 })
+   const [page, setPage] = useState(1)
+   const [waiting, setWaiting] = useState(false)
 
-   async function handleLoad() {
+   async function handleLoad(loading: boolean, thisPage: number) {
       try {
-         setLoading(true)
+         setWaiting(true)
+         setLoading(loading)
+         setPage(thisPage)
          const hasil = await decryptToken(String(token?.current));
-         const response = await apiGetCalendarHistory({ user: hasil, search: search, division: id });
-         setData(response.data);
+         const response = await apiGetCalendarHistory({ user: hasil, search: search, division: id, 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()
+      handleLoad(true, 1)
    }, [search])
 
-   return (
-      <SafeAreaView>
-         <Stack.Screen
-            options={{
-               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
-               headerTitle: 'Riwayat Acara',
-               headerTitleAlign: 'center',
-            }}
-         />
-         <ScrollView>
-            <View style={[Styles.p15]}>
-               <InputSearch onChange={(val) => setSearch(val)} />
-               {
-                  loading ?
-                     arrSkeleton.map((item, index) => (
-                        <Skeleton key={index} width={100} height={60} widthType="percent" borderRadius={10} />
-                     ))
-                     :
-                     <ItemHistoryEvent data={data} />
-               }
+   const loadMoreData = () => {
+      if (waiting) return
+      setTimeout(() => {
+         handleLoad(false, page + 1)
+      }, 1000);
+   };
 
-            </View>
-         </ScrollView>
-      </SafeAreaView>
+   const getItem = (_data: unknown, index: number): Props => ({
+      dateStart: data[index].dateStart,
+      year: data[index].year,
+      data: data[index].data,
+   })
+
+   return (
+      <View style={[Styles.p15, { flex: 1 }]}>
+         <View>
+            <InputSearch onChange={(val) => setSearch(val)} />
+         </View>
+         <View style={[{ flex: 2, }]}>
+            {
+               loading ?
+                  arrSkeleton.map((item, index) => (
+                     <Skeleton key={index} width={100} height={60} widthType="percent" borderRadius={10} />
+                  ))
+                  :
+                  <VirtualizedList
+                     data={data}
+                     getItemCount={() => data.length}
+                     getItem={getItem}
+                     renderItem={({ item, index }: { item: Props, index: number }) => {
+                        return (
+                           <View key={index} style={[{ flexDirection: 'row' }, Styles.mv05, ColorsStatus.lightGreen, Styles.p10, Styles.round10]}>
+                              <View style={[Styles.mr10, Styles.ph05]}>
+                                 <Text style={[Styles.textSubtitle]}>{String(item.dateStart)}</Text>
+                                 <Text style={[Styles.textDefault, { textAlign: 'center' }]}>{item.year}</Text>
+                              </View>
+                              <View style={[{ flex: 1 }]}>
+                                 <FlatList data={item.data}
+                                    renderItem={({ item, index }: { item: { title: string, timeStart: string, timeEnd: string }, index: number }) => (
+                                       <View key={index} style={[Styles.mb05, Styles.w80]}>
+                                          <Text style={[Styles.textDefaultSemiBold]} numberOfLines={1} ellipsizeMode="tail">{item.title}</Text>
+                                          <Text style={[Styles.textDefault]}>{item.timeStart} | {item.timeEnd}</Text>
+                                       </View>
+                                    )}
+                                    keyExtractor={(item, index) => String(index)}
+                                 />
+                              </View>
+                           </View>
+                        )
+                     }}
+                     keyExtractor={(item, index) => String(index)}
+                     onEndReached={loadMoreData}
+                     onEndReachedThreshold={0.5}
+                     showsVerticalScrollIndicator={false}
+                  />
+            }
+         </View>
+      </View>
    )
 }