Fix: Notifikasi
Deskripsi: - Fix tampilan & route norifkasi - Pengambilan data diatur per notifikasi agar lebih cepat
This commit is contained in:
21
src/app_modules/notifikasi/_ui/index.ts
Normal file
21
src/app_modules/notifikasi/_ui/index.ts
Normal file
@@ -0,0 +1,21 @@
|
||||
import Notifikasi_UiAll from "./ui_all_notifikasi";
|
||||
import Notifikasi_UiCollaboration from "./ui_collaboration_notifikasi";
|
||||
import Notifikasi_UiDonasi from "./ui_donasi_notifikasi";
|
||||
import Notifikasi_UiEvent from "./ui_event_notifikasi";
|
||||
import Notifikasi_UiForum from "./ui_forum_notifikasi";
|
||||
import Notifikasi_UiInvestasi from "./ui_investasi_notifikasi";
|
||||
import Notifikasi_UiJob from "./ui_job_notifikasi";
|
||||
import Notifikasi_UiNewLayout from "./ui_new_layout_notifikasi";
|
||||
import Notifikasi_UiNewMain from "./ui_new_notifikasi";
|
||||
import Notifikasi_UiVoting from "./ui_voting_notifikasi";
|
||||
|
||||
export { Notifikasi_UiNewMain };
|
||||
export { Notifikasi_UiNewLayout };
|
||||
export { Notifikasi_UiAll };
|
||||
export { Notifikasi_UiJob };
|
||||
export { Notifikasi_UiEvent };
|
||||
export { Notifikasi_UiForum };
|
||||
export { Notifikasi_UiVoting };
|
||||
export { Notifikasi_UiDonasi };
|
||||
export { Notifikasi_UiInvestasi };
|
||||
export { Notifikasi_UiCollaboration };
|
||||
78
src/app_modules/notifikasi/_ui/ui_all_notifikasi.tsx
Normal file
78
src/app_modules/notifikasi/_ui/ui_all_notifikasi.tsx
Normal file
@@ -0,0 +1,78 @@
|
||||
"use client";
|
||||
|
||||
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 _ from "lodash";
|
||||
import { ScrollOnly } from "next-scroll-loader";
|
||||
import { useState } from "react";
|
||||
import { ComponentNotifiaksi_CardView } from "../component";
|
||||
import notifikasi_getByUserId from "../fun/get/get_notifiaksi_by_id";
|
||||
import { MODEL_NOTIFIKASI } from "../model/interface";
|
||||
import { useAtom } from "jotai";
|
||||
import { gs_notifikasi_kategori_app } from "../lib";
|
||||
import { useShallowEffect } from "@mantine/hooks";
|
||||
|
||||
export default function Notifikasi_UiAll({
|
||||
listNotifikasi,
|
||||
}: {
|
||||
listNotifikasi: any[];
|
||||
}) {
|
||||
const [data, setData] = useState<MODEL_NOTIFIKASI[]>(listNotifikasi);
|
||||
const [activePage, setActivePage] = useState(1);
|
||||
const [categoryPage, setCategoryPage] = useAtom(gs_notifikasi_kategori_app);
|
||||
|
||||
useShallowEffect(() => {
|
||||
onLoadData({
|
||||
onSetData(val: any) {
|
||||
setData(val);
|
||||
},
|
||||
});
|
||||
}, [setData]);
|
||||
|
||||
async function onLoadData({ onSetData }: { onSetData: any }) {
|
||||
const loadData = await notifikasi_getByUserId({
|
||||
page: 1,
|
||||
kategoriApp: "Semua",
|
||||
});
|
||||
onSetData(loadData);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box>
|
||||
{_.isEmpty(data) ? (
|
||||
<ComponentGlobal_IsEmptyData text="Tidak ada pemberitahuan" />
|
||||
) : (
|
||||
<ScrollOnly
|
||||
height="85vh"
|
||||
renderLoading={() => (
|
||||
<Center mt={"lg"}>
|
||||
<ComponentGlobal_Loader />
|
||||
</Center>
|
||||
)}
|
||||
data={data}
|
||||
setData={setData}
|
||||
moreData={async () => {
|
||||
const loadData = await notifikasi_getByUserId({
|
||||
page: activePage + 1,
|
||||
kategoriApp: categoryPage as any,
|
||||
});
|
||||
|
||||
setActivePage((val) => val + 1);
|
||||
return loadData;
|
||||
}}
|
||||
>
|
||||
{(item) => (
|
||||
<ComponentNotifiaksi_CardView
|
||||
data={item}
|
||||
onLoadData={setData}
|
||||
categoryPage={categoryPage}
|
||||
/>
|
||||
)}
|
||||
</ScrollOnly>
|
||||
)}
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
"use client";
|
||||
|
||||
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 { useAtom } from "jotai";
|
||||
import _ from "lodash";
|
||||
import { ScrollOnly } from "next-scroll-loader";
|
||||
import { useState } from "react";
|
||||
import { ComponentNotifiaksi_CardView } 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";
|
||||
|
||||
export default function Notifikasi_UiCollaboration({
|
||||
listNotifikasi,
|
||||
}: {
|
||||
listNotifikasi: any[];
|
||||
}) {
|
||||
const [data, setData] = useState<MODEL_NOTIFIKASI[]>(listNotifikasi);
|
||||
const [activePage, setActivePage] = useState(1);
|
||||
const [categoryPage, setCategoryPage] = useAtom(gs_notifikasi_kategori_app);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box>
|
||||
{_.isEmpty(data) ? (
|
||||
<ComponentGlobal_IsEmptyData text="Tidak ada pemberitahuan" />
|
||||
) : (
|
||||
<ScrollOnly
|
||||
height="85vh"
|
||||
renderLoading={() => (
|
||||
<Center mt={"lg"}>
|
||||
<ComponentGlobal_Loader />
|
||||
</Center>
|
||||
)}
|
||||
data={data}
|
||||
setData={setData}
|
||||
moreData={async () => {
|
||||
const loadData = await notifikasi_getByUserId({
|
||||
page: activePage + 1,
|
||||
kategoriApp: categoryPage as any,
|
||||
});
|
||||
|
||||
setActivePage((val) => val + 1);
|
||||
return loadData;
|
||||
}}
|
||||
>
|
||||
{(item) => (
|
||||
<ComponentNotifiaksi_CardView
|
||||
data={item}
|
||||
onLoadData={setData}
|
||||
categoryPage={categoryPage}
|
||||
/>
|
||||
)}
|
||||
</ScrollOnly>
|
||||
)}
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
61
src/app_modules/notifikasi/_ui/ui_donasi_notifikasi.tsx
Normal file
61
src/app_modules/notifikasi/_ui/ui_donasi_notifikasi.tsx
Normal file
@@ -0,0 +1,61 @@
|
||||
"use client";
|
||||
|
||||
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 { useAtom } from "jotai";
|
||||
import _ from "lodash";
|
||||
import { ScrollOnly } from "next-scroll-loader";
|
||||
import { useState } from "react";
|
||||
import { ComponentNotifiaksi_CardView } 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";
|
||||
|
||||
export default function Notifikasi_UiDonasi({
|
||||
listNotifikasi,
|
||||
}: {
|
||||
listNotifikasi: any[];
|
||||
}) {
|
||||
const [data, setData] = useState<MODEL_NOTIFIKASI[]>(listNotifikasi);
|
||||
const [activePage, setActivePage] = useState(1);
|
||||
const [categoryPage, setCategoryPage] = useAtom(gs_notifikasi_kategori_app);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box>
|
||||
{_.isEmpty(data) ? (
|
||||
<ComponentGlobal_IsEmptyData text="Tidak ada pemberitahuan" />
|
||||
) : (
|
||||
<ScrollOnly
|
||||
height="85vh"
|
||||
renderLoading={() => (
|
||||
<Center mt={"lg"}>
|
||||
<ComponentGlobal_Loader />
|
||||
</Center>
|
||||
)}
|
||||
data={data}
|
||||
setData={setData}
|
||||
moreData={async () => {
|
||||
const loadData = await notifikasi_getByUserId({
|
||||
page: activePage + 1,
|
||||
kategoriApp: categoryPage as any,
|
||||
});
|
||||
|
||||
setActivePage((val) => val + 1);
|
||||
return loadData;
|
||||
}}
|
||||
>
|
||||
{(item) => (
|
||||
<ComponentNotifiaksi_CardView
|
||||
data={item}
|
||||
onLoadData={setData}
|
||||
categoryPage={categoryPage}
|
||||
/>
|
||||
)}
|
||||
</ScrollOnly>
|
||||
)}
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
61
src/app_modules/notifikasi/_ui/ui_event_notifikasi.tsx
Normal file
61
src/app_modules/notifikasi/_ui/ui_event_notifikasi.tsx
Normal file
@@ -0,0 +1,61 @@
|
||||
"use client";
|
||||
|
||||
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 { useAtom } from "jotai";
|
||||
import _ from "lodash";
|
||||
import { ScrollOnly } from "next-scroll-loader";
|
||||
import { useState } from "react";
|
||||
import { ComponentNotifiaksi_CardView } 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";
|
||||
|
||||
export default function Notifikasi_UiEvent({
|
||||
listNotifikasi,
|
||||
}: {
|
||||
listNotifikasi: any[];
|
||||
}) {
|
||||
const [data, setData] = useState<MODEL_NOTIFIKASI[]>(listNotifikasi);
|
||||
const [activePage, setActivePage] = useState(1);
|
||||
const [categoryPage, setCategoryPage] = useAtom(gs_notifikasi_kategori_app);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box>
|
||||
{_.isEmpty(data) ? (
|
||||
<ComponentGlobal_IsEmptyData text="Tidak ada pemberitahuan" />
|
||||
) : (
|
||||
<ScrollOnly
|
||||
height="85vh"
|
||||
renderLoading={() => (
|
||||
<Center mt={"lg"}>
|
||||
<ComponentGlobal_Loader />
|
||||
</Center>
|
||||
)}
|
||||
data={data}
|
||||
setData={setData}
|
||||
moreData={async () => {
|
||||
const loadData = await notifikasi_getByUserId({
|
||||
page: activePage + 1,
|
||||
kategoriApp: categoryPage as any,
|
||||
});
|
||||
|
||||
setActivePage((val) => val + 1);
|
||||
return loadData;
|
||||
}}
|
||||
>
|
||||
{(item) => (
|
||||
<ComponentNotifiaksi_CardView
|
||||
data={item}
|
||||
onLoadData={setData}
|
||||
categoryPage={categoryPage}
|
||||
/>
|
||||
)}
|
||||
</ScrollOnly>
|
||||
)}
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
61
src/app_modules/notifikasi/_ui/ui_forum_notifikasi.tsx
Normal file
61
src/app_modules/notifikasi/_ui/ui_forum_notifikasi.tsx
Normal file
@@ -0,0 +1,61 @@
|
||||
"use client";
|
||||
|
||||
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 { useAtom } from "jotai";
|
||||
import _ from "lodash";
|
||||
import { ScrollOnly } from "next-scroll-loader";
|
||||
import { useState } from "react";
|
||||
import { ComponentNotifiaksi_CardView } 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";
|
||||
|
||||
export default function Notifikasi_UiForum({
|
||||
listNotifikasi,
|
||||
}: {
|
||||
listNotifikasi: any[];
|
||||
}) {
|
||||
const [data, setData] = useState<MODEL_NOTIFIKASI[]>(listNotifikasi);
|
||||
const [activePage, setActivePage] = useState(1);
|
||||
const [categoryPage, setCategoryPage] = useAtom(gs_notifikasi_kategori_app);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box>
|
||||
{_.isEmpty(data) ? (
|
||||
<ComponentGlobal_IsEmptyData text="Tidak ada pemberitahuan" />
|
||||
) : (
|
||||
<ScrollOnly
|
||||
height="85vh"
|
||||
renderLoading={() => (
|
||||
<Center mt={"lg"}>
|
||||
<ComponentGlobal_Loader />
|
||||
</Center>
|
||||
)}
|
||||
data={data}
|
||||
setData={setData}
|
||||
moreData={async () => {
|
||||
const loadData = await notifikasi_getByUserId({
|
||||
page: activePage + 1,
|
||||
kategoriApp: categoryPage as any,
|
||||
});
|
||||
|
||||
setActivePage((val) => val + 1);
|
||||
return loadData;
|
||||
}}
|
||||
>
|
||||
{(item) => (
|
||||
<ComponentNotifiaksi_CardView
|
||||
data={item}
|
||||
onLoadData={setData}
|
||||
categoryPage={categoryPage}
|
||||
/>
|
||||
)}
|
||||
</ScrollOnly>
|
||||
)}
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
61
src/app_modules/notifikasi/_ui/ui_investasi_notifikasi.tsx
Normal file
61
src/app_modules/notifikasi/_ui/ui_investasi_notifikasi.tsx
Normal file
@@ -0,0 +1,61 @@
|
||||
"use client";
|
||||
|
||||
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 { useAtom } from "jotai";
|
||||
import _ from "lodash";
|
||||
import { ScrollOnly } from "next-scroll-loader";
|
||||
import { useState } from "react";
|
||||
import { ComponentNotifiaksi_CardView } 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";
|
||||
|
||||
export default function Notifikasi_UiInvestasi({
|
||||
listNotifikasi,
|
||||
}: {
|
||||
listNotifikasi: any[];
|
||||
}) {
|
||||
const [data, setData] = useState<MODEL_NOTIFIKASI[]>(listNotifikasi);
|
||||
const [activePage, setActivePage] = useState(1);
|
||||
const [categoryPage, setCategoryPage] = useAtom(gs_notifikasi_kategori_app);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box>
|
||||
{_.isEmpty(data) ? (
|
||||
<ComponentGlobal_IsEmptyData text="Tidak ada pemberitahuan" />
|
||||
) : (
|
||||
<ScrollOnly
|
||||
height="85vh"
|
||||
renderLoading={() => (
|
||||
<Center mt={"lg"}>
|
||||
<ComponentGlobal_Loader />
|
||||
</Center>
|
||||
)}
|
||||
data={data}
|
||||
setData={setData}
|
||||
moreData={async () => {
|
||||
const loadData = await notifikasi_getByUserId({
|
||||
page: activePage + 1,
|
||||
kategoriApp: categoryPage as any,
|
||||
});
|
||||
|
||||
setActivePage((val) => val + 1);
|
||||
return loadData;
|
||||
}}
|
||||
>
|
||||
{(item) => (
|
||||
<ComponentNotifiaksi_CardView
|
||||
data={item}
|
||||
onLoadData={setData}
|
||||
categoryPage={categoryPage}
|
||||
/>
|
||||
)}
|
||||
</ScrollOnly>
|
||||
)}
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
61
src/app_modules/notifikasi/_ui/ui_job_notifikasi.tsx
Normal file
61
src/app_modules/notifikasi/_ui/ui_job_notifikasi.tsx
Normal file
@@ -0,0 +1,61 @@
|
||||
"use client";
|
||||
|
||||
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 { useAtom } from "jotai";
|
||||
import _ from "lodash";
|
||||
import { ScrollOnly } from "next-scroll-loader";
|
||||
import { useState } from "react";
|
||||
import { ComponentNotifiaksi_CardView } 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";
|
||||
|
||||
export default function Notifikasi_UiJob({
|
||||
listNotifikasi,
|
||||
}: {
|
||||
listNotifikasi: any[];
|
||||
}) {
|
||||
const [data, setData] = useState<MODEL_NOTIFIKASI[]>(listNotifikasi);
|
||||
const [activePage, setActivePage] = useState(1);
|
||||
const [categoryPage, setCategoryPage] = useAtom(gs_notifikasi_kategori_app);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box>
|
||||
{_.isEmpty(data) ? (
|
||||
<ComponentGlobal_IsEmptyData text="Tidak ada pemberitahuan" />
|
||||
) : (
|
||||
<ScrollOnly
|
||||
height="85vh"
|
||||
renderLoading={() => (
|
||||
<Center mt={"lg"}>
|
||||
<ComponentGlobal_Loader />
|
||||
</Center>
|
||||
)}
|
||||
data={data}
|
||||
setData={setData}
|
||||
moreData={async () => {
|
||||
const loadData = await notifikasi_getByUserId({
|
||||
page: activePage + 1,
|
||||
kategoriApp: categoryPage as any,
|
||||
});
|
||||
|
||||
setActivePage((val) => val + 1);
|
||||
return loadData;
|
||||
}}
|
||||
>
|
||||
{(item) => (
|
||||
<ComponentNotifiaksi_CardView
|
||||
data={item}
|
||||
onLoadData={setData}
|
||||
categoryPage={categoryPage}
|
||||
/>
|
||||
)}
|
||||
</ScrollOnly>
|
||||
)}
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
135
src/app_modules/notifikasi/_ui/ui_new_layout_notifikasi.tsx
Normal file
135
src/app_modules/notifikasi/_ui/ui_new_layout_notifikasi.tsx
Normal file
@@ -0,0 +1,135 @@
|
||||
"use client";
|
||||
|
||||
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,
|
||||
} from "@mantine/core";
|
||||
import { useAtom } from "jotai";
|
||||
import _ from "lodash";
|
||||
import { useRouter } from "next/navigation";
|
||||
import React, { useState } from "react";
|
||||
import { gs_notifikasi_kategori_app } from "../lib/global_state";
|
||||
|
||||
export default function Notifikasi_UiNewLayout({
|
||||
children,
|
||||
header,
|
||||
masterKategori,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
header?: React.ReactNode;
|
||||
masterKategori: any[];
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
<Box
|
||||
w={"100%"}
|
||||
h={"100%"}
|
||||
style={{
|
||||
backgroundColor: MainColor.black,
|
||||
overflowX: "auto",
|
||||
overflowY: "auto",
|
||||
position: "fixed",
|
||||
}}
|
||||
>
|
||||
<Container mih={"100vh"} p={0} size={rem(500)} bg={MainColor.darkblue}>
|
||||
<BackgroundImage
|
||||
src={"/aset/global/main_background.png"}
|
||||
h={"100vh"}
|
||||
style={{ position: "relative" }}
|
||||
>
|
||||
<UIHeader header={header} />
|
||||
|
||||
<UIChildren masterKategori={masterKategori}>{children}</UIChildren>
|
||||
</BackgroundImage>
|
||||
</Container>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function UIHeader({ header }: { header: React.ReactNode }) {
|
||||
return (
|
||||
<>
|
||||
{header ? (
|
||||
<Box
|
||||
h={"8vh"}
|
||||
style={{
|
||||
zIndex: 10,
|
||||
}}
|
||||
w={"100%"}
|
||||
pos={"sticky"}
|
||||
top={0}
|
||||
>
|
||||
{header}
|
||||
</Box>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function UIChildren({
|
||||
children,
|
||||
masterKategori,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
masterKategori: any[];
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const [mstrKategori, setMstrKategori] = useState(masterKategori);
|
||||
const [categoryPage, setCategoryPage] = useAtom(gs_notifikasi_kategori_app);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box style={{ zIndex: 0 }} h={"92vh"} px={"xs"} pos={"static"}>
|
||||
<Box
|
||||
mb={"xs"}
|
||||
style={{
|
||||
display: "flex",
|
||||
gap: "20px",
|
||||
position: "relative",
|
||||
overflowX: "scroll",
|
||||
scrollbarWidth: "none",
|
||||
}}
|
||||
>
|
||||
<Flex gap={"md"}>
|
||||
{mstrKategori.map((e, i) => (
|
||||
<Button
|
||||
radius={"xl"}
|
||||
key={i}
|
||||
c={categoryPage === e.name ? "black" : "gray.5"}
|
||||
style={{
|
||||
transition: "0.3s",
|
||||
backgroundColor:
|
||||
categoryPage === e.name
|
||||
? MainColor.yellow
|
||||
: "GrayText",
|
||||
}}
|
||||
onClick={() => {
|
||||
router.replace(
|
||||
RouterNotifikasi.categoryApp({ name: _.lowerCase(e.name) }),
|
||||
{
|
||||
scroll: false,
|
||||
}
|
||||
);
|
||||
setCategoryPage(e.name);
|
||||
// onLoadDataNotifikasi(e.name);
|
||||
}}
|
||||
>
|
||||
{e.name}
|
||||
</Button>
|
||||
))}
|
||||
</Flex>
|
||||
</Box>
|
||||
{children}
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
80
src/app_modules/notifikasi/_ui/ui_new_notifikasi.tsx
Normal file
80
src/app_modules/notifikasi/_ui/ui_new_notifikasi.tsx
Normal file
@@ -0,0 +1,80 @@
|
||||
"use client";
|
||||
|
||||
import { Box, Button, Flex, Stack, Title } from "@mantine/core";
|
||||
import UIGlobal_LayoutHeaderTamplate from "../../_global/ui/ui_header_tamplate";
|
||||
import { Notifikasi_ViewNewMain } from "../_view";
|
||||
import { Notifikasi_UiLayout, Notifikasi_UiView } from "../ui";
|
||||
import { useState } from "react";
|
||||
import { MainColor } from "@/app_modules/_global/color";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { RouterNotifikasi } from "@/app/lib/router_hipmi/router_notifikasi";
|
||||
import _ from "lodash";
|
||||
|
||||
export default function Notifikasi_UiNewMain({
|
||||
listNotifikasi,
|
||||
masterKategori,
|
||||
categoryName,
|
||||
}: {
|
||||
listNotifikasi: any[];
|
||||
masterKategori: any[];
|
||||
categoryName: string;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const [mstrKategori, setMstrKategori] = useState(masterKategori);
|
||||
const [activeKategori, setActiveKategori] = useState(categoryName);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Stack>
|
||||
<Box
|
||||
style={{
|
||||
display: "flex",
|
||||
gap: "20px",
|
||||
position: "relative",
|
||||
overflowX: "scroll",
|
||||
scrollbarWidth: "none",
|
||||
}}
|
||||
>
|
||||
<Flex gap={"md"}>
|
||||
{mstrKategori.map((e, i) => (
|
||||
<Button
|
||||
radius={"xl"}
|
||||
key={i}
|
||||
c={categoryName === _.lowerCase(e.name) ? "black" : "gray.5"}
|
||||
style={{
|
||||
transition: "0.3s",
|
||||
backgroundColor:
|
||||
categoryName === _.lowerCase(e.name)
|
||||
? MainColor.yellow
|
||||
: "GrayText",
|
||||
}}
|
||||
onClick={() => {
|
||||
// router.replace(
|
||||
// RouterNotifikasi.main({ name: _.lowerCase(e.name) }),
|
||||
// {
|
||||
// scroll: false,
|
||||
// }
|
||||
// );
|
||||
setActiveKategori(_.lowerCase(e.name));
|
||||
// onLoadDataNotifikasi(e.name);
|
||||
}}
|
||||
>
|
||||
{e.name}
|
||||
</Button>
|
||||
))}
|
||||
</Flex>
|
||||
</Box>
|
||||
|
||||
<Title>{activeKategori}</Title>
|
||||
</Stack>
|
||||
{/* <Notifikasi_UiNewLayout
|
||||
header={<UIGlobal_LayoutHeaderTamplate title="Notifikasi" />}
|
||||
>
|
||||
<Notifikasi_ViewNewMain
|
||||
// listNotifikasi={listNotifikasi}
|
||||
// masterKategori={masterKategori}
|
||||
/>
|
||||
</Notifikasi_UiNewLayout> */}
|
||||
</>
|
||||
);
|
||||
}
|
||||
61
src/app_modules/notifikasi/_ui/ui_voting_notifikasi.tsx
Normal file
61
src/app_modules/notifikasi/_ui/ui_voting_notifikasi.tsx
Normal file
@@ -0,0 +1,61 @@
|
||||
"use client";
|
||||
|
||||
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 { useAtom } from "jotai";
|
||||
import _ from "lodash";
|
||||
import { ScrollOnly } from "next-scroll-loader";
|
||||
import { useState } from "react";
|
||||
import { ComponentNotifiaksi_CardView } 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";
|
||||
|
||||
export default function Notifikasi_UiVoting({
|
||||
listNotifikasi,
|
||||
}: {
|
||||
listNotifikasi: any[];
|
||||
}) {
|
||||
const [data, setData] = useState<MODEL_NOTIFIKASI[]>(listNotifikasi);
|
||||
const [activePage, setActivePage] = useState(1);
|
||||
const [categoryPage, setCategoryPage] = useAtom(gs_notifikasi_kategori_app);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box>
|
||||
{_.isEmpty(data) ? (
|
||||
<ComponentGlobal_IsEmptyData text="Tidak ada pemberitahuan" />
|
||||
) : (
|
||||
<ScrollOnly
|
||||
height="85vh"
|
||||
renderLoading={() => (
|
||||
<Center mt={"lg"}>
|
||||
<ComponentGlobal_Loader />
|
||||
</Center>
|
||||
)}
|
||||
data={data}
|
||||
setData={setData}
|
||||
moreData={async () => {
|
||||
const loadData = await notifikasi_getByUserId({
|
||||
page: activePage + 1,
|
||||
kategoriApp: categoryPage as any,
|
||||
});
|
||||
|
||||
setActivePage((val) => val + 1);
|
||||
return loadData;
|
||||
}}
|
||||
>
|
||||
{(item) => (
|
||||
<ComponentNotifiaksi_CardView
|
||||
data={item}
|
||||
onLoadData={setData}
|
||||
categoryPage={categoryPage}
|
||||
/>
|
||||
)}
|
||||
</ScrollOnly>
|
||||
)}
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user