Integrasi API: Admin event & QR Code event

Add:
- app/(application)/(user)/event/[id]/confirmation.tsx
- screens/Admin/Event/
- service/api-admin/api-admin-event.ts

Fix:
- app.config.js : penambahan DEEP_LINK_URL untuk url QR Code
- app/(application)/(user)/event/create.tsx
- app/(application)/admin/event/[id]/[status]/index.tsx
- app/(application)/admin/event/[id]/reject-input.tsx
- app/(application)/admin/event/[status]/status.tsx
- app/(application)/admin/event/index.tsx
- app/(application)/admin/job/[id]/[status]/index.tsx
- screens/Admin/listPageAdmin.tsx
- service/api-config.ts
-

### No Issue

app/(application)/(user)/event/[id]/confirmation.tsx

@@ -0,0 +1,30 @@
+import { BackButton, TextCustom, ViewWrapper } from "@/components";
+import { useAuth } from "@/hooks/use-auth";
+import { Redirect, Stack, useLocalSearchParams } from "expo-router";
+
+export default function UserEventConfirmation() {
+  const { token } = useAuth();
+  const { id, userId } = useLocalSearchParams();
+
+  console.log("[TOKEN]", token);
+
+  if (!token) {
+    return <Redirect href={`/`} />;
+  }
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: "Konfirmasi Event",
+          headerLeft: () => <BackButton path={"/home"} />,
+        }}
+      />
+      <ViewWrapper>
+        <TextCustom>
+          TEST CONFIRMATION {id} {userId}
+        </TextCustom>
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/(user)/event/create.tsx

