fix event admin

src/app_modules/admin/event/child/tipe_acara.tsx

@@ -17,7 +17,7 @@ import {
   TextInput,
   Title,
 } from "@mantine/core";
-import { useDisclosure } from "@mantine/hooks";
+import { useDisclosure, useShallowEffect } from "@mantine/hooks";
 import { IconCirclePlus, IconEditCircle, IconTrash } from "@tabler/icons-react";
 import { useState } from "react";
 import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
@@ -25,29 +25,23 @@ import { AdminEvent_funCreateTipeAcara } from "../fun/create/fun_create_tipe_aca
 import { AdminEvent_funEditActivationTipeAcaraById } from "../fun/edit/fun_edit_activation_tipe_acara";
 import { AdminEvent_funEditTipeAcara } from "../fun/edit/fun_edit_tipe_acara";
 import { AdminEvent_getListTipeAcara } from "../fun/get/get_list_tipe_acara";
+import { apiGetAdminEventTipeAcara } from "@/app/dev/admin/event/_lib/api_fecth_admin_event";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { clientLogger } from "@/util/clientLogger";
 
-export default function AdminEvent_DetailTipeAcara({
-  listTipe,
-}: {
-  listTipe: any;
-}) {
+export default function AdminEvent_DetailTipeAcara() {
   return (
     <>
       <Stack>
         <ComponentAdminGlobal_HeaderTamplate name="Event" />
-
-        <DetailTipeAcara listTipe={listTipe} />
+        <DetailTipeAcara />
       </Stack>
     </>
   );
 }
 
-function DetailTipeAcara({
-  listTipe,
-}: {
-  listTipe: MODEL_DEFAULT_MASTER_OLD[];
-}) {
-  const [tipe, setTipe] = useState(listTipe);
+function DetailTipeAcara() {
+  const [tipe, setTipe] = useState<MODEL_DEFAULT_MASTER_OLD[] | null>(null);
   const [name, setName] = useState("");
   const [openEditor, setOpenEditor] = useState(false);
   const [edit, setEdit] = useState<MODEL_DEFAULT_MASTER_OLD | null>(null);
@@ -58,6 +52,21 @@ function DetailTipeAcara({
   });
   const [openCreate, setOpenCreate] = useState(false);
 
+  useShallowEffect(() => {
+    onLoadData();
+  }, []);
+
+  async function onLoadData() {
+    try {
+      const respone = await apiGetAdminEventTipeAcara();
+      if (respone) {
+        setTipe(respone.data);
+      }
+    } catch (error) {
+      clientLogger.error("Error get tipe acara", error);
+    }
+  }
+
   return (
     <>
       <Modal opened={opened} onClose={close} centered withCloseButton={false}>
@@ -101,135 +110,142 @@ function DetailTipeAcara({
         </Button>
       </Group>
 
-      <SimpleGrid
-        cols={2}
-        spacing="lg"
-        breakpoints={[
-          { maxWidth: "62rem", cols: 4, spacing: "lg" },
-          { maxWidth: "48rem", cols: 2, spacing: "sm" },
-          { maxWidth: "36rem", cols: 1, spacing: "sm" },
-        ]}
-      >
-        <div>
-          <Paper p={"md"} shadow="lg" withBorder>
-            <Stack>
-              <Title order={3}>Tipe Acara Yang Tersedia </Title>
-              <Stack px={"md"}>
-                {tipe.map((e, i) => (
-                  <Stack key={e.id} spacing={"xs"}>
-                    <Group position="apart">
-                      <Text>{e.name}</Text>
-                      <Group>
-                        <ActionIcon
-                          variant="transparent"
-                          onClick={() => {
-                            setOpenEditor(true);
-                            setOpenCreate(false);
-                            setEdit(e);
-                          }}
-                        >
-                          <IconEditCircle color="green" />
-                        </ActionIcon>{" "}
-                        <ActionIcon
-                          variant="transparent"
-                          onClick={() => {
-                            open();
-                            setHapusTipe({
-                              ...hapusTipe,
-                              id: e.id,
-                              name: e.name,
-                            });
-                          }}
-                        >
-                          <IconTrash color="red" />
-                        </ActionIcon>
-                      </Group>
-                    </Group>
-                    <Divider />
-                  </Stack>
-                ))}
-              </Stack>
-            </Stack>
-          </Paper>
-        </div>
-
-        {openCreate ? (
+      {!tipe ? (
+        <CustomSkeleton height={400} width={"60%"} />
+      ) : (
+        <SimpleGrid
+          cols={2}
+          spacing="lg"
+          breakpoints={[
+            { maxWidth: "62rem", cols: 4, spacing: "lg" },
+            { maxWidth: "48rem", cols: 2, spacing: "sm" },
+            { maxWidth: "36rem", cols: 1, spacing: "sm" },
+          ]}
+        >
           <div>
-            <Paper p={"sm"} shadow="lg" withBorder>
+            <Paper p={"md"} shadow="lg" withBorder>
               <Stack>
-                <TextInput
-                  value={name ? name : ""}
-                  label="Masukan Tipe"
-                  placeholder="Contoh: Seminar, Workshop, dll."
-                  onChange={(val) => {
-                    setName(val.currentTarget.value);
-                  }}
-                />
-                <Group position="right">
-                  <Button radius={"xl"} onClick={() => setOpenCreate(false)}>
-                    Batal
-                  </Button>
-                  <Button
-                    disabled={!name}
-                    style={{
-                      transition: "all 0.5s ease",
-                    }}
-                    color="green"
-                    radius={"xl"}
-                    onClick={() => onSave(name, setName, setTipe)}
-                  >
-                    Simpan
-                  </Button>
-                </Group>
+                <Title order={3}>Tipe Acara Yang Tersedia </Title>
+                <Stack px={"md"}>
+                  {tipe.map((e, i) => (
+                    <Stack key={e.id} spacing={"xs"}>
+                      <Group position="apart">
+                        <Text>{e.name}</Text>
+                        <Group>
+                          <ActionIcon
+                            variant="transparent"
+                            onClick={() => {
+                              setOpenEditor(true);
+                              setOpenCreate(false);
+                              setEdit(e);
+                            }}
+                          >
+                            <IconEditCircle color="green" />
+                          </ActionIcon>{" "}
+                          <ActionIcon
+                            variant="transparent"
+                            onClick={() => {
+                              open();
+                              setHapusTipe({
+                                ...hapusTipe,
+                                id: e.id,
+                                name: e.name,
+                              });
+                            }}
+                          >
+                            <IconTrash color="red" />
+                          </ActionIcon>
+                        </Group>
+                      </Group>
+                      <Divider />
+                    </Stack>
+                  ))}
+                </Stack>
               </Stack>
             </Paper>
           </div>
-        ) : (
-          ""
-        )}
 
-        <div>
-          {openEditor ? (
-            <Paper p={"sm"} shadow="lg" withBorder>
-              <Stack>
-                <TextInput
-                  value={edit?.name ? edit?.name : ""}
-                  label="Edit Tipe"
-                  placeholder="Contoh: Ramah Tamah, dll"
-                  onChange={(val) => {
-                    setEdit({
-                      ...(edit as any),
-                      namaBank: val.target.value,
-                    });
-                  }}
-                />
-                <Group position="right">
-                  <Group position="apart">
-                    <Button radius={"xl"} onClick={() => setOpenEditor(false)}>
+          {openCreate ? (
+            <div>
+              <Paper p={"sm"} shadow="lg" withBorder>
+                <Stack>
+                  <TextInput
+                    value={name ? name : ""}
+                    label="Masukan Tipe"
+                    placeholder="Contoh: Seminar, Workshop, dll."
+                    onChange={(val) => {
+                      setName(val.currentTarget.value);
+                    }}
+                  />
+                  <Group position="right">
+                    <Button radius={"xl"} onClick={() => setOpenCreate(false)}>
                       Batal
                     </Button>
                     <Button
-                      disabled={!edit?.name}
+                      disabled={!name}
                       style={{
                         transition: "all 0.5s ease",
                       }}
-                      radius={"xl"}
                       color="green"
-                      onClick={() =>
-                        onUpdate(edit?.id, edit?.name, setTipe, setOpenEditor)
-                      }
+                      radius={"xl"}
+                      onClick={() => onSave(name, setName, setTipe)}
                     >
-                      Update
+                      Simpan
                     </Button>
                   </Group>
-                </Group>
-              </Stack>
-            </Paper>
+                </Stack>
+              </Paper>
+            </div>
           ) : (
             ""
           )}
-        </div>
-      </SimpleGrid>
+
+          <div>
+            {openEditor ? (
+              <Paper p={"sm"} shadow="lg" withBorder>
+                <Stack>
+                  <TextInput
+                    value={edit?.name ? edit?.name : ""}
+                    label="Edit Tipe"
+                    placeholder="Contoh: Ramah Tamah, dll"
+                    onChange={(val) => {
+                      setEdit({
+                        ...(edit as any),
+                        namaBank: val.target.value,
+                      });
+                    }}
+                  />
+                  <Group position="right">
+                    <Group position="apart">
+                      <Button
+                        radius={"xl"}
+                        onClick={() => setOpenEditor(false)}
+                      >
+                        Batal
+                      </Button>
+                      <Button
+                        disabled={!edit?.name}
+                        style={{
+                          transition: "all 0.5s ease",
+                        }}
+                        radius={"xl"}
+                        color="green"
+                        onClick={() =>
+                          onUpdate(edit?.id, edit?.name, setTipe, setOpenEditor)
+                        }
+                      >
+                        Update
+                      </Button>
+                    </Group>
+                  </Group>
+                </Stack>
+              </Paper>
+            ) : (
+              ""
+            )}
+          </div>
+        </SimpleGrid>
+      )}
     </>
   );
 }