From 2401238b2f9183840559bb49d28ad43de4490e48 Mon Sep 17 00:00:00 2001
From: csrapr <26280794+csrapr@users.noreply.github.com>
Date: Wed, 17 Feb 2021 17:51:36 +0000
Subject: [PATCH] Chore: change misleading query name

---
 lib/new-admin/graphql/schema.js               |  4 +--
 lib/notifier/queries.js                       |  9 +++--
 .../NotificationCenter/NotificationCenter.js  | 36 ++++++++++---------
 .../NotificationCenter.styles.js              | 16 +++++++--
 .../NotificationCenter/NotificationRow.js     |  8 +++--
 5 files changed, 45 insertions(+), 28 deletions(-)

diff --git a/lib/new-admin/graphql/schema.js b/lib/new-admin/graphql/schema.js
index 6d27b2d9..276ec23d 100644
--- a/lib/new-admin/graphql/schema.js
+++ b/lib/new-admin/graphql/schema.js
@@ -327,7 +327,7 @@ const typeDefs = gql`
     insertBlacklistRow(cryptoCode: String!, address: String!): Blacklist
     createPromoCode(code: String!, discount: Int!): PromoCode
     deletePromoCode(codeId: ID!): PromoCode
-    clearNotification(id: ID!): Notification
+    toggleClearNotification(id: ID!, read: Boolean!): Notification
     clearAllNotifications: Notification
   }
 `
@@ -418,7 +418,7 @@ const resolvers = {
     // revokeToken: (...[, { token }]) => tokenManager.revokeToken(token)
     createPromoCode: (...[, { code, discount }]) => promoCodeManager.createPromoCode(code, discount),
     deletePromoCode: (...[, { codeId }]) => promoCodeManager.deletePromoCode(codeId),
-    clearNotification: (...[, { id }]) => notifierQueries.markAsRead(id),
+    toggleClearNotification: (...[, { id, read }]) => notifierQueries.setRead(id, read),
     clearAllNotifications: () => notifierQueries.markAllAsRead()
   }
 }
diff --git a/lib/notifier/queries.js b/lib/notifier/queries.js
index 6b68416a..bfa71742 100644
--- a/lib/notifier/queries.js
+++ b/lib/notifier/queries.js
@@ -56,10 +56,9 @@ const getNotifications = () => {
   const sql = `SELECT * FROM notifications ORDER BY created DESC`
   return db.any(sql).catch(console.error)
 }
-
-const markAsRead = (id) => {
-  const sql = `UPDATE notifications SET read = 't' WHERE id = $1`
-  return db.none(sql, [id]).catch(console.error)
+const setRead = (id, read) => {
+  const sql = `UPDATE notifications SET read = $1 WHERE id = $2`
+  return db.none(sql, [read, id]).catch(console.error)
 }
 
 const markAllAsRead = () => {
@@ -87,7 +86,7 @@ module.exports = {
   clearBlacklistNotification,
   getValidNotifications,
   getNotifications,
-  markAsRead,
+  setRead,
   markAllAsRead,
   hasUnreadNotifications,
   getAlerts,
diff --git a/new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.js b/new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.js
index 8292530f..659c956c 100644
--- a/new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.js
+++ b/new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.js
@@ -35,10 +35,11 @@ const GET_NOTIFICATIONS = gql`
   }
 `
 
-const CLEAR_NOTIFICATION = gql`
-  mutation clearNotification($id: ID!) {
-    clearNotification(id: $id) {
+const TOGGLE_CLEAR_NOTIFICATION = gql`
+  mutation toggleClearNotification($id: ID!, $read: Boolean!) {
+    toggleClearNotification(id: $id, read: $read) {
       id
+      read
     }
   }
 `
@@ -67,7 +68,7 @@ const NotificationCenter = ({ close, notifyUnread }) => {
   if (!hasUnread) {
     notifyUnread && notifyUnread()
   }
-  const [clearNotification] = useMutation(CLEAR_NOTIFICATION, {
+  const [toggleClearNotification] = useMutation(TOGGLE_CLEAR_NOTIFICATION, {
     onError: () => console.error('Error while clearing notification'),
     refetchQueries: () => ['getNotifications']
   })
@@ -76,9 +77,6 @@ const NotificationCenter = ({ close, notifyUnread }) => {
     refetchQueries: () => ['getNotifications']
   })
 
-  const handleClearNotification = id => {
-    clearNotification({ variables: { id } })
-  }
   const buildNotifications = () => {
     const notificationsToShow =
       !showingUnread || !hasUnread
@@ -96,7 +94,11 @@ const NotificationCenter = ({ close, notifyUnread }) => {
           created={n.created}
           read={n.read}
           valid={n.valid}
-          onClear={handleClearNotification}
+          toggleClear={() =>
+            toggleClearNotification({
+              variables: { id: n.id, read: !n.read }
+            })
+          }
         />
       )
     })
@@ -123,14 +125,16 @@ const NotificationCenter = ({ close, notifyUnread }) => {
               {showingUnread ? 'Show all' : 'Show unread'}
             </ActionButton>
           )}
-          <ActionButton
-            color="primary"
-            Icon={ClearAllIcon}
-            InverseIcon={ClearAllIconInverse}
-            className={classes.clearAllButton}
-            onClick={clearAllNotifications}>
-            Mark all as read
-          </ActionButton>
+          {hasUnread && (
+            <ActionButton
+              color="primary"
+              Icon={ClearAllIcon}
+              InverseIcon={ClearAllIconInverse}
+              className={classes.clearAllButton}
+              onClick={clearAllNotifications}>
+              Mark all as read
+            </ActionButton>
+          )}
         </div>
         <div className={classes.notificationsList}>
           {!loading && buildNotifications()}
diff --git a/new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.styles.js b/new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.styles.js
index e852715a..117052f6 100644
--- a/new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.styles.js
+++ b/new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.styles.js
@@ -34,7 +34,8 @@ const styles = {
   },
   actionButtons: {
     display: 'flex',
-    marginLeft: spacer * 2
+    marginLeft: spacer * 2,
+    height: 0
   },
   notificationIcon: {
     position: 'absolute',
@@ -56,7 +57,7 @@ const styles = {
     width: 440,
     height: '90vh',
     maxHeight: '100vh',
-    marginTop: 8,
+    marginTop: spacer * 3,
     marginLeft: 0,
     marginRight: 10,
     overflowY: 'auto',
@@ -80,6 +81,7 @@ const styles = {
   },
   unreadIcon: {
     marginLeft: spacer,
+    marginTop: 5,
     width: '12px',
     height: '12px',
     backgroundColor: secondaryColor,
@@ -87,6 +89,16 @@ const styles = {
     cursor: 'pointer',
     zIndex: 1
   },
+  readIcon: {
+    marginLeft: spacer,
+    marginTop: 5,
+    width: '12px',
+    height: '12px',
+    border: `1px solid ${comet}`,
+    borderRadius: '50%',
+    cursor: 'pointer',
+    zIndex: 1
+  },
   notificationTitle: {
     margin: 0,
     color: comet
diff --git a/new-lamassu-admin/src/components/NotificationCenter/NotificationRow.js b/new-lamassu-admin/src/components/NotificationCenter/NotificationRow.js
index 1b81b325..3aa850b6 100644
--- a/new-lamassu-admin/src/components/NotificationCenter/NotificationRow.js
+++ b/new-lamassu-admin/src/components/NotificationCenter/NotificationRow.js
@@ -32,7 +32,7 @@ const NotificationRow = ({
   created,
   read,
   valid,
-  onClear
+  toggleClear
 }) => {
   const classes = useStyles()
 
@@ -73,8 +73,10 @@ const NotificationRow = ({
         </Grid>
       </Grid>
       <Grid item xs={3} style={{ zIndex: 1 }}>
-        {!read && (
-          <div onClick={() => onClear(id)} className={classes.unreadIcon} />
+        {read ? (
+          <div onClick={() => toggleClear(id)} className={classes.readIcon} />
+        ) : (
+          <div onClick={() => toggleClear(id)} className={classes.unreadIcon} />
         )}
       </Grid>
       {!valid && <StripesSvg className={classes.stripes} />}