@@ -191,7 +191,7 @@ export default function EventCreate() {
             placeholder="Masukkan deskripsi event"
             required
             showCount
-            maxLength={100}
+            maxLength={1000}
             onChangeText={(value: any) =>
               setData({ ...data, deskripsi: value })
             }

app/(application)/admin/event/[id]/[status]/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   ActionIcon,
   AlertDefaultSystem,
@@ -15,98 +16,96 @@ import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButt
 import AdminButtonReject from "@/components/_ShareComponent/Admin/ButtonReject";
 import AdminButtonReview from "@/components/_ShareComponent/Admin/ButtonReview";
 import { GridDetail_4_8 } from "@/components/_ShareComponent/GridDetail_4_8";
-import { MainColor } from "@/constants/color-palet";
+import ReportBox from "@/components/Box/ReportBox";
 import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
-import dayjs from "dayjs";
-import { router, useLocalSearchParams } from "expo-router";
+import { useAuth } from "@/hooks/use-auth";
+import { funUpdateStatusEvent } from "@/screens/Admin/Event/funUpdateStatus";
+import { apiAdminEventById } from "@/service/api-admin/api-admin-event";
+import { DEEP_LINK_URL } from "@/service/api-config";
+import { colorBadge } from "@/utils/colorBadge";
+import { dateTimeView } from "@/utils/dateTimeView";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
 import _ from "lodash";
-import React from "react";
+import React, { useCallback } from "react";
 import QRCode from "react-native-qrcode-svg";
 
 export default function AdminEventDetail() {
+  const { user } = useAuth();
   const { id, status } = useLocalSearchParams();
-  const [openDrawer, setOpenDrawer] = React.useState(false);
 
-  const colorBadge = () => {
-    if (status === "publish") {
-      return MainColor.green;
-    } else if (status === "review") {
-      return MainColor.orange;
-    } else if (status === "reject") {
-      return MainColor.red;
-    } else {
-      return MainColor.placeholder;
+  console.log("[ID Detail]", id);
+  console.log("[STATUS Detail]", status);
+  const [openDrawer, setOpenDrawer] = React.useState(false);
+  const newURL = DEEP_LINK_URL
+  console.log("[NEW URL]", newURL);
+
+  const [data, setData] = React.useState<any | null>(null);
+  const deepLinkURL = `${DEEP_LINK_URL}/--/event/${id}/confirmation?userId=${user?.id}`;
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [id])
+  );
+  const onLoadData = async () => {
+    try {
+      const response = await apiAdminEventById({
+        id: id as string,
+      });
+
+      // console.log(`[RES DATA BY ID: ${id}]`, JSON.stringify(response, null, 2));
+
+      if (response.success) {
+        setData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
     }
   };
 
   const listData = [
     {
       label: "Pembuat Event",
-      value: `Bagas Banuna ${id}`,
+      value: (data && data?.Author?.username) || "-",
     },
     {
       label: "Judul Event",
-      value: `Event 123`,
+      value: (data && data?.title) || "-",
     },
     {
       label: "Status",
-      value: (
-        <BadgeCustom color={colorBadge()}>
-          {_.startCase(status as string)}
-        </BadgeCustom>
-      ),
+      value:
+        (data && (
+          <BadgeCustom color={colorBadge({ status: status as string })}>
+            {_.startCase(status as string)}
+          </BadgeCustom>
+        )) ||
+        "-",
     },
     {
       label: "Lokasi",
-      value: "Lokasi Event",
+      value: (data && data?.lokasi) || "-",
     },
     {
       label: "Tipe Acara",
-      value: "Tipe Acara",
+      value: (data && data?.EventMaster_TipeAcara?.name) || "-",
     },
     {
       label: "Mulai Event",
-      value: dayjs().format("DD/MM/YYYY HH:mm:ss"),
+      value:
+        (data && data?.tanggal && dateTimeView({ date: data?.tanggal })) || "-",
     },
     {
       label: "Event Berakhir",
-      value: dayjs().add(3, "day").format("DD/MM/YYYY HH:mm:ss"),
+      value:
+        (data &&
+          data?.tanggalSelesai &&
+          dateTimeView({ date: data?.tanggalSelesai })) ||
+        "-",
     },
     {
       label: "Deskripsi",
-      value: "Lorem ipsum dolor sit amet consectetur adipisicing elit.",
+      value: (data && data?.deskripsi) || "-",
     },
-    // {
-    //   label: "Daftar Tipe Acara",
-    //   value: (
-    //     <>
-    //       <List.Item
-    //         title={<TextCustom>Pilihan 1</TextCustom>}
-    //         left={(props) => (
-    //           <List.Icon {...props} icon="circle" color={MainColor.yellow} />
-    //         )}
-    //       />
-    //       <List.Item
-    //         title={<TextCustom>Pilihan 2</TextCustom>}
-    //         left={(props) => (
-    //           <List.Icon {...props} icon="circle" color={MainColor.yellow} />
-    //         )}
-    //       />
-    //       <List.Item
-    //         title={<TextCustom>Pilihan 3</TextCustom>}
-    //         left={(props) => (
-    //           <List.Icon {...props} icon="circle" color={MainColor.yellow} />
-    //         )}
-    //       />
-    //       <List.Item
-    //         title={<TextCustom>Pilihan 4</TextCustom>}
-    //         left={(props) => (
-    //           <List.Icon {...props} icon="circle" color={MainColor.yellow} />
-    //         )}
-    //       />
-    //     </>
-    //   ),
-    // },
   ];
 
   const rightComponent = (
@@ -118,6 +117,23 @@ export default function AdminEventDetail() {
     />
   );
 
+  const handlerSubmit = async () => {
+    try {
+      const response = await funUpdateStatusEvent({
+        id: id as string,
+        changeStatus: "publish",
+      });
+
+      console.log("[RES PUBLISH]", JSON.stringify(response, null, 2));
+
+      if (response.success) {
+        router.back();
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
   return (
     <>
       <ViewWrapper
@@ -125,7 +141,7 @@ export default function AdminEventDetail() {
           <AdminBackButtonAntTitle
             title={`Detail Data`}
             rightComponent={
-              (status === "publish" || status === "riwayat") && rightComponent
+              (status === "publish" || status === "history") && rightComponent
             }
           />
         }
@@ -143,12 +159,19 @@ export default function AdminEventDetail() {
 
           <Spacing />
         </BaseBox>
-        {(status === "publish" || status === "riwayat") && (
+
+        {data &&
+          data?.catatan &&
+          (status === "reject" || status === "review") && (
+            <ReportBox text={data?.catatan} />
+          )}
+
+        {(status === "publish" || status === "history") && (
           <BaseBox>
             <StackCustom style={{ alignItems: "center" }}>
               <TextCustom bold>QR Code Event</TextCustom>
               <QRCode
-                value="https://google.com"
+                value={deepLinkURL}
                 size={200}
                 // logo={require("@/assets/images/logo-hipmi.png")}
                 // logoSize={70}
@@ -168,16 +191,11 @@ export default function AdminEventDetail() {
                 message: "Apakah anda yakin ingin mempublikasikan data ini?",
                 textLeft: "Batal",
                 textRight: "Ya",
-                onPressLeft: () => {
-                  router.back();
-                },
-                onPressRight: () => {
-                  router.back();
-                },
+                onPressRight: () => handlerSubmit(),
               });
             }}
             onReject={() => {
-              router.push(`/admin/event/${id}/reject-input`);
+              router.push(`/admin/event/${id}/reject-input?status=${status}`);
             }}
           />
         )}
@@ -186,7 +204,7 @@ export default function AdminEventDetail() {
           <AdminButtonReject
             title="Tambah Catatan"
             onReject={() => {
-              router.push(`/admin/event/${id}/reject-input`);
+              router.push(`/admin/event/${id}/reject-input?status=${status}`);
             }}
           />
         )}

app/(application)/admin/event/[id]/reject-input.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   AlertDefaultSystem,
   BoxButtonOnFooter,
@@ -6,15 +7,79 @@ import {
 } from "@/components";
 import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
 import AdminButtonReject from "@/components/_ShareComponent/Admin/ButtonReject";
-import { router, useLocalSearchParams } from "expo-router";
-import { useState } from "react";
+import { funUpdateStatusEvent } from "@/screens/Admin/Event/funUpdateStatus";
+import { apiAdminEventById } from "@/service/api-admin/api-admin-event";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useCallback, useState } from "react";
+import { TextInput } from "react-native-paper";
+import Toast from "react-native-toast-message";
 
 export default function AdminEventRejectInput() {
-  const { id } = useLocalSearchParams();
-  const [value, setValue] = useState(id as string);
+  const { id, status } = useLocalSearchParams();
+
+  const [data, setData] = useState<any>("");
+  const [isLoading, setIsLoading] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [id])
+  );
+  const onLoadData = async () => {
+    try {
+      const response = await apiAdminEventById({
+        id: id as string,
+      });
+
+      if (response.success) {
+        setData(response.data.catatan);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  const handleUpdate = async ({
+    changeStatus,
+  }: {
+    changeStatus: "publish" | "review" | "reject";
+  }) => {
+    try {
+      setIsLoading(true);
+      const response = await funUpdateStatusEvent({
+        id: id as string,
+        changeStatus,
+        data: data,
+      });
+
+      if (!response.success) {
+        Toast.show({
+          type: "error",
+          text1: "Report gagal",
+        });
+      }
+
+      Toast.show({
+        type: "success",
+        text1: "Report berhasil",
+      });
+
+      if (status === "review") {
+        router.replace(`/admin/event/reject/status`);
+      } else if (status === "reject") {
+        router.back();
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   const buttonSubmit = (
     <BoxButtonOnFooter>
       <AdminButtonReject
+        isLoading={isLoading}
         title="Reject"
         onReject={() =>
           AlertDefaultSystem({
@@ -22,12 +87,8 @@ export default function AdminEventRejectInput() {
             message: "Apakah anda yakin ingin menolak data ini?",
             textLeft: "Batal",
             textRight: "Ya",
-            onPressLeft: () => {
-              router.back();
-            },
             onPressRight: () => {
-              console.log("value:", value);
-              router.replace(`/admin/event/reject/status`);
+              handleUpdate({ changeStatus: "reject" });
             },
           })
         }
@@ -42,8 +103,8 @@ export default function AdminEventRejectInput() {
         headerComponent={<AdminBackButtonAntTitle title="Penolakan Event" />}
       >
         <TextAreaCustom
-          value={value}
-          onChangeText={setValue}
+          value={data}
+          onChangeText={setData}
           placeholder="Masukan alasan"
           required
           showCount

app/(application)/admin/event/[status]/status.tsx

@@ -1,8 +1,11 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   ActionIcon,
   BaseBox,
+  LoaderCustom,
   SearchInput,
   Spacing,
+  StackCustom,
   TextCustom,
   ViewWrapper,
 } from "@/components";
@@ -11,17 +14,56 @@ import AdminTitleTable from "@/components/_ShareComponent/Admin/TableTitle";
 import AdminTableValue from "@/components/_ShareComponent/Admin/TableValue";
 import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
 import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
+import { apiAdminEvent } from "@/service/api-admin/api-admin-event";
 import { Octicons } from "@expo/vector-icons";
-import { router, useLocalSearchParams } from "expo-router";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
 import _ from "lodash";
+import { useState, useCallback } from "react";
 import { Divider } from "react-native-paper";
 
 export default function AdminEventStatus() {
   const { status } = useLocalSearchParams();
+  console.log("[STATUS EVENT]", status);
+
+  const [listData, setListData] = useState<any[] | null>(null);
+  const [loadData, setLoadData] = useState(false);
+  const [search, setSearch] = useState<string>("");
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [status, search])
+  );
+
+  const onLoadData = async () => {
+    try {
+      setLoadData(true);
+      const response = await apiAdminEvent({
+        category: status as "publish" | "review" | "reject" | "history" as any,
+        search,
+      });
+
+      console.log(
+        `[RES LIST BY STATUS: ${status}]`,
+        JSON.stringify(response, null, 2)
+      );
+
+      if (response.success) {
+        setListData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadData(false);
+    }
+  };
+
   const rightComponent = (
     <SearchInput
       containerStyle={{ width: "100%", marginBottom: 0 }}
       placeholder="Cari"
+      value={search}
+      onChangeText={(value) => setSearch(value)}
     />
   );
   return (
@@ -32,44 +74,50 @@ export default function AdminEventStatus() {
           rightComponent={rightComponent}
         />
 
-        <BaseBox>
+        <StackCustom gap={"sm"}>
           <AdminTitleTable
             title1="Aksi"
             title2="Username"
             title3="Judul Event"
           />
-          <Spacing />
           <Divider />
 
-          {Array.from({ length: 10 }).map((_, index) => (
-            <AdminTableValue
-              key={index}
-              value1={
-                <ActionIcon
-                  icon={
-                    <Octicons
-                      name="eye"
-                      size={ICON_SIZE_BUTTON}
-                      color="black"
-                    />
-                  }
-                  onPress={() => {
-                    router.push(`/admin/event/${index}/${status}`);
-                  }}
-                />
-              }
-              value2={<TextCustom truncate={1}>Username username</TextCustom>}
-              value3={
-                <TextCustom truncate={2}>
-                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
-                  Blanditiis asperiores quidem deleniti architecto eaque et
-                  nostrum, ad consequuntur eveniet quisquam quae voluptatum
-                  ducimus! Dolorem nobis modi officia debitis, beatae mollitia.
-                </TextCustom>
-              }
-            />
-          ))}
-        </BaseBox>
+          {loadData ? (
+            <LoaderCustom />
+          ) : _.isEmpty(listData) ? (
+            <TextCustom align="center" size="small" color="gray">Belum ada data</TextCustom>
+          ) : (
+            listData?.map((item, index) => (
+              <AdminTableValue
+                key={index}
+                value1={
+                  <ActionIcon
+                    icon={
+                      <Octicons
+                        name="eye"
+                        size={ICON_SIZE_BUTTON}
+                        color="black"
+                      />
+                    }
+                    onPress={() => {
+                      router.push(`/admin/event/${item.id}/${status}`);
+                    }}
+                  />
+                }
+                value2={
+                  <TextCustom truncate={1}>
+                    {item?.Author?.username || "-"}
+                  </TextCustom>
+                }
+                value3={
+                  <TextCustom align="center" truncate={2}>
+                    {item?.title || "-"}
+                  </TextCustom>
+                }
+              />
+            ))
+          )}
+        </StackCustom>
       </ViewWrapper>
     </>
   );

app/(application)/admin/event/index.tsx

@@ -9,13 +9,67 @@ import {
 import AdminComp_BoxDashboard from "@/components/_ShareComponent/Admin/BoxDashboard";
 import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
 import { MainColor } from "@/constants/color-palet";
+import { apiAdminEvent } from "@/service/api-admin/api-admin-event";
+import { useFocusEffect } from "expo-router";
+import { useCallback, useState } from "react";
 
 export default function AdminVoting() {
+  const [data, setData] = useState<any | null>(null);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [])
+  );
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiAdminEvent({
+        category: "dashboard",
+      });
+
+      if (response.success) {
+        setData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  const listData = [
+    {
+      label: "Publish",
+      value: (data && data.publish) || 0,
+      icon: <IconPublish size={25} color={MainColor.green} />,
+    },
+    {
+      label: "Review",
+      value: (data && data.review) || 0,
+      icon: <IconReview size={25} color={MainColor.orange} />,
+    },
+    {
+      label: "Reject",
+      value: (data && data.reject) || 0,
+      icon: <IconReject size={25} color={MainColor.red} />,
+    },
+    {
+      label: "Riwayat",
+      value: (data && data.history) || 0,
+      icon: <IconArchive size={25} color={MainColor.placeholder} />,
+    },
+    {
+      label: "Tipe Acara",
+      value: (data && data.typeOfEvent) || 0,
+      icon: <IconList size={25} color={MainColor.placeholder} />,
+    },
+  ];
+
   return (
     <>
       <ViewWrapper>
         <AdminTitlePage title="Event" />
         <Spacing />
+
         <StackCustom gap={"xs"}>
           {listData.map((item, i) => (
             <AdminComp_BoxDashboard key={i} item={item} />
@@ -25,31 +79,3 @@ export default function AdminVoting() {
     </>
   );
 }
-
-const listData = [
-  {
-    label: "Publish",
-    value: 3,
-    icon: <IconPublish size={25} color={MainColor.green} />,
-  },
-  {
-    label: "Review",
-    value: 8,
-    icon: <IconReview size={25} color={MainColor.orange} />,
-  },
-  {
-    label: "Reject",
-    value: 4,
-    icon: <IconReject size={25} color={MainColor.red} />,
-  },
-  {
-    label: "Riwayat",
-    value: 6,
-    icon: <IconArchive size={25} color={MainColor.placeholder} />,
-  },
-  {
-    label: "Tipe Acara",
-    value: 7,
-    icon: <IconList size={25} color={MainColor.placeholder} />,
-  },
-];

app/(application)/admin/job/[id]/[status]/index.tsx

@@ -13,6 +13,7 @@ import {
 import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
 import AdminButtonReject from "@/components/_ShareComponent/Admin/ButtonReject";
 import AdminButtonReview from "@/components/_ShareComponent/Admin/ButtonReview";
+import ReportBox from "@/components/Box/ReportBox";
 import { MainColor } from "@/constants/color-palet";
 import funUpdateStatusJob from "@/screens/Admin/Job/funUpdateStatus";
 import { apiAdminJobGetById } from "@/service/api-admin/api-admin-job";
@@ -141,13 +142,8 @@ export default function AdminJobDetailStatus() {
           </StackCustom>
         </BaseBox>
 
-        {data && data?.catatan && (
-          <BaseBox>
-            <StackCustom>
-              <TextCustom bold>Catatan report</TextCustom>
-              <TextCustom>{data?.catatan}</TextCustom>
-            </StackCustom>
-          </BaseBox>
+        {data && data?.catatan && (status === "reject" || status === "review") && (
+          <ReportBox text={data?.catatan}/>
         )}
 
         {status === "review" && (