wibu/mobile-darmasaba
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

upd: skeleton

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

NO Issuese
This commit is contained in:
amel
2025-06-04 17:38:36 +08:00
parent 1e6a6d08ae
commit 68c6a745ef
13 changed files with 560 additions and 340 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/(application)/division/[id]/(fitur-division)/calendar/[detail]/add-member.tsx
View File

@@ -144,6 +144,7 @@ export default function AddMemberCalendarEvent() {
style={[Styles.itemSelectModal]}
onPress={() => {
!found && onChoose(item.idUser, item.name, item.img)
onChoose(item.idUser, item.name, item.img)
}}
>
<View style={[Styles.rowItemsCenter]}>

40
app/(application)/division/[id]/(fitur-division)/calendar/[detail]/index.tsx
View File

@@ -5,6 +5,7 @@ import HeaderRightCalendarDetail from "@/components/calendar/headerCalendarDetai
import DrawerBottom from "@/components/drawerBottom"
import ImageUser from "@/components/imageNew"
import MenuItemRow from "@/components/menuItemRow"
import Skeleton from "@/components/skeleton"
import Styles from "@/constants/Styles"
import { apiDeleteCalendarMember, apiGetCalendarOne, apiGetDivisionOneFeature } from "@/lib/api"
import { setUpdateCalendar } from "@/lib/calendarUpdate"
@@ -49,6 +50,8 @@ export default function DetailEventCalendar() {
const dispatch = useDispatch()
const entityUser = useSelector((state: any) => state.user);
const [isMemberDivision, setIsMemberDivision] = useState(false);
const [loading, setLoading] = useState(true)
const arrSkeleton = Array.from({ length: 5 })
async function handleCheckMember() {
try {
@@ -67,6 +70,7 @@ export default function DetailEventCalendar() {
async function handleLoad() {
try {
setLoading(true)
const hasil = await decryptToken(String(token?.current));
const response = await apiGetCalendarOne({
user: hasil,
@@ -76,6 +80,8 @@ export default function DetailEventCalendar() {
setData(response.data);
} catch (error) {
console.error(error);
} finally {
setLoading(false)
}
}
@@ -131,7 +137,7 @@ export default function DetailEventCalendar() {
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
headerTitle: 'Detail Acara',
headerTitleAlign: 'center',
headerRight: () => (entityUser.role == "user" || entityUser.role == "coadmin") && !isMemberDivision ? <></> : <HeaderRightCalendarDetail id={String(data?.idCalendar)} />
headerRight: () => (entityUser.role == "user" || entityUser.role == "coadmin") && !isMemberDivision ? <></> : <HeaderRightCalendarDetail id={String(data?.idCalendar)} idReminder={String(detail)} />
}}
/>
<ScrollView>
@@ -139,18 +145,37 @@ export default function DetailEventCalendar() {
<View style={[Styles.wrapPaper, Styles.mb15]}>
<View style={Styles.rowItemsCenter}>
<MaterialCommunityIcons name="calendar-text" size={30} color="black" style={Styles.mr10} />
<Text style={[Styles.textDefault]}>{data?.title}</Text>
{
loading ?
<Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
: <Text style={[Styles.textDefault]}>{data?.title}</Text>
}
</View>
<View style={[Styles.rowItemsCenter, Styles.mt10]}>
<MaterialCommunityIcons name="calendar-month-outline" size={30} color="black" style={Styles.mr10} />
{
loading ?
<Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
:
<Text style={[Styles.textDefault]}>{data?.dateStart}</Text>
}
</View>
<View style={[Styles.rowItemsCenter, Styles.mt10]}>
<MaterialCommunityIcons name="clock-outline" size={30} color="black" style={Styles.mr10} />
{
loading ?
<Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
:
<Text style={[Styles.textDefault]}>{data?.timeStart} | {data?.timeEnd}</Text>
}
</View>
<View style={[Styles.rowItemsCenter, Styles.mt10]}>
<MaterialCommunityIcons name="repeat" size={30} color="black" style={Styles.mr10} />
{
loading ?
<Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
:
<Text style={[Styles.textDefault]}>
{
data?.repeatEventTyper.toString() === 'once' ? 'Acara 1 Kali' :
@@ -161,14 +186,25 @@ export default function DetailEventCalendar() {
''
}
</Text>
}
</View>
<View style={[Styles.rowItemsCenter, Styles.mt10]}>
<MaterialCommunityIcons name="link-variant" size={30} color="black" style={Styles.mr10} />
{
loading ?
<Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
:
<Text style={[Styles.textDefault]}>{data?.linkMeet ? data.linkMeet : '-'}</Text>
}
</View>
<View style={[Styles.rowItemsCenter, Styles.mt10]}>
<MaterialCommunityIcons name="card-text-outline" size={30} color="black" style={Styles.mr10} />
{
loading ?
<Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
:
<Text style={[Styles.textDefault]}>{data?.desc}</Text>
}
</View>
</View>

14
app/(application)/division/[id]/(fitur-division)/calendar/history.tsx
View File

@@ -1,6 +1,7 @@
import ButtonBackHeader from "@/components/buttonBackHeader";
import ItemHistoryEvent from "@/components/calendar/itemHistoryEvent";
import InputSearch from "@/components/inputSearch";
import Skeleton from "@/components/skeleton";
import Styles from "@/constants/Styles";
import { apiGetCalendarHistory } from "@/lib/api";
import { useAuthSession } from "@/providers/AuthProvider";
@@ -18,14 +19,19 @@ export default function CalendarHistory() {
const { token, decryptToken } = useAuthSession();
const [data, setData] = useState<Props[]>([])
const [search, setSearch] = useState('')
const [loading, setLoading] = useState(true)
const arrSkeleton = Array.from({ length: 5 })
async function handleLoad() {
try {
setLoading(true)
const hasil = await decryptToken(String(token?.current));
const response = await apiGetCalendarHistory({ user: hasil, search: search, division: id });
setData(response.data);
} catch (error) {
console.error(error);
} finally {
setLoading(false)
}
}
@@ -45,7 +51,15 @@ export default function CalendarHistory() {
<ScrollView>
<View style={[Styles.p15]}>
<InputSearch onChange={(val) => setSearch(val)} />
{
loading ?
arrSkeleton.map((item, index) => (
<Skeleton key={index} width={100} height={60} widthType="percent" borderRadius={10} />
))
:
<ItemHistoryEvent data={data} />
}
</View>
</ScrollView>
</SafeAreaView>

29
app/(application)/division/[id]/(fitur-division)/calendar/index.tsx
View File

@@ -2,6 +2,7 @@ import ButtonBackHeader from "@/components/buttonBackHeader";
import HeaderRightCalendarList from "@/components/calendar/headerCalendarList";
import ItemDateCalendar from "@/components/calendar/itemDateCalendar";
import EventItem from "@/components/eventItem";
import Skeleton from "@/components/skeleton";
import Styles from "@/constants/Styles";
import { apiGetCalendarByDateDivision, apiGetIndicatorCalendar } from "@/lib/api";
import { useAuthSession } from "@/providers/AuthProvider";
@@ -15,7 +16,7 @@ import Datepicker, {
CalendarComponents,
CalendarDay
} from "react-native-ui-datepicker";
import { useDispatch, useSelector } from "react-redux";
import { useSelector } from "react-redux";
type Props = {
id: string;
@@ -38,10 +39,12 @@ export default function CalendarDivision() {
const [dataIndicator, setDataIndicator] = useState<any>([]);
const [month, setMonth] = useState<number>(new Date().getMonth());
const update = useSelector((state: any) => state.calendarUpdate)
const [loading, setLoading] = useState(true)
async function handleLoad() {
async function handleLoad(loading: boolean) {
try {
setLoading(loading)
const hasil = await decryptToken(String(token?.current));
const response = await apiGetCalendarByDateDivision({
user: hasil,
@@ -51,6 +54,8 @@ export default function CalendarDivision() {
setData(response.data);
} catch (error) {
console.error(error);
} finally {
setLoading(false)
}
}
@@ -70,8 +75,12 @@ export default function CalendarDivision() {
}
useEffect(() => {
handleLoad();
}, [selected, update.data]);
handleLoad(true)
}, [selected])
useEffect(() => {
handleLoad(false);
}, [update.data]);
useEffect(() => {
handleLoadIndicator();
@@ -133,7 +142,14 @@ export default function CalendarDivision() {
<View style={[Styles.mb15, Styles.mt15]}>
<Text style={[Styles.textDefaultSemiBold, Styles.mb05]}>Acara</Text>
<View style={[Styles.wrapPaper]}>
{data.length > 0 ? (
{
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) => (
<EventItem
key={index}
@@ -149,7 +165,8 @@ export default function CalendarDivision() {
))
) : (
<Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada acara</Text>
)}
)
}
</View>
</View>
</View>

40
app/(application)/division/[id]/(fitur-division)/discussion/[detail]/index.tsx
View File

@@ -4,6 +4,8 @@ import HeaderRightDiscussionDetail from "@/components/discussion/headerDiscussio
import ImageUser from "@/components/imageNew";
import { InputForm } from "@/components/inputForm";
import LabelStatus from "@/components/labelStatus";
import Skeleton from "@/components/skeleton";
import SkeletonContent from "@/components/skeletonContent";
import Styles from "@/constants/Styles";
import {
apiGetDiscussionOne,
@@ -50,9 +52,13 @@ export default function DiscussionDetail() {
const [isMemberDivision, setIsMemberDivision] = useState(false);
const [isAdminDivision, setIsAdminDivision] = useState(false);
const [isCreator, setIsCreator] = useState(false);
const [loading, setLoading] = useState(true)
const [loadingKomentar, setLoadingKomentar] = useState(true)
const arrSkeleton = Array.from({ length: 3 })
async function handleLoad() {
async function handleLoad(loading: boolean) {
try {
setLoading(loading)
const hasil = await decryptToken(String(token?.current));
const response = await apiGetDiscussionOne({
id: detail,
@@ -63,11 +69,14 @@ export default function DiscussionDetail() {
setIsCreator(response.data.createdBy == hasil);
} catch (error) {
console.error(error);
} finally {
setLoading(false)
}
}
async function handleLoadComment() {
async function handleLoadComment(loading: boolean) {
try {
setLoadingKomentar(loading)
const hasil = await decryptToken(String(token?.current));
const response = await apiGetDiscussionOne({
id: detail,
@@ -77,6 +86,8 @@ export default function DiscussionDetail() {
setDataComment(response.data);
} catch (error) {
console.error(error);
} finally {
setLoadingKomentar(false)
}
}
@@ -102,11 +113,12 @@ export default function DiscussionDetail() {
}
useEffect(() => {
handleLoad();
handleLoad(false);
}, [update.data]);
useEffect(() => {
handleLoadComment();
handleLoad(true)
handleLoadComment(true);
handleCheckMember();
}, []);
@@ -120,7 +132,7 @@ export default function DiscussionDetail() {
});
if (response.success) {
setKomentar("");
handleLoadComment();
handleLoadComment(false);
}
} catch (error) {
console.error(error);
@@ -155,6 +167,10 @@ export default function DiscussionDetail() {
<View style={{ flex: 1 }}>
<ScrollView>
<View style={[Styles.p15, Styles.mb100]}>
{
loading ?
<SkeletonContent />
:
<BorderBottomItem
descEllipsize={false}
width={60}
@@ -195,8 +211,16 @@ export default function DiscussionDetail() {
</View>
}
/>
}
<View style={[Styles.p15]}>
{dataComment.map((item, index) => (
{
loadingKomentar ?
arrSkeleton.map((item, index) => (
<Skeleton key={index} width={100} widthType="percent" height={40} borderRadius={5} />
))
:
dataComment.map((item, index) => (
<BorderBottomItem
key={index}
width={55}
@@ -212,7 +236,9 @@ export default function DiscussionDetail() {
desc={item.comment}
descEllipsize={false}
/>
))}
))
}
</View>
</View>
</ScrollView>

31
app/(application)/division/[id]/(fitur-division)/discussion/index.tsx
View File

@@ -3,8 +3,9 @@ import ButtonTab from "@/components/buttonTab";
import ImageUser from "@/components/imageNew";
import InputSearch from "@/components/inputSearch";
import LabelStatus from "@/components/labelStatus";
import SkeletonContent from "@/components/skeletonContent";
import Styles from "@/constants/Styles";
import { apiGetDiscussion, apiGetDivisionOneFeature } from "@/lib/api";
import { apiGetDiscussion } from "@/lib/api";
import { useAuthSession } from "@/providers/AuthProvider";
import { AntDesign, Feather, Ionicons } from "@expo/vector-icons";
import { router, useLocalSearchParams } from "expo-router";
@@ -32,21 +33,30 @@ export default function DiscussionDivision() {
const { token, decryptToken } = useAuthSession()
const [search, setSearch] = useState('')
const update = useSelector((state: any) => state.discussionUpdate);
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 apiGetDiscussion({ user: hasil, search, division: id, active })
setData(response.data)
} catch (error) {
console.error(error)
} finally {
setLoading(false)
}
}
useEffect(() => {
handleLoad(false)
}, [update.data])
useEffect(() => {
handleLoad()
}, [active, search, update.data])
handleLoad(true)
}, [active, search])
return (
<SafeAreaView>
@@ -70,7 +80,15 @@ export default function DiscussionDivision() {
</View>
<InputSearch onChange={setSearch} />
<View>
{data.length > 0 ?
{
loading ?
arrSkeleton.map((item: any, i: number) => {
return (
<SkeletonContent key={i} />
)
})
:
data.length > 0 ?
data.map((item, index) => (
<BorderBottomItem
key={index}
@@ -98,7 +116,8 @@ export default function DiscussionDivision() {
:
(
<Text style={[Styles.textDefault, Styles.cGray, Styles.mv10, { textAlign: "center" }]}>Tidak ada diskusi</Text>
)}
)
}
</View>
</View>
</ScrollView>

60
app/(application)/division/[id]/(fitur-division)/task/index.tsx
View File

@@ -4,6 +4,8 @@ import InputSearch from "@/components/inputSearch";
import LabelStatus from "@/components/labelStatus";
import PaperGridContent from "@/components/paperGridContent";
import ProgressBar from "@/components/progressBar";
import Skeleton from "@/components/skeleton";
import SkeletonTwoItem from "@/components/skeletonTwoItem";
import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import { apiGetTask } from "@/lib/api";
@@ -34,9 +36,12 @@ export default function ListTask() {
const [data, setData] = useState<Props[]>([]);
const [search, setSearch] = useState("");
const update = useSelector((state: any) => state.taskUpdate)
const [loading, setLoading] = useState(true)
const arrSkeleton = Array.from({ length: 3 })
async function handleLoad() {
async function handleLoad(loading: boolean) {
try {
setLoading(loading)
const hasil = await decryptToken(String(token?.current));
const response = await apiGetTask({
user: hasil,
@@ -47,12 +52,18 @@ export default function ListTask() {
setData(response.data);
} catch (error) {
console.error(error);
} finally {
setLoading(false)
}
}
useEffect(() => {
handleLoad();
}, [status, search, update.data]);
handleLoad(false)
}, [update.data])
useEffect(() => {
handleLoad(true);
}, [status, search]);
return (
<SafeAreaView>
@@ -138,20 +149,20 @@ export default function ListTask() {
/>
</Pressable>
</View>
{data.length > 0 ? (
<></>
) : (
<Text
style={[
Styles.textDefault,
Styles.cGray,
{ textAlign: "center" },
]}
>
Tidak ada data
</Text>
)}
{isList ? (
{
loading ?
isList ?
arrSkeleton.map((item, index) => (
<SkeletonTwoItem key={index} />
))
:
arrSkeleton.map((item, index) => (
<Skeleton key={index} width={100} height={180} widthType="percent" borderRadius={10} />
))
:
data.length > 0 ? (
isList ? (
<View>
{data.map((item, index) => (
<BorderBottomItem
@@ -205,7 +216,20 @@ export default function ListTask() {
</PaperGridContent>
))}
</View>
)}
)
) : (
<Text
style={[
Styles.textDefault,
Styles.cGray,
{ textAlign: "center" },
]}
>
Tidak ada data
</Text>
)
}
</View>
</ScrollView>
</SafeAreaView>

30
app/(application)/division/[id]/info.tsx
View File

@@ -5,6 +5,8 @@ import HeaderRightDivisionInfo from "@/components/division/headerDivisionInfo"
import DrawerBottom from "@/components/drawerBottom"
import ImageUser from "@/components/imageNew"
import SectionCancel from "@/components/sectionCancel"
import Skeleton from "@/components/skeleton"
import SkeletonTwoItem from "@/components/skeletonTwoItem"
import { ColorsStatus } from "@/constants/ColorsStatus"
import Styles from "@/constants/Styles"
import { apiDeleteMemberDivision, apiGetDivisionOneDetail, apiUpdateStatusAdminDivision } from "@/lib/api"
@@ -41,6 +43,8 @@ export default function InformationDivision() {
const [dataMember, setDataMember] = useState<PropsMember[]>([])
const [refresh, setRefresh] = useState(false)
const update = useSelector((state: any) => state.divisionUpdate)
const arrSkeleton = Array.from({ length: 5 }, (_, index) => index)
const [loading, setLoading] = useState(true)
const [dataMemberChoose, setDataMemberChoose] = useState({
id: '',
name: '',
@@ -91,21 +95,28 @@ export default function InformationDivision() {
}
}
async function handleLoad() {
async function handleLoad(loading: boolean) {
try {
setLoading(loading)
const hasil = await decryptToken(String(token?.current))
const response = await apiGetDivisionOneDetail({ user: hasil, id })
setDataDetail(response.data.division)
setDataMember(response.data.member)
} catch (error) {
console.error(error)
} finally {
setLoading(false)
}
}
useEffect(() => {
handleLoad()
handleLoad(false)
}, [refresh, update])
useEffect(() => {
handleLoad(true)
}, [])
function handleChooseMember(item: PropsMember) {
setDataMemberChoose(item)
setModal(true)
@@ -131,7 +142,15 @@ export default function InformationDivision() {
<View style={[Styles.mb15]}>
<Text style={[Styles.textDefaultSemiBold, Styles.mb05]}>Deskripsi Divisi</Text>
<View style={[Styles.wrapPaper]}>
{loading ?
arrSkeleton.map((item, index) => {
return (
<Skeleton key={index} width={100} height={10} widthType="percent" borderRadius={10} />
)
})
:
<Text>{dataDetail?.desc}</Text>
}
</View>
</View>
<View style={[Styles.mb15]}>
@@ -153,6 +172,13 @@ export default function InformationDivision() {
}
{
loading ?
arrSkeleton.map((item, index) => {
return (
<SkeletonTwoItem key={index} />
)
})
:
dataMember.map((item, index) => {
return (
<BorderBottomItem

27
app/(application)/division/index.tsx
View File

@@ -2,6 +2,8 @@ import BorderBottomItem from "@/components/borderBottomItem";
import ButtonTab from "@/components/buttonTab";
import InputSearch from "@/components/inputSearch";
import PaperGridContent from "@/components/paperGridContent";
import Skeleton from "@/components/skeleton";
import SkeletonTwoItem from "@/components/skeletonTwoItem";
import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import { apiGetDivision } from "@/lib/api";
@@ -38,9 +40,12 @@ export default function ListDivision() {
const [nameGroup, setNameGroup] = useState("");
const [data, setData] = useState<Props[]>([]);
const update = useSelector((state: any) => state.divisionUpdate)
const arrSkeleton = Array.from({ length: 3 }, (_, index) => index)
const [loading, setLoading] = useState(false)
async function handleLoad() {
async function handleLoad(loading: boolean) {
try {
setLoading(loading)
const hasil = await decryptToken(String(token?.current));
const response = await apiGetDivision({
user: hasil,
@@ -56,12 +61,18 @@ export default function ListDivision() {
}
} catch (error) {
console.error(error);
} finally {
setLoading(false)
}
}
useEffect(() => {
handleLoad();
}, [active, search, group, cat, update]);
handleLoad(false);
}, [update]);
useEffect(() => {
handleLoad(true);
}, [active, search, group, cat]);
return (
<SafeAreaView>
@@ -162,6 +173,16 @@ export default function ListDivision() {
)}
{
loading ?
isList ?
arrSkeleton.map((item, index) => (
<SkeletonTwoItem key={index} />
))
:
arrSkeleton.map((item, index) => (
<Skeleton key={index} width={100} height={180} widthType="percent" borderRadius={10} />
))
:
data.length == 0 ? (
<View style={[Styles.mt15]}>
<Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada data</Text>

7
components/calendar/headerCalendarDetail.tsx
View File

@@ -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

18
components/division/discussionDivisionDetail.tsx
View File

@@ -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,7 +45,15 @@ export default function DiscussionDivisionDetail() {
<View style={[Styles.mb15]}>
<Text style={[Styles.textDefaultSemiBold, Styles.mv10]}>Diskusi</Text>
<View style={[Styles.wrapPaper]}>
{data.length > 0 ? (
{
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}
@@ -58,7 +71,8 @@ export default function DiscussionDivisionDetail() {
>
Tidak ada diskusi
</Text>
)}
)
}
</View>
</View>
);

18
components/division/fileDivisionDetail.tsx
View File

@@ -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,6 +45,13 @@ export default function FileDivisionDetail() {
<View style={[Styles.mb15]}>
<Text style={[Styles.textDefaultSemiBold, Styles.mv10]}>Dokumen Terkini</Text>
{
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>
:
data.length > 0 ?
<Carousel
ref={ref}

9
components/division/taskDivisionDetail.tsx
View File

@@ -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,7 +45,11 @@ export default function TaskDivisionDetail() {
return (
<View>
<Text style={[Styles.textDefaultSemiBold, Styles.mb05]}>Tugas Hari Ini</Text>
{
loading ?
<Skeleton width={100} widthType="percent" height={60} borderRadius={10} />
:
data.length > 0 ?
<Carousel
ref={ref}