Fix upload

Deksripsi: - Fix upload foto - Fix email regex
2024-12-11 10:32:00 +08:00
parent b2e48ba06c
commit 6e1a2e4bd3
13 changed files with 376 additions and 219 deletions
--- a/src/app_modules/_global/fun/upload/fun_upload_to_storage.ts
+++ b/src/app_modules/_global/fun/upload/fun_upload_to_storage.ts
@@ -54,6 +54,4 @@ export async function funGlobal_UploadToStorage({
    console.error("Error:", error);
    return { success: false, data: {} };
  }
-
-  return { success: false, data: { id: "" } };
 }
--- a/src/app_modules/auth/register/view.tsx
+++ b/src/app_modules/auth/register/view.tsx
@@ -64,6 +64,11 @@ export default function Register() {

      const result = await res.json();

+      if (res.status === 400) {
+        setLoading(false);
+        ComponentGlobal_NotifikasiPeringatan(result.message);
+      }
+
      if (res.status === 200) {
        localStorage.removeItem("hipmi_auth_code_id");
        ComponentGlobal_NotifikasiBerhasil(result.message);
@@ -73,11 +78,6 @@ export default function Register() {
          nomor: data.nomor,
        });
      }
-
-      if (res.status === 400) {
-        setLoading(false);
-        ComponentGlobal_NotifikasiPeringatan(result.message);
-      }
    } catch (error) {
      console.log(error);
    }
--- a/src/app_modules/katalog/component/drawer_katalog_new.tsx
+++ b/src/app_modules/katalog/component/drawer_katalog_new.tsx
@@ -1,110 +1,153 @@
 import { RouterAdminDashboard } from "@/app/lib/router_hipmi/router_admin";
