Chore: change misleading query name

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()
   }
 }

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,

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,6 +125,7 @@ const NotificationCenter = ({ close, notifyUnread }) => {
               {showingUnread ? 'Show all' : 'Show unread'}
             </ActionButton>
           )}
+          {hasUnread && (
             <ActionButton
               color="primary"
               Icon={ClearAllIcon}
@@ -131,6 +134,7 @@ const NotificationCenter = ({ close, notifyUnread }) => {
               onClick={clearAllNotifications}>
               Mark all as read
             </ActionButton>
+          )}
         </div>
         <div className={classes.notificationsList}>
           {!loading && buildNotifications()}

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

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} />}