wibu/sistem-desa-mandiri
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

upd: diskusi

Browse Source 
Deskripsi:
- mati validasi form tambah diskusi

- mati validasi form edit diskusi
- loading pada saat tambah diskusi
- loading pada saat edit diskusi

No Issues:
This commit is contained in:
amel
2024-10-07 14:28:42 +08:00
parent e0c704a6ea
commit a561f21524
2 changed files with 87 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/module/discussion/ui/form_create_discussion.tsx
View File

@@ -13,6 +13,7 @@ import { funCreateDiscussion } from "../lib/api_discussion";
export default function FormCreateDiscussion({ id }: { id: string }) { export default function FormCreateDiscussion({ id }: { id: string }) {
const [isValModal, setValModal] = useState(false) const [isValModal, setValModal] = useState(false)
const [loadingModal, setLoadingModal] = useState(false)
const router = useRouter() const router = useRouter()
const [isImg, setImg] = useState("") const [isImg, setImg] = useState("")
const param = useParams<{ id: string, detail: string }>() const param = useParams<{ id: string, detail: string }>()
@@ -50,26 +51,25 @@ export default function FormCreateDiscussion({ id }: { id: string }) {
async function createDiscussion(val: boolean) { async function createDiscussion(val: boolean) {
try { try {
if (val) { setLoadingModal(true)
const response = await funCreateDiscussion({ const response = await funCreateDiscussion({
desc: isData.desc, desc: isData.desc,
idDivision: id idDivision: id
}) })
if (response.success) { if (response.success) {
setDataRealtime(response.notif) setDataRealtime(response.notif)
toast.success(response.message) toast.success(response.message)
router.push(`/division/${param.id}/discussion/`) router.push(`/division/${param.id}/discussion/`)
setValModal(false) } else {
} else { toast.error(response.message)
toast.error(response.message)
}
} }
} catch (error) { } catch (error) {
console.error(error); console.error(error);
toast.error("Gagal menambahkan diskusi, coba lagi nanti"); toast.error("Gagal menambahkan diskusi, coba lagi nanti");
} finally { } finally {
setValModal(false) setValModal(false)
setLoadingModal(false)
} }
} }
@@ -94,12 +94,12 @@ export default function FormCreateDiscussion({ id }: { id: string }) {
}} }}
value={isData.desc} value={isData.desc}
onChange={(e) => setData({ ...isData, desc: e.target.value })} onChange={(e) => setData({ ...isData, desc: e.target.value })}
onBlur={() => setTouched({ ...touched, desc: true })} // onBlur={() => setTouched({ ...touched, desc: true })}
error={ // error={
touched.desc && ( // touched.desc && (
isData.desc == "" ? "Form Tidak Boleh Kosong" : null // isData.desc == "" ? "Form Tidak Boleh Kosong" : null
) // )
} // }
/> />
</Box> </Box>
</Grid.Col> </Grid.Col>
@@ -130,9 +130,11 @@ export default function FormCreateDiscussion({ id }: { id: string }) {
</Button> </Button>
</Box> </Box>
<LayoutModal opened={isValModal} onClose={() => setValModal(false)} <LayoutModal loading={loadingModal} opened={isValModal} onClose={() => setValModal(false)}
description="Apakah Anda yakin ingin menambah data?" description="Apakah Anda yakin ingin menambah data?"
onYes={(val) => { createDiscussion(val) }} /> onYes={(val) => {
createDiscussion(val)
}} />
</Box> </Box>
) )
} }

121
src/module/discussion/ui/form_edit_discussion.tsx
View File

