fix notification
parent
286e0636b6
commit
401a242822
@ -0,0 +1,34 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
namespace App\Events;
|
||||||
|
|
||||||
|
use Illuminate\Broadcasting\Channel;
|
||||||
|
use Illuminate\Broadcasting\InteractsWithSockets;
|
||||||
|
use Illuminate\Broadcasting\PresenceChannel;
|
||||||
|
use Illuminate\Broadcasting\PrivateChannel;
|
||||||
|
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
|
||||||
|
use Illuminate\Foundation\Events\Dispatchable;
|
||||||
|
use Illuminate\Queue\SerializesModels;
|
||||||
|
|
||||||
|
class NotificationEvent implements ShouldBroadcast
|
||||||
|
{
|
||||||
|
use Dispatchable, InteractsWithSockets, SerializesModels;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Create a new event instance.
|
||||||
|
*/
|
||||||
|
public function __construct(public string|array $message)
|
||||||
|
{
|
||||||
|
info(self::class, ['message' => $message, 'info' => 'triggered']);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get the channels the event should broadcast on.
|
||||||
|
*
|
||||||
|
* @return array<int, \Illuminate\Broadcasting\Channel>
|
||||||
|
*/
|
||||||
|
public function broadcastOn()
|
||||||
|
{
|
||||||
|
return new Channel('notification');
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
@ -0,0 +1,67 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import { router, usePage } from '@inertiajs/react'
|
||||||
|
import { HiOutlineBell } from 'react-icons/hi2'
|
||||||
|
|
||||||
|
import Dropdown from '@/Components/Defaults/Dropdown'
|
||||||
|
|
||||||
|
export default function NotificationContent() {
|
||||||
|
const {
|
||||||
|
props: { notifications, count_unread_notifications },
|
||||||
|
} = usePage()
|
||||||
|
const handleNotification = (notif) => {
|
||||||
|
fetch(route('api.notification.update', notif))
|
||||||
|
router.get(route(route().current()))
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dropdown>
|
||||||
|
<Dropdown.Trigger>
|
||||||
|
<div className="flex flex-row">
|
||||||
|
<HiOutlineBell className="h-6 w-6" />
|
||||||
|
<div>
|
||||||
|
<div className="bg-blue-300 text-blue-600 rounded-lg px-1 text-xs -ml-2">
|
||||||
|
{count_unread_notifications}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Dropdown.Trigger>
|
||||||
|
<Dropdown.Content width="64">
|
||||||
|
{notifications.map((notif) => (
|
||||||
|
<div
|
||||||
|
className={`px-4 py-2 hover:bg-gray-100 border-b`}
|
||||||
|
onClick={() => handleNotification(notif)}
|
||||||
|
key={notif.id}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={`${+notif.is_read === 0 && 'font-bold'}`}
|
||||||
|
>
|
||||||
|
{notif.description}
|
||||||
|
</div>
|
||||||
|
<div className="text-xs">{notif.format_created_at}</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
{notifications.length > 0 && (
|
||||||
|
<div className="w-full flex flex-row justify-between px-3">
|
||||||
|
<div
|
||||||
|
className="text-xs hover:text-blue-500 hover:underline"
|
||||||
|
onClick={() =>
|
||||||
|
router.get(route('notifications.index'))
|
||||||
|
}
|
||||||
|
>
|
||||||
|
lihat semua
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="text-xs hover:text-blue-500 hover:underline"
|
||||||
|
onClick={() => handleNotification()}
|
||||||
|
>
|
||||||
|
tandai semua dibaca
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{notifications.length === 0 && (
|
||||||
|
<div className="px-4 py-2 ">Tidak ada notifikasi</div>
|
||||||
|
)}
|
||||||
|
</Dropdown.Content>
|
||||||
|
</Dropdown>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -0,0 +1,132 @@
|
|||||||
|
import React, { useState, useEffect, useRef } from 'react'
|
||||||
|
import { router, usePage } from '@inertiajs/react'
|
||||||
|
import { HiOutlineCash } from 'react-icons/hi'
|
||||||
|
|
||||||
|
import audioSrc from '@/../assets/notif.mp3'
|
||||||
|
|
||||||
|
import Dropdown from '@/Components/Defaults/Dropdown'
|
||||||
|
import { browserNotification } from './helpers'
|
||||||
|
import { isEmpty } from 'lodash'
|
||||||
|
|
||||||
|
export default function NotificationDeposit() {
|
||||||
|
const {
|
||||||
|
props: { deposit_notifications },
|
||||||
|
} = usePage()
|
||||||
|
const [bounce, setBounce] = useState(false)
|
||||||
|
const [notif, setNotif] = useState(deposit_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.deposit_notifications)
|
||||||
|
handleAudioPlay()
|
||||||
|
browserNotification(
|
||||||
|
'Notifikasi Deposit',
|
||||||
|
e.message.description,
|
||||||
|
e.message.url
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
window.Echo.channel('notification')
|
||||||
|
.listen('NotificationEvent', (e) => {
|
||||||
|
if (e.message.type === 'deposit') {
|
||||||
|
handleUpdate(e)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.error((error) => {
|
||||||
|
console.error(error)
|
||||||
|
})
|
||||||
|
return () => {
|
||||||
|
window.Echo.leave('notification')
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dropdown>
|
||||||
|
<audio id="audio" loop={false} autoPlay={false} ref={audioRef}>
|
||||||
|
<source src={audioSrc} type="audio/mpeg" />
|
||||||
|
</audio>
|
||||||
|
<Dropdown.Trigger>
|
||||||
|
<div
|
||||||
|
className={`flex flex-row ${
|
||||||
|
bounce && 'motion-safe:animate-bounce'
|
||||||
|
}`}
|
||||||
|
onClick={() => handleAudioStop()}
|
||||||
|
>
|
||||||
|
<HiOutlineCash className="h-6 w-6" />
|
||||||
|
<div>
|
||||||
|
<div className="bg-red-300 text-red-600 rounded-lg px-1 text-xs -ml-2">
|
||||||
|
{notif.length}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Dropdown.Trigger>
|
||||||
|
<Dropdown.Content width="64">
|
||||||
|
{notif.map((notif) => (
|
||||||
|
<div
|
||||||
|
className={`px-4 py-2 hover:bg-gray-100 border-b`}
|
||||||
|
onClick={() => handleNotification(notif)}
|
||||||
|
key={notif.format_created_at}
|
||||||
|
>
|
||||||
|
<div className="font-bold">{notif.description}</div>
|
||||||
|
<div className="text-xs">{notif.format_created_at}</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
{notif.length > 0 && (
|
||||||
|
<div className="w-full flex flex-row justify-between px-3">
|
||||||
|
<div
|
||||||
|
className="text-xs hover:text-blue-500 hover:underline"
|
||||||
|
onClick={() =>
|
||||||
|
router.get(route('notifications.index'))
|
||||||
|
}
|
||||||
|
>
|
||||||
|
lihat semua
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="text-xs hover:text-blue-500 hover:underline"
|
||||||
|
onClick={() => handleNotification()}
|
||||||
|
>
|
||||||
|
tandai semua dibaca
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{notif.length === 0 && (
|
||||||
|
<div className="px-4 py-2 ">Tidak ada notifikasi</div>
|
||||||
|
)}
|
||||||
|
</Dropdown.Content>
|
||||||
|
</Dropdown>
|
||||||
|
)
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue