upd: scroll load

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

No Issues

app/(application)/_layout.tsx

@@ -1,3 +1,4 @@
+import HeaderRightAnnouncementList from "@/components/announcement/headerAnnouncementList";
 import ButtonBackHeader from "@/components/buttonBackHeader";
 import HeaderDiscussionGeneral from "@/components/discussion_general/headerDiscussionGeneral";
 import HeaderRightDivisionList from "@/components/division/headerDivisionList";
@@ -69,6 +70,14 @@ export default function RootLayout() {
                headerTitleAlign: 'center',
                headerRight: () => <HeaderRightPositionList />
             }} />
+            <Stack.Screen name="announcement/index"
+               options={{
+                  headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+                  headerTitle: 'Pengumuman',
+                  headerTitleAlign: 'center',
+                  headerRight: () => <HeaderRightAnnouncementList />
+               }}
+            />
          </Stack>
          <StatusBar style="light" />
       </Provider>

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,46 +23,62 @@ 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 })
+         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 (
+   const loadMoreData = () => {
-      <SafeAreaView>
+      if (waiting) return
-         <Stack.Screen
+      setTimeout(() => {
-            options={{
+         handleLoad(false, page + 1)
-               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+      }, 1000);
-               headerTitle: 'Pengumuman',
+   };
-               headerTitleAlign: 'center',
-               headerRight: () => entityUser.role != 'user' && entityUser.role != 'coadmin' ? <HeaderRightAnnouncementList /> : <></>
-            }}
-         />
 
-         <ScrollView>
+   const getItem = (_data: unknown, index: number): Props => ({
-            <View style={[Styles.p15, Styles.mb100]}>
+      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) => {
@@ -75,7 +89,11 @@ export default function Announcement() {
                   :
                   data.length > 0
                      ?
-                        data.map((item, index) => {
+                     <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}
                               />
                            )
-                        })
+                        }}
+                        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>
-         </ScrollView>
+      </View>
-      </SafeAreaView>
    )
 }

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 { SafeAreaView, ScrollView, Text, View } from "react-native";
+import { Text, View, VirtualizedList } from "react-native";
 import { useSelector } from "react-redux";
 
 
@@ -34,33 +34,61 @@ export default function Discussion() {
    const [loading, setLoading] = useState(true)
    const arrSkeleton = Array.from({ length: 5 }, (_, index) => index)
    const [status, setStatus] = useState<'true' | 'false'>('true')
+   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 apiGetDiscussionGeneral({ user: hasil, active: status, search: search, group: String(group) })
+         const response = await apiGetDiscussionGeneral({ user: hasil, active: status, search: search, group: String(group), page: thisPage })
+         if (thisPage == 1) {
             setData(response.data)
+         } else if (thisPage > 1 && response.data.length > 0) {
+            setData([...data, ...response.data])
+         } else {
+            return;
+         }
          setNameGroup(response.filter.name)
       } catch (error) {
          console.error(error)
       } finally {
          setLoading(false)
+         setWaiting(false)
       }
    }
 
-   useEffect(() => {
-      handleLoad(true)
-   }, [status, search, group])
 
    useEffect(() => {
-      handleLoad(false)
+      handleLoad(false, 1)
    }, [update])
 
