wibu/hipmi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Perbaikan UI pada Forum

Browse Source 
# style:
- Tampilan keseluruhan forum di ganti menguikuti UI
## No Issue
This commit is contained in:
Bagasbanuna02
2024-07-01 14:26:26 +08:00
parent af6fc79ef7
commit 11b5e8f722
91 changed files with 2711 additions and 1424 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
src/app_modules/forum/component/beranda/beranda_card.tsx
View File

@@ -1,99 +0,0 @@
"use client";
import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
import { Stack, Card, Group, ActionIcon, Divider, Text } from "@mantine/core";
import { IconMessageCircle, IconMessageCircleOff } from "@tabler/icons-react";
import { useState } from "react";
import { useShallowEffect } from "@mantine/hooks";
import { useRouter } from "next/navigation";
import { useAtom } from "jotai";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
import { IconMessageCircleX } from "@tabler/icons-react";
import { MODEL_FORUM_POSTING } from "../../model/interface";
import ComponentForum_BerandaAuthorNameOnHeader from "./beranda_author_header";
export default function ComponentForum_BerandaCardView({
data,
setData,
setLoadingKomen,
setLoadingDetail,
userLoginId,
}: {
data: MODEL_FORUM_POSTING[];
setData: any;
setLoadingKomen: any;
setLoadingDetail: any;
userLoginId: any;
}) {
const router = useRouter();
return (
<>
<Stack spacing={"xl"}>
{data.map((e, i) => (
<Card key={i}>
<Card.Section>
<ComponentForum_BerandaAuthorNameOnHeader
authorName={e?.Author?.Profile?.name}
imagesId={e?.Author?.Profile?.imagesId}
tglPublish={e?.createdAt}
isMoreButton={true}
authorId={e?.Author?.id}
postingId={e?.id}
statusId={e?.ForumMaster_StatusPosting?.id}
userLoginId={userLoginId}
setData={setData}
/>
</Card.Section>
<Card.Section
sx={{ zIndex: 0 }}
p={"lg"}
onClick={() => {
setLoadingDetail(true);
router.push(RouterForum.main_detail + e.id);
}}
>
<Text fz={"sm"} lineClamp={4}>
<div dangerouslySetInnerHTML={{ __html: e.diskusi }} />
</Text>
</Card.Section>
<Card.Section>
<Stack>
<Group spacing={"xs"} px={"sm"}>
<ActionIcon
// loading={loadingKomen ? true : false}
variant="transparent"
sx={{ zIndex: 1 }}
onClick={() => {
(e?.ForumMaster_StatusPosting.id as any) === 1
? (router.push(RouterForum.komentar + e?.id),
setLoadingKomen(true))
: router.push(RouterForum.main_detail + e?.id);
}}
>
{(e?.ForumMaster_StatusPosting?.id as any) === 1 ? (
<IconMessageCircle color="gray" size={25} />
) : (
<IconMessageCircleX color="gray" size={25} />
)}
</ActionIcon>
{/* <TotalKomentar postingId={e?.id} /> */}
<Text c={"gray"}>{e?._count}</Text>
</Group>
<Divider />
</Stack>
</Card.Section>
</Card>
))}
</Stack>
</>
);
}

119
src/app_modules/forum/component/detail_component/detail_create_komentar.tsx Normal file
View File

@@ -0,0 +1,119 @@
"use client"
import ComponentGlobal_InputCountDown from "@/app_modules/component_global/input_countdown";
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
import notifikasiToUser_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_user";
import { Stack, Paper, Group, Button, Divider } from "@mantine/core";
import { useState } from "react";
import dynamic from "next/dynamic";
const ReactQuill = dynamic(
() => {
return import("react-quill");
},
{ ssr: false }
);
import { forum_funCreateKomentar } from "../../fun/create/fun_create_komentar";
import { forum_funGetAllKomentarById } from "../../fun/get/get_all_komentar_by_id";
import { MODEL_FORUM_POSTING } from "../../model/interface";
import { useRouter } from "next/navigation";
export default function ComponentForum_DetailCreateKomentar({
postingId,
onSetKomentar,
data,
userLoginId,
}: {
postingId: string;
onSetKomentar: (val: any) => void;
data: MODEL_FORUM_POSTING;
userLoginId: string;
}) {
const router = useRouter();
const [value, setValue] = useState("");
const [loading, setLoading] = useState(false);
const [isEmpty, setIsEmpty] = useState(false);
async function onComment() {
if (value.length > 500) {
return null;
}
const createComment = await forum_funCreateKomentar(postingId, value);
if (createComment.status === 201) {
const loadKomentar = await forum_funGetAllKomentarById(data.id);
onSetKomentar(loadKomentar);
setValue("");
setIsEmpty(true);
ComponentGlobal_NotifikasiBerhasil(createComment.message, 2000);
if (userLoginId !== data.Author.id) {
const dataNotif = {
appId: data.id,
userId: data.authorId,
pesan: value,
kategoriApp: "FORUM",
title: "Komentar baru",
};
const createNotifikasi = await notifikasiToUser_funCreate({
data: dataNotif as any,
});
if (createNotifikasi.status === 201) {
mqtt_client.publish(
"USER",
JSON.stringify({
userId: dataNotif.userId,
count: 1,
})
);
}
}
} else {
ComponentGlobal_NotifikasiGagal(createComment.message);
}
}
return (
<>
<Stack>
<Paper withBorder shadow="lg">
<ReactQuill
value={value}
theme="bubble"
placeholder="Ketik komentar anda?"
onChange={(val) => {
setValue(val);
}}
/>
</Paper>
<Group position="apart">
<ComponentGlobal_InputCountDown
maxInput={500}
lengthInput={value.length}
/>
<Button
style={{
transition: "0.5s",
}}
disabled={
value === "" || value === "<p><br></p>" || value.length > 500
? true
: false
}
loaderPosition="center"
loading={loading ? true : false}
radius={"xl"}
onClick={() => onComment()}
>
Balas
</Button>
</Group>
<Divider />
</Stack>
</>
);
}

82
src/app_modules/forum/component/detail_component/detail_list_komentar.tsx Normal file
View File

@@ -0,0 +1,82 @@
"use client"
import { Stack, Center, Box, Card, Spoiler, Divider, Text } from "@mantine/core";
import _ from "lodash";
import { MODEL_FORUM_KOMENTAR } from "../../model/interface";
import ComponentForum_KomentarAuthorNameOnHeader from "../komentar_component/komentar_author_header_name";
export default function ComponentForum_ListKomentarView({
listKomentar,
setKomentar,
postingId,
userLoginId,
}: {
listKomentar: MODEL_FORUM_KOMENTAR[];
setKomentar: any;
postingId: string;
userLoginId: string;
}) {
return (
<>
<Stack>
{_.isEmpty(listKomentar) ? (
<Center>
<Text fw={"bold"} fz={"xs"} c={"gray"}>
Belum ada komentar
</Text>
</Center>
) : (
<Box>
<Center>
<Text fz={"xs"} c={"gray"}>
{" "}
Komentar
</Text>
</Center>
{listKomentar.map((e, i) => (
<Card key={i} mt={"xs"}>
<Card.Section>
<ComponentForum_KomentarAuthorNameOnHeader
authorName={e?.Author?.Profile?.name}
imagesId={e?.Author?.Profile?.imagesId}
tglPublish={e?.createdAt}
userId={e?.Author?.id}
komentarId={e?.id}
isMoreButton={true}
setKomentar={setKomentar}
postingId={postingId}
userLoginId={userLoginId}
/>
</Card.Section>
<Card.Section sx={{ zIndex: 0 }} p={"sm"}>
<Stack spacing={"xs"}>
<Text fz={"sm"} lineClamp={4}>
{e.komentar ? (
<Spoiler
hideLabel="sembunyikan"
maxHeight={100}
showLabel="tampilkan"
>
<div
dangerouslySetInnerHTML={{ __html: e.komentar }}
/>
</Spoiler>
) : (
""
)}
</Text>
</Stack>
</Card.Section>
<Card.Section>
<Stack>
<Divider />
</Stack>
</Card.Section>
</Card>
))}
</Box>
)}
</Stack>
</>
);
}

81
src/app_modules/forum/component/detail_component/detail_view.tsx Normal file
View File

@@ -0,0 +1,81 @@
"use client";
import { Card, Stack, Group, Text } from "@mantine/core";
import { IconMessageCircle, IconMessageCircleX } from "@tabler/icons-react";
import { MODEL_FORUM_POSTING } from "../../model/interface";
import ComponentForum_DetailHeader from "./detail_header";
export default function ComponentForum_DetailForumView({
data,
totalKomentar,
userLoginId,
onLoadData,
}: {
data: MODEL_FORUM_POSTING;
totalKomentar: number;
userLoginId: string;
onLoadData: (val: any) => void;
}) {
return (
<>
<Card style={{ position: "relative", width: "100%" }}>
{/* <pre>{JSON.stringify(data, null, 2)}</pre> */}
{/* HEADER */}
<Card.Section>
<ComponentForum_DetailHeader
data={data}
userLoginId={userLoginId}
onLoadData={(val) => {
onLoadData(val);
}}
/>
</Card.Section>
{/* CONTENT */}
<Card.Section sx={{ zIndex: 0 }} py={"sm"}>
<Stack spacing={"xs"}>
<Text fz={"sm"}>
{data?.diskusi ? (
<div dangerouslySetInnerHTML={{ __html: data?.diskusi }} />
) : (
""
)}
</Text>
</Stack>
</Card.Section>
{/* FOOTER */}
<Card.Section>
<Stack>
<Group position="apart">
<Group spacing={"xs"}>
{(data?.ForumMaster_StatusPosting?.id as any) === 1 ? (
<IconMessageCircle color="gray" size={25} />
) : (
<IconMessageCircleX color="gray" size={25} />
)}
<Text c={"gray"}>{totalKomentar}</Text>
</Group>
<Group>
<Text c={"gray"} fz={"sm"}>
{new Date(data?.createdAt).toLocaleTimeString()}
{/* {new Intl.RelativeTimeFormat("id", {style: "short"}).format(-1,"day")} */}
</Text>
<Text c={"gray"} fz={"sm"}>
{data?.createdAt
? new Date(data?.createdAt).toLocaleDateString(["id-ID"], {
dateStyle: "medium",
})
: new Date().toLocaleDateString(["id-ID"], {
dateStyle: "medium",
})}
</Text>
</Group>
</Group>
</Stack>
</Card.Section>
</Card>
</>
);
}

121
src/app_modules/forum/component/beranda/beranda_author_header.tsx → src/app_modules/forum/component/forumku_component/forumku_header.tsx
View File

