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.description',
'notifications.avatar', 'notifications.avatar',
'notification_types.type', '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', 'notifications.isUnRead',
) )
->where('hospital_id', '=', $hospital_id) ->where('hospital_id', '=', $hospital_id)

View File

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