+   useEffect(() => {
+      handleLoad(true, 1)
+   }, [status, search, group])
+
+
+   const loadMoreData = () => {
+      if (waiting) return
+      setTimeout(() => {
+         handleLoad(false, page + 1)
+      }, 1000);
+   };
+
+   const getItem = (_data: unknown, index: number): Props => ({
+      id: data[index].id,
+      title: data[index].title,
+      desc: data[index].desc,
+      status: data[index].status,
+      total_komentar: data[index].total_komentar,
+      createdAt: data[index].createdAt,
+   })
+
    return (
-      <SafeAreaView>
+      <View style={[Styles.p15, { flex: 1 }]}>
-         <ScrollView>
+         <View>
-            <View style={[Styles.p15, Styles.mb100]}>
             <View style={[Styles.wrapBtnTab]}>
                <ButtonTab
                   active={status == "false" ? "false" : "true"}
@@ -84,7 +112,8 @@ export default function Discussion() {
                   <Text>Filter : {nameGroup}</Text>
                </View>
             }
-               <View>
+         </View>
+         <View style={[{ flex: 2 }]}>
             {
                loading ?
                   arrSkeleton.map((item: any, i: number) => {
@@ -95,10 +124,14 @@ export default function Discussion() {
                   :
                   data.length > 0
                      ?
-                           data.map((item: any, i: number) => {
+                     <VirtualizedList
+                        data={data}
+                        getItemCount={() => data.length}
+                        getItem={getItem}
+                        renderItem={({ item, index }: { item: Props, index: number }) => {
                            return (
                               <BorderBottomItem
-                                    key={i}
+                                 key={index}
                                  onPress={() => { router.push(`/discussion/${item.id}`) }}
                                  borderType="bottom"
                                  icon={
@@ -122,13 +155,44 @@ export default function Discussion() {
 
                               />
                            )
-                           })
+                        }}
+                        keyExtractor={(item, index) => String(index)}
+                        onEndReached={loadMoreData}
+                        onEndReachedThreshold={0.5}
+                        showsVerticalScrollIndicator={false}
+                     />
+                     // data.map((item: any, i: number) => {
+                     //    return (
+                     //       <BorderBottomItem
+                     //          key={i}
+                     //          onPress={() => { router.push(`/discussion/${item.id}`) }}
+                     //          borderType="bottom"
+                     //          icon={
+                     //             <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
+                     //                <MaterialIcons name="chat" size={25} color={'#384288'} />
+                     //             </View>
+                     //          }
+                     //          title={item.title}
+                     //          subtitle={
+                     //             status != "false" && <LabelStatus category={item.status === 1 ? "success" : "error"} text={item.status === 1 ? "BUKA" : "TUTUP"} size="small" />
+                     //          }
+                     //          rightTopInfo={item.createdAt}
+                     //          desc={item.desc}
+                     //          leftBottomInfo={
+                     //             <View style={[Styles.rowItemsCenter]}>
+                     //                <Ionicons name="chatbox-ellipses-outline" size={18} color="grey" style={Styles.mr05} />
+                     //                <Text style={[Styles.textInformation, Styles.cGray, Styles.mb05]}>Diskusikan</Text>
+                     //             </View>
+                     //          }
+                     //          rightBottomInfo={`${item.total_komentar} Komentar`}
+
+                     //       />
+                     //    )
+                     // })
                      :
                      <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada data</Text>
             }
          </View>
       </View>
-         </ScrollView>
-      </SafeAreaView>
    );
 }

app/(application)/group/index.tsx

@@ -13,7 +13,6 @@ import { apiDeleteGroup, apiEditGroup, apiGetGroup } from "@/lib/api";
 import { setUpdateGroup } from "@/lib/groupSlice";
 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 { useDispatch, useSelector } from "react-redux";
@@ -26,7 +25,6 @@ type Props = {
 
 export default function Index() {
    const { token, decryptToken } = useAuthSession()
-   const { active } = useLocalSearchParams<{ active?: string }>()
    const [isModal, setModal] = useState(false)
    const [isVisibleEdit, setVisibleEdit] = useState(false)
    const [data, setData] = useState<Props[]>([])
@@ -42,6 +40,14 @@ export default function Index() {
    const dispatch = useDispatch()
    const update = useSelector((state: any) => state.groupUpdate)
 
+   const [data11, setData1] = useState(Array.from({ length: 20 }, (_, i) => `Item ${i}`));
+
+   const renderItem = ({ item }: { item: string }) => (
+      <View style={{ padding: 20, borderBottomWidth: 1, borderColor: '#ccc' }}>
+         <Text>{item}</Text>
+      </View>
+   );
+
 
    async function handleEdit() {
       try {

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 { SafeAreaView, ScrollView, Text, View } from "react-native";
+import { Text, View, VirtualizedList } from "react-native";
 import { useSelector } from "react-redux";
 
 type Props = {
@@ -37,34 +37,67 @@ export default function Index() {
    const arrSkeleton = Array.from({ length: 5 }, (_, index) => index)
    const [loading, setLoading] = useState(true)
    const [status, setStatus] = useState<'true' | 'false'>('true')
+   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 apiGetUser({ user: hasil, active: status, search: search, group: String(group) })
+         const response = await apiGetUser({ user: hasil, active: status, search, group: String(group), page: thisPage })
+         if (thisPage == 1) {
             setData(response.data)
+         } else if (thisPage > 1 && response.data.length > 0) {
+            setData([...data, ...response.data])
+         } else {
+            return;
+         }
          setNameGroup(response.filter.name)
       } catch (error) {
          console.error(error)
       } finally {
          setLoading(false)
+         setWaiting(false)
       }
    }
 
-   useEffect(() => {
+   const loadMoreData = () => {
-      handleLoad(true)
+      if (waiting) return
-   }, [status, search, group])
+      setTimeout(() => {
+         handleLoad(false, page + 1)
+      }, 1000);
+   };
 
    useEffect(() => {
-      handleLoad(false)
+      handleLoad(false, 1)
    }, [update])
 
+   useEffect(() => {
+      handleLoad(true, 1)
+   }, [group, search, status])
+
+
+
+
+   const getItem = (_data: unknown, index: number): Props => ({
+      id: data[index].id,
+      name: data[index].name,
+      nik: data[index].nik,
+      email: data[index].email,
+      phone: data[index].phone,
+      gender: data[index].gender,
+      position: data[index].position,
+      group: data[index].group,
+      img: data[index].img,
+      isActive: data[index].isActive,
+      role: data[index].role,
+   });
 
    return (
-      <SafeAreaView>
+      <View style={[Styles.p15, { flex: 1 }]}>
-         <ScrollView>
+         <View>
-            <View style={[Styles.p15]}>
             <View style={[Styles.wrapBtnTab]}>
                <ButtonTab
                   active={status == "false" ? "false" : "true"}
@@ -88,7 +121,8 @@ export default function Index() {
                   <Text>Filter : {nameGroup}</Text>
                </View>
             }
-               <View>
+         </View>
+         <View style={[{ flex: 2 }]}>
             {
                loading ?
                   arrSkeleton.map((item, index) => {
@@ -99,7 +133,11 @@ export default function Index() {
                   :
                   data.length > 0
                      ?
-                           data.map((item, index) => {
+                     <VirtualizedList
+                        data={data}
+                        getItemCount={() => data.length}
+                        getItem={getItem}
+                        renderItem={({ item, index }: { item: Props, index: number }) => {
                            return (
                               <BorderBottomItem
                                  key={index}
@@ -112,13 +150,16 @@ export default function Index() {
                                  subtitle={`${item.group} - ${item.position}`}
                               />
                            )
-                           })
+                        }}
+                        keyExtractor={(item, index) => String(index)}
+                        onEndReached={loadMoreData}
+                        onEndReachedThreshold={0.5}
+                        showsVerticalScrollIndicator={false}
+                     />
                      :
                      <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada data</Text>
             }
          </View>
       </View>
-         </ScrollView>
-      </SafeAreaView>
    )
 }

components/announcement/headerAnnouncementList.tsx

@@ -1,18 +1,23 @@
-import { useState } from "react"
+import Styles from "@/constants/Styles"
-import ButtonMenuHeader from "../buttonMenuHeader"
-import DrawerBottom from "../drawerBottom"
-import { View } from "react-native"
-import MenuItemRow from "../menuItemRow"
 import { AntDesign } from "@expo/vector-icons"
 import { router } from "expo-router"
-import Styles from "@/constants/Styles"
+import { useState } from "react"
+import { View } from "react-native"
+import { useSelector } from "react-redux"
+import ButtonMenuHeader from "../buttonMenuHeader"
+import DrawerBottom from "../drawerBottom"
+import MenuItemRow from "../menuItemRow"
 
 export default function HeaderRightAnnouncementList() {
    const [isVisible, setVisible] = useState(false)
+   const entityUser = useSelector((state: any) => state.user)
 
    return (
       <>
-         <ButtonMenuHeader onPress={() => { setVisible(true) }} />
+         {
+            entityUser.role != 'user' && entityUser.role != 'coadmin' ? <ButtonMenuHeader onPress={() => { setVisible(true) }} /> : <></>
+         }
+
          <DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu">
             <View style={Styles.rowItemsCenter}>
                <MenuItemRow

components/member/headerMemberDetail.tsx

@@ -9,6 +9,8 @@ import AlertKonfirmasi from "../alertKonfirmasi"
 import ButtonMenuHeader from "../buttonMenuHeader"
 import DrawerBottom from "../drawerBottom"
 import MenuItemRow from "../menuItemRow"
+import { useDispatch, useSelector } from "react-redux"
+import { setUpdateMember } from "@/lib/memberSlice"
 
 type Props = {
    active: any,
@@ -18,17 +20,23 @@ type Props = {
 export default function HeaderRightMemberDetail({ active, id }: Props) {
    const { token, decryptToken } = useAuthSession()
    const [isVisible, setVisible] = useState(false)
+   const update = useSelector((state: any) => state.memberUpdate)
+   const dispatch = useDispatch()
 
    async function handleActive() {
       try {
          const hasil = await decryptToken(String(token?.current))
          const response = await apiDeleteUser({ user: hasil, isActive: active }, id)
+         if (response.success) {
+            ToastAndroid.show('Berhasil mengupdate data', ToastAndroid.SHORT)
+            dispatch(setUpdateMember(!update))
+         } else {
+            ToastAndroid.show(response.message, ToastAndroid.SHORT)
+         }
       } catch (error) {
          console.error(error)
       } finally {
          setVisible(false)
-         ToastAndroid.show('Berhasil mengupdate data', ToastAndroid.SHORT)
-         router.replace(`/member/${id}`);
       }
 
    }

lib/api.ts

@@ -134,8 +134,8 @@ export const apiEditPosition = async (data: { user: string, name: string, idGrou
       });
 };
 
-export const apiGetUser = async ({ user, active, search, group }: { user: string, active: string, search: string, group?: string }) => {
+export const apiGetUser = async ({ user, active, search, group, page }: { user: string, active: string, search: string, group?: string, page?: number }) => {
-   const response = await api.get(`mobile/user?user=${user}&active=${active}&group=${group}&search=${search}`);
+   const response = await api.get(`mobile/user?user=${user}&active=${active}&group=${group}&search=${search}&page=${page}`);
    return response.data;
 };
 
@@ -150,12 +150,8 @@ export const apiCreateUser = async (data: FormData) => {
 };
 
 export const apiDeleteUser = async (data: { user: string, isActive: boolean }, id: string) => {
-   await api.delete(`mobile/user/${id}`, { data }).then(response => {
+   const response = await api.delete(`mobile/user/${id}`, { data })
-      return response.data;
+   return response.data
-   })
-      .catch(error => {
-         console.error('Error:', error);
-      });
 };
 
 export const apiEditUser = async (data: FormData, id: string) => {
@@ -167,8 +163,8 @@ export const apiEditUser = async (data: FormData, id: string) => {
    return response.data;
 };
 
-export const apiGetDiscussionGeneral = async ({ user, active, search, group }: { user: string, active: string, search: string, group?: string }) => {
+export const apiGetDiscussionGeneral = async ({ user, active, search, group, page }: { user: string, active: string, search: string, group?: string, page?: number }) => {
-   const response = await api.get(`mobile/discussion-general?user=${user}&active=${active}&group=${group}&search=${search}`);
+   const response = await api.get(`mobile/discussion-general?user=${user}&active=${active}&group=${group}&search=${search}&page=${page}`);
    return response.data;
 };
 
@@ -223,8 +219,8 @@ export const apiAddMemberDiscussionGeneral = async ({ data, id }: { data: { user
    return response.data;
 };
 
-export const apiGetAnnouncement = async ({ user, search }: { user: string, search: string }) => {
+export const apiGetAnnouncement = async ({ user, search, page }: { user: string, search: string, page?: number }) => {
-   const response = await api.get(`mobile/announcement?user=${user}&search=${search}`);
+   const response = await api.get(`mobile/announcement?user=${user}&search=${search}&page=${page}`);
    return response.data;
 };