upd: skeleton task divisi

Deskripsi:
- detail task divisi

No Issues

app/(application)/division/index.tsx

@@ -193,7 +193,7 @@ export default function ListDivision() {
                               {data.map((item, index) => (
                                  <BorderBottomItem
                                     key={index}
-                                    onPress={() => { }}
+                                    onPress={() => { router.push(`/division/${item.id}`) }}
                                     borderType="bottom"
                                     icon={
                                        <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>

components/project/sectionFile.tsx

@@ -169,6 +169,7 @@ export default function SectionFile({ status, member }: { status: number | undef
                                  title={item.name + '.' + item.extension}
                                  titleWeight="normal"
                                  onPress={() => { setIdSelect(item.id); setModal(true) }}
+                                 width={65}
                               />
                            )
                         })

components/task/sectionFileTask.tsx

@@ -11,6 +11,7 @@ import AlertKonfirmasi from "../alertKonfirmasi";
 import BorderBottomItem from "../borderBottomItem";
 import DrawerBottom from "../drawerBottom";
 import MenuItemRow from "../menuItemRow";
+import Skeleton from "../skeleton";
 
 type Props = {
    id: string
@@ -27,21 +28,30 @@ export default function SectionFileTask() {
    const [idSelect, setIdSelect] = useState('')
    const update = useSelector((state: any) => state.taskUpdate)
    const dispatch = useDispatch()
+   const [loading, setLoading] = useState(true)
+   const arrSkeleton = Array.from({ length: 5 })
 
-   async function handleLoad() {
+   async function handleLoad(loading: boolean) {
       try {
+         setLoading(loading)
          const hasil = await decryptToken(String(token?.current))
          const response = await apiGetTaskOne({ id: detail, user: hasil, cat: 'file' })
          setData(response.data)
       } catch (error) {
          console.error(error)
+      } finally {
+         setLoading(false)
       }
    }
 
    useEffect(() => {
-      handleLoad()
+      handleLoad(false)
    }, [update.file])
 
+   useEffect(() => {
+      handleLoad(true)
+   }, [])
+
    async function handleDelete() {
       try {
          const hasil = await decryptToken(String(token?.current));
@@ -66,6 +76,13 @@ export default function SectionFileTask() {
             <Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>File</Text>
             <View style={[Styles.wrapPaper]}>
                {
+                  loading ?
+                     arrSkeleton.map((item, index) => {
+                        return (
+                           <Skeleton key={index} width={100} height={40} widthType="percent" borderRadius={10} />
+                        )
+                     })
+                     :
                      data.length > 0 ?
                         data.map((item, index) => {
                            return (
@@ -76,6 +93,7 @@ export default function SectionFileTask() {
                                  title={item.name + '.' + item.extension}
                                  titleWeight="normal"
                                  onPress={() => { setIdSelect(item.id); setModal(true) }}
+                                 width={65}
                               />
                            )
                         })

components/task/sectionMemberTask.tsx

@@ -12,6 +12,7 @@ import BorderBottomItem from "../borderBottomItem";
 import DrawerBottom from "../drawerBottom";
 import ImageUser from "../imageNew";
 import MenuItemRow from "../menuItemRow";
+import SkeletonTwoItem from "../skeletonTwoItem";
 
 type Props = {
    id: string;
@@ -29,13 +30,16 @@ export default function SectionMemberTask() {
    const [data, setData] = useState<Props[]>([]);
    const dispatch = useDispatch();
    const update = useSelector((state: any) => state.taskUpdate);
+   const [loading, setLoading] = useState(true)
+   const arrSkeleton = Array.from({ length: 3 })
    const [memberChoose, setMemberChoose] = useState({
       id: "",
       name: "",
    });
 
-   async function handleLoad() {
+   async function handleLoad(loading: boolean) {
       try {
+         setLoading(loading)
          const hasil = await decryptToken(String(token?.current));
          const response = await apiGetTaskOne({
             id: detail,
@@ -45,13 +49,19 @@ export default function SectionMemberTask() {
          setData(response.data);
       } catch (error) {
          console.error(error);
+      } finally {
+         setLoading(false)
       }
    }
 
    useEffect(() => {
-      handleLoad();
+      handleLoad(false);
    }, [update.member]);
 
+   useEffect(() => {
+      handleLoad(true);
+   }, [])
+
 
    async function handleDeleteMember() {
       try {
@@ -83,7 +93,15 @@ export default function SectionMemberTask() {
             </View>
 
             <View style={[Styles.wrapPaper]}>
-               {data.length > 0 ? (
+               {
+                  loading ?
+                     arrSkeleton.map((item, index) => {
+                        return (
+                           <SkeletonTwoItem key={index} />
+                        )
+                     })
+                     :
+                     data.length > 0 ? (
                         data.map((item, index) => {
                            return (
                               <BorderBottomItem
@@ -115,7 +133,8 @@ export default function SectionMemberTask() {
                         >
                            Tidak ada anggota
                         </Text>
-               )}
+                     )
+               }
             </View>
          </View>
 

components/task/sectionTanggalTugasTask.tsx

@@ -12,6 +12,7 @@ import DrawerBottom from "../drawerBottom";
 import ItemSectionTanggalTugas from "../itemSectionTanggalTugas";
 import MenuItemRow from "../menuItemRow";
 import ModalSelect from "../modalSelect";
+import SkeletonTask from "../skeletonTask";
 
 
 type Props = {
@@ -28,6 +29,8 @@ export default function SectionTanggalTugasTask() {
    const [isModal, setModal] = useState(false)
    const [isSelect, setSelect] = useState(false)
    const { token, decryptToken } = useAuthSession()
+   const [loading, setLoading] = useState(true)
+   const arrSkeleton = Array.from({ length: 5 })
    const { id, detail } = useLocalSearchParams<{ id: string, detail: string }>();
    const [data, setData] = useState<Props[]>([])
    const [tugas, setTugas] = useState({
@@ -35,13 +38,16 @@ export default function SectionTanggalTugasTask() {
       status: 0,
    })
 
-   async function handleLoad() {
+   async function handleLoad(loading: boolean) {
       try {
+         setLoading(loading)
          const hasil = await decryptToken(String(token?.current))
          const response = await apiGetTaskOne({ id: detail, user: hasil, cat: 'task' })
          setData(response.data)
       } catch (error) {
          console.error(error)
+      } finally {
+         setLoading(false)
       }
    }
 
@@ -68,10 +74,15 @@ export default function SectionTanggalTugasTask() {
    }
 
    useEffect(() => {
-      handleLoad()
+      handleLoad(false)
    }, [update.task])
 
 
+   useEffect(() => {
+      handleLoad(true)
+   }, [])
+
+
    async function handleDelete() {
       try {
          const hasil = await decryptToken(String(token?.current));
@@ -100,6 +111,13 @@ export default function SectionTanggalTugasTask() {
             <Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>Tanggal & Tugas</Text>
             <View style={[Styles.wrapPaper]}>
                {
+                  loading ?
+                     arrSkeleton.map((item, index) => {
+                        return (
+                           <SkeletonTask key={index} />
+                        )
+                     })
+                     :
                      data.length > 0
                         ?
                         data.map((item, index) => {