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

@@ -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,47 +173,57 @@ export default function ListDivision() {
)}
{
data.length == 0 ? (
<View style={[Styles.mt15]}>
<Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada data</Text>
</View>
) : (
isList ? (
<View>
{data.map((item, index) => (
<BorderBottomItem
key={index}
onPress={() => { }}
borderType="bottom"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<MaterialIcons name="group" size={25} color={"#384288"} />
</View>
}
title={item.name}
titleWeight="normal"
/>
))}
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>
</View>
) : (
<View>
{data.map((item, index) => (
<PaperGridContent
key={index}
onPress={() => {
router.push(`/division/${item.id}`);
}}
content="page"
title={item.name}
headerColor="primary"
contentPosition="top"
>
<Text style={[Styles.textDefault]} numberOfLines={2} ellipsizeMode="tail">{item.desc}</Text>
</PaperGridContent>
))}
</View>
isList ? (
<View>
{data.map((item, index) => (
<BorderBottomItem
key={index}
onPress={() => { }}
borderType="bottom"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<MaterialIcons name="group" size={25} color={"#384288"} />
</View>
}
title={item.name}
titleWeight="normal"
/>
))}
</View>
) : (
<View>
{data.map((item, index) => (
<PaperGridContent
key={index}
onPress={() => {
router.push(`/division/${item.id}`);
}}
content="page"
title={item.name}
headerColor="primary"
contentPosition="top"
>
<Text style={[Styles.textDefault]} numberOfLines={2} ellipsizeMode="tail">{item.desc}</Text>
</PaperGridContent>
))}
</View>
)
)
)
}
</View>
</ScrollView>