upd: skeleton

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

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,74 +149,87 @@ export default function ListTask() {
/>
</Pressable>
</View>
{data.length > 0 ? (
<></>
) : (
<Text
style={[
Styles.textDefault,
Styles.cGray,
{ textAlign: "center" },
]}
>
Tidak ada data
</Text>
)}
{isList ? (
<View>
{data.map((item, index) => (
<BorderBottomItem
key={index}
onPress={() => {
router.push(`./task/${item.id}`);
}}
borderType="bottom"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<AntDesign name="areachart" size={25} color={"#384288"} />
</View>
}
title={item.title}
/>
))}
</View>
) : (
<View>
{data.map((item, index) => (
<PaperGridContent
key={index}
onPress={() => {
router.push(`./task/${item.id}`);
}}
content="page"
title={item.title}
headerColor="primary"
>
<ProgressBar category="page" value={item.progress} />
<View style={[Styles.rowSpaceBetween]}>
<Text></Text>
<LabelStatus
size="default"
category={
item.status === 0 ? 'primary' :
item.status === 1 ? 'warning' :
item.status === 2 ? 'success' :
item.status === 3 ? 'error' :
'primary'
}
text={
item.status === 0 ? 'SEGERA' :
item.status === 1 ? 'DIKERJAKAN' :
item.status === 2 ? 'SELESAI' :
item.status === 3 ? 'DIBATALKAN' :
'SEGERA'
}
/>
{
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
key={index}
onPress={() => {
router.push(`./task/${item.id}`);
}}
borderType="bottom"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<AntDesign name="areachart" size={25} color={"#384288"} />
</View>
}
title={item.title}
/>
))}
</View>
</PaperGridContent>
))}
</View>
)}
) : (
<View>
{data.map((item, index) => (
<PaperGridContent
key={index}
onPress={() => {
router.push(`./task/${item.id}`);
}}
content="page"
title={item.title}
headerColor="primary"
>
<ProgressBar category="page" value={item.progress} />
<View style={[Styles.rowSpaceBetween]}>
<Text></Text>
<LabelStatus
size="default"
category={
item.status === 0 ? 'primary' :
item.status === 1 ? 'warning' :
item.status === 2 ? 'success' :
item.status === 3 ? 'error' :
'primary'
}
text={
item.status === 0 ? 'SEGERA' :
item.status === 1 ? 'DIKERJAKAN' :
item.status === 2 ? 'SELESAI' :
item.status === 3 ? 'DIBATALKAN' :
'SEGERA'
}
/>
</View>
</PaperGridContent>
))}
</View>
)
) : (
<Text
style={[
Styles.textDefault,
Styles.cGray,
{ textAlign: "center" },
]}
>
Tidak ada data
</Text>
)
}
</View>
</ScrollView>
</SafeAreaView>