141 lines
4.5 KiB
TypeScript
141 lines
4.5 KiB
TypeScript
'use client'
|
|
import { keyWibu, TEMA } from "@/module/_global";
|
|
import LayoutModal from "@/module/_global/layout/layout_modal";
|
|
import { funGetProfileByCookies } from "@/module/user/profile/lib/api_profile";
|
|
import { useHookstate } from "@hookstate/core";
|
|
import { Avatar, Box, Button, Grid, rem, Textarea } from "@mantine/core";
|
|
import { useShallowEffect } from "@mantine/hooks";
|
|
import { useParams, useRouter } from "next/navigation";
|
|
import { useState } from "react";
|
|
import toast from "react-hot-toast";
|
|
import { useWibuRealtime } from "wibu-realtime";
|
|
import { funCreateDiscussion } from "../lib/api_discussion";
|
|
|
|
export default function FormCreateDiscussion({ id }: { id: string }) {
|
|
const [isValModal, setValModal] = useState(false)
|
|
const [loadingModal, setLoadingModal] = useState(false)
|
|
const router = useRouter()
|
|
const param = useParams<{ id: string, detail: string }>()
|
|
const [loading, setLoading] = useState(true)
|
|
const [img, setIMG] = useState<any | null>()
|
|
const tema = useHookstate(TEMA)
|
|
const [touched, setTouched] = useState({
|
|
desc: false,
|
|
});
|
|
const [isData, setData] = useState({
|
|
desc: "",
|
|
idDivision: id
|
|
})
|
|
const [data, setDataRealtime] = useWibuRealtime({
|
|
WIBU_REALTIME_TOKEN: keyWibu,
|
|
project: "sdm"
|
|
})
|
|
|
|
async function getData() {
|
|
try {
|
|
setLoading(true)
|
|
const res = await funGetProfileByCookies()
|
|
setIMG(`https://wibu-storage.wibudev.com/api/files/${res.data.img}`)
|
|
setLoading(false)
|
|
} catch (error) {
|
|
console.error(error);
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
useShallowEffect(() => {
|
|
getData()
|
|
}, [])
|
|
|
|
async function createDiscussion(val: boolean) {
|
|
try {
|
|
if (val) {
|
|
setLoadingModal(true)
|
|
const response = await funCreateDiscussion({
|
|
desc: isData.desc,
|
|
idDivision: id
|
|
})
|
|
|
|
if (response.success) {
|
|
setDataRealtime(response.notif)
|
|
toast.success(response.message)
|
|
router.push(`/division/${param.id}/discussion/`)
|
|
} else {
|
|
toast.error(response.message)
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error(error);
|
|
toast.error("Gagal menambahkan diskusi, coba lagi nanti");
|
|
} finally {
|
|
setLoadingModal(false)
|
|
setValModal(false)
|
|
}
|
|
}
|
|
|
|
|
|
return (
|
|
<Box >
|
|
<Box p={20} >
|
|
<Grid pt={10}>
|
|
<Grid.Col span={2}>
|
|
<Avatar src={img} alt="it's me" size="lg" />
|
|
</Grid.Col>
|
|
<Grid.Col span={10}>
|
|
<Box>
|
|
<Textarea
|
|
placeholder="Tuliskan apa yang ingin anda diskusikan"
|
|
styles={{
|
|
input: {
|
|
border: 'none',
|
|
backgroundColor: 'transparent',
|
|
height: "50vh"
|
|
}
|
|
}}
|
|
value={isData.desc}
|
|
onChange={(e) => setData({ ...isData, desc: e.target.value })}
|
|
// onBlur={() => setTouched({ ...touched, desc: true })}
|
|
// error={
|
|
// touched.desc && (
|
|
// isData.desc == "" ? "Form Tidak Boleh Kosong" : null
|
|
// )
|
|
// }
|
|
/>
|
|
</Box>
|
|
</Grid.Col>
|
|
</Grid>
|
|
</Box>
|
|
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
|
|
maxWidth: rem(550),
|
|
zIndex: 999,
|
|
backgroundColor: `${tema.get().bgUtama}`,
|
|
}}>
|
|
<Button
|
|
color="white"
|
|
bg={tema.get().utama}
|
|
size="lg"
|
|
radius={30}
|
|
fullWidth
|
|
onClick={() => {
|
|
if (
|
|
isData.desc !== ""
|
|
) {
|
|
setValModal(true)
|
|
} else {
|
|
toast.error("Form Tidak Boleh Kosong");
|
|
}
|
|
}}
|
|
>
|
|
Simpan
|
|
</Button>
|
|
</Box>
|
|
|
|
<LayoutModal loading={loadingModal} opened={isValModal} onClose={() => setValModal(false)}
|
|
description="Apakah Anda yakin ingin menambah data?"
|
|
onYes={(val) => {
|
|
createDiscussion(val)
|
|
}} />
|
|
</Box>
|
|
)
|
|
}
|