Fix: User search & Event

Deskripsi:
- Tampilan avatar dan username
## NO Issue

src/app_modules/map/_component/comp_load_image_map.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import { APIs, RouterAssetImage } from "@/app/lib";
+import { routerImagePreview } from "@/app/lib/router_hipmi/router_image_preview";
+import { Box, Center, Image, Skeleton } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export function ComponentMap_LoadImageMap({
+  fileId,
+  size,
+}: {
+  fileId: string;
+  size?: string;
+}) {
+  const router = useRouter();
+  const [isImage, setIsImage] = useState<boolean | null>(null);
+
+  const url = APIs.GET({ fileId: fileId, size: size });
+
+  useShallowEffect(() => {
+    onLoadImage();
+  }, []);
+
+  async function onLoadImage() {
+    const res = await fetch(url);
+    try {
+      if (res.ok) {
+        return setIsImage(true);
+      }
+      setIsImage(false);
+    } catch (error) {
+      console.log(error);
+    }
+  }
+  return (
+    <>
+      {isImage === null ? (
+        <Skeleton height={200} radius={"sm"} />
+      ) : isImage ? (
+        <Image
+          onClick={() =>
+            router.push(routerImagePreview.main({ id: fileId }), {
+              scroll: false,
+            })
+          }
+          style={{
+            borderColor: "white",
+            borderStyle: "solid",
+            borderWidth: "0.5px",
+            borderRadius: "5px",
+          }}
+          radius={5}
+          alt="Image"
+          maw={500}
+          miw={300}
+          height={200}
+          src={url}
+        />
+      ) : (
+        <Box
+          bg={"gray"}
+          style={{
+            borderColor: "white",
+            borderStyle: "solid",
+            borderWidth: "0.5px",
+            borderRadius: "5px",
+            height: 200,
+          }}
+        >
+          <Center h={"100%"}>
+            <Image
+              alt="Image"
+              height={100}
+              width={100}
+              src={RouterAssetImage.no_image}
+            />
+          </Center>
+        </Box>
+      )}
+    </>
+  );
+}

src/app_modules/map/_component/detail_data.tsx

@@ -1,18 +1,10 @@
 "use client";
 
 import { RouterPortofolio } from "@/app/lib/router_hipmi/router_katalog";
-import { RouterMap } from "@/app/lib/router_hipmi/router_map";
-import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/_global/author_name_on_header";
 import { MainColor } from "@/app_modules/_global/color/color_pallet";
