wibu/hipmi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix notifikasi

Browse Source 
Deskripsi:
- Ganti get notifikasi dengan API
This commit is contained in:
Bagasbanuna02
2024-12-17 22:40:38 +08:00
parent 3bd2f53732
commit 2fa3f22f9c
13 changed files with 208 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app_modules/home/view_home_new.tsx
View File

@@ -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,
}
);
}
}}
>

72
src/app_modules/notifikasi/_ui/ui_all_notifikasi.tsx
View File

@@ -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({
listNotifikasi,
}: {
listNotifikasi: any[];
}) {
const [data, setData] = useState<MODEL_NOTIFIKASI[]>(listNotifikasi);
export default function Notifikasi_UiAll() {
const [data, setData] = useState<MODEL_NOTIFIKASI[] | null>(null);
const [activePage, setActivePage] = useState(1);
const [categoryPage, setCategoryPage] = useAtom(gs_notifikasi_kategori_app);
useShallowEffect(() => {
onLoadData({
onSetData(val: any) {
setData(val);
},
});
}, [setData]);
onLoadData();
}, []);
async function onLoadData({ onSetData }: { onSetData: any }) {
const loadData = await notifikasi_getByUserId({
page: 1,
kategoriApp: "Semua",
});
onSetData(loadData);
async function onLoadData() {
const loadData = await fetch(
API_RouteNotifikasi.get_all_by_category({
category: categoryPage as any,
page: 1,
})
);
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({
page: activePage + 1,
kategoriApp: categoryPage as any,
});
const loadData = await fetch(
API_RouteNotifikasi.get_all_by_category({
category: categoryPage as any,
page: activePage + 1,
})
);
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>

51
src/app_modules/notifikasi/_ui/ui_event_notifikasi.tsx
View File

@@ -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({
listNotifikasi,
}: {
listNotifikasi: any[];
}) {
const [data, setData] = useState<MODEL_NOTIFIKASI[]>(listNotifikasi);
export default function Notifikasi_UiEvent() {
const [data, setData] = useState<MODEL_NOTIFIKASI[] | null>(null);
const [activePage, setActivePage] = useState(1);
const [categoryPage, setCategoryPage] = useAtom(gs_notifikasi_kategori_app);
useShallowEffect(() => {
onLoadData(setData);
}, [setData]);
onLoadData();
}, []);
async function onLoadData(setData: any) {
const listNotifikasi = await notifikasi_getByUserId({
page: 1,
kategoriApp: "Event",
});
setData(listNotifikasi);
async function onLoadData() {
const loadData = await fetch(
API_RouteNotifikasi.get_all_by_category({ category: categoryPage as any, page: 1 })
);
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
@@ -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({
page: activePage + 1,
kategoriApp: categoryPage as any,
});
const loadData = await fetch(
API_RouteNotifikasi.get_all_by_category({
category: categoryPage as any,
page: activePage + 1,
})
);
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>

17
src/app_modules/notifikasi/_ui/ui_new_layout_notifikasi.tsx
View File

@@ -3,12 +3,12 @@
import { RouterNotifikasi } from "@/app/lib/router_hipmi/router_notifikasi";
import { MainColor } from "@/app_modules/_global/color/color_pallet";
import {
BackgroundImage,
Box,
Button,
Container,
Flex,
rem,
BackgroundImage,
Box,
Button,
Container,
Flex,
rem,
} from "@mantine/core";
import { useAtom } from "jotai";
import _ from "lodash";
@@ -108,9 +108,7 @@ function UIChildren({
style={{
transition: "0.3s",
backgroundColor:
categoryPage === e.name
? MainColor.yellow
: "GrayText",
categoryPage === e.name ? MainColor.yellow : "GrayText",
}}
onClick={() => {
router.replace(
@@ -120,7 +118,6 @@ function UIChildren({
}
);
setCategoryPage(e.name);
// onLoadDataNotifikasi(e.name);
}}
>
{e.name}

17
src/app_modules/notifikasi/component/card_view.tsx
View File

@@ -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", {
dateStyle: "long",
}).format(data?.createdAt)}
<Text span inherit fz={10} color="gray">
{", "}
{new Intl.DateTimeFormat("id-ID", {
timeStyle: "short",
}).format(data?.createdAt)}
</Text>
{moment(data.createdAt).format("LLL")}
</Text>
{data?.isRead ? (
<Group spacing={5}>

2
src/app_modules/notifikasi/component/index.ts
View File

@@ -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 };

29
src/app_modules/notifikasi/component/skeleton_view.tsx Normal file
View File

@@ -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>
))}
</>
);
}

12
src/app_modules/notifikasi/model/interface.ts
View File

@@ -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";