Fix notifikasi

Deskripsi:
- Ganti get notifikasi dengan API

src/app/api/notifikasi/get-all-by-category/route.ts

@@ -0,0 +1,63 @@
+import { prisma } from "@/app/lib";
+import { newFunGetUserId } from "@/app/lib/new_fun_user_id";
+import { ICategoryapp } from "@/app_modules/notifikasi/model/interface";
+import backendLogger from "@/util/backendLogger";
+import _ from "lodash";
+import { NextResponse } from "next/server";
+export const dynamic = "force-dynamic";
+
+export async function GET(request: Request) {
+  if (request.method === "GET") {
+    try {
+      const { searchParams } = new URL(request.url);
+      const category = searchParams.get("category") as ICategoryapp;
+      const page = searchParams.get("page");
+
+      const userLoginId = await newFunGetUserId();
+      const fixPage = _.toNumber(page);
+      const takeData = 10;
+      const skipData = fixPage * takeData - takeData;
+
+      if (category === "Semua") {
+        const data = await prisma.notifikasi.findMany({
+          take: takeData,
+          skip: skipData,
+          orderBy: [
+            {
+              isRead: "asc",
+            },
+            { createdAt: "desc" },
+          ],
+          where: {
+            userId: userLoginId,
+            userRoleId: "1",
+          },
+        });
+
+        return NextResponse.json({ success: true, data });
+      }
+
+      const allData = await prisma.notifikasi.findMany({
+        take: takeData,
+        skip: skipData,
+        orderBy: [
+          {
+            isRead: "asc",
+          },
+          { createdAt: "desc" },
+        ],
+        where: {
+          userId: userLoginId,
+          userRoleId: "1",
+          kategoriApp: _.upperCase(category),
+        },
+      });
+
+      return NextResponse.json({ success: true, data: allData });
+    } catch (error) {
+      backendLogger.error("Error get data notifikasi: " + error);
+    }
+  } else {
+    return NextResponse.json({ success: false, message: "Method not allowed" });
+  }
+}

src/app/dev/notifikasi/event/page.tsx

@@ -1,15 +1,11 @@
 import { Notifikasi_UiEvent } from "@/app_modules/notifikasi/_ui";
-import notifikasi_getByUserId from "@/app_modules/notifikasi/fun/get/get_notifiaksi_by_id";
 
 export default async function Page() {
-   const listNotifikasi = await notifikasi_getByUserId({
+  // 
-     page: 1,
-     kategoriApp: "Event",
-   });
 
   return (
     <>
-      <Notifikasi_UiEvent listNotifikasi={listNotifikasi} />
+      <Notifikasi_UiEvent />
     </>
   );
 }

src/app/dev/notifikasi/semua/page.tsx

@@ -1,15 +1,9 @@
 import { Notifikasi_UiAll } from "@/app_modules/notifikasi/_ui";
-import notifikasi_getByUserId from "@/app_modules/notifikasi/fun/get/get_notifiaksi_by_id";
 
 export default async function Page() {
-  const listNotifikasi = await notifikasi_getByUserId({
-    page: 1,
-    kategoriApp: "Semua",
-  });
-
   return (
     <>
-      <Notifikasi_UiAll listNotifikasi={listNotifikasi} />
+      <Notifikasi_UiAll />
     </>
   );
 }

src/app/lib/api_user_router/route_api_notifikasi.ts

@@ -0,0 +1,11 @@
+import { ICategoryapp } from "@/app_modules/notifikasi/model/interface";
+
+export const API_RouteNotifikasi = {
+  get_all_by_category: ({
+    category,
+    page,
+  }: {
+    category: ICategoryapp;
+    page: number;
+  }) => `/api/notifikasi/get-all-by-category?category=${category}&page=${page}`,
+};

src/app_modules/home/view_home_new.tsx

@@ -17,6 +17,7 @@ import BodyHome from "./component/body_home";
 import FooterHome from "./component/footer_home";
 import { apiGetDataHome } from "./fun/get/api_home";
 import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
