bellingcat/ukraine-timemap
1
0
Fork 0
mirror of https://github.com/bellingcat/ukraine-timemap.git synced 2026-06-12 13:28:36 +03:00
Code Issues Packages Projects Releases Wiki Activity

clean handler semantics in Dashboard.jsx, add markNotificationsRead

Browse Source
This commit is contained in:
Lachlan Kermode
2018-12-05 11:17:19 +00:00
parent be4eca8352
commit 3d09eb4543
7 changed files with 51 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/actions/index.js
View File

@@ -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'

2
src/components/CardStack.jsx
View File

@@ -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">

47
src/components/Dashboard.jsx
View File

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

2
src/components/Notification.jsx
View File

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

4
src/components/Toolbar.jsx
View File

@@ -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>
)

19
src/reducers/domain.js
View File

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

2
src/reducers/utils/validators.js
View File

@@ -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: [],