Kabar Donasi

# feat
- Create kabar
- Delete kabar
- List kabar
## No issue

src/app_modules/donasi/edit/list_kabar/index.tsx

@@ -4,6 +4,7 @@ import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
 import {
   ActionIcon,
   Avatar,
+  Box,
   Button,
   Group,
   Paper,
@@ -20,13 +21,27 @@ import {
 } from "@tabler/icons-react";
 import moment from "moment";
 import { useRouter } from "next/navigation";
+import { MODEL_DONASI_KABAR } from "../../model/interface";
+import { useState } from "react";
+import ComponentDonasi_ListKabar from "../../component/detail_main/list_kabar";
 
-export default function ListKabarDonasi() {
+export default function ListKabarDonasi({
+  donasiId,
+  listKabar,
+}: {
+  donasiId: string;
+  listKabar: MODEL_DONASI_KABAR[];
+}) {
   const router = useRouter();
+  const [kabar, setKabar] = useState(listKabar);
   return (
     <>
       <Stack>
-        <Button leftIcon={<IconCirclePlus />} radius={"xl"}>
+        <Button
+          leftIcon={<IconCirclePlus />}
+          radius={"xl"}
+          onClick={() => router.push(RouterDonasi.create_kabar + `${donasiId}`)}
+        >
           Tambah Kabar
         </Button>
         <SimpleGrid
@@ -38,40 +53,11 @@ export default function ListKabarDonasi() {
             { maxWidth: "36rem", cols: 1, spacing: "sm" },
           ]}
         >
-          {Array(4)
-            .fill(0)
-            .map((e, i) => (
-              <Paper key={i} bg={"gray.1"} p={"md"}>
-                <Stack>
-                <Group>
-                      <Avatar variant="filled" radius={"xl"} />
-                      <Stack spacing={0}>
-                        <Text>Username</Text>
-                        <Text fz={"xs"}>{moment(Date.now()).format("ll")}</Text>
-                      </Stack>
-                    </Group>
-                    
-                  <Stack>
-                    <Title order={5}>Judul Kabar</Title>
-                    <Stack spacing={0}>
-                      <Text lineClamp={2}>
-                        Lorem ipsum, dolor sit amet consectetur adipisicing
-                        elit. Aliquam nostrum vitae eum facilis similique minus
-                        exercitationem assumenda, quidem dolores illum ducimus
-                        fuga rem molestias? Numquam id praesentium dolor qui
-                        amet.
-                      </Text>
-                      <Text
-                        c={"blue"}
-                        onClick={() => router.push(RouterDonasi.update_kabar)}
-                      >
-                        Buka Kabar
-                      </Text>
-                    </Stack>
-                  </Stack>
-                </Stack>
-              </Paper>
-            ))}
+          {kabar.map((e, i) => (
+           <Box key={i}>
+            <ComponentDonasi_ListKabar kabar={e}/>
+           </Box>
+          ))}
         </SimpleGrid>
       </Stack>
     </>

src/app_modules/donasi/edit/update_kabar/index.tsx

@@ -13,37 +13,36 @@ import {
   Divider,
 } from "@mantine/core";
 import moment from "moment";
+import { MODEL_DONASI_KABAR } from "../../model/interface";
+import { useState } from "react";
 
-export default function UpdateKabarDonasi() {
+export default function UpdateKabarDonasi({
+  dataKabar,
+}: {
+  dataKabar: MODEL_DONASI_KABAR;
+}) {
+  const [kabar, setKabar] = useState(dataKabar);
   return (
     <>
       <Stack>
-        <Group>
+        {/* <Group>
           <Avatar variant="filled" radius={"xl"} />
           <Stack spacing={0}>
             <Text>Username</Text>
-            <Text fz={"xs"}>{moment(Date.now()).format("ll")}</Text>
           </Stack>
-        </Group>
+        </Group> */}
         <Stack>
-          <Title order={5}>Judul Berita</Title>
-
-          <Text>
-            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquam
-            nostrum vitae eum facilis similique minus exercitationem assumenda,
-            quidem dolores illum ducimus fuga rem molestias? Numquam id
-            praesentium dolor qui amet.
-          </Text>
-
+          <Text fz={"xs"}>{moment(Date.now()).format("ll")}</Text>
+          <Title order={5}>{kabar.title}</Title>
           <AspectRatio ratio={16 / 9}>
-            <Image alt="Foro" src={"/aset/no-img.png"} />
+            <Paper radius={"md"}>
+              <Image
+                alt="Foro"
+                src={RouterDonasi.api_gambar_kabar + `${kabar.imagesId}`}
+              />
+            </Paper>
           </AspectRatio>
-          <Text>
-            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquam
-            nostrum vitae eum facilis similique minus exercitationem assumenda,
-            quidem dolores illum ducimus fuga rem molestias? Numquam id
-            praesentium dolor qui amet.
-          </Text>
+          <Text>{kabar.deskripsi}</Text>
         </Stack>
       </Stack>
     </>

src/app_modules/donasi/edit/update_kabar/layout.tsx

@@ -13,13 +13,20 @@ import { useRouter } from "next/navigation";
 import React from "react";
 import FooterDonasi from "../../component/footer_close_donasi";
 import HeaderTamplateDonasi from "../../component/header_tamplate";
+import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
+import { Donasi_funDeleteKabar } from "../../fun/delete/fun_delete.kabar";
+import { NotifBerhasil } from "../../component/notifikasi/notif_berhasil";
+import { NotifGagal } from "../../component/notifikasi/notif_gagal";
 
 export default function LayoutUpdateKabarDonasi({
   children,
+  kabarId
 }: {
   children: React.ReactNode;
+  kabarId: string
 }) {
   const router = useRouter();
+
   return (
     <>
       <AppShell
@@ -27,10 +34,10 @@ export default function LayoutUpdateKabarDonasi({
         footer={
           <Footer height={70}>
             <Group align="center" h={"100%"} position="center" spacing={"xl"}>
-              <Button radius={"xl"} variant="outline" color="green">
+              {/* <Button radius={"xl"} variant="outline" color="green">
                 Edit
-              </Button>
-              <Button radius={"xl"} variant="outline" color="red">
+              </Button> */}
+              <Button radius={"xl"} variant="outline" color="red" onClick={() => onDelete(router,kabarId )}>
                 Hapus
               </Button>
             </Group>
@@ -42,3 +49,15 @@ export default function LayoutUpdateKabarDonasi({
     </>
   );
 }
+
+async function onDelete(router: AppRouterInstance ,kabarId: string) {
+  await Donasi_funDeleteKabar(kabarId)
+  .then((res) => {
+    if(res.status === 200){
+      router.back()
+      NotifBerhasil(res.message)
+    } else {
+      NotifGagal(res.message)
+    }
+  })
+}