+import { gs_notifikasi_kategori_app } from "../notifikasi/lib";
 
 export default function HomeViewNew({
   countNotifikasi,
@@ -27,6 +28,7 @@ export default function HomeViewNew({
   const [newUserNtf, setNewUserNtf] = useAtom(gs_user_ntf);
   const [countLoadNtf, setCountLoadNtf] = useAtom(gs_count_ntf);
   const [dataUser, setDataUser] = useState<any>({});
+  const [categoryPage, setCategoryPage] = useAtom(gs_notifikasi_kategori_app);
   const router = useRouter();
 
   useShallowEffect(() => {
@@ -98,12 +100,14 @@ export default function HomeViewNew({
                   ) {
                     router.push(RouterProfile.create, { scroll: false });
                   } else {
+                    setCategoryPage("Semua")
                     router.push(
                       RouterNotifikasi.categoryApp({ name: "semua" }),
                       {
                         scroll: false,
                       }
                     );
+
                   }
                 }}
               >

src/app_modules/notifikasi/_ui/ui_all_notifikasi.tsx

@@ -2,46 +2,57 @@
 
 import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
 import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
-import { Box, Center } from "@mantine/core";
+import {
+  Box,
+  Center,
+  Divider,
+  Grid,
+  Group,
+  Loader,
+  Skeleton,
+  Stack,
+} from "@mantine/core";
 import _ from "lodash";
 import { ScrollOnly } from "next-scroll-loader";
 import { useState } from "react";
-import { ComponentNotifiaksi_CardView } from "../component";
+import {
+  ComponentNotifiaksi_CardView,
+  Notifikasi_ComponentSkeletonView,
+} from "../component";
 import notifikasi_getByUserId from "../fun/get/get_notifiaksi_by_id";
-import { MODEL_NOTIFIKASI } from "../model/interface";
+import { ICategoryapp, MODEL_NOTIFIKASI } from "../model/interface";
 import { useAtom } from "jotai";
 import { gs_notifikasi_kategori_app } from "../lib";
 import { useShallowEffect } from "@mantine/hooks";
+import { API_RouteNotifikasi } from "@/app/lib/api_user_router/route_api_notifikasi";
+import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
 
-export default function Notifikasi_UiAll({
+export default function Notifikasi_UiAll() {
-  listNotifikasi,
+  const [data, setData] = useState<MODEL_NOTIFIKASI[] | null>(null);
-}: {
-  listNotifikasi: any[];
-}) {
-  const [data, setData] = useState<MODEL_NOTIFIKASI[]>(listNotifikasi);
   const [activePage, setActivePage] = useState(1);
   const [categoryPage, setCategoryPage] = useAtom(gs_notifikasi_kategori_app);
 
   useShallowEffect(() => {
-    onLoadData({
+    onLoadData();
-      onSetData(val: any) {
+  }, []);
-        setData(val);
-      },
-    });
-  }, [setData]);
 
-  async function onLoadData({ onSetData }: { onSetData: any }) {
+  async function onLoadData() {
-    const loadData = await notifikasi_getByUserId({
+    const loadData = await fetch(
+      API_RouteNotifikasi.get_all_by_category({
+        category: categoryPage as any,
         page: 1,
-      kategoriApp: "Semua",
+      })
-    });
+    );
-    onSetData(loadData);
+    const data = await loadData.json().then((res) => res.data as any);
+    setData(data);
   }
 
   return (
     <>
       <Box>
-        {_.isEmpty(data) ? (
+        {_.isNull(data) ? (
+          <Notifikasi_ComponentSkeletonView />
+        ) : _.isEmpty(data) ? (
           <ComponentGlobal_IsEmptyData text="Tidak ada pemberitahuan" />
         ) : (
           <ScrollOnly
@@ -52,22 +63,25 @@ export default function Notifikasi_UiAll({
               </Center>
             )}
             data={data}
-            setData={setData}
+            setData={setData as any}
             moreData={async () => {
-              const loadData = await notifikasi_getByUserId({
+              const loadData = await fetch(
+                API_RouteNotifikasi.get_all_by_category({
+                  category: categoryPage as any,
                   page: activePage + 1,
-                kategoriApp: categoryPage as any,
+                })
-              });
+              );
+              const data = await loadData.json().then((res) => res.data as any);
 
               setActivePage((val) => val + 1);
-              return loadData;
+              return data;
             }}
           >
             {(item) => (
               <ComponentNotifiaksi_CardView
                 data={item}
                 onLoadData={setData}
-                categoryPage={categoryPage}
+                categoryPage={categoryPage as any}
               />
             )}
           </ScrollOnly>

src/app_modules/notifikasi/_ui/ui_event_notifikasi.tsx

@@ -7,37 +7,39 @@ import { useAtom } from "jotai";
 import _ from "lodash";
 import { ScrollOnly } from "next-scroll-loader";
 import { useState } from "react";
-import { ComponentNotifiaksi_CardView } from "../component";
+import {
+  ComponentNotifiaksi_CardView,
+  Notifikasi_ComponentSkeletonView,
+} from "../component";
 import notifikasi_getByUserId from "../fun/get/get_notifiaksi_by_id";
 import { gs_notifikasi_kategori_app } from "../lib";
 import { MODEL_NOTIFIKASI } from "../model/interface";
 import { useShallowEffect } from "@mantine/hooks";
+import { API_RouteNotifikasi } from "@/app/lib/api_user_router/route_api_notifikasi";
 
-export default function Notifikasi_UiEvent({
+export default function Notifikasi_UiEvent() {
-  listNotifikasi,
+  const [data, setData] = useState<MODEL_NOTIFIKASI[] | null>(null);
-}: {
-  listNotifikasi: any[];
-}) {
-  const [data, setData] = useState<MODEL_NOTIFIKASI[]>(listNotifikasi);
   const [activePage, setActivePage] = useState(1);
   const [categoryPage, setCategoryPage] = useAtom(gs_notifikasi_kategori_app);
 
   useShallowEffect(() => {
-    onLoadData(setData);
+    onLoadData();
-  }, [setData]);
+  }, []);
 
-  async function onLoadData(setData: any) {
+  async function onLoadData() {
-    const listNotifikasi = await notifikasi_getByUserId({
+    const loadData = await fetch(
-      page: 1,
+      API_RouteNotifikasi.get_all_by_category({  category: categoryPage as any, page: 1 })
-      kategoriApp: "Event",
+    );
-    });
+    const data = await loadData.json().then((res) => res.data as any);
-    setData(listNotifikasi);
+    setData(data);
   }
 
   return (
     <>
       <Box>
-        {_.isEmpty(data) ? (
+        {_.isNull(data) ? (
+          <Notifikasi_ComponentSkeletonView />
+        ) : _.isEmpty(data) ? (
           <ComponentGlobal_IsEmptyData text="Tidak ada pemberitahuan" />
         ) : (
           <ScrollOnly
@@ -48,22 +50,25 @@ export default function Notifikasi_UiEvent({
               </Center>
             )}
             data={data}
-            setData={setData}
+            setData={setData as any}
             moreData={async () => {
-              const loadData = await notifikasi_getByUserId({
+              const loadData = await fetch(
+                API_RouteNotifikasi.get_all_by_category({
+                  category: categoryPage as any,
                   page: activePage + 1,
-                kategoriApp: categoryPage as any,
+                })
-              });
+              );
+              const data = await loadData.json().then((res) => res.data as any);
 
               setActivePage((val) => val + 1);
-              return loadData;
+              return data;
             }}
           >
             {(item) => (
               <ComponentNotifiaksi_CardView
                 data={item}
                 onLoadData={setData}
-                categoryPage={categoryPage}
+                categoryPage={categoryPage as any}
               />
             )}
           </ScrollOnly>

src/app_modules/notifikasi/_ui/ui_new_layout_notifikasi.tsx

@@ -108,9 +108,7 @@ function UIChildren({
                 style={{
                   transition: "0.3s",
                   backgroundColor:
-                    categoryPage === e.name
+                    categoryPage === e.name ? MainColor.yellow : "GrayText",
-                      ? MainColor.yellow
-                      : "GrayText",
                 }}
                 onClick={() => {
                   router.replace(
@@ -120,7 +118,6 @@ function UIChildren({
                     }
                   );
                   setCategoryPage(e.name);
-                  // onLoadDataNotifikasi(e.name);
                 }}
               >
                 {e.name}

src/app_modules/notifikasi/component/card_view.tsx

@@ -13,13 +13,15 @@ import { IconCheck, IconChecks } from "@tabler/icons-react";
 import { useAtom } from "jotai";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import { MODEL_NOTIFIKASI } from "../model/interface";
+import { ICategoryapp, MODEL_NOTIFIKASI } from "../model/interface";
 import { notifikasi_eventCheckStatus } from "./path/event";
 import { notifikasi_jobCheckStatus } from "./path/job";
 import { gs_vote_hotMenu } from "@/app_modules/vote/global_state";
 import { notifikasi_votingCheckStatus } from "./path/voting";
 import { redirectDonasiPage } from "./path/donasi";
 import { gs_donasi_hot_menu } from "@/app_modules/donasi/global_state";
+import moment from "moment";
+import "moment/locale/id";
 
 export function ComponentNotifiaksi_CardView({
   data,
@@ -28,7 +30,7 @@ export function ComponentNotifiaksi_CardView({
 }: {
   data: MODEL_NOTIFIKASI;
   onLoadData: (val: any) => void;
-  categoryPage: any;
+  categoryPage: string;
 }) {
   const router = useRouter();
   const [visible, setVisible] = useState(false);
@@ -220,16 +222,7 @@ export function ComponentNotifiaksi_CardView({
         <Card.Section p={"sm"}>
           <Group position="apart">
             <Text fz={10} color="gray">
-              {new Intl.DateTimeFormat("id-ID", {
+              {moment(data.createdAt).format("LLL")}
-                dateStyle: "long",
-              }).format(data?.createdAt)}
-
-              <Text span inherit fz={10} color="gray">
-                {", "}
-                {new Intl.DateTimeFormat("id-ID", {
-                  timeStyle: "short",
-                }).format(data?.createdAt)}
-              </Text>
             </Text>
             {data?.isRead ? (
               <Group spacing={5}>

src/app_modules/notifikasi/component/index.ts

@@ -1,5 +1,7 @@
 import { ComponentNotifikasi_CardSkeleton } from "./card_skeleton";
 import { ComponentNotifiaksi_CardView } from "./card_view";
+import Notifikasi_ComponentSkeletonView from "./skeleton_view";
 
 export { ComponentNotifiaksi_CardView };
 export { ComponentNotifikasi_CardSkeleton };
+export { Notifikasi_ComponentSkeletonView };

src/app_modules/notifikasi/component/skeleton_view.tsx

@@ -0,0 +1,29 @@
+import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
+import { Stack, Group, Skeleton, Divider } from "@mantine/core";
+
+export default function Notifikasi_ComponentSkeletonView() {
+  return (
+    <>
+      {Array.from({ length: 10 }).map((_, i) => (
+        <ComponentGlobal_CardStyles key={i}>
+          <Stack>
+            <Group position="apart">
+              <Skeleton h={15} w={70} radius={"xl"} />
+              <Skeleton h={15} w={100} radius={"xl"} />
+            </Group>
+
+            <Divider color="gray" />
+            <Skeleton h={15} w={50} radius={"xl"} />
+            <Skeleton h={15} w={"100%"} radius={"xl"} />
+            <Skeleton h={15} w={"100%"} radius={"xl"} />
+
+            <Group position="apart">
+              <Skeleton h={15} w={100} radius={"xl"} />
+              <Skeleton h={15} w={50} radius={"xl"} />
+            </Group>
+          </Stack>
+        </ComponentGlobal_CardStyles>
+      ))}
+    </>
+  );
+}

src/app_modules/notifikasi/model/interface.ts

@@ -33,8 +33,18 @@ export interface MODEL_NOTIFIKASI {
     | "Gagal"
     | "Donatur Baru"
     | "Kabar Donasi"
-    | "Pencairan Dana"
+    | "Pencairan Dana";
 
   Role: MODEL_NEW_DEFAULT_MASTER;
   userRoleId: String;
 }
+
+export type ICategoryapp =
+  | "Semua"
+  | "Event"
+  | "Job"
+  | "Voting"
+  | "Donasi"
+  | "Investasi"
+  | "Forum"
+  | "Collaboration";

src/middleware.ts

@@ -19,6 +19,7 @@ const middlewareConfig: MiddlewareConfig = {
   userPath: "/dev/home",
   publicRoutes: [
     "/",
+    "/api/notifikasi/*",
     "/api/logs/*",
     "/api/image/*",
     "/api/job/*",
@@ -35,7 +36,7 @@ const middlewareConfig: MiddlewareConfig = {
     "/auth/api/login",
     "/aset/global/main_background.png",
     "/aset/logo/logo-hipmi.png",
-    "/api/new/*"
+    "/api/new/*",
   ],
   encodedKey: process.env.NEXT_PUBLIC_BASE_TOKEN_KEY!,
   sessionKey: process.env.NEXT_PUBLIC_BASE_SESSION_KEY!,