upd: skeleton

Deskripsi:
- divisi
- detail divisi
- informasi divisi
- calender list
- calender detail
- history
- diskusi list
- detail diskusi
- list task divisi

NO Issuese

components/calendar/headerCalendarDetail.tsx

@@ -13,10 +13,11 @@ import DrawerBottom from "../drawerBottom"
 import MenuItemRow from "../menuItemRow"
 
 type Props = {
-   id: string | string[]
+   id: string | string[],
+   idReminder?: string
 }
 
-export default function HeaderRightCalendarDetail({ id }: Props) {
+export default function HeaderRightCalendarDetail({ id, idReminder }: Props) {
    const [isVisible, setVisible] = useState(false)
    const { token, decryptToken } = useAuthSession()
    const update = useSelector((state: any) => state.calendarUpdate)
@@ -51,7 +52,7 @@ export default function HeaderRightCalendarDetail({ id }: Props) {
                   title="Tambah Anggota"
                   onPress={() => {
                      setVisible(false)
-                     router.push(`./${id}/add-member`)
+                     router.push(`./${idReminder}/add-member`)
                   }}
                />
                <MenuItemRow

components/division/discussionDivisionDetail.tsx

@@ -5,6 +5,7 @@ import { router, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
 import { Text, View } from "react-native";
 import DiscussionItem from "../discussionItem";
+import Skeleton from "../skeleton";
 
 type Props = {
   id: string;
@@ -18,9 +19,11 @@ export default function DiscussionDivisionDetail() {
   const { token, decryptToken } = useAuthSession();
   const { id } = useLocalSearchParams<{ id: string }>();
   const [data, setData] = useState<Props[]>([]);
+  const [loading, setLoading] = useState(true)
 
   async function handleLoad() {
     try {
+      setLoading(true)
       const hasil = await decryptToken(String(token?.current));
       const response = await apiGetDivisionOneFeature({
         user: hasil,
@@ -30,6 +33,8 @@ export default function DiscussionDivisionDetail() {
       setData(response.data);
     } catch (error) {
       console.error(error);
+    } finally {
+      setLoading(false)
     }
   }
 
@@ -40,25 +45,34 @@ export default function DiscussionDivisionDetail() {
     <View style={[Styles.mb15]}>
       <Text style={[Styles.textDefaultSemiBold, Styles.mv10]}>Diskusi</Text>
       <View style={[Styles.wrapPaper]}>
-        {data.length > 0 ? (
-          data.map((item, index) => (
-            <DiscussionItem
-              key={index}
-              title={item.desc}
-              user={item.user}
-              date={item.date}
-              onPress={() => {
-                router.push(`/division/${id}/discussion/${item.id}`);
-              }}
-            />
-          ))
-        ) : (
-          <Text
-            style={[Styles.textDefault, Styles.cGray, { textAlign: "center" }]}
-          >
-            Tidak ada diskusi
-          </Text>
-        )}
+
+        {
+          loading ?
+            <>
+              <Skeleton width={100} height={70} borderRadius={10} widthType="percent" />
+              <Skeleton width={100} height={70} borderRadius={10} widthType="percent" />
+            </>
+            :
+            data.length > 0 ? (
+              data.map((item, index) => (
+                <DiscussionItem
+                  key={index}
+                  title={item.desc}
+                  user={item.user}
+                  date={item.date}
+                  onPress={() => {
+                    router.push(`/division/${id}/discussion/${item.id}`);
+                  }}
+                />
+              ))
+            ) : (
+              <Text
+                style={[Styles.textDefault, Styles.cGray, { textAlign: "center" }]}
+              >
+                Tidak ada diskusi
+              </Text>
+            )
+        }
       </View>
     </View>
   );

components/division/fileDivisionDetail.tsx

@@ -1,11 +1,12 @@
 import Styles from "@/constants/Styles";
+import { apiGetDivisionOneFeature } from "@/lib/api";
+import { useAuthSession } from "@/providers/AuthProvider";
 import { Feather } from "@expo/vector-icons";
+import { useLocalSearchParams } from "expo-router";
 import React, { useEffect, useState } from "react";
 import { Dimensions, Text, View } from "react-native";
 import Carousel, { ICarouselInstance } from "react-native-reanimated-carousel";
-import { useAuthSession } from "@/providers/AuthProvider";
-import { useLocalSearchParams } from "expo-router";
-import { apiGetDivisionOneFeature } from "@/lib/api";
+import Skeleton from "../skeleton";
 
 type Props = {
    id: string
@@ -21,14 +22,18 @@ export default function FileDivisionDetail() {
    const [data, setData] = useState<Props[]>([])
    const { token, decryptToken } = useAuthSession()
    const { id } = useLocalSearchParams<{ id: string }>()
+   const [loading, setLoading] = useState(true)
 
    async function handleLoad() {
       try {
+         setLoading(true)
          const hasil = await decryptToken(String(token?.current))
          const response = await apiGetDivisionOneFeature({ user: hasil, id, cat: 'new-file' })
          setData(response.data)
       } catch (error) {
          console.error(error)
+      } finally {
+         setLoading(false)
       }
    }
 
@@ -40,40 +45,47 @@ export default function FileDivisionDetail() {
       <View style={[Styles.mb15]}>
          <Text style={[Styles.textDefaultSemiBold, Styles.mv10]}>Dokumen Terkini</Text>
          {
-            data.length > 0 ?
-               <Carousel
-                  ref={ref}
-                  width={width}
-                  height={115}
-                  data={data}
-                  loop={true}
-                  autoPlay={false}
-                  autoPlayReverse={false}
-                  pagingEnabled={true}
-                  snapEnabled={true}
-                  vertical={false}
-                  style={{
-                     width: width,
-                  }}
-                  mode="parallax"
-                  modeConfig={{
-                     parallaxScrollingScale: 1,
-                     parallaxScrollingOffset: 280,
-                  }}
-                  renderItem={({ index }) => (
-                     <View style={{ margin: 'auto', width: '28%' }}>
-                        <View style={{ alignItems: 'center' }}>
-                           <View style={[Styles.wrapPaper, { alignItems: 'center' }]}>
-                              <Feather name="file-text" size={50} color="black" style={Styles.mr05} />
-                           </View>
-                        </View>
-                        <Text style={[Styles.textMediumNormal, { textAlign: 'center' }]} numberOfLines={1}>{data[index].name}.{data[index].extension}</Text>
-                     </View>
-
-                  )}
-               />
+            loading ?
+               <View style={[Styles.rowSpaceBetween]}>
+                  <Skeleton width={30} widthType="percent" height={80} borderRadius={10} />
+                  <Skeleton width={30} widthType="percent" height={80} borderRadius={10} />
+                  <Skeleton width={30} widthType="percent" height={80} borderRadius={10} />
+               </View>
                :
-               <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada file</Text>
+               data.length > 0 ?
+                  <Carousel
+                     ref={ref}
+                     width={width}
+                     height={115}
+                     data={data}
+                     loop={true}
+                     autoPlay={false}
+                     autoPlayReverse={false}
+                     pagingEnabled={true}
+                     snapEnabled={true}
+                     vertical={false}
+                     style={{
+                        width: width,
+                     }}
+                     mode="parallax"
+                     modeConfig={{
+                        parallaxScrollingScale: 1,
+                        parallaxScrollingOffset: 280,
+                     }}
+                     renderItem={({ index }) => (
+                        <View style={{ margin: 'auto', width: '28%' }}>
+                           <View style={{ alignItems: 'center' }}>
+                              <View style={[Styles.wrapPaper, { alignItems: 'center' }]}>
+                                 <Feather name="file-text" size={50} color="black" style={Styles.mr05} />
+                              </View>
+                           </View>
+                           <Text style={[Styles.textMediumNormal, { textAlign: 'center' }]} numberOfLines={1}>{data[index].name}.{data[index].extension}</Text>
+                        </View>
+
+                     )}
+                  />
+                  :
+                  <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada file</Text>
          }
       </View>
    )

components/division/taskDivisionDetail.tsx

@@ -6,6 +6,7 @@ import { useLocalSearchParams } from "expo-router";
 import React, { useEffect, useState } from "react";
 import { Dimensions, Text, View } from "react-native";
 import Carousel, { ICarouselInstance } from "react-native-reanimated-carousel";
+import Skeleton from "../skeleton";
 
 type Props = {
    id: string
@@ -22,14 +23,18 @@ export default function TaskDivisionDetail() {
    const [data, setData] = useState<Props[]>([])
    const ref = React.useRef<ICarouselInstance>(null);
    const width = Dimensions.get("window").width;
+   const [loading, setLoading] = useState(true)
 
    async function handleLoad() {
       try {
+         setLoading(true)
          const hasil = await decryptToken(String(token?.current))
          const response = await apiGetDivisionOneFeature({ user: hasil, id, cat: 'today-task' })
          setData(response.data)
       } catch (error) {
          console.error(error)
+      } finally {
+         setLoading(false)
       }
    }
 
@@ -40,32 +45,36 @@ export default function TaskDivisionDetail() {
    return (
       <View>
          <Text style={[Styles.textDefaultSemiBold, Styles.mb05]}>Tugas Hari Ini</Text>
+
          {
-            data.length > 0 ?
-               <Carousel
-                  ref={ref}
-                  style={{ width: "100%" }}
-                  width={width * 0.8}
-                  height={100}
-                  data={data}
-                  loop={true}
-                  autoPlay={false}
-                  autoPlayReverse={false}
-                  pagingEnabled={true}
-                  snapEnabled={true}
-                  vertical={false}
-                  renderItem={({ index }) => (
-                     <View style={[Styles.wrapPaper, { width: '95%' }]}>
-                        <Text style={[Styles.textDefaultSemiBold]} numberOfLines={1} ellipsizeMode="tail">{data[index].title} - {data[index].projectTitle}</Text>
-                        <View style={[Styles.rowItemsCenter, Styles.mt10]}>
-                           <Feather name="clock" size={18} color="grey" style={Styles.mr05} />
-                           <Text style={[Styles.textInformation]} numberOfLines={1} ellipsizeMode="tail">{data[index].dateStart} - {data[index].dateEnd}</Text>
-                        </View>
-                     </View>
-                  )}
-               />
+            loading ?
+               <Skeleton width={100} widthType="percent" height={60} borderRadius={10} />
                :
-               <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada tugas</Text>
+               data.length > 0 ?
+                  <Carousel
+                     ref={ref}
+                     style={{ width: "100%" }}
+                     width={width * 0.8}
+                     height={100}
+                     data={data}
+                     loop={true}
+                     autoPlay={false}
+                     autoPlayReverse={false}
+                     pagingEnabled={true}
+                     snapEnabled={true}
+                     vertical={false}
+                     renderItem={({ index }) => (
+                        <View style={[Styles.wrapPaper, { width: '95%' }]}>
+                           <Text style={[Styles.textDefaultSemiBold]} numberOfLines={1} ellipsizeMode="tail">{data[index].title} - {data[index].projectTitle}</Text>
+                           <View style={[Styles.rowItemsCenter, Styles.mt10]}>
+                              <Feather name="clock" size={18} color="grey" style={Styles.mr05} />
+                              <Text style={[Styles.textInformation]} numberOfLines={1} ellipsizeMode="tail">{data[index].dateStart} - {data[index].dateEnd}</Text>
+                           </View>
+                        </View>
+                     )}
+                  />
+                  :
+                  <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada tugas</Text>
          }
       </View>
    )