From 3d09eb4543c5120dd1361b9c2f8520e9fdbaee5a Mon Sep 17 00:00:00 2001
From: Lachlan Kermode <lachiekermode@gmail.com>
Date: Wed, 5 Dec 2018 11:17:19 +0000
Subject: [PATCH] clean handler semantics in Dashboard.jsx, add 
 markNotificationsRead

---
 src/actions/index.js             |  7 +++++
 src/components/CardStack.jsx     |  2 +-
 src/components/Dashboard.jsx     | 47 ++++++++++++++++----------------
 src/components/Notification.jsx  |  2 +-
 src/components/Toolbar.jsx       |  4 +--
 src/reducers/domain.js           | 19 +++++++++++--
 src/reducers/utils/validators.js |  2 +-
 7 files changed, 51 insertions(+), 32 deletions(-)

diff --git a/src/actions/index.js b/src/actions/index.js
index 865612e..bbbccf9 100644
--- a/src/actions/index.js
+++ b/src/actions/index.js
@@ -256,6 +256,13 @@ export function toggleNotifications() {
   }
 }
 
+export const MARK_NOTIFICATIONS_READ = 'MARK_NOTIFICATIONS_READ'
+export function markNotificationsRead() {
+  return {
+    type: MARK_NOTIFICATIONS_READ
+  }
+}
+
 // ERRORS
 
 export const FETCH_SOURCE_ERROR = 'FETCH_SOURCE_ERROR'