-import {
-  Box,
-  Button,
-  Grid,
-  Image,
-  SimpleGrid,
-  Stack,
-  Text,
-} from "@mantine/core";
+import { ComponentGlobal_AvatarAndUsername } from "@/app_modules/_global/component";
+import { MODEL_USER } from "@/app_modules/home/model/interface";
+import { Box, Button, Grid, Group, Stack, Text } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import {
   IconBuildingSkyscraper,
@@ -24,21 +16,29 @@ import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { map_funGetOneById } from "../fun/get/fun_get_one_by_id";
 import { MODEL_MAP } from "../lib/interface";
+import { ComponentMap_LoadImageMap } from "./comp_load_image_map";
 import { ComponentMap_SkeletonDrawerDetailData } from "./skeleton_detail_data";
-import { APIs } from "@/app/lib";
-import { ComponentGlobal_LoadImage } from "@/app_modules/_global/component";
 
-export function ComponentMap_DetailData({ mapId }: { mapId: any }) {
+export function ComponentMap_DetailData({
+  mapId,
+  isDetail,
+}: {
+  mapId: any;
+  isDetail?: boolean;
+}) {
   const router = useRouter();
   const [data, setData] = useState<MODEL_MAP>();
+  const [dataUser, setDataUser] = useState<MODEL_USER>();
+  const [isLoading, setIsLoading] = useState(false);
 
   useShallowEffect(() => {
-    onLoadData(mapId);
-  }, [mapId]);
+    onLoadData(setData, setDataUser);
+  }, [setData, setDataUser]);
 
-  async function onLoadData(mapId: string) {
+  async function onLoadData(setData: any, setDataUser: any) {
     const res: any = await map_funGetOneById({ mapId: mapId });
     setData(res);
+    setDataUser(res.Author);
   }
 
   if (!data) return <ComponentMap_SkeletonDrawerDetailData />;
@@ -46,83 +46,69 @@ export function ComponentMap_DetailData({ mapId }: { mapId: any }) {
   return (
     <>
       <Stack mt={"lg"} spacing={"xl"} px={"md"}>
-        <ComponentGlobal_AuthorNameOnHeader
-          authorName={data?.Author?.username}
-          imagesId={data?.Author?.Profile?.imagesId}
-          profileId={data?.Author?.Profile?.id}
+        <ComponentGlobal_AvatarAndUsername
+          profile={dataUser?.Profile as any}
         />
 
-        <SimpleGrid
-          cols={2}
-          spacing={"lg"}
-          breakpoints={[
-            { maxWidth: 980, cols: 2, spacing: "md" },
-            { maxWidth: 755, cols: 1, spacing: "sm" },
-            { maxWidth: 600, cols: 1, spacing: "sm" },
-          ]}
-        >
-          <ComponentGlobal_LoadImage
-            url={APIs.GET({ fileId: data?.imageId })}
-          />
-          {/* <Image radius={"sm"} mah={300} maw={200} alt="Photo" src={} /> */}
-          <Box>
-            <Grid>
-              <Grid.Col span={2}>
-                <IconBuildingSkyscraper />
-              </Grid.Col>
-              <Grid.Col span={"auto"}>
-                <Text>{data?.Portofolio.namaBisnis}</Text>
-              </Grid.Col>
-            </Grid>
-            <Grid>
-              <Grid.Col span={2}>
-                <IconListDetails />
-              </Grid.Col>
-              <Grid.Col span={"auto"}>
-                <Text>{data?.Portofolio.MasterBidangBisnis.name}</Text>
-              </Grid.Col>
-            </Grid>
-            <Grid>
-              <Grid.Col span={2}>
-                <IconPhoneCall />
-              </Grid.Col>
-              <Grid.Col span={"auto"}>
-                <Text>+{data?.Portofolio.tlpn}</Text>
-              </Grid.Col>
-            </Grid>
-            <Grid>
-              <Grid.Col span={2}>
-                <IconMapPin />
-              </Grid.Col>
-              <Grid.Col span={"auto"}>
-                <Text>{data?.Portofolio.alamatKantor}</Text>
-              </Grid.Col>
-            </Grid>
-          </Box>
-        </SimpleGrid>
+        <ComponentMap_LoadImageMap fileId={data.imageId} />
 
-        <SimpleGrid
-          cols={2}
-          spacing={"lg"}
-          breakpoints={[
-            { maxWidth: 980, cols: 2, spacing: "md" },
-            { maxWidth: 755, cols: 1, spacing: "sm" },
-            { maxWidth: 600, cols: 1, spacing: "sm" },
-          ]}
-        >
-          <Button
-            onClick={() => {
-              router.push(RouterPortofolio.main_detail + data?.Portofolio.id, {
-                scroll: false,
-              });
-            }}
-            radius={"xl"}
-            bg={MainColor.yellow}
-            color="yellow"
-            c={"black"}
-          >
-            Detail
-          </Button>
+        <Box>
+          <Grid>
+            <Grid.Col span={2}>
+              <IconBuildingSkyscraper />
+            </Grid.Col>
+            <Grid.Col span={"auto"}>
+              <Text>{data?.Portofolio.namaBisnis}</Text>
+            </Grid.Col>
+          </Grid>
+          <Grid>
+            <Grid.Col span={2}>
+              <IconListDetails />
+            </Grid.Col>
+            <Grid.Col span={"auto"}>
+              <Text>{data?.Portofolio.MasterBidangBisnis.name}</Text>
+            </Grid.Col>
+          </Grid>
+          <Grid>
+            <Grid.Col span={2}>
+              <IconPhoneCall />
+            </Grid.Col>
+            <Grid.Col span={"auto"}>
+              <Text>+{data?.Portofolio.tlpn}</Text>
+            </Grid.Col>
+          </Grid>
+          <Grid>
+            <Grid.Col span={2}>
+              <IconMapPin />
+            </Grid.Col>
+            <Grid.Col span={"auto"}>
+              <Text>{data?.Portofolio.alamatKantor}</Text>
+            </Grid.Col>
+          </Grid>
+        </Box>
+
+        <Group grow position={isDetail ? "center" : "apart"}>
+          {!isDetail && (
+            <Button
+              onClick={() => {
+                setIsLoading(true);
+                router.push(
+                  RouterPortofolio.main_detail + data?.Portofolio.id,
+                  {
+                    scroll: false,
+                  }
+                );
+              }}
+              loading={isLoading}
+              loaderPosition="center"
+              radius={"xl"}
+              bg={MainColor.yellow}
+              color="yellow"
+              c={"black"}
+            >
+              Detail
+            </Button>
+          )}
 
           <Button
             radius={"xl"}
@@ -139,9 +125,7 @@ export function ComponentMap_DetailData({ mapId }: { mapId: any }) {
           >
             Buka Maps
           </Button>
-        </SimpleGrid>
-
-        {/* <pre>{JSON.stringify(data, null, 2)}</pre> */}
+        </Group>
       </Stack>
     </>
   );

src/app_modules/map/_component/drawer.tsx

@@ -16,12 +16,7 @@ import React, { useState } from "react";
 import { map_funGetOneById } from "../fun/get/fun_get_one_by_id";
 import { MODEL_MAP } from "../lib/interface";
 
-interface MODEL_DRAWER {
-  id: string;
-  name: string;
-  icon: string;
-  path: string;
-}
+
 export function ComponentMap_DrawerDetailData({
   opened,
   close,

src/app_modules/map/_component/index.ts

@@ -1,8 +1,12 @@
 import { ComponentMap_ButtonSavePin } from "./button/comp_button_save_pin";
 import { ComponentMap_ButtonUpdateDataMap } from "./button/comp_button_update_data_map";
+import { ComponentMap_LoadImageMap } from "./comp_load_image_map";
+import { ComponentMap_DetailData } from "./detail_data";
 
 export { ComponentMap_Header } from "./header";
 export { ComponentMap_DrawerDetailData } from "./drawer";
 export { ComponentMap_SkeletonDrawerDetailData } from "./skeleton_detail_data";
 export { ComponentMap_ButtonSavePin };
 export { ComponentMap_ButtonUpdateDataMap };
+export { ComponentMap_DetailData };
+export { ComponentMap_LoadImageMap };

src/app_modules/map/fun/get/fun_get_one_by_id.ts

@@ -12,12 +12,7 @@ export async function map_funGetOneById({ mapId }: { mapId: string }) {
         select: {
           id: true,
           username: true,
-          Profile: {
-            select: {
-              id: true,
-              imagesId: true,
-            },
-          },
+          Profile: true,
         },
       },
       Portofolio: {

src/app_modules/map/ui/ui_edit_map.tsx

@@ -141,18 +141,11 @@ export function UiMap_EditMap({
 
           <ComponentGlobal_BoxUploadImage>
             {img ? (
-              <AspectRatio ratio={1 / 1} mah={265} mx={"auto"}>
-                <Image
-                  style={{ maxHeight: 250, margin: "auto", padding: "5px" }}
-                  alt="Photo"
-                  height={250}
-                  src={img}
-                />
+              <AspectRatio ratio={1 / 1} mt={5} maw={300} mx={"auto"}>
+                <Image style={{ maxHeight: 250 }} alt="Avatar" src={img} />
               </AspectRatio>
             ) : (
-              <ComponentGlobal_LoadImage
-                url={APIs.GET({ fileId: data.imageId })}
-              />
+              <ComponentGlobal_LoadImage maw={300} fileId={data.imageId} />
             )}
           </ComponentGlobal_BoxUploadImage>
 

src/app_modules/map/ui/ui_map.tsx

@@ -110,7 +110,7 @@ export function UiMap_MapBoxView({
         opened={openDrawer}
         close={() => setOpenDrawer(false)}
         mapId={mapId}
-        component={<ComponentMap_DetailData mapId={mapId} />}
+        component={<ComponentMap_DetailData mapId={mapId}  />}
       />
     </>
   );