upd: refresh division detail home

Deskripsi:
- refresh load pada halaman home detail division

No Issues

app/(application)/division/[id]/index.tsx

@@ -10,7 +10,7 @@ import { apiGetDivisionOneDetail } from "@/lib/api"
 import { useAuthSession } from "@/providers/AuthProvider"
 import { router, Stack, useLocalSearchParams } from "expo-router"
 import { useEffect, useState } from "react"
-import { SafeAreaView, ScrollView, View } from "react-native"
+import { RefreshControl, SafeAreaView, ScrollView, View } from "react-native"
 
 type Props = {
    id: string,
@@ -26,11 +26,12 @@ export default function DetailDivisionFitur() {
    const { id } = useLocalSearchParams<{ id: string }>()
    const [data, setData] = useState<Props>()
    const [loading, setLoading] = useState(true)
+   const [refreshing, setRefreshing] = useState(false)
 
 
-   async function handleLoad() {
+   async function handleLoad(loading: boolean) {
       try {
-         setLoading(true)
+         setLoading(loading)
          const hasil = await decryptToken(String(token?.current))
          const response = await apiGetDivisionOneDetail({ user: hasil, id })
          setData(response.data.division)
@@ -42,9 +43,16 @@ export default function DetailDivisionFitur() {
    }
 
    useEffect(() => {
-      handleLoad()
+      handleLoad(true)
    }, [])
 
+   const handleRefresh = async () => {
+      setRefreshing(true)
+      handleLoad(false)
+      await new Promise(resolve => setTimeout(resolve, 2000));
+      setRefreshing(false)
+   };
+
    return (
       <SafeAreaView>
          <Stack.Screen
@@ -55,13 +63,21 @@ export default function DetailDivisionFitur() {
                headerRight: () => <HeaderRightDivisionDetail id={id} />,
             }}
          />
-         <ScrollView>
-            <CaraouselHome />
+         <ScrollView
+            refreshControl={
+               <RefreshControl
+                  refreshing={refreshing}
+                  onRefresh={handleRefresh}
+               />
+            }
+            showsVerticalScrollIndicator={false}
+         >
+            <CaraouselHome refreshing={refreshing} />
             <View style={[Styles.ph15, Styles.mb100]}>
-               <FiturDivisionDetail />
-               <TaskDivisionDetail />
-               <FileDivisionDetail />
-               <DiscussionDivisionDetail />
+               <FiturDivisionDetail refreshing={refreshing}/>
+               <TaskDivisionDetail refreshing={refreshing}/>
+               <FileDivisionDetail refreshing={refreshing}/>
+               <DiscussionDivisionDetail refreshing={refreshing}/>
             </View>
          </ScrollView>
       </SafeAreaView>

app/(application)/home.tsx

@@ -41,8 +41,7 @@ export default function Home() {
 
    const handleRefresh = async () => {
       setRefreshing(true)
-      // await handleLoad('data')
-      // await handleLoad('progress')
+      handleUserLogin()
       await new Promise(resolve => setTimeout(resolve, 2000));
       setRefreshing(false)
    };

components/division/discussionDivisionDetail.tsx

@@ -16,15 +16,15 @@ type Props = {
   date: string;
 };
 
-export default function DiscussionDivisionDetail() {
+export default function DiscussionDivisionDetail({ refreshing }: { refreshing: boolean }) {
   const { token, decryptToken } = useAuthSession();
   const { id } = useLocalSearchParams<{ id: string }>();
   const [data, setData] = useState<Props[]>([]);
   const [loading, setLoading] = useState(true)
 
-  async function handleLoad() {
+  async function handleLoad(loading: boolean) {
     try {
-      setLoading(true)
+      setLoading(loading)
       const hasil = await decryptToken(String(token?.current));
       const response = await apiGetDivisionOneFeature({
         user: hasil,
@@ -40,8 +40,15 @@ export default function DiscussionDivisionDetail() {
   }
 
   useEffect(() => {
-    handleLoad();
-  }, []);
+    if (refreshing)
+      handleLoad(false)
+  }, [refreshing])
+
+  useEffect(() => {
+    handleLoad(true)
+  }, [])
+
+  
   return (
     <View style={[Styles.mb15]}>
       <Text style={[Styles.textDefaultSemiBold, Styles.mv10]}>Diskusi</Text>

components/division/fileDivisionDetail.tsx

@@ -24,7 +24,7 @@ type Props = {
    idStorage: string
 }
 
-export default function FileDivisionDetail() {
+export default function FileDivisionDetail({ refreshing }: { refreshing: boolean }) {
    const ref = React.useRef<ICarouselInstance>(null);
    const width = Dimensions.get("window").width;
    const [data, setData] = useState<Props[]>([])
@@ -33,9 +33,9 @@ export default function FileDivisionDetail() {
    const [loading, setLoading] = useState(true)
    const [loadingOpen, setLoadingOpen] = useState(false)
 
-   async function handleLoad() {
+   async function handleLoad(loading: boolean) {
       try {
-         setLoading(true)
+         setLoading(loading)
          const hasil = await decryptToken(String(token?.current))
          const response = await apiGetDivisionOneFeature({ user: hasil, id, cat: 'new-file' })
          setData(response.data)
@@ -47,7 +47,12 @@ export default function FileDivisionDetail() {
    }
 
    useEffect(() => {
-      handleLoad()
+      if (refreshing)
+         handleLoad(false)
+   }, [refreshing])
+
+   useEffect(() => {
+      handleLoad(true)
    }, [])
 
 

components/division/fiturDivisionDetail.tsx

@@ -16,7 +16,7 @@ type Props = {
    kalender: number
 }
 
-export default function FiturDivisionDetail() {
+export default function FiturDivisionDetail({ refreshing }: { refreshing: boolean }) {
    const { token, decryptToken } = useAuthSession()
    const { id } = useLocalSearchParams<{ id: string }>()
    const [data, setData] = useState<Props>({
@@ -36,7 +36,10 @@ export default function FiturDivisionDetail() {
       }
    }
 
-
+   useEffect(() => {
+      if (refreshing)
+         handleLoad()
+   }, [refreshing])
 
    useEffect(() => {
       handleLoad()

components/division/taskDivisionDetail.tsx

@@ -18,7 +18,7 @@ type Props = {
    projectTitle: string
 }
 
-export default function TaskDivisionDetail() {
+export default function TaskDivisionDetail({ refreshing }: { refreshing: boolean }) {
    const { token, decryptToken } = useAuthSession()
    const { id } = useLocalSearchParams<{ id: string }>()
    const [data, setData] = useState<Props[]>([])
@@ -26,9 +26,9 @@ export default function TaskDivisionDetail() {
    const width = Dimensions.get("window").width;
    const [loading, setLoading] = useState(true)
 
-   async function handleLoad() {
+   async function handleLoad(loading: boolean) {
       try {
-         setLoading(true)
+         setLoading(loading)
          const hasil = await decryptToken(String(token?.current))
          const response = await apiGetDivisionOneFeature({ user: hasil, id, cat: 'today-task' })
          setData(response.data)
@@ -40,7 +40,12 @@ export default function TaskDivisionDetail() {
    }
 
    useEffect(() => {
-      handleLoad()
+      if (refreshing)
+         handleLoad(false)
+   }, [refreshing])
+
+   useEffect(() => {
+      handleLoad(true)
    }, [])
 
    return (