-import { RouterPortofolio, RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
+import {
+  RouterPortofolio,
+  RouterProfile,
+} from "@/app/lib/router_hipmi/router_katalog";
 import { AccentColor } from "@/app_modules/_global/color";
+import {
+  gs_admin_navbar_menu,
+  gs_admin_navbar_subMenu,
+} from "@/app_modules/admin/_admin_global/new_global_state";
 import Component_ButtonLogout from "@/app_modules/auth/logout/view";
-import { ActionIcon, Drawer, Group, SimpleGrid, Stack, Text } from "@mantine/core";
+import {
+  ActionIcon,
+  Drawer,
+  Group,
+  SimpleGrid,
+  Stack,
+  Text,
+} from "@mantine/core";
 import { IconDashboard } from "@tabler/icons-react";
-import { IconEdit, IconPencilPlus, IconPhotoEdit, IconPolaroid, IconX } from "@tabler/icons-react";
+import {
+  IconEdit,
+  IconPencilPlus,
+  IconPhotoEdit,
+  IconPolaroid,
+  IconX,
+} from "@tabler/icons-react";
+import { useAtom } from "jotai";
 import { useParams, useRouter } from "next/navigation";

-export default function DrawerKatalogNew({ opened, close, userRoleId, userId }: { opened: boolean, close: () => void, userRoleId: string, userId: string }) {
-   const param = useParams<{ id: string }>()
-   const router = useRouter()
+export default function DrawerKatalogNew({
+  opened,
+  close,
+  userRoleId,
+  userId,
+}: {
+  opened: boolean;
+  close: () => void;
+  userRoleId: string;
+  userId: string;
+}) {
+  const param = useParams<{ id: string }>();
+  const router = useRouter();
+  const [activeId, setActiveId] = useAtom(gs_admin_navbar_menu);
+  const [activeChildId, setActiveChildId] = useAtom(gs_admin_navbar_subMenu);

-   const listPage = [
-      {
-         id: "1",
-         name: "Edit profile",
-         icon: <IconEdit />,
-         path: RouterProfile.edit + param.id,
-      },
-      {
-         id: "2",
-         name: "Ubah foto profile",
-         icon: <IconPhotoEdit />,
-         path: RouterProfile.update_foto_profile + param.id,
-      },
-      {
-         id: "3",
-         name: "Ubah latar belakang",
-         icon: <IconPolaroid />,
-         path: RouterProfile.update_foto_background + param.id,
-      },
-      {
-         id: "4",
-         name: "Tambah portofolio",
-         icon: <IconPencilPlus />,
-         path: RouterPortofolio.create + param.id,
-      },
-   ];
+  const listPage = [
+    {
+      id: "1",
+      name: "Edit profile",
+      icon: <IconEdit />,
+      path: RouterProfile.edit + param.id,
+    },
+    {
+      id: "2",
+      name: "Ubah foto profile",
+      icon: <IconPhotoEdit />,
+      path: RouterProfile.update_foto_profile + param.id,
+    },
+    {
+      id: "3",
+      name: "Ubah latar belakang",
+      icon: <IconPolaroid />,
+      path: RouterProfile.update_foto_background + param.id,
+    },
+    {
+      id: "4",
+      name: "Tambah portofolio",
+      icon: <IconPencilPlus />,
+      path: RouterPortofolio.create + param.id,
+    },
+  ];

-   return <>
+  return (
+    <>
      <Drawer
-         opened={opened}
-         onClose={() => close()}
-         position={"bottom"}
-         size={"auto"}
-         withCloseButton={false}
-         styles={{
-            content: {
-               padding: 0,
-               position: "absolute",
-               margin: "auto",
-               backgroundColor: "transparent",
-               left: 0,
-               right: 0,
-               width: 500,
-            },
-            body: {
-               backgroundColor: AccentColor.darkblue,
-               borderTop: `2px solid ${AccentColor.blue}`,
-               borderRight: `1px solid ${AccentColor.blue}`,
-               borderLeft: `1px solid ${AccentColor.blue}`,
-               borderRadius: "20px 20px 0px 0px",
-               color: "white",
-               paddingBottom: "5%",
-            },
-         }}
+        opened={opened}
+        onClose={() => close()}
+        position={"bottom"}
+        size={"auto"}
+        withCloseButton={false}
+        styles={{
+          content: {
+            padding: 0,
+            position: "absolute",
+            margin: "auto",
+            backgroundColor: "transparent",
+            left: 0,
+            right: 0,
+            width: 500,
+          },
+          body: {
+            backgroundColor: AccentColor.darkblue,
+            borderTop: `2px solid ${AccentColor.blue}`,
+            borderRight: `1px solid ${AccentColor.blue}`,
+            borderLeft: `1px solid ${AccentColor.blue}`,
+            borderRadius: "20px 20px 0px 0px",
+            color: "white",
+            paddingBottom: "5%",
+          },
+        }}
      >
-         <Stack spacing={"xs"}>
-            <Group position="right">
-               <ActionIcon onClick={close} variant="transparent">
-                  <IconX color="white" />
-               </ActionIcon>
-            </Group>
-            <SimpleGrid cols={4}>
-               {listPage.map((e, i) => (
-                  <Stack key={i} align="center" spacing={"xs"}>
-                     <ActionIcon
-                        variant="transparent"
-                        c="white"
-                        onClick={() => { router.push(e.path, { scroll: false }); }}
-                     >
-                        {e.icon}
-                     </ActionIcon>
-                     <Text align="center" color="white">
-                        {e.name}
-                     </Text>
-                  </Stack>
-               ))}
+        <Stack spacing={"xs"}>
+          <Group position="right">
+            <ActionIcon onClick={close} variant="transparent">
+              <IconX color="white" />
+            </ActionIcon>
+          </Group>
+          <SimpleGrid cols={4}>
+            {listPage.map((e, i) => (
+              <Stack key={i} align="center" spacing={"xs"}>
+                <ActionIcon
+                  variant="transparent"
+                  c="white"
+                  onClick={() => {
+                    router.push(e.path, { scroll: false });
+                  }}
+                >
+                  {e.icon}
+                </ActionIcon>
+                <Text align="center" color="white">
+                  {e.name}
+                </Text>
+              </Stack>
+            ))}

-               <Component_ButtonLogout userId={userId} />
-               {userRoleId != "1" && userRoleId != "" && (
-                  <Stack align="center" spacing={"xs"}>
-                     <ActionIcon
-                        variant="transparent"
-                        c="white"
-                        onClick={() => { router.push(RouterAdminDashboard.main_admin, { scroll: false }); }}
-                     >
-                        <IconDashboard />
-                     </ActionIcon>
-                     <Text align="center" color="white">
-                        Dashboard Admin
-                     </Text>
-                  </Stack>
-               )}
-            </SimpleGrid>
-         </Stack>
+            <Component_ButtonLogout userId={userId} />
+            {userRoleId != "1" && userRoleId != "" && (
+              <Stack align="center" spacing={"xs"}>
+                <ActionIcon
+                  variant="transparent"
+                  c="white"
+                  onClick={() => {
+                    setActiveId("Main");
+                    setActiveChildId("");
+                    router.push(RouterAdminDashboard.main_admin, {
+                      scroll: false,
+                    });
+                  }}
+                >
+                  <IconDashboard />
+                </ActionIcon>
+                <Text align="center" color="white">
+                  Dashboard Admin
+                </Text>
+              </Stack>
+            )}
+          </SimpleGrid>
+        </Stack>
      </Drawer>
-   </>;
-}
+    </>
+  );
+}
--- a/src/app_modules/katalog/component/regular_expressions.ts
+++ b/src/app_modules/katalog/component/regular_expressions.ts
@@ -1,2 +1,3 @@
 export var validRegex =
  /^([a-zA-Z0-9\.!#$%&'*+/=?^_`{|}~-]+)@([a-zA-Z0-9])+.([a-z]+)(.[a-z]+)?$/;
+export const gmailRegex = /^[a-zA-Z0-9._%+-]+@gmail\.com$/;
--- a/src/app_modules/katalog/profile/_component/button/comp_create_new_profile.tsx
+++ b/src/app_modules/katalog/profile/_component/button/comp_create_new_profile.tsx
@@ -16,6 +16,8 @@ import { useState } from "react";
 import funCreateNewProfile from "../../fun/fun_create_profile";
 import { MODEL_PROFILE } from "../../model/interface";
 import { validRegex } from "@/app_modules/katalog/component";
+import { envs } from "@/lib/envs";
+import { TokenProvider, TokenStorage } from "@/app/lib/token";

 export function Profile_ComponentCreateNewProfile({
  value,
@@ -54,7 +56,6 @@ export function Profile_ComponentCreateNewProfile({
        file: filePP,
        dirId: DIRECTORY_ID.profile_foto,
      });
-      // console.log("ini foto", uploadPhoto);
      if (!uploadPhoto.success) {
        setLoading(false);
        return ComponentGlobal_NotifikasiPeringatan(
@@ -62,36 +63,28 @@ export function Profile_ComponentCreateNewProfile({
        );
      }

-      if (uploadPhoto.success) {
-        const uploadBackground = await funGlobal_UploadToStorage({
-          file: fileBG,
-          dirId: DIRECTORY_ID.profile_background,
-        });
-        // console.log("ini background", uploadBackground);
-        if (!uploadBackground.success) {
-          setLoading(false);
-          return ComponentGlobal_NotifikasiPeringatan(
-            "Gagal upload background profile"
-          );
-        }
+      const uploadBackground = await funGlobal_UploadToStorage({
+        file: fileBG,
+        dirId: DIRECTORY_ID.profile_background,
+      });
+      if (!uploadBackground.success) {
+        setLoading(false);
+        return ComponentGlobal_NotifikasiPeringatan(
+          "Gagal upload background profile"
+        );
+      }

-        if (uploadBackground.success) {
-          const create = await funCreateNewProfile({
-            data: newData as any,
-            imageId: uploadPhoto.data.id,
-            imageBackgroundId: uploadBackground.data.id,
-          });
-          if (create.status === 201) {
-            ComponentGlobal_NotifikasiBerhasil(
-              "Berhasil membuat profile",
-              3000
-            );
-            router.push(RouterHome.main_home, { scroll: false });
-          } else {
-            ComponentGlobal_NotifikasiGagal(create.message);
-            setLoading(false);
-          }
-        }
+      const create = await funCreateNewProfile({
+        data: newData as any,
+        imageId: uploadPhoto.data.id,
+        imageBackgroundId: uploadBackground.data.id,
+      });
+      if (create.status === 201) {
+        ComponentGlobal_NotifikasiBerhasil("Berhasil membuat profile", 3000);
+        router.push(RouterHome.main_home, { scroll: false });
+      } else {
+        ComponentGlobal_NotifikasiGagal(create.message);
+        setLoading(false);
      }
    } catch (error) {
      console.log(error);
--- a/src/app_modules/katalog/profile/create/view.tsx
+++ b/src/app_modules/katalog/profile/create/view.tsx
@@ -24,6 +24,8 @@ import { IconAt, IconCamera, IconUpload } from "@tabler/icons-react";
 import { useState } from "react";
 import { validRegex } from "../../component";
 import { Profile_ComponentCreateNewProfile } from "../_component";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
+import { gmailRegex } from "../../component/regular_expressions";

 export default function CreateProfile() {
  const [filePP, setFilePP] = useState<File | null>(null);
@@ -38,6 +40,9 @@ export default function CreateProfile() {
    jenisKelamin: "",
  });

+  // Maksimal ukuran file dalam byte (2 MB)
+  const MAX_SIZE = 2 * 1024 * 1024; // 2 MB
+
  return (
    <>
      <Stack px={"sm"} spacing={40}>
@@ -83,8 +88,15 @@ export default function CreateProfile() {
                    const buffer = URL.createObjectURL(
                      new Blob([new Uint8Array(await files.arrayBuffer())])
                    );
-                    setImgPP(buffer);
-                    setFilePP(files);
+
+                    if (files.size > MAX_SIZE) {
+                      ComponentGlobal_NotifikasiPeringatan(
+                        "Ukuran file terlalu besar. Maksimal 2 MB."
+                      );
+                    } else {
+                      setImgPP(buffer);
+                      setFilePP(files);
+                    }
                  } catch (error) {
                    console.log(error);
                  }
@@ -138,8 +150,15 @@ export default function CreateProfile() {
                    const buffer = URL.createObjectURL(
                      new Blob([new Uint8Array(await files.arrayBuffer())])
                    );
-                    setImgBG(buffer);
-                    setFileBG(files);
+
+                    if (files.size > MAX_SIZE) {
+                      ComponentGlobal_NotifikasiPeringatan(
+                        "Ukuran file terlalu besar. Maksimal 2 MB."
+                      );
+                    } else {
+                      setImgBG(buffer);
+                      setFileBG(files);
+                    }
                  } catch (error) {
                    console.log(error);
                  }
@@ -189,7 +208,7 @@ export default function CreateProfile() {
            maxLength={100}
            placeholder="Contoh: User@gmail.com"
            error={
-              value.email.length > 0 && !value.email.match(validRegex) ? (
+              value.email.length > 0 && !value.email.match(gmailRegex) ? (
                <ComponentGlobal_ErrorInput text="Invalid Email" />
              ) : (
                ""