tloncorp/landscape
1
1
Fork 0
mirror of https://github.com/tloncorp/landscape.git synced 2024-12-03 02:00:18 +03:00
Code Issues Packages Projects Releases Wiki Activity

garden: only show mark as read if >0 unread notifications

Browse Source 
fixes tloncorp/landscape-apps#1265
This commit is contained in:
James Acklin 2023-01-11 08:16:35 -05:00
parent 688145df5d
commit 2416c91c1a
1 changed files with 18 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
ui/src/nav/notifications/Notifications.tsx
View File

@ -8,10 +8,9 @@ import Notification from './Notification';
import { useNotifications } from './useNotifications';
export const Notifications = ({ history }: RouteComponentProps) => {
const { notifications } = useNotifications();
const { notifications, count } = useNotifications();
const { groups, retrieve } = groupStore();
let timeout = 0 as unknown as NodeJS.Timeout;
function visibilitychange() {
if (document.visibilityState === 'visible') {
@ -22,13 +21,13 @@ export const Notifications = ({ history }: RouteComponentProps) => {
clearTimeout(timeout);
}
}
useEffect(() => {
retrieve();
}, [retrieve]);
useEffect(() => {
visibilitychange()
visibilitychange();
document.addEventListener('visibilitychange', visibilitychange);
return () => {
@ -39,24 +38,31 @@ export const Notifications = ({ history }: RouteComponentProps) => {
const markAllRead = useCallback(() => {
useHarkState.getState().sawSeam({ all: null });
}, [])
}, []);
return (
<ErrorBoundary
FallbackComponent={ErrorAlert}
onReset={() => history.push('/leap/notifications')}
>
<div className="grid grid-rows-[1fr,auto] sm:grid-rows-[auto,1fr] h-full p-4 md:p-9 overflow-y-auto">
<div className="w-full flex items-center justify-between">
<h2 className="font-semibold text-xl">All Notifications</h2>
<button className='button text-white bg-blue-900' onClick={markAllRead}>
Mark All as Read
</button>
<div className="grid h-full grid-rows-[1fr,auto] overflow-y-auto p-4 sm:grid-rows-[auto,1fr] md:p-9">
<div className="flex w-full items-center justify-between">
<h2 className="text-xl font-semibold">All Notifications</h2>
{count > 0 && (
<button
className="button bg-blue-900 text-white"
onClick={markAllRead}
>
Mark All as Read
</button>
)}
</div>
<section className="w-full">
{notifications.map((grouping) => (
<div key={grouping.date}>
<h2 className="mt-8 mb-4 text-lg font-bold text-gray-400">{grouping.date}</h2>
<h2 className="mt-8 mb-4 text-lg font-bold text-gray-400">
{grouping.date}
</h2>
<ul className="space-y-2">
{grouping.bins.map((b) => (
<li key={b.time}>