upd: notifikasi
Deskripsi: - tambah jumlah notifikasi dg variable global No Issues
This commit is contained in:
@@ -6,6 +6,7 @@ import { useEffect, useState } from "react";
|
|||||||
import { useWibuRealtime } from "wibu-realtime";
|
import { useWibuRealtime } from "wibu-realtime";
|
||||||
import NotificationCustome from "./notification_custome";
|
import NotificationCustome from "./notification_custome";
|
||||||
import { useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
|
import { globalParamJumlahNotif } from "@/module/home";
|
||||||
|
|
||||||
export default function WrapLayout({ children, role, theme, user }: { children: React.ReactNode, role: any, theme: any, user: any }) {
|
export default function WrapLayout({ children, role, theme, user }: { children: React.ReactNode, role: any, theme: any, user: any }) {
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
@@ -13,6 +14,7 @@ export default function WrapLayout({ children, role, theme, user }: { children:
|
|||||||
const tema = useHookstate(TEMA)
|
const tema = useHookstate(TEMA)
|
||||||
const notifLoadPage = useHookstate(globalNotifPage)
|
const notifLoadPage = useHookstate(globalNotifPage)
|
||||||
const [tampilNotif, setTampilNotif] = useState(false)
|
const [tampilNotif, setTampilNotif] = useState(false)
|
||||||
|
const paramNotif = useHookstate(globalParamJumlahNotif)
|
||||||
const [data, setData] = useWibuRealtime({
|
const [data, setData] = useWibuRealtime({
|
||||||
WIBU_REALTIME_TOKEN: keyWibu,
|
WIBU_REALTIME_TOKEN: keyWibu,
|
||||||
project: "sdm"
|
project: "sdm"
|
||||||
@@ -27,6 +29,7 @@ export default function WrapLayout({ children, role, theme, user }: { children:
|
|||||||
useShallowEffect(() => {
|
useShallowEffect(() => {
|
||||||
if (data && data.some((i: any) => i.idUserTo == user)) {
|
if (data && data.some((i: any) => i.idUserTo == user)) {
|
||||||
setTampilNotif(true)
|
setTampilNotif(true)
|
||||||
|
paramNotif.set(!paramNotif.get())
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setTampilNotif(false);
|
setTampilNotif(false);
|
||||||
}, 4000);
|
}, 4000);
|
||||||
@@ -40,7 +43,6 @@ export default function WrapLayout({ children, role, theme, user }: { children:
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{/* {JSON.stringify(data)} */}
|
|
||||||
{
|
{
|
||||||
tampilNotif &&
|
tampilNotif &&
|
||||||
<NotificationCustome
|
<NotificationCustome
|
||||||
@@ -50,7 +52,6 @@ export default function WrapLayout({ children, role, theme, user }: { children:
|
|||||||
onClose={() => { '' }}
|
onClose={() => { '' }}
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
|
|
||||||
{children}
|
{children}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
import { funGetHome } from "./lib/api_home";
|
import { funGetHome } from "./lib/api_home";
|
||||||
|
import { globalParamJumlahNotif } from "./lib/val_home";
|
||||||
import ViewDetailFeature from "./ui/view_detail_feature";
|
import ViewDetailFeature from "./ui/view_detail_feature";
|
||||||
import ViewHome from "./ui/view_home";
|
import ViewHome from "./ui/view_home";
|
||||||
import ViewNotification from "./ui/view_notification";
|
import ViewNotification from "./ui/view_notification";
|
||||||
@@ -8,4 +9,5 @@ export { ViewHome }
|
|||||||
export { ViewDetailFeature }
|
export { ViewDetailFeature }
|
||||||
export { ViewSearch }
|
export { ViewSearch }
|
||||||
export { ViewNotification }
|
export { ViewNotification }
|
||||||
export { funGetHome }
|
export { funGetHome }
|
||||||
|
export { globalParamJumlahNotif }
|
||||||
3
src/module/home/lib/val_home.ts
Normal file
3
src/module/home/lib/val_home.ts
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
import { hookstate } from "@hookstate/core";
|
||||||
|
|
||||||
|
export const globalParamJumlahNotif = hookstate<boolean>(false)
|
||||||
@@ -2,22 +2,26 @@
|
|||||||
import { LayoutNavbarHome, TEMA } from "@/module/_global";
|
import { LayoutNavbarHome, TEMA } from "@/module/_global";
|
||||||
import { useHookstate } from "@hookstate/core";
|
import { useHookstate } from "@hookstate/core";
|
||||||
import { ActionIcon, Box, Group, Indicator, Text } from "@mantine/core";
|
import { ActionIcon, Box, Group, Indicator, Text } from "@mantine/core";
|
||||||
|
import { useShallowEffect } from "@mantine/hooks";
|
||||||
import { useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import toast from "react-hot-toast";
|
import toast from "react-hot-toast";
|
||||||
import { HiMagnifyingGlass, HiOutlineBell, HiOutlineUser } from "react-icons/hi2";
|
import { HiMagnifyingGlass, HiOutlineBell, HiOutlineUser } from "react-icons/hi2";
|
||||||
import { funGetHome } from "../lib/api_home";
|
import { funGetHome } from "../lib/api_home";
|
||||||
import { useShallowEffect } from "@mantine/hooks";
|
import { globalParamJumlahNotif } from "../lib/val_home";
|
||||||
|
|
||||||
export default function HeaderHome() {
|
export default function HeaderHome() {
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const tema = useHookstate(TEMA)
|
const tema = useHookstate(TEMA)
|
||||||
const [isDesa, setDesa] = useState("")
|
const [isDesa, setDesa] = useState("")
|
||||||
const [isNotif, setNotif] = useState(0)
|
const [isNotif, setNotif] = useState(0)
|
||||||
|
const paramNotif = useHookstate(globalParamJumlahNotif)
|
||||||
|
const [loading, setLoading] = useState(true)
|
||||||
|
|
||||||
|
|
||||||
const fetchData = async () => {
|
const fetchData = async () => {
|
||||||
try {
|
try {
|
||||||
|
setLoading(true)
|
||||||
const response = await funGetHome('?cat=header')
|
const response = await funGetHome('?cat=header')
|
||||||
if (response.success) {
|
if (response.success) {
|
||||||
setDesa(response.data.village)
|
setDesa(response.data.village)
|
||||||
@@ -28,6 +32,8 @@ export default function HeaderHome() {
|
|||||||
} catch (error) {
|
} catch (error) {
|
||||||
toast.error("Gagal mendapatkan data, coba lagi nanti");
|
toast.error("Gagal mendapatkan data, coba lagi nanti");
|
||||||
console.error(error);
|
console.error(error);
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -36,6 +42,12 @@ export default function HeaderHome() {
|
|||||||
fetchData();
|
fetchData();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
useShallowEffect(() => {
|
||||||
|
if (!loading) {
|
||||||
|
setNotif(isNotif + 1)
|
||||||
|
}
|
||||||
|
}, [paramNotif.get()])
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<LayoutNavbarHome>
|
<LayoutNavbarHome>
|
||||||
|
|||||||
Reference in New Issue
Block a user