@@ -12,6 +12,7 @@ import { useHookstate } from "@hookstate/core"
export default function FormEditDiscussion() { export default function FormEditDiscussion() {
const [isValModal, setValModal] = useState(false) const [isValModal, setValModal] = useState(false)
const [loadingModal, setLoadingModal] = useState(false)
const router = useRouter() const router = useRouter()
const param = useParams<{ id: string, detail: string }>() const param = useParams<{ id: string, detail: string }>()
const [isDataOne, setDataOne] = useState("") const [isDataOne, setDataOne] = useState("")
@@ -35,43 +36,43 @@ export default function FormEditDiscussion() {
} }
} }
async function fetchEditDiscussion(val: boolean) { async function fetchEditDiscussion() {
try { try {
if (val) { setLoadingModal(true)
const response = await funEditDiscussion(param.detail, { const response = await funEditDiscussion(param.detail, {
desc: isDataOne desc: isDataOne
}) })
if (response.success) { if (response.success) {
toast.success(response.message) toast.success(response.message)
setValModal(false) setValModal(false)
router.push(`/division/${param.id}/discussion/${param.detail}`) router.push(`/division/${param.id}/discussion/${param.detail}`)
} else { } else {
toast.error(response.message) toast.error(response.message)
}
} }
setValModal(false)
} catch (error) { } catch (error) {
console.error(error); console.error(error);
setValModal(false) setValModal(false)
toast.error("Gagal menambahkan diskusi, coba lagi nanti"); toast.error("Gagal menambahkan diskusi, coba lagi nanti");
} finally { } finally {
setValModal(false) setValModal(false)
setLoadingModal(false)
} }
} }
async function getData() { async function getData() {
try { try {
setLoading(true) setLoading(true)
const res = await funGetProfileByCookies() const res = await funGetProfileByCookies()
setIMG(`https://wibu-storage.wibudev.com/api/files/${res.data.img}`) setIMG(`https://wibu-storage.wibudev.com/api/files/${res.data.img}`)
setLoading(false) setLoading(false)
} catch (error) { } catch (error) {
console.error(error); console.error(error);
} finally { } finally {
setLoading(false) setLoading(false)
} }
} }
useShallowEffect(() => { useShallowEffect(() => {
fetchGetOneDiscussion() fetchGetOneDiscussion()
getData() getData()
@@ -84,43 +85,43 @@ export default function FormEditDiscussion() {
<Box p={20}> <Box p={20}>
<Grid gutter={0} pt={10}> <Grid gutter={0} pt={10}>
<Grid.Col span={2}> <Grid.Col span={2}>
{loading ? {loading ?
<Skeleton height={60} width={60} radius={100} /> <Skeleton height={60} width={60} radius={100} />
: :
<Avatar src={img} alt="it's me" size="lg" /> <Avatar src={img} alt="it's me" size="lg" />
} }
</Grid.Col> </Grid.Col>
<Grid.Col span={10}> <Grid.Col span={10}>
{loading ? {loading ?
Array(10) Array(10)
.fill(null) .fill(null)
.map((_, i) => ( .map((_, i) => (
<Box key={i} mb={20}> <Box key={i} mb={20}>
<Skeleton height={20} radius={10} /> <Skeleton height={20} radius={10} />
</Box> </Box>
)) ))
: :
<Box> <Box>
<Textarea <Textarea
placeholder="Tuliskan apa yang ingin anda diskusikan" placeholder="Tuliskan apa yang ingin anda diskusikan"
styles={{ styles={{
input: { input: {
border: 'none', border: 'none',
backgroundColor: 'transparent', backgroundColor: 'transparent',
height: "50vh" height: "50vh"
} }
}} }}
value={isDataOne} value={isDataOne}
onChange={(e) => setDataOne(e.target.value)} onChange={(e) => setDataOne(e.target.value)}
onBlur={() => setTouched({ ...touched, desc: true })} // onBlur={() => setTouched({ ...touched, desc: true })}
error={ // error={
touched.desc && ( // touched.desc && (
isDataOne == "" ? "Form Tidak Boleh Kosong" : null // isDataOne == "" ? "Form Tidak Boleh Kosong" : null
) // )
} // }
/> />
</Box> </Box>
} }
</Grid.Col> </Grid.Col>
</Grid> </Grid>
</Box> </Box>
@@ -153,9 +154,15 @@ export default function FormEditDiscussion() {
} }
</Box> </Box>
<LayoutModal opened={isValModal} onClose={() => setValModal(false)} <LayoutModal loading={loadingModal} opened={isValModal} onClose={() => setValModal(false)}
description="Apakah Anda yakin ingin mengubah data?" description="Apakah Anda yakin ingin mengubah data?"
onYes={(val) => { fetchEditDiscussion(val) }} /> onYes={(val) => {
if (val) {
fetchEditDiscussion()
} else {
setValModal(false)
}
}} />
</Box> </Box>
) )
} }