From 2416c91c1a13af1fcafbe92de4ff121755e036c8 Mon Sep 17 00:00:00 2001
From: James Acklin <james@tlon.io>
Date: Wed, 11 Jan 2023 08:16:35 -0500
Subject: [PATCH] garden: only show mark as read if >0 unread notifications

fixes tloncorp/landscape-apps#1265
---
 ui/src/nav/notifications/Notifications.tsx | 30 +++++++++++++---------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/ui/src/nav/notifications/Notifications.tsx b/ui/src/nav/notifications/Notifications.tsx
index 5c5ba16..cb79156 100644
--- a/ui/src/nav/notifications/Notifications.tsx
+++ b/ui/src/nav/notifications/Notifications.tsx
@@ -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}>