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 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,64 +167,78 @@ export default function DiscussionDetail() {
<View style={{ flex: 1 }}>
<ScrollView>
<View style={[Styles.p15, Styles.mb100]}>
<BorderBottomItem
descEllipsize={false}
width={60}
borderType="bottom"
icon={
<ImageUser
src={`https://wibu-storage.wibudev.com/api/files/${data?.user_img}`}
size="sm"
/>
}
title={data?.username}
subtitle={
data?.isActive ? (
data?.status == 1 ? (
<LabelStatus category="success" text="BUKA" size="small" />
) : (
<LabelStatus category="error" text="TUTUP" size="small" />
)
) : (
<LabelStatus category="secondary" text="ARSIP" size="small" />
)
}
rightTopInfo={data?.createdAt}
desc={data?.desc}
leftBottomInfo={
<View style={[Styles.rowItemsCenter]}>
<Ionicons
name="chatbox-ellipses-outline"
size={18}
color="grey"
style={Styles.mr05}
/>
<Text
style={[Styles.textInformation, Styles.cGray, Styles.mb05]}
>
{dataComment.length} Komentar
</Text>
</View>
}
/>
<View style={[Styles.p15]}>
{dataComment.map((item, index) => (
{
loading ?
<SkeletonContent />
:
<BorderBottomItem
key={index}
width={55}
descEllipsize={false}
width={60}
borderType="bottom"
icon={
<ImageUser
src={`https://wibu-storage.wibudev.com/api/files/${item.img}`}
size="xs"
src={`https://wibu-storage.wibudev.com/api/files/${data?.user_img}`}
size="sm"
/>
}
title={item.username}
rightTopInfo={item.createdAt}
desc={item.comment}
descEllipsize={false}
title={data?.username}
subtitle={
data?.isActive ? (
data?.status == 1 ? (
<LabelStatus category="success" text="BUKA" size="small" />
) : (
<LabelStatus category="error" text="TUTUP" size="small" />
)
) : (
<LabelStatus category="secondary" text="ARSIP" size="small" />
)
}
rightTopInfo={data?.createdAt}
desc={data?.desc}
leftBottomInfo={
<View style={[Styles.rowItemsCenter]}>
<Ionicons
name="chatbox-ellipses-outline"
size={18}
color="grey"
style={Styles.mr05}
/>
<Text
style={[Styles.textInformation, Styles.cGray, Styles.mb05]}
>
{dataComment.length} Komentar
</Text>
</View>
}
/>
))}
}
<View style={[Styles.p15]}>
{
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}
borderType="bottom"
icon={
<ImageUser
src={`https://wibu-storage.wibudev.com/api/files/${item.img}`}
size="xs"
/>
}
title={item.username}
rightTopInfo={item.createdAt}
desc={item.comment}
descEllipsize={false}
/>
))
}
</View>
</View>
</ScrollView>