diff --git a/src/components/CardStack.jsx b/src/components/CardStack.jsx
index 8c5071e..05fbddf 100644
--- a/src/components/CardStack.jsx
+++ b/src/components/CardStack.jsx
@@ -54,7 +54,7 @@ class CardStack extends React.Component {
       <div
         id='card-stack-header'
         className='card-stack-header'
-        onClick={() => this.props.onToggle('TOGGLE_CARDSTACK')}
+        onClick={() => this.props.onToggleCardstack()}
       >
         <button className="side-menu-burg is-active"><span></span></button>
         <p className="header-copy top">
diff --git a/src/components/Dashboard.jsx b/src/components/Dashboard.jsx
index a0ebc67..a92bcb8 100644
--- a/src/components/Dashboard.jsx
+++ b/src/components/Dashboard.jsx
@@ -19,7 +19,7 @@ class Dashboard extends React.Component {
 
     this.handleHighlight = this.handleHighlight.bind(this);
     this.handleSelect = this.handleSelect.bind(this);
-    this.handleToggle = this.handleToggle.bind(this);
+    // this.handleToggle = this.handleToggle.bind(this);
     this.handleTagFilter = this.handleTagFilter.bind(this);
     this.updateTimerange = this.updateTimerange.bind(this);
 
@@ -62,22 +62,22 @@ class Dashboard extends React.Component {
     this.props.actions.updateTimeRange(timeRange);
   }
 
-  handleToggle( key ) {
-    switch( key ) {
-      case 'TOGGLE_CARDSTACK': {
-        this.props.actions.updateSelected([]);
-        break;
-      }
-      case 'TOGGLE_INFOPOPUP': {
-        this.props.actions.toggleInfoPopup();
-        break;
-      }
-      case 'TOGGLE_NOTIFICATIONS': {
-        this.props.actions.toggleNotifications();
-        break;
-      }
-    }
-  }
+  // handleToggle( key ) {
+  //   switch( key ) {
+  //     case 'TOGGLE_CARDSTACK': {
+  //       this.props.actions.updateSelected([]);
+  //       break;
+  //     }
+  //     case 'TOGGLE_INFOPOPUP': {
+  //       this.props.actions.toggleInfoPopup();
+  //       break;
+  //     }
+  //     case 'TOGGLE_NOTIFICATIONS': {
+  //       this.props.actions.toggleNotifications();
+  //       break;
+  //     }
+  //   }
+  // }
 
   getCategoryColor(category='other') {
     return this.props.ui.style.categories[category] || this.props.style.categories['other']
@@ -100,33 +100,32 @@ class Dashboard extends React.Component {
           }}
         />
         <Toolbar
-          filter={this.handleTagFilter}
-          toggle={ (key) => this.handleToggle(key) }
+          onFilter={this.handleTagFilter}
           actions={this.props.actions}
         />
         <CardStack
           onSelect={this.handleSelect}
           onHighlight={this.handleHighlight}
-          onToggle={this.handleToggle}
+          onToggleCardstack={() => this.props.actions.updateSelected([])}
           getNarrativeLinks={event => this.getNarrativeLinks(event)}
           getCategoryColor={category => this.getCategoryColor(category)}
         />
         <Timeline
           onSelect={this.handleSelect}
           onUpdateTimerange={this.updateTimerange}
-          // onHighlight={this.handleHighlight}
-          // onToggle={() => this.handleToggle('TOGGLE_CARDSTACK')}
           getCategoryColor={category => this.getCategoryColor(category)}
         />
         <InfoPopUp
           ui={this.props.ui}
           app={this.props.app}
-          toggle={() => this.handleToggle('TOGGLE_INFOPOPUP')}
+          toggle={() => this.props.actions.toggleInfoPopup()}
         />
         <Notification
           isNotification={this.props.ui.flags.isNotification}
           notifications={this.props.domain.notifications}
-          toggle={() => this.handleToggle('TOGGLE_NOTIFICATIONS')}
+          onToggle={() => {
+            this.props.actions.toggleNotifications();
+          }}
         />
         <LoadingOverlay
           ui={this.props.ui.flags.isFetchingDomain}
diff --git a/src/components/Notification.jsx b/src/components/Notification.jsx
index 18112b1..fcf939a 100644
--- a/src/components/Notification.jsx
+++ b/src/components/Notification.jsx
@@ -52,7 +52,7 @@ export default class Notification extends React.Component{
             return (
               <div className='notification' onClick={() => this.toggleDetails() }>
                 <button
-                  onClick={() => this.props.toggle()}
+                  onClick={this.props.onToggle}
                   className="side-menu-burg over-white is-active"
                 >
                   <span />
diff --git a/src/components/Toolbar.jsx b/src/components/Toolbar.jsx
index e7eef11..d2fb5f8 100644
--- a/src/components/Toolbar.jsx
+++ b/src/components/Toolbar.jsx
@@ -170,7 +170,7 @@ class Toolbar extends React.Component {
           categories={this.props.categories}
           tagFilters={this.props.tagFilters}
           categoryFilters={this.props.categoryFilters}
-          filter={this.props.filter}
+          filter={this.props.onFilter}
           title={title}
           overview={overview}
           language={this.props.language}
@@ -189,7 +189,7 @@ class Toolbar extends React.Component {
               categories={this.props.categories}
               tagFilters={this.props.tagFilters}
               categoryFilters={this.props.categoryFilters}
-              filter={this.props.filter}
+              filter={this.props.onFilter}
             />
         </TabPanel>
       )
diff --git a/src/reducers/domain.js b/src/reducers/domain.js
index 4e56634..dc798db 100644
--- a/src/reducers/domain.js
+++ b/src/reducers/domain.js
@@ -1,19 +1,32 @@
 import initial from '../store/initial.js'
 
-import { UPDATE_DOMAIN } from '../actions'
+import { UPDATE_DOMAIN, MARK_NOTIFICATIONS_READ } from '../actions'
 import { parseDateTimes } from './utils/helpers.js'
-import { validate } from './utils/validators.js'
+import { validateDomain } from './utils/validators.js'
 
 function updateDomain (domainState, action) {
   action.domain.events = parseDateTimes(action.domain.events)
 
-  return Object.assign({}, domainState, validate(action.domain))
+  // return Object.assign({}, domainState, validate(action.domain))
+  return {
+    ...domainState,
+    ...validateDomain(action.domain)
+  }
+}
+
+function markNotificationsRead (domainState, action) {
+  return {
+    ...domainState,
+    notifications: domainState.notifications.map(n => ({ ...n, isRead: true }))
+  }
 }
 
 function domain (domainState = initial.domain, action) {
   switch (action.type) {
     case UPDATE_DOMAIN:
       return updateDomain(domainState, action)
+    case MARK_NOTIFICATIONS_READ:
+      return markNotificationsRead(domainState, action)
     default:
       return domainState
   }
diff --git a/src/reducers/utils/validators.js b/src/reducers/utils/validators.js
index a995d66..da3e98d 100644
--- a/src/reducers/utils/validators.js
+++ b/src/reducers/utils/validators.js
@@ -52,7 +52,7 @@ function validateTree (node, parent, set, duplicates) {
 /*
 * Validate domain schema
 */
-export function validate(domain) {
+export function validateDomain (domain) {
   const sanitizedDomain = {
     events: [],
     categories: [],