Chore: add notification center background and button

Chore: notifications screen scaffolding

Fix: change position of notification UI

Feat: join backend and frontend

Feat: notification icons and machine names

lib/notifier/queries.js

@@ -73,20 +73,32 @@ const addComplianceNotification = (deviceId, detail, message) => {
 
 const batchInvalidate = (ids) => {
     const formattedIds = _.map(pgp.as.text, ids).join(',')
-    const sql = `UPDATE notifications SET valid = 'f', read = 't' WHERE id IN ($1^)`
+    const sql = `UPDATE notifications SET valid = 'f', read = 't', modified = CURRENT_TIMESTAMP WHERE id IN ($1^)`
     return db.none(sql, [formattedIds])
 }
 
 const clearBlacklistNotification = (cryptoCode, cryptoAddress) => {
-    const sql = `UPDATE notifications SET valid = 'f', read = 't' WHERE type = 'compliance' AND detail->>'cryptoCode' = $1 AND detail->>'cryptoAddress' = $2 AND (detail->>'code' = 'BLOCKED' OR detail->>'code' = 'REUSED')`
+    const sql = `UPDATE notifications SET valid = 'f', read = 't', modified = CURRENT_TIMESTAMP WHERE type = 'compliance' AND detail->>'cryptoCode' = $1 AND detail->>'cryptoAddress' = $2 AND (detail->>'code' = 'BLOCKED' OR detail->>'code' = 'REUSED')`
     return db.none(sql, [cryptoCode, cryptoAddress])
 }
 
 const getValidNotifications = (type, detail) => {
-    const sql = `SELECT * FROM notifications where type = $1 AND valid = 't' AND detail @> $2`
+    const sql = `SELECT * FROM notifications WHERE type = $1 AND valid = 't' AND detail @> $2`
     return db.any(sql, [type, detail])
 }
 
+const getNotificationsGql = () => {
+    const sql = `(SELECT * from notifications WHERE read = 'f' AND valid = 't' ORDER BY created DESC)
+        UNION ALL (SELECT * from notifications WHERE read = 't' OR valid = 'f' ORDER BY modified DESC LIMIT 50)
+        `
+    return db.any(sql)
+}
+
+const markAsReadGql = (id) => {
+    const sql = `UPDATE notifications SET read = 't', modified = CURRENT_TIMESTAMP WHERE id = $1`
+    return db.none(sql, [id])
+}
+
 module.exports = {
   machineEvents: dbm.machineEvents,
   addNotification,

new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.js

@@ -3,7 +3,6 @@ import { makeStyles } from '@material-ui/core/styles'
 import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { useState } from 'react'
-
 import ActionButton from 'src/components/buttons/ActionButton'
 import { H5 } from 'src/components/typography'
 import { ReactComponent as NotificationIconZodiac } from 'src/styling/icons/menu/notification-zodiac.svg'

new-lamassu-admin/src/components/NotificationCenter/NotificationRow.js

@@ -3,7 +3,6 @@ import { makeStyles } from '@material-ui/core/styles'
 import classnames from 'classnames'
 import prettyMs from 'pretty-ms'
 import React from 'react'
-
 import { Label1, Label2, TL2 } from 'src/components/typography'
 import { ReactComponent as Wrench } from 'src/styling/icons/action/wrench/zodiac.svg'
 import { ReactComponent as Transaction } from 'src/styling/icons/arrow/transaction.svg'

new-lamassu-admin/src/components/layout/Header.js

@@ -6,7 +6,6 @@ import classnames from 'classnames'
 import gql from 'graphql-tag'
 import React, { memo, useState } from 'react'
 import { NavLink, useHistory } from 'react-router-dom'
-
 import NotificationCenter from 'src/components/NotificationCenter'
 import ActionButton from 'src/components/buttons/ActionButton'
 import { H4 } from 'src/components/typography'

new-lamassu-admin/src/components/typography/styles.js

@@ -15,7 +15,7 @@ const base = {
   color: fontColor
 }
 
-export default {
+const styles = {
   h1: {
     extend: base,
     fontSize: fontSize1,
@@ -132,3 +132,5 @@ export default {
     margin: 0
   }
 }
+
+export default styles