From 745970098660096783ed2cb196edc2f341a5ae04 Mon Sep 17 00:00:00 2001
From: Cesar <26280794+csrapr@users.noreply.github.com>
Date: Mon, 21 Dec 2020 23:19:22 +0000
Subject: [PATCH] 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                        | 18 +++++++++++++++---
 .../NotificationCenter/NotificationCenter.js   |  1 -
 .../NotificationCenter/NotificationRow.js      |  1 -
 .../src/components/layout/Header.js            |  1 -
 .../src/components/typography/styles.js        |  4 +++-
 5 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/lib/notifier/queries.js b/lib/notifier/queries.js
index 45fe71d1..e3ffe0eb 100644
--- a/lib/notifier/queries.js
+++ b/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,
diff --git a/new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.js b/new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.js
index 5795e06d..9d478d11 100644
--- a/new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.js
+++ b/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'
diff --git a/new-lamassu-admin/src/components/NotificationCenter/NotificationRow.js b/new-lamassu-admin/src/components/NotificationCenter/NotificationRow.js
index b01312ce..c62d8077 100644
--- a/new-lamassu-admin/src/components/NotificationCenter/NotificationRow.js
+++ b/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'
diff --git a/new-lamassu-admin/src/components/layout/Header.js b/new-lamassu-admin/src/components/layout/Header.js
index 3d777648..ae1d1118 100644
--- a/new-lamassu-admin/src/components/layout/Header.js
+++ b/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'
diff --git a/new-lamassu-admin/src/components/typography/styles.js b/new-lamassu-admin/src/components/typography/styles.js
index 0117fc93..6416fda4 100644
--- a/new-lamassu-admin/src/components/typography/styles.js
+++ b/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