Affichage des tags sélectionnés

components/TagNavigation.js

@@ -0,0 +1,60 @@
+import React from 'react'
+import {connect} from 'react-redux'
+import * as actions from '../actions'
+import {bindActionCreators} from 'redux'
+import {getSelectedTags, getTagsToSelect} from '../selectors'
+
+
+export default class TagNavigation extends React.Component {
+	render(){
+		let {tagsToSelect, selectedTags, actions: {selectTag}} = this.props
+		return (
+			<section id="tag-navigation">
+				<ul id="selected">
+					{selectedTags.map(([name, value]) => <li>
+						{name + ': ' + value}
+					</li>)
+					}
+				</ul>
+				<ul id="to-select">
+					{tagsToSelect.map(tag =>
+						<Tag selectTag={selectTag} key={tag.name} tag={tag} />
+					)}
+				</ul>
+
+			</section>
+		)
+	}
+}
+
+class Tag extends React.Component {
+	render(){
+		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} onClick={() => selectTag(name, c)}>
+					{c}
+					</li>
+				)}
+			</ul>
+		</li>)
+	}
+}
+
+
+
+
+const mapStateToProps = state => (
+	{
+		selectedTags: state.selectedTags,
+		tagsToSelect: getTagsToSelect(state)
+	}
+)
+
+const actionsToProps = dispatch => ({
+	actions: bindActionCreators(actions, dispatch)
+})
+
+export default connect(mapStateToProps, actionsToProps)(TagNavigation)

containers/App.css

@@ -15,7 +15,11 @@ ul {
 	margin: 0;
 }
 
-#tags {
+li {
+	margin: 0;
+}
+
+#tag-navigation {
 	text-transform: capitalize;
 	font-size: 140%;
 	font-weight: 300;
@@ -25,30 +29,37 @@ ul {
 	display: inline-block;
 }
 
-#tags li {
-	margin-top: 1em;
+#to-select > li {
+	margin-bottom: 1.5em;
 }
 
 .choices {
-
+	margin-top: .6em;
 }
 .choices li {
 	font-size: 75%;
 	font-weight: 400;
 	display: inline-block;
 	text-align: right;
-	margin-left: 1em;
+	margin-right: 1em;
 	background: #16a085;
 	color: white;
-	padding: .05em .5em;
+	padding: .05em .6em;
 	cursor: pointer;
 	border-radius: .1em
 }
 
+#selected {
+	border-bottom: 1px solid #ccc;
+	padding-bottom: .6em;
+	margin-bottom: 2em;
+}
+
 #variables {
 	width: 70%;
 	display: inline-block;
 	padding: 3%;
+	position: absolute;
 }
 
 .variable {

containers/Explorer.js

@@ -1,8 +1,7 @@
 import React from 'react'
-import {selectVariables, selectTagStats} from '../selectors'
 import {connect} from 'react-redux'
-import {bindActionCreators} from 'redux'
-import * as actions from '../actions'
+import {getVariables} from '../selectors'
+import TagNavigation from '../components/TagNavigation'
 
 const Variable = ({data: {variable, tags}}) => <li className="variable">
 	<h3>{variable}</h3>
@@ -17,11 +16,7 @@ class Explorer extends React.Component {
 		return (
 			<div>
 				<h1>Les prélèvements sociaux sur les salaires</h1>
-				<ul id="tags">
-					{tags.map(tag =>
-						<TagSelect selectTag={actions.selectTag} key={tag.name} tag={tag} />
-					)}
-				</ul>
+				<TagNavigation tags={tags} />
 				<ul id="variables">
 					{variables.map((v, i) => <Variable key={i} data={v}/>)}
 				</ul>
@@ -30,33 +25,13 @@ class Explorer extends React.Component {
 	}
 }
 
-class TagSelect extends React.Component {
-	render(){
-		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} onClick={() => selectTag(name, c)}>
-					{c}
-					</li>
-				)}
-			</ul>
-		</li>)
-	}
-}
 
 const mapStateToProps = state => (
 	{
-		variables: selectVariables(state),
-		tags: selectTagStats(state)
+		variables: getVariables(state)
 	}
 )
 
-const actionsToProps = dispatch => ({
-	actions: bindActionCreators(actions, dispatch),
-})
-
-const VariableExplorer = connect(mapStateToProps, actionsToProps)(Explorer)
+const VariableExplorer = connect(mapStateToProps)(Explorer)
 
 export default VariableExplorer

selectors.js

@@ -20,7 +20,7 @@ const unorderedTagStats = finalVariables =>
 			.sort((a, b) => b.number - a.number)
 
 
-export const selectVariables = createSelector(
+export const getVariables = createSelector(
 	[state => state.selectedTags],
 	tags =>
 		finalVariables.filter(variable =>
@@ -29,9 +29,13 @@ export const selectVariables = createSelector(
 		)
 )
 
-export const selectTagStats = createSelector(
-	[selectVariables],
-	variables => {
-		return tagStats(unorderedTagStats(variables))
-	}
+const getTagStats = createSelector(
+	[getVariables],
+	variables => tagStats(unorderedTagStats(variables))
+)
+
+export const getTagsToSelect = createSelector(
+	[getTagStats, state => state.selectedTags],
+	(availableTags, selectedTags) =>
+		availableTags.filter(t => !selectedTags.find(([name]) => t.name === name))
 )