import React, { useState, useEffect, useRef } from 'react' import { router, usePage } from '@inertiajs/react' import { isEmpty } from 'lodash' import { HiOutlineTicket } from 'react-icons/hi2' import audioSrc from '@/../assets/warning.mp3' import Dropdown from '@/Components/Defaults/Dropdown' import { browserNotification } from './helpers' export default function NotificationStock() { const { props: { stock_notifications }, } = usePage() const [bounce, setBounce] = useState(false) const [notif, setNotif] = useState(stock_notifications) const audioRef = useRef() const handleNotification = (notif) => { if (isEmpty(notif) === false) { fetch(route('api.notification.update', notif)) router.get(notif.url) return } fetch(route('api.notification.update')) router.get(route('dashboard')) } const handleAudioStop = () => { if (isEmpty(audioRef.current) === false) { audioRef.current.pause() audioRef.current.currentTime = 0 } setBounce(false) } const handleAudioPlay = () => { if (audioRef.current.currentTime !== 0) { handleAudioStop() } try { audioRef.current.play() } catch (error) { console.log(error) } setBounce(true) setTimeout(() => setBounce(false), 22000) } const handleUpdate = async (e) => { setNotif(e.message.stock_notifications) handleAudioPlay() browserNotification( 'Notifikasi Stok Voucher', e.message.description, e.message.url ) } useEffect(() => { window.Echo.channel('notification') .listen('NotificationEvent', (e) => { if (e.message.type === 'voucher_stock') { handleUpdate(e) } }) .error((error) => { console.error(error) }) return () => { window.Echo.leave('notification') } }, []) return (
handleAudioStop()} >
{notif.length}
{notif.map((notif) => (
handleNotification(notif)} key={notif.format_created_at} >
{notif.description}
{notif.format_created_at}
))} {notif.length > 0 && (
router.get(route('notifications.index')) } > lihat semua
handleNotification()} > tandai semua dibaca
)} {notif.length === 0 && (
Tidak ada notifikasi
)}
) }