upd: skeleton
Deskripsi: - diskusi umum - detail diskusi umum - list pengumuman - detail pengumuman - list kegiatan - detail kegiatan No Issues
This commit is contained in:
amel
@@ -4,6 +4,8 @@ import HeaderRightDiscussionGeneralDetail from "@/components/discussion_general/
|
||||
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 { ColorsStatus } from "@/constants/ColorsStatus";
|
||||
import Styles from "@/constants/Styles";
|
||||
import { apiGetDiscussionGeneralOne, apiSendDiscussionGeneralCommentar } from "@/lib/api";
|
||||
@@ -41,12 +43,22 @@ export default function DetailDiscussionGeneral() {
|
||||
const [memberDiscussion, setMemberDiscussion] = useState(false)
|
||||
const [komentar, setKomentar] = useState('')
|
||||
const update = useSelector((state: any) => state.discussionGeneralDetailUpdate)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [loadingKomentar, setLoadingKomentar] = useState(true)
|
||||
const arrSkeleton = Array.from({ length: 3 }, (_, index) => index)
|
||||
|
||||
|
||||
async function handleLoad(cat: 'detail' | 'komentar' | 'cek-anggota') {
|
||||
async function handleLoad(cat: 'detail' | 'komentar' | 'cek-anggota', loading: boolean) {
|
||||
try {
|
||||
if (cat == "detail") {
|
||||
setLoading(loading)
|
||||
} else if (cat == "komentar") {
|
||||
setLoadingKomentar(loading)
|
||||
}
|
||||
|
||||
const hasil = await decryptToken(String(token?.current))
|
||||
const response = await apiGetDiscussionGeneralOne({ id: id, user: hasil, cat })
|
||||
|
||||
if (cat == 'detail') {
|
||||
setData(response.data)
|
||||
} else if (cat == 'komentar') {
|
||||
@@ -54,17 +66,27 @@ export default function DetailDiscussionGeneral() {
|
||||
} else if (cat == 'cek-anggota') {
|
||||
setMemberDiscussion(response.data)
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
setLoadingKomentar(false)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
handleLoad('detail')
|
||||
handleLoad('komentar')
|
||||
handleLoad('cek-anggota')
|
||||
handleLoad('detail', false)
|
||||
handleLoad('komentar', false)
|
||||
handleLoad('cek-anggota', false)
|
||||
}, [update]);
|
||||
|
||||
useEffect(() => {
|
||||
handleLoad('detail', true)
|
||||
handleLoad('komentar', true)
|
||||
handleLoad('cek-anggota', true)
|
||||
}, []);
|
||||
|
||||
async function handleKomentar() {
|
||||
try {
|
||||
if (komentar != '') {
|
||||
@@ -72,7 +94,7 @@ export default function DetailDiscussionGeneral() {
|
||||
const response = await apiSendDiscussionGeneralCommentar({ id: id, data: { desc: komentar, user: hasil } })
|
||||
if (response.success) {
|
||||
setKomentar('')
|
||||
handleLoad('komentar')
|
||||
handleLoad('komentar', false)
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
@@ -93,45 +115,57 @@ export default function DetailDiscussionGeneral() {
|
||||
<View style={{ flex: 1 }}>
|
||||
<ScrollView>
|
||||
<View style={[Styles.p15, Styles.mb100]}>
|
||||
<BorderBottomItem
|
||||
borderType="bottom"
|
||||
icon={
|
||||
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
|
||||
<MaterialIcons name="chat" size={25} color={'#384288'} />
|
||||
</View>
|
||||
}
|
||||
title={data?.title}
|
||||
subtitle={
|
||||
!data?.isActive ?
|
||||
<LabelStatus category='warning' text='ARSIP' size="small" />
|
||||
:
|
||||
<LabelStatus category={data.status == 1 ? 'success' : 'error'} text={data.status == 1 ? 'BUKA' : 'TUTUP'} 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]}>{dataKomentar.length} Komentar</Text>
|
||||
</View>
|
||||
}
|
||||
/>
|
||||
{
|
||||
loading ?
|
||||
<SkeletonContent />
|
||||
:
|
||||
<BorderBottomItem
|
||||
borderType="bottom"
|
||||
icon={
|
||||
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
|
||||
<MaterialIcons name="chat" size={25} color={'#384288'} />
|
||||
</View>
|
||||
}
|
||||
title={data?.title}
|
||||
subtitle={
|
||||
!data?.isActive ?
|
||||
<LabelStatus category='warning' text='ARSIP' size="small" />
|
||||
:
|
||||
<LabelStatus category={data.status == 1 ? 'success' : 'error'} text={data.status == 1 ? 'BUKA' : 'TUTUP'} 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]}>{dataKomentar.length} Komentar</Text>
|
||||
</View>
|
||||
}
|
||||
/>
|
||||
}
|
||||
<View style={[Styles.p15]}>
|
||||
{
|
||||
dataKomentar.map((item, i) => {
|
||||
return (
|
||||
<BorderBottomItem
|
||||
key={i}
|
||||
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}
|
||||
/>
|
||||
)
|
||||
})
|
||||
loadingKomentar ?
|
||||
arrSkeleton.map((item: any, i: number) => {
|
||||
return (
|
||||
<Skeleton key={i} width={100} widthType="percent" height={40} borderRadius={5} />
|
||||
)
|
||||
})
|
||||
:
|
||||
dataKomentar.map((item, i) => {
|
||||
return (
|
||||
<BorderBottomItem
|
||||
key={i}
|
||||
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}
|
||||
/>
|
||||
)
|
||||
})
|
||||
}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
Reference in New Issue
Block a user