From 31b8dec2a9bac83c84be4b677abf642e13f17281 Mon Sep 17 00:00:00 2001 From: Mael Thomas Date: Mon, 4 Jul 2016 17:28:30 +0200 Subject: [PATCH] Filtrage par tag et affichage des variables MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Grâce aux sélecteurs de react-js/reselect --- containers/App.css | 25 ++++++++++++++-- containers/Explorer.js | 41 +++++++++++++++++++++----- entry.js | 1 + load-parameters.js | 2 +- model.js | 25 ++-------------- package.json | 1 + parameters/cotisations/vieillesse.yaml | 2 +- reducers.js | 1 + selectors.js | 37 +++++++++++++++++++++++ 9 files changed, 100 insertions(+), 35 deletions(-) create mode 100644 selectors.js diff --git a/containers/App.css b/containers/App.css index 735acfe74..1223f8156 100644 --- a/containers/App.css +++ b/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; +} diff --git a/containers/Explorer.js b/containers/Explorer.js index 281df492b..46ed7e057 100644 --- a/containers/Explorer.js +++ b/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}}) =>
  • +

    {variable}

    + +
    • + +class Explorer extends React.Component { render() { return ( - +
    +

    Les prélèvements sociaux sur les salaires

    + + +
    ) } } @@ -26,3 +40,14 @@ class TagSelect extends React.Component { ) } } + +const mapStateToProps = (state) => ( + { + variables: selectVariables(state), + tags: selectTagStats(state) + } +) + +const VariableExplorer = connect(mapStateToProps)(Explorer) + +export default VariableExplorer diff --git a/entry.js b/entry.js index 36cca79a0..5673f69ac 100644 --- a/entry.js +++ b/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( diff --git a/load-parameters.js b/load-parameters.js index 17bd73434..577f95bed 100644 --- a/load-parameters.js +++ b/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 diff --git a/model.js b/model.js index 171d02b33..b98cc897e 100644 --- a/model.js +++ b/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 diff --git a/package.json b/package.json index 96f1bd50c..85c7de1f9 100644 --- a/package.json +++ b/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": { diff --git a/parameters/cotisations/vieillesse.yaml b/parameters/cotisations/vieillesse.yaml index d7e1a94ce..f31febf78 100644 --- a/parameters/cotisations/vieillesse.yaml +++ b/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 diff --git a/reducers.js b/reducers.js index 6ae6b6dda..bdd659258 100644 --- a/reducers.js +++ b/reducers.js @@ -14,6 +14,7 @@ function selectTag(state = {}, action) { } + export default combineReducers({ selectTag }) diff --git a/selectors.js b/selectors.js new file mode 100644 index 000000000..14f050755 --- /dev/null +++ b/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)) + } +)