feat(notifications): click x to dismiss

src/actions/notification.js

@@ -6,9 +6,20 @@ import { createActions } from '../utils/redux'
 export const notifications = createActions('NOTIFICATIONS')
 
 // Notification
-export const notification = createActions('NOTIFICATION')
+export const notification = {
+  ...createActions('NOTIFICATION', {
+    withUpdate: true
+  }),
+  DISMISS: 'DISMISS_NOTIFICATION'
+}
 
 /* Action Creators */
 
 // Notifications
 export const fetchNotifications = () => ({ type: notifications.FETCH })
+
+// Notification
+export const dismissNotification = (txHash, logIndex) => ({
+  type: notification.DISMISS,
+  payload: { txHash, logIndex }
+})

src/components/__snapshots__/storyshots.test.js.snap

@@ -5618,6 +5618,7 @@ exports[`Storyshots Notification Card default 1`] = `
             </div>
             <div
               className="NotificationCard-dismiss"
+              id=""
               onClick={[Function]}
             >
               x
@@ -5928,6 +5929,7 @@ exports[`Storyshots Notification Card with lots of text 1`] = `
             </div>
             <div
               className="NotificationCard-dismiss"
+              id=""
               onClick={[Function]}
             >
               x

src/components/notification-card/index.js

@@ -1,26 +1,48 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { Link } from 'react-router-dom'
 
 import './notification-card.css'
 
-const NotificationCard = ({ message, onClick, onDismissClick }) => (
-  <div className="NotificationCard">
+const NotificationCard = ({ id, message, to, onClick, onDismissClick }) => {
+  const content = (
     <div className="NotificationCard-message" onClick={onClick}>
       {message}
     </div>
-    <div className="NotificationCard-dismiss" onClick={onDismissClick}>
-      x
+  )
+  return (
+    <div className="NotificationCard">
+      {to ? <Link to={to}>{content}</Link> : content}
+      <div
+        id={id}
+        className="NotificationCard-dismiss"
+        onClick={onDismissClick}
+      >
+        x
+      </div>
     </div>
-  </div>
-)
+  )
+}
 
 NotificationCard.propTypes = {
   // State
+  id: PropTypes.string,
   message: PropTypes.string.isRequired,
+  to: PropTypes.string,
+
+  // Handlers
+  onClick: PropTypes.func,
+  onDismissClick: PropTypes.func
+}
+
+NotificationCard.defaultProps = {
+  // State
+  id: '',
+  to: null,
 
   // Handlers
-  onClick: PropTypes.func.isRequired,
-  onDismissClick: PropTypes.func.isRequired
+  onClick: null,
+  onDismissClick: null
 }
 
 export default NotificationCard

src/components/notification-card/notification-card.scss

@@ -9,6 +9,7 @@
   position: relative;
 
   &-message {
+    color: $text;
     height: 100px;
     overflow: hidden;
     padding: 26px 30px;

src/containers/home/index.js

@@ -38,6 +38,7 @@ class Home extends PureComponent {
     // Action Dispatchers
     fetchBalance: PropTypes.func.isRequired,
     fetchNotifications: PropTypes.func.isRequired,
+    dismissNotification: PropTypes.func.isRequired,
     fetchPNKBalance: PropTypes.func.isRequired,
     activatePNK: PropTypes.func.isRequired,
     fetchArbitratorData: PropTypes.func.isRequired,
@@ -89,6 +90,14 @@ class Home extends PureComponent {
     })
   }
 
