107 lines
2.9 KiB
TypeScript
107 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
|
|
import { ActionIcon, Indicator, Loader, Text } from "@mantine/core";
|
|
import { MODEL_USER } from "../model/interface";
|
|
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
|
|
import { useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { RouterUserSearch } from "@/app/lib/router_hipmi/router_user_search";
|
|
import {
|
|
AccentColor,
|
|
MainColor,
|
|
} from "@/app_modules/_global/color/color_pallet";
|
|
import { IconBell, IconUserSearch } from "@tabler/icons-react";
|
|
import { RouterNotifikasi } from "@/app/lib/router_hipmi/router_notifikasi";
|
|
import { useShallowEffect } from "@mantine/hooks";
|
|
import notifikasi_countUserNotifikasi from "@/app_modules/notifikasi/fun/count/fun_count_by_id";
|
|
|
|
export function ComponentHome_ButtonHeaderLeft({
|
|
dataUser,
|
|
}: {
|
|
dataUser: MODEL_USER;
|
|
}) {
|
|
const router = useRouter();
|
|
const [isLoadingUS, setIsLoadingUS] = useState(false);
|
|
|
|
return (
|
|
<>
|
|
<ActionIcon
|
|
radius={"xl"}
|
|
variant={"transparent"}
|
|
onClick={() => {
|
|
if (dataUser?.Profile === null) {
|
|
ComponentGlobal_NotifikasiPeringatan("Lengkapi Profile");
|
|
} else {
|
|
setIsLoadingUS(true);
|
|
router.push(RouterUserSearch.main, { scroll: false });
|
|
}
|
|
}}
|
|
>
|
|
{isLoadingUS ? (
|
|
<Loader color={AccentColor.yellow} size={20} />
|
|
) : (
|
|
<IconUserSearch color="white" />
|
|
)}
|
|
</ActionIcon>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export function ComponentHome_ButtonHeaderRight({
|
|
dataUser,
|
|
countNotifikasi,
|
|
}: {
|
|
dataUser: MODEL_USER;
|
|
countNotifikasi: number;
|
|
}) {
|
|
const router = useRouter();
|
|
const [count, setCount] = useState(countNotifikasi);
|
|
const [isLoadingBell, setIsLoadingBell] = useState(false);
|
|
|
|
useShallowEffect(() => {
|
|
onLoadNotifkasi({
|
|
onLoad(val) {
|
|
setCount(val);
|
|
},
|
|
});
|
|
}, []);
|
|
|
|
async function onLoadNotifkasi({ onLoad }: { onLoad: (val: any) => void }) {
|
|
const loadNotifikasi = await notifikasi_countUserNotifikasi();
|
|
onLoad(loadNotifikasi);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<ActionIcon
|
|
variant="transparent"
|
|
onClick={() => {
|
|
if (dataUser?.Profile === null) {
|
|
ComponentGlobal_NotifikasiPeringatan("Lengkapi Profile");
|
|
} else {
|
|
router.push(RouterNotifikasi.main, { scroll: false });
|
|
setIsLoadingBell(true);
|
|
}
|
|
}}
|
|
>
|
|
{isLoadingBell ? (
|
|
<Loader color={AccentColor.yellow} size={20} />
|
|
) : (
|
|
<Indicator
|
|
processing
|
|
color={MainColor.yellow}
|
|
label={
|
|
<Text fz={10} c={MainColor.darkblue}>
|
|
{count > 99 ? "99+" : count}
|
|
</Text>
|
|
}
|
|
>
|
|
<IconBell color="white" />
|
|
</Indicator>
|
|
)}
|
|
</ActionIcon>
|
|
</>
|
|
);
|
|
}
|