Update Notification

This commit is contained in:
ivan-sim
2023-11-20 17:28:16 +07:00
parent 676e541385
commit 0b211e12a4
2 changed files with 43 additions and 34 deletions

View File

@@ -33,7 +33,7 @@ class NotificationController extends Controller
'notifications.description',
'notifications.avatar',
'notification_types.type',
DB::raw('DATE_FORMAT(notifications.created_at, "%Y-%m-%dT%H:%i:%s.000Z") as createdAt'),
DB::raw('DATE_FORMAT(notifications.created_at, "%Y-%m-%dT%H:%i:%s.000+07:00") as createdAt'),
'notifications.isUnRead',
)
->where('hospital_id', '=', $hospital_id)

View File

@@ -32,15 +32,18 @@ import { useSnackbar } from 'notistack';
export default function NotificationsPopover() {
const [notifications, setNotifications] = useState([]);
const {enqueueSnackbar} = useSnackbar();
useEffect(() => {
const getDataNotifications = async () => {
axios
.get('notifications/1')
.then((response) => {
setNotifications(response.data.data.notifications);
})
.catch((error) => {
enqueueSnackbar(error.response.data.meta.message, {variant : "error"});
});
.get('notifications/1')
.then((response) => {
setNotifications(response.data.data.notifications);
})
.catch((error) => {
enqueueSnackbar(error.response.data.meta.message, {variant : "error"});
});
};
useEffect(() => {
getDataNotifications();
}, []);
const totalUnRead = notifications.filter((item) => item.isUnRead === 1).length;
@@ -102,31 +105,36 @@ export default function NotificationsPopover() {
<Divider sx={{ borderStyle: 'dashed' }} />
<Scrollbar sx={{ height: { xs: 340, sm: 'auto' } }}>
<List
disablePadding
subheader={
<ListSubheader disableSticky sx={{ py: 1, px: 2.5, typography: 'overline' }}>
New
</ListSubheader>
}
>
{notifications.slice(0, 2).map((notification) => (
<NotificationItem key={notification.id} notification={notification} onClick={notification.id}/>
))}
</List>
{notifications && notifications.length > 0 ? (
<>
<List
disablePadding
subheader={
<ListSubheader disableSticky sx={{ py: 1, px: 2.5, typography: 'overline' }}>
New
</ListSubheader>
}
>
{notifications.slice(0, 2).map((notification) => (
<NotificationItem key={notification.id} notification={notification} onClick={notification.id} getDataNotifications={getDataNotifications}/>
))}
</List>
<List
disablePadding
subheader={
<ListSubheader disableSticky sx={{ py: 1, px: 2.5, typography: 'overline' }}>
Before that
</ListSubheader>
}
>
{notifications.slice(2, 5).map((notification) => (
<NotificationItem key={notification.id} notification={notification} onClick={notification.id}/>
))}
</List>
<List
disablePadding
subheader={
<ListSubheader disableSticky sx={{ py: 1, px: 2.5, typography: 'overline' }}>
Before that
</ListSubheader>
}
>
{notifications.slice(2, 5).map((notification) => (
<NotificationItem key={notification.id} notification={notification} onClick={notification.id} getDataNotifications={getDataNotifications}/>
))}
</List>
</>
): ''}
</Scrollbar>
<Divider sx={{ borderStyle: 'dashed' }} />
@@ -153,7 +161,7 @@ type NotificationItemProps = {
isUnRead: boolean;
};
function NotificationItem({ notification, onClick }: { notification: NotificationItemProps, onClick: (id: string) => void}) {
function NotificationItem({ notification, onClick, getDataNotifications }: { notification: NotificationItemProps, onClick: (id: string) => void, getDataNotifications: () => void}) {
const { avatar, title } = renderContent(notification);
const {enqueueSnackbar} = useSnackbar();
const handleClick = () => {
@@ -167,6 +175,7 @@ function NotificationItem({ notification, onClick }: { notification: Notificatio
.post('set-read-notification', data)
.then((response) => {
enqueueSnackbar(response.data.meta.message, {variant : "success"});
getDataNotifications();
})
.catch((error) => {
enqueueSnackbar(error.response.data.meta.message, {variant : "error"});