upd : home page

Deskripsi:
- load refresh pada halaman home

No Issues

app/(application)/home.tsx

@@ -13,8 +13,8 @@ import { apiGetProfile } from "@/lib/api";
 import { setEntities } from "@/lib/entitiesSlice";
 import { useAuthSession } from "@/providers/AuthProvider";
 import { Stack } from "expo-router";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
-import { Platform, SafeAreaView, ScrollView, View } from "react-native";
+import { Platform, RefreshControl, SafeAreaView, ScrollView, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useDispatch, useSelector } from "react-redux";
 
@@ -24,6 +24,7 @@ export default function Home() {
    const dispatch = useDispatch()
    const { token, decryptToken, signOut } = useAuthSession()
    const insets = useSafeAreaInsets()
+   const [refreshing, setRefreshing] = useState(false)
 
    useEffect(() => {
       handleUserLogin()
@@ -38,6 +39,14 @@ export default function Home() {
          });
    }
 
+   const handleRefresh = async () => {
+      setRefreshing(true)
+      // await handleLoad('data')
+      // await handleLoad('progress')
+      await new Promise(resolve => setTimeout(resolve, 2000));
+      setRefreshing(false)
+   };
+
    return (
       <SafeAreaView>
          <Stack.Screen
@@ -52,16 +61,24 @@ export default function Home() {
                ),
             }}
          />
-         <ScrollView>
+         <ScrollView
-            <CaraouselHome />
+            refreshControl={
+               <RefreshControl
+                  refreshing={refreshing}
+                  onRefresh={handleRefresh}
+               />
+            }
+            showsVerticalScrollIndicator={false}
+         >
+            <CaraouselHome refreshing={refreshing}/>
             <View style={[Styles.ph15, Styles.mb100]}>
                <FiturHome />
-               <ProjectHome />
+               <ProjectHome refreshing={refreshing}/>
-               <DivisionHome />
+               <DivisionHome refreshing={refreshing}/>
-               <ChartProgresHome />
+               <ChartProgresHome refreshing={refreshing}/>
-               <ChartDokumenHome />
+               <ChartDokumenHome refreshing={refreshing}/>
-               <EventHome />
+               <EventHome refreshing={refreshing}/>
-               <DisccussionHome />
+               <DisccussionHome refreshing={refreshing}/>
             </View>
          </ScrollView>
       </SafeAreaView>

components/home/carouselHome.tsx

@@ -11,7 +11,7 @@ import Carousel, { ICarouselInstance } from "react-native-reanimated-carousel";
 import { useDispatch, useSelector } from "react-redux";
 import Text from "../Text";
 
-export default function CaraouselHome() {
+export default function CaraouselHome({ refreshing }: { refreshing: boolean }) {
    const { decryptToken, token } = useAuthSession()
    const ref = React.useRef<ICarouselInstance>(null);
    const width = Dimensions.get("window").width;
@@ -37,6 +37,11 @@ export default function CaraouselHome() {
       dispatch(setEntityUser({ role: response.data.idUserRole, admin: false }))
    }
 
+   useEffect(() => {
+      if (refreshing)
+         handleBannerView()
+   }, [refreshing]);
+
    useEffect(() => {
       handleBannerView()
    }, [dispatch]);

components/home/chartDokumenHome.tsx

@@ -13,7 +13,7 @@ type Props = {
    frontColor: string;
 }[]
 
-export default function ChartDokumenHome() {
+export default function ChartDokumenHome({ refreshing }: { refreshing: boolean }) {
    const [loading, setLoading] = useState(true)
    const { decryptToken, token } = useAuthSession()
    const [data, setData] = useState<Props>([])
@@ -25,9 +25,9 @@ export default function ChartDokumenHome() {
    const width = Dimensions.get("window").width;
 
 
-   async function handleData() {
+   async function handleData(loading: boolean) {
       try {
-         setLoading(true)
+         setLoading(loading)
          const hasil = await decryptToken(String(token?.current))
          const response = await apiGetDataHome({ cat: "dokumen", user: hasil })
          const maxValue = response.data.reduce((max: number, obj: { value: number; }) => Math.max(max, obj.value), -Infinity);
@@ -47,7 +47,12 @@ export default function ChartDokumenHome() {
    }
 
    useEffect(() => {
-      handleData()
+      if (refreshing)
+         handleData(false)
+   }, [refreshing]);
+
+   useEffect(() => {
+      handleData(true)
    }, []);
 
    return (

components/home/chartProgresHome.tsx

@@ -13,14 +13,14 @@ type Props = {
    color: string;
 }[]
 
-export default function ChartProgresHome() {
+export default function ChartProgresHome({ refreshing }: { refreshing: boolean }) {
    const { decryptToken, token } = useAuthSession()
    const [data, setData] = useState<Props>([])
    const [loading, setLoading] = useState(true)
 
-   async function handleData() {
+   async function handleData(loading: boolean) {
       try {
-         setLoading(true)
+         setLoading(loading)
          const hasil = await decryptToken(String(token?.current))
          const response = await apiGetDataHome({ cat: "progress", user: hasil })
          const convertedArray = response.data.map((item: { color: any; text: any; value: any; }) => ({
@@ -37,7 +37,12 @@ export default function ChartProgresHome() {
    }
 
    useEffect(() => {
-      handleData()
+      if (refreshing)
+         handleData(false)
+   }, [refreshing]);
+
+   useEffect(() => {
+      handleData(true)
    }, []);
 
    return (

components/home/discussionHome.tsx

@@ -17,15 +17,15 @@ type Props = {
    user: string
 }
 
-export default function DisccussionHome() {
+export default function DisccussionHome({ refreshing }: { refreshing: boolean }) {
    const { decryptToken, token } = useAuthSession()
    const [data, setData] = useState<Props[]>([])
    const [loading, setLoading] = useState(true)
 
 
-   async function handleData() {
+   async function handleData(loading: boolean) {
       try {
-         setLoading(true)
+         setLoading(loading)
          const hasil = await decryptToken(String(token?.current))
          const response = await apiGetDataHome({ cat: "discussion", user: hasil })
          setData(response.data)
@@ -37,7 +37,12 @@ export default function DisccussionHome() {
    }
 
    useEffect(() => {
-      handleData()
+      if (refreshing)
+         handleData(false)
+   }, [refreshing]);
+
+   useEffect(() => {
+      handleData(true)
    }, []);
 
    return (

components/home/divisionHome.tsx

@@ -15,7 +15,7 @@ type Props = {
    jumlah: number
 }
 
-export default function DivisionHome() {
+export default function DivisionHome({ refreshing }: { refreshing: boolean }) {
    const { decryptToken, token } = useAuthSession()
    const ref = React.useRef<ICarouselInstance>(null)
    const width = Dimensions.get("window").width
@@ -23,9 +23,9 @@ export default function DivisionHome() {
    const [loading, setLoading] = useState(true)
    const arrSkeleton = Array.from({ length: 2 }, (_, index) => index)
 
-   async function handleData() {
+   async function handleData(loading: boolean) {
       try {
-         setLoading(true)
+         setLoading(loading)
          const hasil = await decryptToken(String(token?.current))
          const response = await apiGetDataHome({ cat: "division", user: hasil })
          setData(response.data)
@@ -37,14 +37,19 @@ export default function DivisionHome() {
    }
 
    useEffect(() => {
-      handleData()
+      if (refreshing)
+         handleData(false)
+   }, [refreshing]);
+
+   useEffect(() => {
+      handleData(true)
    }, []);
 
 
 
    return (
       <View style={[Styles.mb15]}>
-         <Text style={[Styles.textDefaultSemiBold, Styles.mv10]}>Divisi Teraktif</Text>
+         <Text style={[Styles.textDefaultSemiBold, Styles.mb10]}>Divisi Teraktif</Text>
          {
             loading ?
                arrSkeleton.map((item, index) => (

components/home/eventHome.tsx

@@ -22,14 +22,14 @@ type Props = {
    user_name: string
 }
 
-export default function EventHome() {
+export default function EventHome({ refreshing }: { refreshing: boolean }) {
    const { decryptToken, token } = useAuthSession()
    const [data, setData] = useState<Props[]>([])
    const [loading, setLoading] = useState(true)
 
-   async function handleData() {
+   async function handleData(loading: boolean) {
       try {
-         setLoading(true)
+         setLoading(loading)
          const hasil = await decryptToken(String(token?.current))
          const response = await apiGetDataHome({ cat: "event", user: hasil })
          setData(response.data)
@@ -41,7 +41,12 @@ export default function EventHome() {
    }
 
    useEffect(() => {
-      handleData()
+      if (refreshing)
+         handleData(false)
+   }, [refreshing]);
+
+   useEffect(() => {
+      handleData(true)
    }, []);
 
    return (

components/home/projectHome.tsx

@@ -20,16 +20,16 @@ type Props = {
    createdAt: string
 }
 
-export default function ProjectHome() {
+export default function ProjectHome({ refreshing }: { refreshing: boolean }) {
    const { decryptToken, token } = useAuthSession()
    const ref = React.useRef<ICarouselInstance>(null);
    const width = Dimensions.get("window").width;
    const [data, setData] = useState<Props[]>([])
    const [loading, setLoading] = useState(true)
 
-   async function handleData() {
+   async function handleData(loading: boolean) {
       try {
-         setLoading(true)
+         setLoading(loading)
          const hasil = await decryptToken(String(token?.current))
          const response = await apiGetDataHome({ cat: "kegiatan", user: hasil })
          setData(response.data)
@@ -41,12 +41,17 @@ export default function ProjectHome() {
    }
 
    useEffect(() => {
-      handleData()
+      if (refreshing)
+         handleData(false)
+   }, [refreshing]);
+
+   useEffect(() => {
+      handleData(true)
    }, []);
 
    return (
       <View style={[Styles.mb15]}>
-         <Text style={[Styles.textDefaultSemiBold, Styles.mv10]}>Kegiatan Terupdate</Text>
+         <Text style={[Styles.textDefaultSemiBold, Styles.mb10]}>Kegiatan Terupdate</Text>
          {
             loading ? (<Skeleton width={100} height={150} borderRadius={10} widthType="percent" />)
                :