add notifications with an event outbox, and snake_case every column1aa875115 days ago34 lines · 1.1 KB | 1 | "use client"; |
| 2 | |
| 3 | import { useQueryClient } from |
| 4 | import { CheckCheck } |
| 5 | import { useAction } |
| 6 | import { toast } |
| 7 | |
| 8 | import { markAllNotificationsRead } |
| 9 | import { UNREAD_COUNT_KEY } |
| 10 | import { Button } |
| 11 | import { Spinner } |
| 12 | |
| 13 | export function MarkAllReadButton() |
| 14 | const queryClient = |
| 15 | const { execute, |
| 16 | onSuccess: () => |
| 17 | queryClient.invalidateQueries({ |
| 18 | onError: ({ error |
| 19 | toast.error(error |
| 20 | }); |
| 21 | |
| 22 | return ( |
| 23 | <Button |
| 24 | variant="outline" |
| 25 | size="sm" |
| 26 | className="mb-2 ml-auto" |
| 27 | disabled={isExecuting} |
| 28 | onClick={() => |
| 29 | > |
| 30 | {isExecuting ? <Spinner |
| 31 | Mark all as read |
| 32 | </Button> |
| 33 | ); |
| 34 | } |
"
@tanstack/react-query
"
;
from
"
lucide-react
"
;
from
"
next-safe-action/hooks
"
;
from
"
sonner
"
;
from
"
@/components/notifications/actions
"
;
from
"
@/components/notifications/common
"
;
from
"
@/components/ui/button
"
;
from
"
@/components/ui/spinner
"
;
{
useQueryClient
()
;
isExecuting
}
=
useAction
(
markAllNotificationsRead
,
{
queryKey
:
UNREAD_COUNT_KEY
}
)
,
}
)
=>
.
serverError
??
"
Could not mark notifications as read.
"
)
,
execute
()
}
/>
:
<
CheckCheck
data-icon
=
"
inline-start
"
/>
}