+  handleNotificationCardDismissClick = event => {
+    const { notifications, dismissNotification } = this.props
+    const { txHash, logIndex } = notifications.data.find(
+      n => (n._id = event.currentTarget.id)
+    )
+    dismissNotification(txHash, logIndex)
+  }
+
   render() {
     const {
       accounts,
@@ -208,8 +217,13 @@ class Home extends PureComponent {
             done={
               notifications.data &&
               notifications.data.map(n => (
-                <div className="Home-cardList-card">
-                  <NotificationCard message={n.message} />
+                <div key={n._id} className="Home-cardList-card">
+                  <NotificationCard
+                    id={n._id}
+                    message={n.message}
+                    to={`/disputes/${n.data.disputeId}`}
+                    onDismissClick={this.handleNotificationCardDismissClick}
+                  />
                 </div>
               ))
             }
@@ -270,14 +284,15 @@ export default connect(
   state => ({
     accounts: state.wallet.accounts,
     balance: state.wallet.balance,
-    notifications: state.notification.notifications,
+    notifications: notificationSelectors.getNotifications(state),
     PNKBalance: state.arbitrator.PNKBalance,
     arbitratorData: state.arbitrator.arbitratorData,
     activatePNKFormIsInvalid: getActivatePNKFormIsInvalid(state)
   }),
   {
     fetchBalance: walletActions.fetchBalance,
     fetchNotifications: notificationActions.fetchNotifications,
+    dismissNotification: notificationActions.dismissNotification,
     fetchPNKBalance: arbitratorActions.fetchPNKBalance,
     activatePNK: arbitratorActions.activatePNK,
     fetchArbitratorData: arbitratorActions.fetchArbitratorData,

src/reducers/notification.js

@@ -22,6 +22,16 @@ export default createReducer(
         ...state.notifications,
         data: [...state.notifications.data, action.payload.notification]
       }
+    }),
+    [notificationActions.notification.RECEIVE_UPDATED]: (state, action) => ({
+      ...state,
+      notifications: {
+        ...state.notifications,
+        data: action.payload.notifications
+      }
     })
   }
 )
+
+// Selectors
+export const getNotifications = state => state.notification.notifications

src/sagas/notification.js

@@ -10,6 +10,7 @@ import {
   put
 } from 'redux-saga/effects'
 
+import * as notificationSelectors from '../reducers/notification'
 import * as notificationActions from '../actions/notification'
 import * as walletSelectors from '../reducers/wallet'
 import * as walletActions from '../actions/wallet'
@@ -19,7 +20,7 @@ import { action, errorAction } from '../utils/action'
 /**
  * Listens for push notifications.
  */
-export function* pushNotificationsListener() {
+function* pushNotificationsListener() {
   // Start after fetching whole list of notifications
   while (yield take(notificationActions.notifications.FETCH)) {
     const account = yield select(walletSelectors.getAccount) // Current account
@@ -30,7 +31,7 @@ export function* pushNotificationsListener() {
         emitter(notification)
       )
 
-      return kleros.eventListener.clearArbitratorHandlers // Unsubscribe function
+      return kleros.eventListener.stopWatchingArbitratorEvents // Unsubscribe function
     })
 
     // Keep listening while on the same account
@@ -55,11 +56,11 @@ export function* pushNotificationsListener() {
 /**
  * Fetches the current account's notifications.
  */
-export function* fetchNotifications() {
+function* fetchNotifications() {
   try {
     const account = yield select(walletSelectors.getAccount)
     const notifications = yield call(
-      kleros.notifications.getNotifications,
+      kleros.notifications.getUnreadNotifications,
       account
     )
 
@@ -71,6 +72,34 @@ export function* fetchNotifications() {
   }
 }
 
+/**
+ * Dismisses a notification.
+ */
+function* dismissNotification({ payload: { txHash, logIndex } }) {
+  try {
+    yield put(action(notificationActions.notification.UPDATE))
+
+    yield call(
+      kleros.notifications.markNotificationAsRead,
+      yield select(walletSelectors.getAccount),
+      txHash,
+      logIndex
+    )
+
+    const notifications = (yield select(
+      notificationSelectors.getNotifications
+    )).data.filter(n => n.txHash !== txHash || n.logIndex !== logIndex)
+
+    yield put(
+      action(notificationActions.notification.RECEIVE_UPDATED, {
+        notifications
+      })
+    )
+  } catch (err) {
+    yield put(errorAction(notificationActions.notification.FAIL_UPDATE, err))
+  }
+}
+
 /**
  * The root of the notification saga.
  */
@@ -80,4 +109,10 @@ export default function* notificationSaga() {
 
   // Notifications
   yield takeLatest(notificationActions.notifications.FETCH, fetchNotifications)
+
+  // Notification
+  yield takeLatest(
+    notificationActions.notification.DISMISS,
+    dismissNotification
+  )
 }