# Forum Created

## feat
- CRUD Forum
- CRD Koment
- Tampilan forum profile
### No issue

src/app_modules/forum/main/beranda.tsx

@@ -13,33 +13,41 @@ import {
   Stack,
   Divider,
   Group,
+  Box,
 } from "@mantine/core";
-import { useTimeout, useWindowScroll } from "@mantine/hooks";
+import { useShallowEffect, useTimeout, useWindowScroll } from "@mantine/hooks";
 import {
   IconCirclePlus,
   IconMessageCircle,
   IconPencilPlus,
 } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
-import ComponentForum_AuthorNameOnHeader from "../component/author_header_name";
+import ComponentForum_PostingAuthorNameOnHeader from "../component/header/posting_author_header_name";
 import { useState } from "react";
 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 { MODEL_FORUM_POSTING } from "../model/interface";
+import ComponentForum_MainCardView from "../component/main_card_view";
 
-export default function Forum_Beranda() {
+export default function Forum_Beranda({
+  listForum,
+}: {
+  listForum: MODEL_FORUM_POSTING[];
+}) {
   const router = useRouter();
-  const skrng = Date.now();
   const [scroll, scrollTo] = useWindowScroll();
+
   const [loadingCreate, setLoadingCreate] = useState(false);
   const [loadingKomen, setLoadingKomen] = useState(false);
-  const [loadingDetail, setLoaduingDetail] = useState(false);
+  const [loadingDetail, setLoadingDetail] = useState(false);
 
   if (loadingDetail) return <ComponentGlobal_V2_LoadingPage />;
   if (loadingKomen) return <ComponentGlobal_V2_LoadingPage />;
 
   return (
     <>
+    {/* <pre>{JSON.stringify(listForum, null, 2)}</pre> */}
       <Affix position={{ bottom: rem(100), right: rem(30) }}>
         <ActionIcon
           loading={loadingCreate ? true : false}
@@ -60,58 +68,67 @@ export default function Forum_Beranda() {
         </ActionIcon>
       </Affix>
 
-      <Stack px={"sm"}>
-        {Array(5)
-          .fill(0)
-          .map((e, i) => (
-            <Card key={i}>
-              <Card.Section>
-                <ComponentForum_AuthorNameOnHeader
-                  forumId={i as any}
-                  tipe="posting"
-                  isMoreButton={true}
-                />
-              </Card.Section>
-              <Card.Section
-                sx={{ zIndex: 0 }}
-                p={"sm"}
-                onClick={() => {
-                  // console.log("halaman forum");
-                  setLoaduingDetail(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>
+      <Box px={"sm"}>
+        <ComponentForum_MainCardView
+          data={listForum}
+          setLoadingKomen={setLoadingKomen}
+          setLoadingDetail={setLoadingDetail}
+        />
+      </Box>
+
+      {/* <Stack px={"sm"}>
+        {listForum.map((e, i) => (
+          <Card key={i}>
+            <Card.Section>
+              <ComponentForum_PostingAuthorNameOnHeader
+                authorName={e?.Author?.Profile?.name}
+                imagesId={e?.Author?.Profile?.imagesId}
+                tglPublish={e?.createdAt}
+                isMoreButton={true}
+                authorId={e?.Author?.id}
+                postingId={e?.id}
+              />
+            </Card.Section>
+            <Card.Section
+              sx={{ zIndex: 0 }}
+              p={"sm"}
+              onClick={() => {
+                // console.log("halaman forum");
+                setLoadingDetail(true);
+                router.push(RouterForum.main_detail + e.id);
+              }}
+            >
+              <Stack spacing={"xs"}>
+                <Text fz={"sm"} lineClamp={4}>
+                  <div dangerouslySetInnerHTML={{ __html: e.diskusi }} />
+                </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 + e.id);
+                    }}
+                  >
+                    <IconMessageCircle color="gray" size={25} />
+                  </ActionIcon>
+
+                  <TotalKomentar postingId={e?.id} />
+                </Group>
+                <Divider />
+              </Stack>
+            </Card.Section>
+          </Card>
+        ))}
+      </Stack> */}
     </>
   );
 }
+
+

src/app_modules/forum/main/layout.tsx

@@ -23,6 +23,7 @@ import { useRouter } from "next/navigation";
 import { title } from "process";
 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";
 
 export default function LayoutForum_Main({
   children,
@@ -35,6 +36,8 @@ 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,
@@ -60,6 +63,7 @@ export default function LayoutForum_Main({
               <ActionIcon
                 variant="transparent"
                 onClick={() => {
+                  setLoading(true);
                   return router.push(RouterHome.main_home);
                 }}
               >