Filtrage par tag et affichage des variables

Grâce aux sélecteurs de react-js/reselect

containers/App.css

@@ -3,18 +3,26 @@ body {
 	color: #333;
 }
 
+h1 {
+	text-align: center;
+	font-weight: 200;
+	font-size: 200%;
+}
+
 ul {
 	list-style: none;
-	padding: 0
+	padding: 0;
+	margin: 0;
 }
 
 #tags {
-
 	text-transform: capitalize;
 	font-size: 140%;
 	font-weight: 300;
 	width: 20%;
-	border-right: 1px solid #aaa;
+	border-right: 1px solid #ccc;
+	padding: 1em;
+	display: inline-block;
 }
 
 #tags li {
@@ -36,3 +44,14 @@ ul {
 	cursor: pointer;
 	border-radius: .1em
 }
+
+#variables {
+	width: 70%;
+	display: inline-block;
+	padding: 3%;
+}
+
+.variable {
+	width: 12em;
+	display: inline-block;
+}

containers/Explorer.js

@@ -1,14 +1,28 @@
 import React from 'react'
-import data from '../model'
-console.log(data)
-export default class Explorer extends React.Component {
+import {selectVariables, selectTagStats} from '../selectors'
+import {connect} from 'react-redux'
+
+const Variable = ({data: {variable, tags}}) => <li className="variable">
+	<h3>{variable}</h3>
+	<ul>{Object.keys(tags).map(name => <li>
+			{name + ': ' + tags[name]}
+	</li>)}</ul>
+</li>
+
+class Explorer extends React.Component {
 	render() {
 		return (
-			<ul id="tags">
-				{data.map(tag =>
-					<TagSelect key={tag.name} tag={tag} />
-				)}
-			</ul>
+			<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} />
+					)}
+				</ul>
+				<ul id="variables">
+					{this.props.variables.map((v, i) => <Variable key={i} data={v}/>)}
+				</ul>
+			</div>
 		)
 	}
 }
@@ -26,3 +40,14 @@ class TagSelect extends React.Component {
 		</li>)
 	}
 }
+
+const mapStateToProps = (state) => (
+	{
+		variables: selectVariables(state),
+		tags: selectTagStats(state)
+	}
+)
+
+const VariableExplorer = connect(mapStateToProps)(Explorer)
+
+export default VariableExplorer

entry.js

@@ -8,6 +8,7 @@ import { AppContainer } from 'react-hot-loader'
 import createSagaMiddleware from 'redux-saga'
 import rootSaga from './sagas'
 
+
 const sagaMiddleware = createSagaMiddleware()
 
 const createFinalStore = compose(

load-parameters.js

@@ -1,5 +1,5 @@
 /* Load all yaml files in a dir */
-let requireContext = require.context('./parameters/cotisations', false, /(chomage|agirc|arrco|agff).yaml$/)
+let requireContext = require.context('./parameters/cotisations', false, /(vieillesse|chomage|agirc|arrco|agff).yaml$/)
 export default requireContext.keys()
   .map( requireContext )
   //flatten

model.js

@@ -20,7 +20,7 @@ let
 			return conflicts
 		}, []),
 
-	list =
+	finalVariables =
 		Object.keys(groupedByVariableName)
 			.reduce((list, name) => {
 				let items = groupedByVariableName[name]
@@ -47,25 +47,6 @@ let
 					implémentation : capable de faire un calcul */
 					...newItems.filter(i => JSON.stringify(i).indexOf('values') + 1),
 					...list]
-			}, []),
+			}, [])
 
-	tagFrequencies =
-		list
-			.reduce((stats, variable) => {
-				Object.keys(variable.tags).map(
-					k => {
-						stats[k] = stats[k] || {number: 0, choices: new Set()}
-						stats[k].number = stats[k].number + 1
-						stats[k].choices.add(variable.tags[k])
-					}
-				)
-				return stats
-			}
-		, {}),
-
-	data =
-		Object.keys(tagFrequencies)
-			.reduce((acc, n) => ([...acc, {name: n, ...tagFrequencies[n]}]), [])
-			.sort((a, b) => b.number - a.number)
-
-export default data
+export default finalVariables

package.json

@@ -20,6 +20,7 @@
     "react-redux": "^4.4.5",
     "redux": "^3.5.2",
     "redux-saga": "^0.10.5",
+    "reselect": "^2.5.2",
     "whatwg-fetch": "^1.0.0"
   },
   "devDependencies": {

parameters/cotisations/vieillesse.yaml

@@ -1,7 +1,7 @@
 - variable: vieillesse
   tags:
     branche: retraite
-    type de retraite: base
+    type de retraite: de base
     recouvreur: URSSAF
     destinataire: CNAV
 

reducers.js

@@ -14,6 +14,7 @@ function selectTag(state = {}, action) {
 }
 
 
+
 export default combineReducers({
 	selectTag
 })

selectors.js

@@ -0,0 +1,37 @@
+import { createSelector } from 'reselect'
+import finalVariables from './model'
+
+const unorderedTagStats = finalVariables =>
+	finalVariables
+		.reduce((stats, variable) => {
+			Object.keys(variable.tags).map(
+				k => {
+					stats[k] = stats[k] || {number: 0, choices: new Set()}
+					stats[k].number = stats[k].number + 1
+					stats[k].choices.add(variable.tags[k])
+				}
+			)
+			return stats
+		}, {}),
+
+	tagStats = stats =>
+		Object.keys(stats)
+			.reduce((acc, n) => ([...acc, {name: n, ...stats[n]}]), [])
+			.sort((a, b) => b.number - a.number)
+
+
+export const selectVariables = createSelector(
+	[state => state.selectedTags],
+	tags =>
+		finalVariables.filter(variable =>
+			//This variable must be tagged as described in the selected tags array
+			tags == null ? true : tags.reduce((result, [k, v]) => result && variable.tags && variable.tags[k] === v, true)
+		)
+)
+
+export const selectTagStats = createSelector(
+	[selectVariables],
+	variables => {
+		return tagStats(unorderedTagStats(variables))
+	}
+)