Il est maintenant possible de cliquer sur les tags

DevTools.js

@@ -15,7 +15,7 @@ const DevTools = createDevTools(
   // Note: DockMonitor is visible by default.
   <DockMonitor toggleVisibilityKey='ctrl-h'
                changePositionKey='ctrl-q'
-               defaultPosition='left'
+               defaultPosition='right'
                defaultIsVisible={false}>
     <LogMonitor theme='tomorrow' />
   </DockMonitor>

containers/Explorer.js

@@ -1,26 +1,29 @@
 import React from 'react'
 import {selectVariables, selectTagStats} from '../selectors'
 import {connect} from 'react-redux'
+import {bindActionCreators} from 'redux'
+import * as actions from '../actions'
 
 const Variable = ({data: {variable, tags}}) => <li className="variable">
 	<h3>{variable}</h3>
-	<ul>{Object.keys(tags).map(name => <li>
+	<ul>{Object.keys(tags).map(name => <li key={name}>
 			{name + ': ' + tags[name]}
 	</li>)}</ul>
 </li>
 
 class Explorer extends React.Component {
 	render() {
+		let {tags, actions, variables} = this.props
 		return (
 			<div>
 				<h1>Les prélèvements sociaux sur les salaires</h1>
 				<ul id="tags">
-					{this.props.tags.map(tag =>
-						<TagSelect key={tag.name} tag={tag} />
+					{tags.map(tag =>
+						<TagSelect selectTag={actions.selectTag} key={tag.name} tag={tag} />
 					)}
 				</ul>
 				<ul id="variables">
-					{this.props.variables.map((v, i) => <Variable key={i} data={v}/>)}
+					{variables.map((v, i) => <Variable key={i} data={v}/>)}
 				</ul>
 			</div>
 		)
@@ -29,25 +32,31 @@ class Explorer extends React.Component {
 
 class TagSelect extends React.Component {
 	render(){
-		let {name, choices, number} = this.props.tag
+		let {tag: {name, choices, number}, selectTag} = this.props
 		return (<li>
 			<span className="name">{`${name} (${number} variables)`}</span>
 			<ul className="choices">
-				{[...choices].map(c => <li key={c}>
+				{[...choices].map(c =>
+					<li key={c} onClick={() => selectTag(name, c)}>
 					{c}
-				</li>)}
+					</li>
+				)}
 			</ul>
 		</li>)
 	}
 }
 
-const mapStateToProps = (state) => (
+const mapStateToProps = state => (
 	{
 		variables: selectVariables(state),
 		tags: selectTagStats(state)
 	}
 )
 
-const VariableExplorer = connect(mapStateToProps)(Explorer)
+const actionsToProps = dispatch => ({
+	actions: bindActionCreators(actions, dispatch),
+})
+
+const VariableExplorer = connect(mapStateToProps, actionsToProps)(Explorer)
 
 export default VariableExplorer

reducers.js

@@ -2,12 +2,10 @@
 import { combineReducers } from 'redux'
 import { SELECT_TAG } from './actions'
 
-function selectTag(state = {}, action) {
-	switch (action.type) {
+function selectedTags(state = [], {type, tagName, tagValue}) {
+	switch (type) {
 	case SELECT_TAG:
-		return Object.assign({}, state, {
-			[action.tagName]: action.tagValue
-		})
+		return [...state, [tagName, tagValue]]
 	default:
 		return state
 	}
@@ -16,5 +14,5 @@ function selectTag(state = {}, action) {
 
 
 export default combineReducers({
-	selectTag
+	selectedTags
 })