@@ -1,79 +1,48 @@
"use client";
import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
import {
Stack,
Grid,
Avatar,
Divider,
Text,
Group,
Badge,
Loader,
} from "@mantine/core";
import { useRouter } from "next/navigation";
import moment from "moment";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
import {
IconCircleFilled,
IconDots,
IconEdit,
IconFlag3,
IconMessageCircle,
IconTrash,
} from "@tabler/icons-react";
import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
import { Avatar, Badge, Grid, Group, Loader, Stack, Text } from "@mantine/core";
import { IconCircle } from "@tabler/icons-react";
import { IoIosMore } from "react-icons/io";
import { useDisclosure } from "@mantine/hooks";
import { useRouter } from "next/navigation";
import { useState } from "react";
import ComponentForum_PostingButtonMore from "../more_button/posting_button_more";
import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
import { data } from "autoprefixer";
import ComponentForum_BerandaButtonMore from "./beranda_button_more";
import { MODEL_FORUM_POSTING } from "../../model/interface";
import ComponentForum_ForumkuMoreButton from "./forumku_more_button";
export default function ComponentForum_BerandaAuthorNameOnHeader({
authorId,
postingId,
imagesId,
authorName,
tglPublish,
isPembatas,
export default function ComponentForum_ForumkuHeaderCard({
data,
isMoreButton,
statusId,
userLoginId,
setData,
onLoadData,
allData,
}: {
authorId?: string;
postingId?: string;
imagesId?: string;
authorName?: string;
tglPublish?: Date;
isPembatas?: boolean;
isMoreButton?: boolean;
statusId?: string;
data: MODEL_FORUM_POSTING;
isMoreButton: boolean;
userLoginId: string;
setData?: any;
onLoadData: (val: any) => void;
allData: any[];
}) {
const router = useRouter();
const [loading, setLoading] = useState(false);
const [isLoading, setIsLoading] = useState(false);
return (
<>
<Stack spacing={"xs"}>
<Grid>
<Grid align="center">
<Grid.Col
span={"content"}
onClick={() => {
if (authorId) {
setLoading(true);
router.push(RouterForum.forumku + authorId);
if (data.Author.id) {
setIsLoading(true);
router.push(RouterForum.forumku + data.Author.id);
} else {
ComponentGlobal_NotifikasiPeringatan("Id tidak ditemukan");
}
}}
>
{loading ? (
{isLoading ? (
<Loader color="gray" variant="dots" />
) : (
<Avatar
@@ -82,8 +51,9 @@ export default function ComponentForum_BerandaAuthorNameOnHeader({
radius={"xl"}
bg={"gray.1"}
src={
imagesId
? RouterProfile.api_foto_profile + imagesId
data.Author.Profile.imagesId
? RouterProfile.api_foto_profile +
data.Author.Profile.imagesId
: "/aset/global/avatar.png"
}
/>
@@ -91,23 +61,28 @@ export default function ComponentForum_BerandaAuthorNameOnHeader({
</Grid.Col>
<Grid.Col span={"auto"}>
<Stack justify="center" h={"100%"} spacing={0}>
<Stack justify="center" h={"100%"} spacing={3}>
<Grid>
<Grid.Col span={"auto"}>
<Text lineClamp={1} fz={"sm"} fw={"bold"}>
{authorName ? authorName : "Nama author "}
<Text lineClamp={1} fz={"sm"} fw={"bold"} c={"white"}>
{data.Author.username
? data.Author.username
: "Nama author "}
</Text>
</Grid.Col>
<Grid.Col span={"content"}></Grid.Col>
</Grid>
<Badge
w={70}
variant="light"
color={(statusId as any) === 1 ? "green" : "red"}
variant="outline"
color={
(data.ForumMaster_StatusPosting.id as any) === 1
? "green"
: "red"
}
>
<Text fz={10}>
{(statusId as any) === 1 ? "Open" : "Close"}
</Text>
<Text c={"white"} fz={10}>{data?.ForumMaster_StatusPosting.status}</Text>
</Badge>
</Stack>
</Grid.Col>
@@ -115,9 +90,9 @@ export default function ComponentForum_BerandaAuthorNameOnHeader({
<Grid.Col span={"content"}>
<Group position="center" spacing={"xs"}>
<Group spacing={3}>
<Text c={"gray"} fz={"sm"}>
{tglPublish
? tglPublish.toLocaleDateString(["id-ID"], {
<Text c={"white"} fz={"sm"} >
{data.createdAt !== undefined && data?.createdAt
? new Date(data?.createdAt).toLocaleDateString(["id-ID"], {
day: "numeric",
month: "short",
})
@@ -125,9 +100,10 @@ export default function ComponentForum_BerandaAuthorNameOnHeader({
day: "numeric",
month: "short",
})}
<IconCircle
size={5}
color="gray"
color="white"
style={{ marginLeft: "5px" }}
/>
</Text>
@@ -135,12 +111,13 @@ export default function ComponentForum_BerandaAuthorNameOnHeader({
{isMoreButton ? (
<Group position="right">
<ComponentForum_BerandaButtonMore
authorId={authorId}
postingId={postingId as any}
statusId={statusId}
<ComponentForum_ForumkuMoreButton
authorId={data?.Author.id}
postingId={data?.id}
statusId={data?.ForumMaster_StatusPosting.id}
userLoginId={userLoginId}
setData={setData}
onLoadData={onLoadData}
allData={allData}
/>
</Group>
) : (
@@ -149,7 +126,7 @@ export default function ComponentForum_BerandaAuthorNameOnHeader({
</Group>
</Grid.Col>
</Grid>
{isPembatas ? <Divider /> : ""}
{/* {isPembatas ? <Divider /> : ""} */}
</Stack>
</>
);

228
src/app_modules/forum/component/beranda/beranda_button_more.tsx → src/app_modules/forum/component/forumku_component/forumku_more_button.tsx
View File

@@ -3,55 +3,50 @@
import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
import {
Drawer,
Stack,
Grid,
Button,
Modal,
Title,
Group,
ActionIcon,
Text,
Box,
Center,
Button,
Drawer,
Grid,
Group,
Loader,
Modal,
Stack,
Text,
Title,
} from "@mantine/core";
import { useDisclosure, useShallowEffect } from "@mantine/hooks";
import { useDisclosure } from "@mantine/hooks";
import {
IconTrash,
IconDots,
IconEdit,
IconFlag3,
IconDots,
IconSquareRoundedX,
IconSquareCheck,
IconSquareRoundedX,
IconTrash,
} from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { createStyles } from "@mantine/core";
import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
import { useAtom } from "jotai";
import { gs_forum_loading_edit_posting } from "../../global_state";
import ComponentForum_LoadingDrawer from "../loading_drawer";
import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
import { forum_funDeletePostingById } from "../../fun/delete/fun_delete_posting_by_id";
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
import mqtt_client from "@/util/mqtt_client";
import _ from "lodash";
import { forum_funDeletePostingById } from "../../fun/delete/fun_delete_posting_by_id";
import { forum_funEditStatusPostingById } from "../../fun/edit/fun_edit_status_posting_by_id";
import { forum_getListAllPosting } from "../../fun/get/get_list_all_posting";
import { forum_getListPostingByAuhtorId } from "../../fun/get/get_list_posting_by_author_id";
import { MODEL_FORUM_POSTING } from "../../model/interface";
export default function ComponentForum_BerandaButtonMore({
export default function ComponentForum_ForumkuMoreButton({
authorId,
postingId,
statusId,
userLoginId,
setData,
onLoadData,
allData,
}: {
authorId: any;
postingId?: any;
statusId?: any;
userLoginId: any;
setData: any;
onLoadData: (val: any) => void;
allData: any[];
}) {
const router = useRouter();
@@ -177,8 +172,12 @@ export default function ComponentForum_BerandaButtonMore({
<ButtonDelete
postingId={postingId}
setOpenDel={setOpenDel}
setData={setData}
onLoadData={(val) => {
onLoadData(val);
}}
allData={allData}
/>
{/* <pre>{JSON.stringify(allData, null, 2)}</pre> */}
</Modal>
<Modal
@@ -191,13 +190,16 @@ export default function ComponentForum_BerandaButtonMore({
postingId={postingId}
setOpenStatus={setOpenStatusClose}
statusId={statusId}
setData={setData}
onLoadData={(val) => {
onLoadData(val);
}}
userLoginId={userLoginId}
authorId={authorId}
allData={allData}
/>
</Modal>
<ActionIcon variant="transparent" onClick={() => open()}>
<ActionIcon c="white" variant="transparent" onClick={() => open()}>
<IconDots size={20} />
</ActionIcon>
</>
@@ -207,11 +209,13 @@ export default function ComponentForum_BerandaButtonMore({
function ButtonDelete({
postingId,
setOpenDel,
setData,
onLoadData,
allData,
}: {
postingId?: string;
setOpenDel: any;
setData: any;
onLoadData: (val: any) => void;
allData: MODEL_FORUM_POSTING[];
}) {
const [loading, setLoading] = useState(false);
@@ -219,14 +223,22 @@ function ButtonDelete({
setOpenDel(false);
await forum_funDeletePostingById(postingId as any).then(async (res) => {
if (res.status === 200) {
// ComponentGlobal_NotifikasiBerhasil(`Postingan Terhapus`, 2000);
ComponentGlobal_NotifikasiBerhasil(`Postingan Terhapus`, 2000);
setLoading(true);
const listForum = await forum_getListAllPosting();
setData(listForum);
return null;
const cloneData = _.clone(allData);
const hapusData = cloneData.filter((e) => e.id !== postingId);
onLoadData(hapusData);
mqtt_client.publish(
"Forum_hapus_data",
JSON.stringify({
data: hapusData,
})
);
} else {
// ComponentGlobal_NotifikasiGagal(res.message);
return null;
ComponentGlobal_NotifikasiGagal(res.message);
}
});
}
@@ -259,16 +271,18 @@ function ButtonStatus({
postingId,
setOpenStatus,
statusId,
setData,
onLoadData,
userLoginId,
authorId,
allData,
}: {
postingId?: string;
setOpenStatus: any;
statusId?: any;
setData: any;
onLoadData: (val: any) => void;
userLoginId: string;
authorId: string;
allData: MODEL_FORUM_POSTING[];
}) {
const [loading, setLoading] = useState(false);
@@ -280,48 +294,116 @@ function ButtonStatus({
2
);
if (upateStatusClose.status === 200) {
const loadData = await forum_getListAllPosting();
// ComponentGlobal_NotifikasiBerhasil(`Forum Ditutup`, 2000);
setData(loadData);
ComponentGlobal_NotifikasiBerhasil(`Forum Ditutup`, 2000);
setLoading(true);
return null;
} else {
// ComponentGlobal_NotifikasiGagal(upateStatusClose.message);
return null;
}
// await forum_funEditStatusPostingById(postingId as any, 2).then(
// async (res) => {
// if (res.status === 200) {
// await forum_getListAllPosting().then((val) => {
// setData(val as any);
// ComponentGlobal_NotifikasiBerhasil(`Forum Ditutup`, 2000);
// setLoading(true);
// });
// } else {
// ComponentGlobal_NotifikasiGagal(res.message);
// }
// }
// );
const cloneData = _.clone(allData);
const loadData = cloneData.map(
(e) => (
e.id === postingId,
{
...e,
ForumMaster_StatusPosting: {
id: e.id === postingId ? 2 : e.ForumMaster_StatusPosting.id,
status:
e.id === postingId
? "Close"
: e.ForumMaster_StatusPosting.status,
},
}
)
);
onLoadData(loadData);
//
mqtt_client.publish(
"Forum_ganti_status",
JSON.stringify({
id: postingId,
data: loadData,
})
);
const findData = cloneData.find((val) => val.id === postingId);
const updateDetail = {
...findData,
ForumMaster_StatusPosting: {
id: 2,
status: "Close",
},
};
mqtt_client.publish(
"Forum_detail_ganti_status",
JSON.stringify({
id: postingId,
data: updateDetail.ForumMaster_StatusPosting,
})
);
} else {
ComponentGlobal_NotifikasiGagal(upateStatusClose.message);
}
}
async function onBukaForum() {
setOpenStatus(false);
await forum_funEditStatusPostingById(postingId as any, 1).then(
async (res) => {
if (res.status === 200) {
await forum_getListAllPosting().then((val) => {
setData(val as any);
ComponentGlobal_NotifikasiBerhasil(`Forum Dibuka`, 2000);
setLoading(true);
});
} else {
ComponentGlobal_NotifikasiGagal(res.message);
}
}
const updateStatusOpen = await forum_funEditStatusPostingById(
postingId as any,
1
);
if (updateStatusOpen.status === 200) {
ComponentGlobal_NotifikasiBerhasil(`Forum Dibuka`, 2000);
setLoading(true);
const cloneData = _.clone(allData);
const loadData = cloneData.map(
(e) => (
e.id === postingId,
{
...e,
ForumMaster_StatusPosting: {
id: e.id === postingId ? 1 : e.ForumMaster_StatusPosting.id,
status:
e.id === postingId
? "Open"
: e.ForumMaster_StatusPosting.status,
},
}
)
);
mqtt_client.publish(
"Forum_ganti_status",
JSON.stringify({
id: postingId,
data: loadData,
})
);
onLoadData(loadData);
const findData = cloneData.find((val) => val.id === postingId);
const updateDetail = {
...findData,
ForumMaster_StatusPosting: {
id: 1,
status: "Open",
},
};
console.log(updateDetail.ForumMaster_StatusPosting);
mqtt_client.publish(
"Forum_detail_ganti_status",
JSON.stringify({
id: postingId,
data: updateDetail.ForumMaster_StatusPosting,
})
);
} else {
ComponentGlobal_NotifikasiGagal(updateStatusOpen.message);
}
}
return (

88
src/app_modules/forum/component/forumku_component/forumku_view.tsx Normal file
View File

@@ -0,0 +1,88 @@
"use client";
import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
import { ActionIcon, Card, Divider, Group, Stack, Text } from "@mantine/core";
import { IconMessageCircle, IconMessageCircleX } from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { MODEL_FORUM_POSTING } from "../../model/interface";
import ComponentForum_ForumkuHeaderCard from "./forumku_header";
import { AccentColor, MainColor } from "@/app_modules/component_global/color/color_pallet";
export default function ComponentForum_ForumkuMainCardView({
data,
userLoginId,
onLoadData,
allData,
}: {
data: MODEL_FORUM_POSTING;
userLoginId: string;
onLoadData: (val: any) => void;
allData: any[];
}) {
const router = useRouter();
const [loadingKomen, setLoadingKomen] = useState(false);
const [loadingDetail, setLoadingDetail] = useState(false);
const [postingId, setPostingId] = useState("");
return (
<>
{/* <pre>{JSON.stringify(data, null,2)}</pre> */}
<Card
mb={"md"}
p={"xl"}
bg={MainColor.darkblue}
style={{
border: `2px solid ${AccentColor.blue}`,
}}
radius={"md"}
>
<Card.Section>
<ComponentForum_ForumkuHeaderCard
data={data}
isMoreButton={true}
userLoginId={userLoginId}
onLoadData={onLoadData}
allData={allData}
/>
</Card.Section>
<Card.Section
sx={{ zIndex: 0 }}
p={"lg"}
onClick={() => {
router.push(RouterForum.main_detail + data?.id);
}}
>
<Text c={"white"} fz={"sm"} lineClamp={4}>
<div dangerouslySetInnerHTML={{ __html: data?.diskusi }} />
</Text>
</Card.Section>
<Card.Section>
<Stack>
<Group spacing={"xs"} px={"sm"}>
<ActionIcon
loading={loadingKomen && data?.id === postingId ? true : false}
variant="transparent"
sx={{ zIndex: 1 }}
>
{(data?.ForumMaster_StatusPosting?.id as any) === 1 ? (
<IconMessageCircle color="white" size={25} />
) : (
<IconMessageCircleX color="gray" size={25} />
)}
</ActionIcon>
{/* <TotalKomentar postingId={e?.id} /> */}
<Text c={(data?.ForumMaster_StatusPosting?.id as any) === 1 ? "white" : "gray"}>{data?.Forum_Komentar.length}</Text>
</Group>
</Stack>
</Card.Section>
</Card>
</>
);
}

2
src/app_modules/forum/component/header/komentar_author_header_name.tsx → src/app_modules/forum/component/komentar_component/komentar_author_header_name.tsx
View File

@@ -19,7 +19,7 @@ import { IoIosMore } from "react-icons/io";
import { useDisclosure } from "@mantine/hooks";
import { useState } from "react";
import ComponentForum_PostingButtonMore from "../more_button/posting_button_more";
import ComponentForum_KomentarButtonMore from "../more_button/komentar_button_more";
import ComponentForum_KomentarButtonMore from "./komentar_button_more";
export default function ComponentForum_KomentarAuthorNameOnHeader({
userId,

4
src/app_modules/forum/component/more_button/komentar_button_more.tsx → src/app_modules/forum/component/komentar_component/komentar_button_more.tsx
View File

@@ -30,7 +30,7 @@ import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
import { forum_funDeletePostingById } from "../../fun/delete/fun_delete_posting_by_id";
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
import { forum_funDeleteKomentarById } from "../../fun/delete/fun_delete_komentar_by_id";
import { forum_getKomentarById } from "../../fun/get/get_komentar_by_id";
import { forum_funGetAllKomentarById } from "../../fun/get/get_all_komentar_by_id";
export default function ComponentForum_KomentarButtonMore({
userId,
@@ -178,7 +178,7 @@ function ButtonDelete({
async function onDelete() {
await forum_funDeleteKomentarById(komentarId as any).then(async (res) => {
if (res.status === 200) {
await forum_getKomentarById(postingId as any).then((val) => {
await forum_funGetAllKomentarById(postingId as any).then((val) => {
setKomentar(val);
setOpenDel(false);
setLoading(true);

32
src/app_modules/forum/component/main_component/card_header.tsx
View File

@@ -1,28 +1,24 @@
"use client";
import loading from "@/app/dev/home/loading";
import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
import {
Stack,
Loader,
Avatar,
Badge,
Group,
Divider,
Grid,
Text,
Group,
Loader,
Stack,
Text
} from "@mantine/core";
import { IconCircle } from "@tabler/icons-react";
import ComponentForum_BerandaButtonMore from "../beranda/beranda_button_more";
import { MODEL_USER } from "@/app_modules/home/model/interface";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { MODEL_FORUM_POSTING } from "../../model/interface";
import ComponentForum_V2_CardMoreButton from "./card_more_button";
import ComponentForum_BerandaMoreButton from "./card_more_button";
export default function ComponentForum_V2_HeaderCard({
export default function ComponentForum_BerandaHeaderCard({
data,
isMoreButton,
userLoginId,
@@ -58,7 +54,11 @@ export default function ComponentForum_V2_HeaderCard({
) : (
<Avatar
size={40}
sx={{ borderStyle: "solid", borderWidth: "0.5px" }}
sx={{
borderStyle: "solid",
borderWidth: "1px",
borderColor: "white",
}}
radius={"xl"}
bg={"gray.1"}
src={
@@ -75,7 +75,7 @@ export default function ComponentForum_V2_HeaderCard({
<Stack justify="center" h={"100%"} spacing={3}>
<Grid>
<Grid.Col span={"auto"}>
<Text lineClamp={1} fz={"sm"} fw={"bold"}>
<Text lineClamp={1} fz={"sm"} fw={"bold"} color={"white"}>
{data.Author.username
? data.Author.username
: "Nama author "}
@@ -86,7 +86,7 @@ export default function ComponentForum_V2_HeaderCard({
<Badge
w={70}
variant="light"
variant="outline"
color={
(data.ForumMaster_StatusPosting.id as any) === 1
? "green"
@@ -101,7 +101,7 @@ export default function ComponentForum_V2_HeaderCard({
<Grid.Col span={"content"}>
<Group position="center" spacing={"xs"}>
<Group spacing={3}>
<Text c={"gray"} fz={"sm"}>
<Text color={"white"} fz={"sm"}>
{data.createdAt !== undefined && data?.createdAt
? new Date(data?.createdAt).toLocaleDateString(["id-ID"], {
day: "numeric",
@@ -114,7 +114,7 @@ export default function ComponentForum_V2_HeaderCard({
<IconCircle
size={5}
color="gray"
color="white"
style={{ marginLeft: "5px" }}
/>
</Text>
@@ -122,7 +122,7 @@ export default function ComponentForum_V2_HeaderCard({
{isMoreButton ? (
<Group position="right">
<ComponentForum_V2_CardMoreButton
<ComponentForum_BerandaMoreButton
authorId={data?.Author.id}
postingId={data?.id}
statusId={data?.ForumMaster_StatusPosting.id}

52
src/app_modules/forum/component/main_component/card_more_button.tsx
View File

@@ -4,6 +4,7 @@ import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
import {
ActionIcon,
Box,
Button,
Drawer,
Grid,
@@ -32,8 +33,12 @@ import _ from "lodash";
import { forum_funDeletePostingById } from "../../fun/delete/fun_delete_posting_by_id";
import { forum_funEditStatusPostingById } from "../../fun/edit/fun_edit_status_posting_by_id";
import { MODEL_FORUM_POSTING } from "../../model/interface";
import {
AccentColor,
MainColor,
} from "@/app_modules/component_global/color/color_pallet";
export default function ComponentForum_V2_CardMoreButton({
export default function ComponentForum_BerandaMoreButton({
authorId,
postingId,
statusId,
@@ -59,12 +64,15 @@ export default function ComponentForum_V2_CardMoreButton({
const [loadingEdit, setLoadingEdit] = useState(false);
const [loadingReport, setLoadingReport] = useState(false);
// if (loadingEdit) return <ComponentGlobal_V2_LoadingPage />;
return (
<>
<Drawer
// className={classes.radiusCustom}
// styles={{
// content: {
// backgroundColor: MainColor.darkblue,
// borderTop: `1px solid ${AccentColor.blue}`,
// },
// }}
opened={opened}
onClose={close}
withCloseButton={false}
@@ -77,6 +85,22 @@ export default function ComponentForum_V2_CardMoreButton({
""
) : (
<Stack>
<Grid
onClick={() => {
setLoadingEdit(true);
router.push(RouterForum.edit_posting + postingId);
}}
>
<Grid.Col span={"content"}>
<IconEdit color={loadingEdit ? "gray" : "black"} />
</Grid.Col>
<Grid.Col span={"auto"}>
<Group>
<Text c={loadingEdit ? "gray" : "black"}>Edit posting</Text>{" "}
{loadingEdit ? <Loader size={"sm"} /> : ""}
</Group>
</Grid.Col>
</Grid>
<Grid
onClick={() => {
close();
@@ -112,23 +136,6 @@ export default function ComponentForum_V2_CardMoreButton({
<Text c={"red"}>Hapus</Text>
</Grid.Col>
</Grid>
<Grid
onClick={() => {
setLoadingEdit(true);
router.push(RouterForum.edit_posting + postingId);
}}
>
<Grid.Col span={"content"}>
<IconEdit color={loadingEdit ? "gray" : "black"} />
</Grid.Col>
<Grid.Col span={"auto"}>
<Group>
<Text c={loadingEdit ? "gray" : "black"}>Edit posting</Text>{" "}
{loadingEdit ? <Loader size={"sm"} /> : ""}
</Group>
</Grid.Col>
</Grid>
</Stack>
)}
@@ -199,7 +206,7 @@ export default function ComponentForum_V2_CardMoreButton({
/>
</Modal>
<ActionIcon variant="transparent" onClick={() => open()}>
<ActionIcon c="white" variant="transparent" onClick={() => open()}>
<IconDots size={20} />
</ActionIcon>
</>
@@ -237,7 +244,6 @@ function ButtonDelete({
data: hapusData,
})
);
} else {
ComponentGlobal_NotifikasiGagal(res.message);
}

36
src/app_modules/forum/component/main_component/card_view.tsx
View File

@@ -6,9 +6,13 @@ import { IconMessageCircle, IconMessageCircleX } from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { MODEL_FORUM_POSTING } from "../../model/interface";
import ComponentForum_V2_HeaderCard from "./card_header";
import ComponentForum_BerandaHeaderCard from "./card_header";
import {
AccentColor,
MainColor,
} from "@/app_modules/component_global/color/color_pallet";
export default function ComponentForum_V2_MainCardView({
export default function ComponentForum_BerandaCardView({
data,
userLoginId,
onLoadData,
@@ -27,10 +31,18 @@ export default function ComponentForum_V2_MainCardView({
return (
<>
{/* <pre>{JSON.stringify(data, null,2)}</pre> */}
<Card mb={"md"}>
{/* <pre>{JSON.stringify(data, null,2)}</pre> */}
<Card
mb={"md"}
p={"xl"}
bg={MainColor.darkblue}
style={{
border: `2px solid ${AccentColor.blue}`,
}}
radius={"md"}
>
<Card.Section>
<ComponentForum_V2_HeaderCard
<ComponentForum_BerandaHeaderCard
data={data}
isMoreButton={true}
userLoginId={userLoginId}
@@ -46,7 +58,7 @@ export default function ComponentForum_V2_MainCardView({
router.push(RouterForum.main_detail + data?.id);
}}
>
<Text fz={"sm"} lineClamp={4}>
<Text c="white" fz={"sm"} lineClamp={4}>
<div dangerouslySetInnerHTML={{ __html: data?.diskusi }} />
</Text>
</Card.Section>
@@ -58,16 +70,9 @@ export default function ComponentForum_V2_MainCardView({
loading={loadingKomen && data?.id === postingId ? true : false}
variant="transparent"
sx={{ zIndex: 1 }}
// onClick={() => {
// setPostingId(data?.id),
// (data?.ForumMaster_StatusPosting.id as any) === 1
// ? (router.push(RouterForum.komentar + data?.id),
// setLoadingKomen(true))
// : router.push(RouterForum.main_detail + data?.id);
// }}
>
{(data?.ForumMaster_StatusPosting?.id as any) === 1 ? (
<IconMessageCircle color="gray" size={25} />
<IconMessageCircle color="white" size={25} />
) : (
<IconMessageCircleX color="gray" size={25} />
)}
@@ -75,9 +80,8 @@ export default function ComponentForum_V2_MainCardView({
{/* <TotalKomentar postingId={e?.id} /> */}
<Text c={"gray"}>{data?.Forum_Komentar.length}</Text>
<Text color={(data?.ForumMaster_StatusPosting?.id as any) === 1 ? "white" :"gray"}>{data?.Forum_Komentar.length}</Text>
</Group>
<Divider />
</Stack>
</Card.Section>
</Card>

6
src/app_modules/forum/component/more_button/posting_button_more.tsx
View File

@@ -38,7 +38,7 @@ import { forum_funDeletePostingById } from "../../fun/delete/fun_delete_posting_
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
import { forum_funEditStatusPostingById } from "../../fun/edit/fun_edit_status_posting_by_id";
import { forum_getListAllPosting } from "../../fun/get/get_list_all_posting";
import { forum_getListPostingByAuhtorId } from "../../fun/get/get_list_posting_by_author_id";
import { forum_getAllPostingByAuhtorId } from "../../fun/get/get_list_posting_by_author_id";
export default function ComponentForum_PostingButtonMore({
authorId,
@@ -277,7 +277,7 @@ function ButtonStatus({
async (res) => {
if (res.status === 200) {
if (userLoginId === authorId) {
await forum_getListPostingByAuhtorId(authorId).then((val: any) =>
await forum_getAllPostingByAuhtorId({authorId: authorId, page: 1}).then((val: any) =>
setData(val)
);
} else {
@@ -299,7 +299,7 @@ function ButtonStatus({
async (res) => {
if (res.status === 200) {
if (userLoginId === authorId) {
await forum_getListPostingByAuhtorId(authorId).then((val: any) =>
await forum_getAllPostingByAuhtorId({authorId: authorId, page: 1}).then((val: any) =>
setData(val)
);
} else {

15
src/app_modules/forum/create/index.tsx
View File

@@ -36,6 +36,10 @@ const ReactQuill = dynamic(
);
import mqtt_client from "@/util/mqtt_client";
import {
AccentColor,
MainColor,
} from "@/app_modules/component_global/color/color_pallet";
export default function Forum_Create() {
const [value, setValue] = useState("");
@@ -95,8 +99,10 @@ function ButtonAction({ value }: { value: string }) {
ComponentGlobal_NotifikasiBerhasil(create.message);
setTimeout(() => router.back(), 1000);
mqtt_client.publish("Forum_create_new", JSON.stringify({isNewPost: true, count: 1 }));
mqtt_client.publish(
"Forum_create_new",
JSON.stringify({ isNewPost: true, count: 1 })
);
} else {
ComponentGlobal_NotifikasiGagal(create.message);
}
@@ -106,7 +112,12 @@ function ButtonAction({ value }: { value: string }) {
<Button
style={{
transition: "0.5s",
border:
value === "<p><br></p>" || value === "" || value.length > 500
? ""
: `1px solid ${AccentColor.yellow}`,
}}
bg={MainColor.yellow}
disabled={
value === "<p><br></p>" || value === "" || value.length > 500
? true

13
src/app_modules/forum/create/layout.tsx
View File

@@ -4,6 +4,8 @@ import { AppShell } from "@mantine/core";
import React from "react";
import ComponentForum_HeaderTamplate from "../component/header/header_tamplate";
import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
export default function LayoutForum_Create({
children,
@@ -12,9 +14,16 @@ export default function LayoutForum_Create({
}) {
return (
<>
<AppComponentGlobal_LayoutTamplate header={<ComponentForum_HeaderTamplate title="Tambah Postingan" />}>
<ComponentGlobal_UI_LayoutTamplate
header={<ComponentGlobal_UI_HeaderTamplate title="Tambah Postingan"/>}
>
{children}
</ComponentGlobal_UI_LayoutTamplate>
{/* <AppComponentGlobal_LayoutTamplate header={<ComponentForum_HeaderTamplate title="Tambah Postingan" />}>
{children}
</AppComponentGlobal_LayoutTamplate>
</AppComponentGlobal_LayoutTamplate> */}
</>
);
}

79
src/app_modules/forum/detail/detail_report_komentar.tsx Normal file
View File

@@ -0,0 +1,79 @@
"use client";
import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
import ComponentForum_HeaderTamplate from "../component/header/header_tamplate";
import {
Box,
Center,
Group,
List,
Paper,
Stack,
Text,
Title,
} from "@mantine/core";
import { MODEL_FORUM_KOMENTAR, MODEL_FORUM_POSTING } from "../model/interface";
import { useState } from "react";
export default function Forum_DetailReportKomentar({
dataKomentar,
}: {
dataKomentar: any;
}) {
return (
<>
<AppComponentGlobal_LayoutTamplate
header={<ComponentForum_HeaderTamplate title="Report Komentar" />}
>
{<View dataKomentar={dataKomentar} />}
</AppComponentGlobal_LayoutTamplate>
</>
);
}
function View({ dataKomentar }: { dataKomentar: any }) {
const [data, setData] = useState<MODEL_FORUM_KOMENTAR>(dataKomentar.data);
const [list, setList] = useState<any[]>(dataKomentar.list);
return (
<>
<Stack>
<Text fw={"bold"} align="center" mb={"lg"}>
Komentar anda telah dihapus dari sebuah postingan oleh ADMIN, karena
memiliki beberapa laporan dari pengguna lain !
</Text>
<Stack spacing={"xs"}>
<Text fw={"bold"}>Komentar anda</Text>
<Paper withBorder p={"sm"}>
<Text>
<div dangerouslySetInnerHTML={{ __html: data.komentar }} />
</Text>
</Paper>
</Stack>
<Stack spacing={"xs"}>
<Text fw={"bold"}>
Pada postingan : {data.Forum_Posting.Author.username}
</Text>
<Paper withBorder p={"sm"}>
<Text>
<div
dangerouslySetInnerHTML={{
__html: data.Forum_Posting.diskusi,
}}
/>
</Text>
</Paper>
</Stack>
<Stack spacing={"xs"}>
<Text fw={"bold"}>Laporan yang diterima :</Text>
<List withPadding>
{list.map((x, i) => (
<List.Item key={i}>{x}</List.Item>
))}
</List>
</Stack>
</Stack>
</>
);
}

61
src/app_modules/forum/detail/detail_report_posting.tsx Normal file
View File

@@ -0,0 +1,61 @@
"use client";
import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
import ComponentForum_HeaderTamplate from "../component/header/header_tamplate";
import { List, Paper, Stack, Text } from "@mantine/core";
import { MODEL_FORUM_POSTING } from "../model/interface";
import { useState } from "react";
export default function Forum_DetailReportPosting({
dataPosting,
}: {
dataPosting: any;
}) {
return (
<>
<AppComponentGlobal_LayoutTamplate
header={<ComponentForum_HeaderTamplate title="Report Posting" />}
>
<View dataPosting={dataPosting} />
</AppComponentGlobal_LayoutTamplate>
</>
);
}
function View({ dataPosting }: { dataPosting: any }) {
const [data, setData] = useState<MODEL_FORUM_POSTING>(dataPosting.data);
const [list, setList] = useState<any[]>(dataPosting.list);
return (
<>
<Stack>
<Text fw={"bold"} align="center" mb={"lg"}>
Postingan anda telah dihapus dari beranda oleh ADMIN, karena memiliki
beberapa laporan dari pengguna lain !
</Text>
<Stack spacing={"xs"}>
<Text fw={"bold"}>Pada postingan</Text>
<Paper withBorder p={"sm"}>
<Text>
<div
dangerouslySetInnerHTML={{
__html: data.diskusi,
}}
/>
</Text>
</Paper>
</Stack>
<Stack spacing={"xs"}>
<Text fw={"bold"}>Laporan yang diterima :</Text>
<List withPadding>
{list.map((x, i) => (
<List.Item key={i}>{x}</List.Item>
))}
</List>
</Stack>
</Stack>
</>
);
}

376
src/app_modules/forum/detail/index.tsx
View File

@@ -1,376 +0,0 @@
"use client";
import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
import {
ActionIcon,
Box,
Button,
Card,
Center,
Divider,
Group,
Paper,
Spoiler,
Stack,
Text,
} from "@mantine/core";
import { IconMessageCircle, IconMessageCircleX } from "@tabler/icons-react";
import ComponentForum_PostingAuthorNameOnHeader from "../component/header/posting_author_header_name";
import ComponentForum_DetailOnHeaderAuthorName from "../component/header/detail_author_header_name";
import { useRouter } from "next/navigation";
import { MODEL_FORUM_KOMENTAR, MODEL_FORUM_POSTING } from "../model/interface";
import ComponentForum_KomentarAuthorNameOnHeader from "../component/header/komentar_author_header_name";
import _ from "lodash";
import dynamic from "next/dynamic";
import React, { useState } from "react";
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
import { forum_funCreateKomentar } from "../fun/create/fun_create_komentar";
const ReactQuill = dynamic(
() => {
return import("react-quill");
},
{ ssr: false }
);
import "react-quill/dist/quill.bubble.css";
import { forum_getKomentarById } from "../fun/get/get_komentar_by_id";
import ComponentGlobal_InputCountDown from "@/app_modules/component_global/input_countdown";
import ComponentForum_DetailHeader from "../component/detail_component/detail_header";
import { useShallowEffect } from "@mantine/hooks";
import mqtt_client from "@/util/mqtt_client";
import { MODEL_NOTIFIKASI } from "@/app_modules/notifikasi/model/interface";
import notifikasiToUser_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_user";
export default function Forum_Detail({
dataPosting,
listKomentar,
userLoginId,
}: {
dataPosting: MODEL_FORUM_POSTING;
listKomentar: MODEL_FORUM_KOMENTAR[];
userLoginId: string;
}) {
const [data, setData] = useState(dataPosting);
const [komentar, setKomentar] = useState(listKomentar);
// useShallowEffect(() => {
// onLoadKomentar({
// onLoad(val) {
// setKomentar(val);
// },
// });
// }, [setKomentar]);
// async function onLoadKomentar({ onLoad }: { onLoad: (val: any) => void }) {
// const loadKomentar = await forum_getKomentarById(data.id);
// onLoad(loadKomentar);
// }
useShallowEffect(() => {
mqtt_client.subscribe("Forum_detail_ganti_status");
mqtt_client.on("message", (topic: any, message: any) => {
const newData = JSON.parse(message.toString());
if (newData.id === data.id) {
const cloneData = _.clone(data);
// console.log(newData.data);
const updateData = {
...cloneData,
ForumMaster_StatusPosting: {
id: newData.data.id,
status: newData.data.status,
},
};
setData(updateData as any);
}
});
}, [data]);
return (
<>
<Stack px={"xs"}>
<ForumView
data={data}
totalKomentar={komentar.length}
userLoginId={userLoginId}
onLoadData={(val) => {
setData(val);
}}
/>
{(data?.ForumMaster_StatusPosting?.id as any) === 1 ? (
<CreateKomentar
postingId={dataPosting?.id}
onSetKomentar={(val) => {
setKomentar(val);
}}
data={data}
userLoginId={userLoginId}
/>
) : (
""
)}
<KomentarView
listKomentar={komentar}
setKomentar={setKomentar}
postingId={data?.id}
userLoginId={userLoginId}
/>
</Stack>
</>
);
}
function ForumView({
data,
totalKomentar,
userLoginId,
onLoadData,
}: {
data: MODEL_FORUM_POSTING;
totalKomentar: number;
userLoginId: string;
onLoadData: (val: any) => void;
}) {
return (
<>
<Card style={{ position: "relative", width: "100%" }}>
{/* <pre>{JSON.stringify(data, null, 2)}</pre> */}
{/* HEADER */}
<Card.Section>
<ComponentForum_DetailHeader
data={data}
userLoginId={userLoginId}
onLoadData={(val) => {
onLoadData(val);
}}
/>
</Card.Section>
{/* CONTENT */}
<Card.Section sx={{ zIndex: 0 }} py={"sm"}>
<Stack spacing={"xs"}>
<Text fz={"sm"}>
{data?.diskusi ? (
<div dangerouslySetInnerHTML={{ __html: data?.diskusi }} />
) : (
""
)}
</Text>
</Stack>
</Card.Section>
{/* FOOTER */}
<Card.Section>
<Stack>
<Group position="apart">
<Group spacing={"xs"}>
{(data?.ForumMaster_StatusPosting?.id as any) === 1 ? (
<IconMessageCircle color="gray" size={25} />
) : (
<IconMessageCircleX color="gray" size={25} />
)}
<Text c={"gray"}>{totalKomentar}</Text>
</Group>
<Group>
<Text c={"gray"} fz={"sm"}>
{new Date(data?.createdAt).toLocaleTimeString()}
{/* {new Intl.RelativeTimeFormat("id", {style: "short"}).format(-1,"day")} */}
</Text>
<Text c={"gray"} fz={"sm"}>
{data?.createdAt
? new Date(data?.createdAt).toLocaleDateString(["id-ID"], {
dateStyle: "medium",
})
: new Date().toLocaleDateString(["id-ID"], {
dateStyle: "medium",
})}
</Text>
</Group>
</Group>
<Divider />
</Stack>
</Card.Section>
</Card>
</>
);
}
function CreateKomentar({
postingId,
onSetKomentar,
data,
userLoginId,
}: {
postingId: string;
onSetKomentar: (val: any) => void;
data: MODEL_FORUM_POSTING;
userLoginId: string;
}) {
const router = useRouter();
const [value, setValue] = useState("");
const [loading, setLoading] = useState(false);
const [isEmpty, setIsEmpty] = useState(false);
async function onComment() {
if (value.length > 500) {
return null;
}
const createComment = await forum_funCreateKomentar(postingId, value);
if (createComment.status === 201) {
const loadKomentar = await forum_getKomentarById(data.id);
onSetKomentar(loadKomentar);
setValue("");
setIsEmpty(true);
ComponentGlobal_NotifikasiBerhasil(createComment.message, 2000);
if (userLoginId !== data.Author.id) {
const dataNotif = {
appId: data.id,
userId: data.authorId,
pesan: value,
kategoriApp: "FORUM",
title: "Komentar baru",
};
const createNotifikasi = await notifikasiToUser_funCreate({
data: dataNotif as any,
});
if (createNotifikasi.status === 201) {
mqtt_client.publish(
"USER",
JSON.stringify({
userId: dataNotif.userId,
count: 1,
})
);
}
}
} else {
ComponentGlobal_NotifikasiGagal(createComment.message);
}
}
return (
<>
<Stack>
<Paper withBorder shadow="lg">
<ReactQuill
value={value}
theme="bubble"
placeholder="Ketik komentar anda?"
onChange={(val) => {
setValue(val);
}}
/>
</Paper>
<Group position="apart">
<ComponentGlobal_InputCountDown
maxInput={500}
lengthInput={value.length}
/>
<Button
style={{
transition: "0.5s",
}}
disabled={
value === "" || value === "<p><br></p>" || value.length > 500
? true
: false
}
loaderPosition="center"
loading={loading ? true : false}
radius={"xl"}
onClick={() => onComment()}
>
Balas
</Button>
</Group>
<Divider />
</Stack>
</>
);
}
function KomentarView({
listKomentar,
setKomentar,
postingId,
userLoginId,
}: {
listKomentar: MODEL_FORUM_KOMENTAR[];
setKomentar: any;
postingId: string;
userLoginId: string;
}) {
return (
<>
<Stack>
{_.isEmpty(listKomentar) ? (
<Center>
<Text fw={"bold"} fz={"xs"} c={"gray"}>
Belum ada komentar
</Text>
</Center>
) : (
<Box>
<Center>
<Text fz={"xs"} c={"gray"}>
{" "}
Komentar
</Text>
</Center>
{listKomentar.map((e, i) => (
<Card key={i} mt={"xs"}>
<Card.Section>
<ComponentForum_KomentarAuthorNameOnHeader
authorName={e?.Author?.Profile?.name}
imagesId={e?.Author?.Profile?.imagesId}
tglPublish={e?.createdAt}
userId={e?.Author?.id}
komentarId={e?.id}
isMoreButton={true}
setKomentar={setKomentar}
postingId={postingId}
userLoginId={userLoginId}
/>
</Card.Section>
<Card.Section sx={{ zIndex: 0 }} p={"sm"}>
<Stack spacing={"xs"}>
<Text fz={"sm"} lineClamp={4}>
{e.komentar ? (
<Spoiler
hideLabel="sembunyikan"
maxHeight={100}
showLabel="tampilkan"
>
<div
dangerouslySetInnerHTML={{ __html: e.komentar }}
/>
</Spoiler>
) : (
""
)}
</Text>
</Stack>
</Card.Section>
<Card.Section>
<Stack>
<Divider />
</Stack>
</Card.Section>
</Card>
))}
</Box>
)}
</Stack>
</>
);
}

106
src/app_modules/forum/detail/main_detail.tsx Normal file
View File

@@ -0,0 +1,106 @@
"use client";
import {
Stack
} from "@mantine/core";
import _ from "lodash";
import { MODEL_FORUM_KOMENTAR, MODEL_FORUM_POSTING } from "../model/interface";
import mqtt_client from "@/util/mqtt_client";
import { useShallowEffect } from "@mantine/hooks";
import { useState } from "react";
import "react-quill/dist/quill.bubble.css";
import ComponentForum_DetailCreateKomentar from "../component/detail_component/detail_create_komentar";
import ComponentForum_ListKomentarView from "../component/detail_component/detail_list_komentar";
import ComponentForum_DetailForumView from "../component/detail_component/detail_view";
export default function Forum_MainDetail({
dataPosting,
listKomentar,
userLoginId,
}: {
dataPosting: MODEL_FORUM_POSTING;
listKomentar: MODEL_FORUM_KOMENTAR[];
userLoginId: string;
}) {
const [data, setData] = useState(dataPosting);
const [komentar, setKomentar] = useState(listKomentar);
// useShallowEffect(() => {
// onLoadKomentar({
// onLoad(val) {
// setKomentar(val);
// },
// });
// }, [setKomentar]);
// async function onLoadKomentar({ onLoad }: { onLoad: (val: any) => void }) {
// const loadKomentar = await forum_getKomentarById(data.id);
// onLoad(loadKomentar);
// }
useShallowEffect(() => {
mqtt_client.subscribe("Forum_detail_ganti_status");
mqtt_client.on("message", (topic: any, message: any) => {
const newData = JSON.parse(message.toString());
if (newData.id === data.id) {
const cloneData = _.clone(data);
// console.log(newData.data);
const updateData = {
...cloneData,
ForumMaster_StatusPosting: {
id: newData.data.id,
status: newData.data.status,
},
};
setData(updateData as any);
}
});
}, [data]);
return (
<>
<Stack px={"xs"}>
<ComponentForum_DetailForumView
data={data}
totalKomentar={komentar.length}
userLoginId={userLoginId}
onLoadData={(val) => {
setData(val);
}}
/>
{(data?.ForumMaster_StatusPosting?.id as any) === 1 ? (
<ComponentForum_DetailCreateKomentar
postingId={dataPosting?.id}
onSetKomentar={(val) => {
setKomentar(val);
}}
data={data}
userLoginId={userLoginId}
/>
) : (
""
)}
<ComponentForum_ListKomentarView
listKomentar={komentar}
setKomentar={setKomentar}
postingId={data?.id}
userLoginId={userLoginId}
/>
</Stack>
</>
);
}

18
src/app_modules/forum/edit/posting/index.tsx
View File

@@ -26,6 +26,10 @@ import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_glob
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
import ComponentGlobal_InputCountDown from "@/app_modules/component_global/input_countdown";
import {
AccentColor,
MainColor,
} from "@/app_modules/component_global/color/color_pallet";
const ReactQuill = dynamic(
() => {
return import("react-quill");
@@ -114,6 +118,17 @@ function ButtonAction({
return (
<>
<Button
style={{
transition: "0.5s",
border:
diskusi === "<p><br></p>" || diskusi === "" || diskusi.length > 500
? ""
: `1px solid ${AccentColor.yellow}`,
backgroundColor:
diskusi === "<p><br></p>" || diskusi === "" || diskusi.length > 500
? ""
: MainColor.yellow,
}}
disabled={
diskusi === "<p><br></p>" || diskusi === "" || diskusi.length > 500
? true
@@ -122,9 +137,6 @@ function ButtonAction({
loaderPosition="center"
loading={loading ? true : false}
radius={"xl"}
style={{
transition: "0.5s",
}}
onClick={() => {
onUpdate();
}}

12
src/app_modules/forum/edit/posting/layout.tsx
View File

@@ -4,6 +4,8 @@ import { AppShell } from "@mantine/core";
import React from "react";
import ComponentForum_HeaderTamplate from "../../component/header/header_tamplate";
import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
export default function LayoutForum_EditPosting({
children,
@@ -12,11 +14,17 @@ export default function LayoutForum_EditPosting({
}) {
return (
<>
<AppComponentGlobal_LayoutTamplate
<ComponentGlobal_UI_LayoutTamplate
header={<ComponentGlobal_UI_HeaderTamplate title="Edit Postingan" />}
>
{children}
</ComponentGlobal_UI_LayoutTamplate>
{/* <AppComponentGlobal_LayoutTamplate
header={<ComponentForum_HeaderTamplate title="Edit Postingan" />}
>
{children}
</AppComponentGlobal_LayoutTamplate>
</AppComponentGlobal_LayoutTamplate> */}
</>
);
}

100
src/app_modules/forum/forumku/forum_profile.tsx Normal file
View File

@@ -0,0 +1,100 @@
"use client";
import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
import {
AccentColor,
MainColor,
} from "@/app_modules/component_global/color/color_pallet";
import { MODEL_USER } from "@/app_modules/home/model/interface";
import {
Center,
Avatar,
Stack,
Button,
Divider,
Grid,
Text,
} from "@mantine/core";
import { IconCircleFilled } from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import { useState } from "react";
export default function ComponentForum_ViewForumProfile({
auhtorSelectedData,
totalPosting,
}: {
auhtorSelectedData: MODEL_USER;
totalPosting: number;
}) {
const router = useRouter();
const [loading, setLoading] = useState(false);
// if (loading) return <ComponentGlobal_V2_LoadingPage />;
return (
<>
<Center>
<Avatar
radius={"100%"}
sx={{
borderStyle: "solid",
borderWidth: "0.5px",
borderColor: "black",
}}
size={100}
alt="foto"
src={
RouterProfile.api_foto_profile +
auhtorSelectedData?.Profile?.imagesId
}
/>
</Center>
<Grid>
<Grid.Col span={"auto"}>
<Stack spacing={0}>
<Text lineClamp={1} fw={"bold"} color={"white"}>
{auhtorSelectedData?.Profile?.name}
</Text>
<Grid gutter={"xs"}>
<Grid.Col span={"content"}>
<Text lineClamp={1} color={"white"} fz={"sm"}>
{totalPosting} Posting <IconCircleFilled size={5} />
</Text>
</Grid.Col>
<Grid.Col span={"auto"}>
<Text lineClamp={1} color={"white"} fz={"sm"}>
@{auhtorSelectedData?.username}
{""}
</Text>
</Grid.Col>
</Grid>
</Stack>
</Grid.Col>
<Grid.Col span={5}>
<Stack align="center" justify="center" h={"100%"}>
<Button
style={{
border: `1px solid ${AccentColor.yellow}`,
backgroundColor: MainColor.yellow,
}}
c="white"
loaderPosition="center"
loading={loading ? true : false}
radius={"xl"}
variant="outline"
onClick={() => {
setLoading(true);
router.push(
RouterProfile.katalog + auhtorSelectedData?.Profile?.id
);
}}
>
Kunjungi Profile
</Button>
</Stack>
</Grid.Col>
</Grid>
</>
);
}

230
src/app_modules/forum/forumku/index.tsx
View File

@@ -1,28 +1,28 @@
"use client";
import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
import { MODEL_USER } from "@/app_modules/home/model/interface";
import {
ActionIcon,
Affix,
Avatar,
Button,
Center,
Divider,
Grid,
Loader,
Stack,
Text,
rem,
} from "@mantine/core";
import { useWindowScroll } from "@mantine/hooks";
import { IconCircleFilled, IconPencilPlus } from "@tabler/icons-react";
import { IconPencilPlus, IconSearchOff } from "@tabler/icons-react";
import _ from "lodash";
import { useRouter } from "next/navigation";
import { useState } from "react";
import ComponentForum_MainCardView from "../component/main_card_view";
import { MODEL_FORUM_POSTING } from "../model/interface";
import ComponentForum_ViewForumProfile from "./forum_profile";
import ComponentForum_PostinganPribadi from "./postingan_pribadi";
import { ScrollOnly } from "next-scroll-loader";
import { forum_getAllPostingByAuhtorId } from "../fun/get/get_list_posting_by_author_id";
import ComponentForum_ForumkuMainCardView from "../component/forumku_component/forumku_view";
import { AccentColor } from "@/app_modules/component_global/color/color_pallet";
export default function Forum_Forumku({
auhtorSelectedData,
@@ -36,6 +36,9 @@ export default function Forum_Forumku({
userLoginId: string;
}) {
const router = useRouter();
const [data, setData] = useState(dataPosting);
const [activePage, setActivePage] = useState(1);
const [scroll, scrollTo] = useWindowScroll();
const [loadingCreate, setLoadingCreate] = useState(false);
@@ -44,21 +47,25 @@ export default function Forum_Forumku({
{userLoginId === auhtorSelectedData.id ? (
<Affix position={{ bottom: rem(100), right: rem(30) }}>
<ActionIcon
loading={loadingCreate ? true : false}
opacity={scroll.y > 0 ? 0.5 : ""}
style={{
transition: "0.5s",
border: `1px solid ${AccentColor.skyblue}`,
}}
size={"xl"}
radius={"xl"}
variant="transparent"
bg={"blue"}
bg={AccentColor.blue}
onClick={() => {
setLoadingCreate(true);
router.push(RouterForum.create);
}}
>
<IconPencilPlus color="white" />
{loadingCreate ? (
<Loader size={25} />
) : (
<IconPencilPlus color="white" />
)}
</ActionIcon>
</Affix>
) : (
@@ -66,171 +73,54 @@ export default function Forum_Forumku({
)}
<Stack spacing={"xl"} px={"sm"}>
<ForumProfile
<ComponentForum_ViewForumProfile
auhtorSelectedData={auhtorSelectedData}
totalPosting={totalPosting}
/>
{_.isEmpty(dataPosting) ? (
<Center>
<Text fw={"bold"} fz={"xs"} c={"gray"}>
Belum ada posting
</Text>
</Center>
{_.isEmpty(data) ? (
<Stack align="center" justify="center" h={"80vh"}>
<IconSearchOff size={80} color="white" />
<Stack spacing={0} align="center">
<Text c={"white"} fw={"bold"} fz={"xs"}>
Tidak ada data
</Text>
</Stack>
</Stack>
) : (
<ForumPosting dataPosting={dataPosting} userLoginId={userLoginId} />
// --- Main component --- //
<ScrollOnly
height="80vh"
renderLoading={() => (
<Center mt={"lg"}>
<Loader />
</Center>
)}
data={data}
setData={setData}
moreData={async () => {
const loadData = await forum_getAllPostingByAuhtorId({
page: activePage + 1,
authorId: auhtorSelectedData.id,
});
setActivePage((val) => val + 1);
return loadData;
}}
>
{(item) => (
<ComponentForum_ForumkuMainCardView
data={item}
userLoginId={userLoginId}
onLoadData={(val) => {
setData(val);
}}
allData={data}
/>
)}
</ScrollOnly>
)}
</Stack>
</>
);
}
function ForumProfile({
auhtorSelectedData,
totalPosting,
}: {
auhtorSelectedData: MODEL_USER;
totalPosting: number;
}) {
const router = useRouter();
const [loading, setLoading] = useState(false);
// if (loading) return <ComponentGlobal_V2_LoadingPage />;
return (
<>
<Center>
<Avatar
radius={"100%"}
sx={{
borderStyle: "solid",
borderWidth: "0.5px",
borderColor: "black",
}}
size={100}
alt="foto"
src={
RouterProfile.api_foto_profile +
auhtorSelectedData?.Profile?.imagesId
}
/>
</Center>
<Grid>
<Grid.Col span={"auto"}>
<Stack spacing={0}>
<Text lineClamp={1} fw={"bold"}>
{auhtorSelectedData?.Profile?.name}
</Text>
<Grid gutter={"xs"}>
<Grid.Col span={"content"}>
<Text lineClamp={1} c={"gray"} fz={"sm"}>
{totalPosting} Posting <IconCircleFilled size={5} />
</Text>
</Grid.Col>
<Grid.Col span={"auto"}>
<Text lineClamp={1} c={"gray"} fz={"sm"}>
@{auhtorSelectedData?.username}
{""}
</Text>
</Grid.Col>
</Grid>
</Stack>
</Grid.Col>
<Grid.Col span={5}>
<Stack align="center" justify="center" h={"100%"}>
<Button
compact
loaderPosition="center"
loading={loading ? true : false}
radius={"xl"}
variant="outline"
onClick={() => {
setLoading(true);
router.push(
RouterProfile.katalog + auhtorSelectedData?.Profile?.id
);
}}
>
Kunjungi Profile
</Button>
</Stack>
</Grid.Col>
</Grid>
<Divider />
</>
);
}
function ForumPosting({
dataPosting,
userLoginId,
}: {
dataPosting: MODEL_FORUM_POSTING[];
userLoginId: any;
}) {
const router = useRouter();
const [data, setData] = useState(dataPosting);
const [loadingDetail, setLoadingDetail] = useState(false);
const [loadingKomen, setLoadingKomen] = useState(false);
if (loadingDetail) return <ComponentGlobal_V2_LoadingPage />;
if (loadingKomen) return <ComponentGlobal_V2_LoadingPage />;
return (
<>
<ComponentForum_MainCardView
data={data}
setLoadingKomen={setLoadingKomen}
setLoadingDetail={setLoadingDetail}
userLoginId={userLoginId}
setData={setData}
/>
{/* <Stack>
{dataPosting.map((e, i) => (
<Card key={i}>
<Card.Section>
<ComponentForum_PostingAuthorNameOnHeader isMoreButton={true} />
</Card.Section>
<Card.Section
sx={{ zIndex: 0 }}
p={"sm"}
onClick={() => {
// console.log("halaman forum");
setLoadingDetail(true);
router.push(RouterForum.main_detail + i);
}}
>
<Stack spacing={"xs"}>
<Text fz={"sm"} lineClamp={4}>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad,
vitae. Quisquam aspernatur, eius consequatur dicta repellendus
facere vero recusandae deleniti voluptas quod architecto,
tenetur totam excepturi rem nam iusto earum.
</Text>
</Stack>
</Card.Section>
<Card.Section>
<Stack>
<Group spacing={"xs"} px={"sm"}>
<ActionIcon
// loading={loadingKomen ? true : false}
variant="transparent"
sx={{ zIndex: 1 }}
onClick={() => {
setLoadingKomen(true);
router.push(RouterForum.komentar + i);
}}
>
<IconMessageCircle color="gray" size={25} />
</ActionIcon>
<Text c={"gray"}>1</Text>
</Group>
<Divider />
</Stack>
</Card.Section>
</Card>
))}
</Stack> */}
</>
);
}

17
src/app_modules/forum/forumku/layout.tsx
View File

@@ -6,6 +6,8 @@ import ComponentForum_HeaderTamplate from "../component/header/header_tamplate";
import { MODEL_USER } from "@/app_modules/home/model/interface";
import { IconX } from "@tabler/icons-react";
import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
export default function LayoutForum_Forumku({
children,
@@ -16,7 +18,18 @@ export default function LayoutForum_Forumku({
}) {
return (
<>
<AppComponentGlobal_LayoutTamplate
<ComponentGlobal_UI_LayoutTamplate
header={
<ComponentGlobal_UI_HeaderTamplate
title={`${username}`}
iconLeft={<IconX />}
/>
}
>
{children}
</ComponentGlobal_UI_LayoutTamplate>
{/* <AppComponentGlobal_LayoutTamplate
header={
<ComponentForum_HeaderTamplate
title={`${username}`}
@@ -25,7 +38,7 @@ export default function LayoutForum_Forumku({
}
>
{children}
</AppComponentGlobal_LayoutTamplate>
</AppComponentGlobal_LayoutTamplate> */}
</>
);
}

85
src/app_modules/forum/forumku/postingan_pribadi.tsx Normal file
View File

@@ -0,0 +1,85 @@
"use client"
import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
import { useRouter } from "next/navigation";
import { useState } from "react";
import ComponentForum_MainCardView from "../component/main_card_view";
import { MODEL_FORUM_POSTING } from "../model/interface";
import ComponentForum_ForumkuMainCardView from "../component/forumku_component/forumku_view";
export default function ComponentForum_PostinganPribadi({
dataPosting,
userLoginId,
}: {
dataPosting: MODEL_FORUM_POSTING[];
userLoginId: any;
}) {
const router = useRouter();
const [data, setData] = useState(dataPosting);
const [loadingDetail, setLoadingDetail] = useState(false);
const [loadingKomen, setLoadingKomen] = useState(false);
// if (loadingDetail) return <ComponentGlobal_V2_LoadingPage />;
// if (loadingKomen) return <ComponentGlobal_V2_LoadingPage />;
return (
<>
{/* <ComponentForum_MainCardView
data={data}
setLoadingKomen={setLoadingKomen}
setLoadingDetail={setLoadingDetail}
userLoginId={userLoginId}
setData={setData}
/> */}
{/* <Stack>
{dataPosting.map((e, i) => (
<Card key={i}>
<Card.Section>
<ComponentForum_PostingAuthorNameOnHeader isMoreButton={true} />
</Card.Section>
<Card.Section
sx={{ zIndex: 0 }}
p={"sm"}
onClick={() => {
// console.log("halaman forum");
setLoadingDetail(true);
router.push(RouterForum.main_detail + i);
}}
>
<Stack spacing={"xs"}>
<Text fz={"sm"} lineClamp={4}>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad,
vitae. Quisquam aspernatur, eius consequatur dicta repellendus
facere vero recusandae deleniti voluptas quod architecto,
tenetur totam excepturi rem nam iusto earum.
</Text>
</Stack>
</Card.Section>
<Card.Section>
<Stack>
<Group spacing={"xs"} px={"sm"}>
<ActionIcon
// loading={loadingKomen ? true : false}
variant="transparent"
sx={{ zIndex: 1 }}
onClick={() => {
setLoadingKomen(true);
router.push(RouterForum.komentar + i);
}}
>
<IconMessageCircle color="gray" size={25} />
</ActionIcon>
<Text c={"gray"}>1</Text>
</Group>
<Divider />
</Stack>
</Card.Section>
</Card>
))}
</Stack> */}
</>
);
}

36
src/app_modules/forum/fun/create/fun_create_report_komentar.ts
View File

@@ -3,27 +3,35 @@
import prisma from "@/app/lib/prisma";
import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
export async function forum_funCreateReportKomentar(
komentarId: string,
value: string
) {
export async function forum_funCreateReportKomentar({
komentarId,
kategoriId,
}: {
komentarId: string;
kategoriId: any;
}) {
const authorId = await user_getOneUserId();
const cekId = await prisma.forumMaster_KategoriReport.findFirst({
where: {
title: value,
title: kategoriId,
},
});
const createReport = await prisma.forum_ReportKomentar.create({
data: {
userId: authorId,
forumMaster_KategoriReportId: cekId?.id,
forum_KomentarId: komentarId,
},
});
try {
const createReport = await prisma.forum_ReportKomentar.create({
data: {
userId: authorId,
forumMaster_KategoriReportId: cekId?.id,
forum_KomentarId: komentarId,
},
});
if (!createReport)
return { status: 400, message: "Gagal menambahkan report komentar !" };
} catch (error) {
console.log(error);
}
if (!createReport)
return { status: 400, message: "Gagal menambahkan report komentar !" };
return { status: 201, message: "Berhasil me-report komentar !" };
}

21
src/app_modules/forum/fun/forum_notifikasi/fun_create_notifikasi.tsx Normal file
View File

@@ -0,0 +1,21 @@
"use server";
import prisma from "@/app/lib/prisma";
import { MODEL_NOTIFIKASI } from "@/app_modules/notifikasi/model/interface";
export default async function forum_funCreateNotifikasiToAdmin({
data,
}: {
data: MODEL_NOTIFIKASI;
}) {
console.log(data);
// const getAdmin = await prisma.user.findMany({
// where: {
// active: true,
// masterUserRoleId: "2",
// },
// });
return { status: 201 };
}

2
src/app_modules/forum/fun/get/get_komentar_by_id.ts → src/app_modules/forum/fun/get/get_all_komentar_by_id.ts
View File

@@ -2,7 +2,7 @@
import prisma from "@/app/lib/prisma";
export async function forum_getKomentarById(postingId: string) {
export async function forum_funGetAllKomentarById(postingId: string) {
const data = await prisma.forum_Komentar.findMany({
orderBy: {
createdAt: "desc",

39
src/app_modules/forum/fun/get/get_list_posting_by_author_id.ts
View File

@@ -4,8 +4,19 @@ import prisma from "@/app/lib/prisma";
import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
import _ from "lodash";
export async function forum_getListPostingByAuhtorId(authorId: string) {
export async function forum_getAllPostingByAuhtorId({
authorId,
page,
}: {
authorId: string;
page: any;
}) {
const takeData = 5;
const skipData = page * takeData - takeData;
const get = await prisma.forum_Posting.findMany({
take: takeData,
skip: skipData,
orderBy: {
createdAt: "desc",
},
@@ -22,7 +33,13 @@ export async function forum_getListPostingByAuhtorId(authorId: string) {
Author: {
select: {
id: true,
Profile: true,
username: true,
Profile: {
select: {
id: true,
imagesId: true,
},
},
},
},
Forum_Komentar: {
@@ -30,14 +47,20 @@ export async function forum_getListPostingByAuhtorId(authorId: string) {
isActive: true,
},
},
ForumMaster_StatusPosting: true
ForumMaster_StatusPosting: {
select: {
id: true,
status: true,
},
},
forumMaster_StatusPostingId: true,
},
});
const data = get.map((val) => ({
..._.omit(val, ["Forum_Komentar"]),
_count: val.Forum_Komentar.length,
}));
// const data = get.map((val) => ({
// ..._.omit(val, ["Forum_Komentar"]),
// _count: val.Forum_Komentar.length,
// }));
return data;
return get;
}

2
src/app_modules/forum/fun/get/get_one_kategori_by_id.ts
View File

@@ -13,5 +13,5 @@ export default async function forum_getOneKategoriById({
},
});
return cekData
return cekData;
}

46
src/app_modules/forum/fun/get/get_one_posting_reported_by_id.ts Normal file
View File

@@ -0,0 +1,46 @@
"use server";
import prisma from "@/app/lib/prisma";
import _ from "lodash";
export default async function forum_funGetOneReportedPostingById({
postingId,
}: {
postingId: string;
}) {
const data = await prisma.forum_Posting.findFirst({
where: {
id: postingId,
},
select: {
id: true,
diskusi: true,
Forum_ReportPosting: {
select: {
id: true,
deskripsi: true,
forumMaster_KategoriReportId: true,
ForumMaster_KategoriReport: true,
},
},
},
});
// console.log(data)
const group = _.groupBy(
data?.Forum_ReportPosting,
(val) => val.ForumMaster_KategoriReport?.title
);
const getKey = _.keys(group);
const filterGroup = getKey.map((e) => e.replace("undefined", "Lainnya"));
const allData = {
data: data,
list: filterGroup,
};
// console.log(allData);
return allData;
}

60
src/app_modules/forum/fun/get/get_one_report_komentar_by_id.tsx Normal file
View File

@@ -0,0 +1,60 @@
"use server";
import prisma from "@/app/lib/prisma";
import _ from "lodash";
import { MODEL_FORUM_KOMENTAR } from "../../model/interface";
import { group } from "console";
export default async function forum_funGetOneReportKomentarById({
komentarId,
}: {
komentarId: string;
}) {
const data = await prisma.forum_Komentar.findFirst({
where: {
id: komentarId,
},
select: {
id: true,
komentar: true,
Forum_Posting: {
select: {
id: true,
diskusi: true,
Author: {
select: {
username: true,
},
},
},
},
Forum_ReportKomentar: {
select: {
deskripsi: true,
ForumMaster_KategoriReport: {
select: {
id: true,
title: true,
},
},
},
},
},
});
const group = _.groupBy(
data?.Forum_ReportKomentar,
(v) => v.ForumMaster_KategoriReport?.title
);
const getKey = _.keys(group);
const filterGroup = getKey.map((e) => e.replace("undefined", "Lainnya"));
const allData = {
data: data,
list: filterGroup,
};
return allData;
}

8
src/app_modules/forum/index.ts
View File

@@ -5,7 +5,7 @@ import Forum_Forumku from "./forumku";
import Forum_Create from "./create";
import LayoutForum_Create from "./create/layout";
import LayoutForum_Forumku from "./forumku/layout";
import Forum_Detail from "./detail";
import Forum_MainDetail from "./detail/main_detail";
import LayoutForum_Detail from "./detail/layout";
import Forum_Komentar from "./komentar";
import LayoutForum_Komentar from "./komentar/layout";
@@ -19,6 +19,8 @@ import Forum_ReportKomentar from "./report/komentar";
import LayoutForum_ReportKomentar from "./report/komentar/layout";
import Forum_ReportPostingLainnya from "./report/posting/lainnya";
import Forum_ReportKomentarLainnya from "./report/komentar/lainnya";
import Forum_DetailReportKomentar from "./detail/detail_report_komentar";
import Forum_DetailReportPosting from "./detail/detail_report_posting";
export {
Forum_Splash,
@@ -28,7 +30,7 @@ export {
Forum_Create,
LayoutForum_Create,
LayoutForum_Forumku,
Forum_Detail,
Forum_MainDetail as Forum_Detail,
LayoutForum_Detail,
Forum_Komentar,
LayoutForum_Komentar,
@@ -42,4 +44,6 @@ export {
LayoutForum_ReportKomentar,
Forum_ReportPostingLainnya,
Forum_ReportKomentarLainnya,
Forum_DetailReportKomentar,
Forum_DetailReportPosting,
};

41
src/app_modules/forum/main/beranda.tsx
View File

@@ -11,20 +11,21 @@ import {
Stack,
Text,
TextInput,
rem
rem,
} from "@mantine/core";
import { useShallowEffect, useWindowScroll } from "@mantine/hooks";
import {
IconPencilPlus,
IconSearchOff
} from "@tabler/icons-react";
import { IconPencilPlus, IconSearchOff } from "@tabler/icons-react";
import _ from "lodash";
import { ScrollOnly } from "next-scroll-loader";
import { useRouter } from "next/navigation";
import { useState } from "react";
import ComponentForum_V2_MainCardView from "../component/main_component/card_view";
import ComponentForum_BerandaCardView from "../component/main_component/card_view";
import { forum_new_getAllPosting } from "../fun/get/new_get_all_posting";
import { MODEL_FORUM_POSTING } from "../model/interface";
import {
AccentColor,
MainColor,
} from "@/app_modules/component_global/color/color_pallet";
export default function Forum_Beranda({
listForum,
@@ -121,7 +122,7 @@ export default function Forum_Beranda({
return (
<>
{isNewPost && (
<Affix position={{ top: rem(70) }} w={"100%"}>
<Affix position={{ top: rem(100) }} w={"100%"}>
<ButtonUpdateBeranda
countNewPost={countNewPost}
onSetData={(val) => setData(val)}
@@ -138,25 +139,29 @@ export default function Forum_Beranda({
{/* <pre>{JSON.stringify(listForum, null, 2)}</pre> */}
<Affix position={{ bottom: rem(100), right: rem(30) }}>
<ActionIcon
loading={loadingCreate ? true : false}
opacity={scroll.y > 0 ? 0.5 : ""}
style={{
transition: "0.5s",
border: `1px solid ${AccentColor.skyblue}`,
}}
size={"xl"}
radius={"xl"}
variant="transparent"
bg={"blue"}
bg={AccentColor.blue}
onClick={() => {
setLoadingCreate(true);
router.push(RouterForum.create);
}}
>
<IconPencilPlus color="white" />
{loadingCreate ? (
<Loader size={25} />
) : (
<IconPencilPlus color="white" />
)}
</ActionIcon>
</Affix>
<Stack px={"sm"} spacing={"xl"}>
<Stack spacing={"xl"}>
<TextInput
radius={"xl"}
placeholder="Topik forum apa yang anda cari hari ini ?"
@@ -164,11 +169,12 @@ export default function Forum_Beranda({
onSearch(val.currentTarget.value);
}}
/>
{_.isEmpty(data) ? (
<Stack align="center" justify="center" h={"80vh"}>
<IconSearchOff size={80} color="gray" />
<IconSearchOff size={80} color="white" />
<Stack spacing={0} align="center">
<Text c={"gray"} fw={"bold"} fz={"xs"}>
<Text color="white" fw={"bold"} fz={"xs"}>
Tidak ada data
</Text>
</Stack>
@@ -176,7 +182,7 @@ export default function Forum_Beranda({
) : (
// --- Main component --- //
<ScrollOnly
height="80vh"
height="83vh"
renderLoading={() => (
<Center mt={"lg"}>
<Loader />
@@ -195,7 +201,7 @@ export default function Forum_Beranda({
}}
>
{(item) => (
<ComponentForum_V2_MainCardView
<ComponentForum_BerandaCardView
data={item}
userLoginId={userLoginId}
onLoadData={(val) => {
@@ -241,6 +247,11 @@ function ButtonUpdateBeranda({
<>
<Center>
<Button
style={{
transition: "0.5s",
border: `1px solid ${AccentColor.skyblue}`,
}}
bg={AccentColor.blue}
loaderPosition="center"
loading={isLoading ? true : false}
radius={"xl"}

49
src/app_modules/forum/main/layout.tsx
View File

@@ -9,6 +9,7 @@ import {
Grid,
Group,
Header,
Loader,
Stack,
Text,
Title,
@@ -25,6 +26,8 @@ import { MODEL_USER } from "@/app_modules/home/model/interface";
import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
export default function LayoutForum_Main({
children,
@@ -37,8 +40,6 @@ export default function LayoutForum_Main({
const [hotMenu, setHotMenu] = useState(1);
const [loading, setLoading] = useState(false);
if (loading) return <ComponentGlobal_V2_LoadingPage />;
const listFooter = [
{
id: 1,
@@ -57,7 +58,46 @@ export default function LayoutForum_Main({
return (
<>
<AppComponentGlobal_LayoutTamplate
<ComponentGlobal_UI_LayoutTamplate
header={
<ComponentGlobal_UI_HeaderTamplate
title="FORUM"
iconRight={
<ActionIcon
radius={"xl"}
variant="transparent"
onClick={() => {
setLoading(true);
router.push(RouterForum.forumku + dataAuthor?.id);
}}
>
{loading ? (
<Loader size={20} />
) : (
<Avatar
radius={"xl"}
size={30}
sx={{
borderStyle: "solid",
borderWidth: "0.5px",
borderColor: "black",
}}
alt="foto"
src={
RouterProfile.api_foto_profile +
dataAuthor?.Profile?.imagesId
}
/>
)}
</ActionIcon>
}
/>
}
>
{children}
</ComponentGlobal_UI_LayoutTamplate>
{/* <AppComponentGlobal_LayoutTamplate
header={
<Header height={50} sx={{ borderStyle: "none" }}>
<Group h={50} position="apart" px={"md"}>
@@ -72,6 +112,7 @@ export default function LayoutForum_Main({
</ActionIcon>
<Title order={5}>Forum</Title>
<ActionIcon
loading={loading ? true : false}
variant="transparent"
@@ -132,7 +173,7 @@ export default function LayoutForum_Main({
// }
>
{children}
</AppComponentGlobal_LayoutTamplate>
</AppComponentGlobal_LayoutTamplate> */}
</>
);
}

17
src/app_modules/forum/model/interface.tsx
View File

@@ -23,6 +23,7 @@ export interface MODEL_FORUM_KOMENTAR {
updatedAt: Date;
komentar: string;
forum_PostingId: string;
Forum_Posting: MODEL_FORUM_POSTING;
authorId: string;
Author: MODEL_USER;
Forum_ReportKomentar: MODEL_FORUM_MASTER_REPORT[];
@@ -45,7 +46,7 @@ export interface MODEL_FORUM_MASTER_STATUS {
status: string;
}
export interface MODEL_FORUM_REPORT {
export interface MODEL_FORUM_REPORT_POSTING {
id: string;
isActive: boolean;
createdAt: Date;
@@ -58,3 +59,17 @@ export interface MODEL_FORUM_REPORT {
userId: string;
User: MODEL_USER;
}
export interface MODEL_FORUM_REPORT_KOMENTAR {
id: string;
isActive: boolean;
createdAt: Date;
updatedAt: Date;
deskripsi: string;
ForumMaster_KategoriReport: MODEL_FORUM_MASTER_REPORT;
forumMaster_KategoriReportId: string;
forum_KomentarId: string,
Forum_Komentar: MODEL_FORUM_KOMENTAR;
userId: string;
User: MODEL_USER;
}

87
src/app_modules/forum/report/komentar/index.tsx
View File

@@ -1,28 +1,40 @@
"use client";
import { Box, Button, Paper, Radio, Stack, Text, Title } from "@mantine/core";
import { MODEL_FORUM_MASTER_REPORT } from "../../model/interface";
import { useState } from "react";
import { forum_funCreateReportPosting } from "../../fun/create/fun_create_report_posting";
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
import { useRouter } from "next/navigation";
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
import mqtt_client from "@/util/mqtt_client";
import { Button, Radio, Stack, Text, Title } from "@mantine/core";
import { toNumber } from "lodash";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { forum_funCreateReportKomentar } from "../../fun/create/fun_create_report_komentar";
import forum_funCreateNotifikasiToAdmin from "../../fun/forum_notifikasi/fun_create_notifikasi";
import { MODEL_FORUM_MASTER_REPORT } from "../../model/interface";
import forum_getOneKategoriById from "../../fun/get/get_one_kategori_by_id";
import getMaster_NamaBank from "@/app_modules/investasi/fun/master/get_nama_bank";
export default function Forum_ReportKomentar({
komentarId,
listReport,
userLoginId,
}: {
komentarId: string;
listReport: MODEL_FORUM_MASTER_REPORT[];
userLoginId: string;
}) {
const [reportValue, setReportValue] = useState("Kebencian");
return (
<>
<Stack px={"sm"}>
<Radio.Group value={reportValue as any} onChange={setReportValue}>
<Radio.Group
value={reportValue as any}
onChange={(val) => {
setReportValue(val);
}}
>
<Stack spacing={"xl"}>
{listReport.map((e) => (
<Stack key={e.id}>
@@ -35,32 +47,67 @@ export default function Forum_ReportKomentar({
))}
</Stack>
</Radio.Group>
<ButtonAction value={reportValue} komentarId={komentarId} />
<ButtonAction
kategoriId={reportValue}
komentarId={komentarId}
userLoginId={userLoginId}
/>
</Stack>
</>
);
}
function ButtonAction({
value,
kategoriId,
komentarId,
userLoginId,
}: {
value: string;
kategoriId: string;
komentarId: string;
userLoginId: string;
}) {
const router = useRouter();
const [loading, setLoading] = useState(false);
async function onReport() {
await forum_funCreateReportKomentar(komentarId, value).then((res) => {
if (res.status === 201) {
ComponentGlobal_NotifikasiBerhasil(res.message, 2000);
setLoading(true);
router.back();
} else {
ComponentGlobal_NotifikasiGagal(res.message);
}
const report = await forum_funCreateReportKomentar({
komentarId: komentarId,
kategoriId: kategoriId,
});
if (report.status === 201) {
ComponentGlobal_NotifikasiBerhasil(report.message, 2000);
setLoading(true);
router.back();
// const get = await getMaster_NamaBank();
// console.log(get);
// await forum_getOneKategoriById({
// kategoriId: kategoriId,
// });
// console.log(getKategori);
// const dataNotif = {
// appId: komentarId,
// pesan: getKategori?.deskripsi,
// kategoriApp: "FORUM",
// title: getKategori?.title,
// userId: userLoginId,
// status: "Report Komentar",
// };
// const createNotif = await forum_funCreateNotifikasiToAdmin({
// data: dataNotif as any,
// });
// if (createNotif.status === 201) {
// mqtt_client.publish("ADMIN", JSON.stringify({ count: 1 }));
// }
} else {
ComponentGlobal_NotifikasiGagal(report.message);
}
}
return (
<>
@@ -75,7 +122,7 @@ function ButtonAction({
</Button>
<Button
radius={"xl"}
color="red"
color="orange"
loaderPosition="center"
loading={loading ? true : false}
onClick={() => onReport()}

2
src/app_modules/forum/report/komentar/lainnya.tsx
View File

@@ -61,7 +61,7 @@ function ButtonAction({
>
Batal
</Button>
<Button radius={"xl"} color="red" onClick={() => onReport()}>
<Button radius={"xl"} color="orange" onClick={() => onReport()}>
Report
</Button>
</Group>

5
src/app_modules/forum/report/posting/index.tsx
View File

@@ -77,10 +77,9 @@ function ButtonAction({
const getKategori = await forum_getOneKategoriById({
kategoriId: toNumber(kategoriId),
});
console.log(getKategori);
// console.log(getKategori);
ComponentGlobal_NotifikasiBerhasil(report.message, 2000);
setLoading(true);
router.back();
const dataNotif = {
@@ -99,6 +98,8 @@ function ButtonAction({
if (createNotifikasi.status === 201) {
mqtt_client.publish("ADMIN", JSON.stringify({ count: 1 }));
}
setLoading(true);
} else {
ComponentGlobal_NotifikasiGagal(report.message);
}

63
src/app_modules/forum/report/posting/lainnya.tsx
View File

@@ -8,11 +8,15 @@ import { forum_funCreateReportPosting } from "../../fun/create/fun_create_report
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
import { forum_funCreateReportPostingLainnya } from "../../fun/create/fun_create_report_posting_lainnya";
import mqtt_client from "@/util/mqtt_client";
import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_admin";
export default function Forum_ReportPostingLainnya({
postingIg,
postingId,
userLoginId,
}: {
postingIg: string;
postingId: string;
userLoginId: string;
}) {
const [deskripsi, setDeskripsi] = useState("");
return (
@@ -26,46 +30,69 @@ export default function Forum_ReportPostingLainnya({
setDeskripsi(val.currentTarget.value);
}}
/>
<ButtonAction postingIg={postingIg} deskripsi={deskripsi} />
<ButtonAction
postingId={postingId}
deskripsi={deskripsi}
userLoginId={userLoginId}
/>
</Stack>
</>
);
}
function ButtonAction({
postingIg,
postingId,
deskripsi,
userLoginId,
}: {
postingIg: string;
postingId: string;
deskripsi: string;
userLoginId: string;
}) {
const router = useRouter();
async function onReport() {
await forum_funCreateReportPostingLainnya(postingIg, deskripsi).then(
(res) => {
if (res.status === 201) {
ComponentGlobal_NotifikasiBerhasil(res.message);
router.back();
} else {
ComponentGlobal_NotifikasiGagal(res.message);
}
}
const report = await forum_funCreateReportPostingLainnya(
postingId,
deskripsi
);
if (report.status === 201) {
ComponentGlobal_NotifikasiBerhasil(report.message);
router.back();
const dataNotif = {
appId: postingId,
pesan: deskripsi,
kategoriApp: "FORUM",
title: "Lainnya",
userId: userLoginId,
status: "Report Posting",
};
const createNotifikasi = await notifikasiToAdmin_funCreate({
data: dataNotif as any,
});
if (createNotifikasi.status === 201) {
mqtt_client.publish("ADMIN", JSON.stringify({ count: 1 }));
}
} else {
ComponentGlobal_NotifikasiGagal(report.message);
}
}
return (
<>
<Group position="apart" grow>
<Button
radius={"xl"}
onClick={() => router.replace(RouterForum.report_posting + postingIg)}
onClick={() => router.replace(RouterForum.report_posting + postingId)}
>
Batal
</Button>
<Button
style={{
transition: "0.5s"
}}
style={{
transition: "0.5s",
}}
disabled={deskripsi === "" ? true : false}
radius={"xl"}
color="orange"

45
src/app_modules/forum/splash/index.tsx
View File

@@ -1,27 +1,44 @@
"use client";
import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
import { Center, Image, Paper } from "@mantine/core";
import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
import { Center, Image, Paper, Stack } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useRouter } from "next/navigation";
export default function Forum_Splash() {
const router = useRouter()
useShallowEffect(() => {
setTimeout(() => {
// setHotMenu(1);
// setStatus("Publish");
router.replace(RouterForum.beranda);
}, 1000);
}, []);
const router = useRouter();
useShallowEffect(() => {
setTimeout(() => {
router.replace(RouterForum.beranda);
}, 1000);
}, []);
return (
<>
<Center h={"100vh"}>
<Paper p={{ base: 50, md: 60, lg: 80 }}>
<Image alt="logo" src={"/aset/forum/logo.png"} />
</Paper>
</Center>
<ComponentGlobal_UI_LayoutTamplate>
<ViewSplash />
</ComponentGlobal_UI_LayoutTamplate>
</>
);
}
function ViewSplash() {
return (
<>
<Stack h={"90vh"} align="center" justify="center">
<Paper
radius={"100%"}
// p={{ base: 50, md: 60, lg: 80 }}
>
<Image
height={300}
radius={"100%"}
alt="logo"
src={"/aset/forum/logo.png"}
/>
</Paper>
</Stack>
</>
);
}