Use redux state in CommuneType

components/articles-inputs/parameter/ResultValues.tsx

@@ -4,9 +4,9 @@ import { connect, ConnectedProps } from "react-redux";
 // eslint-disable-next-line no-unused-vars
 import { RootState } from "../../../redux/reducers";
 import { Parameter } from "./Parameter";
-import { getResultValues } from "../../../redux/utils";
+import { getResultNumberValues } from "../../../redux/utils";
 
-const mapStateToProps = ({ results }: RootState, { path }) => getResultValues(results, path);
+const mapStateToProps = ({ results }: RootState, { path }) => getResultNumberValues(results, path);
 
 const connector = connect(mapStateToProps);
 

components/dotations/results/Results.tsx

@@ -35,13 +35,12 @@ class Results extends PureComponent<Props> {
           </Grid>
         </Grid>
         <Grid container spacing={3}>
-          {communesTypes.map(communeType => (
-            <Grid item lg={4} md={6} sm={6} xl={3} xs={12}>
+          {communesTypes.map((communeType, index) => (
+            <Grid item lg={4} md={6} sm={6} xl={3} xs={12} key={communeType.code}>
               <CommuneType
-                eligible
+                index={index}
                 code={communeType.code}
                 departement={communeType.departement}
-                dotationParHab={128}
                 habitants={communeType.habitants}
                 name={communeType.name}
                 potentielFinancier={communeType.potentielFinancier}

components/dotations/results/commune-summary/CommuneSummary.tsx

@@ -67,18 +67,18 @@ class CommuneSummary extends PureComponent<Props> {
             </div>
           </div>
         )}
-        content2={(
-          <ExpansionPanel className={styles.expansionPanel}>
-            <ExpansionPanelSummary
-              className={styles.expansionPanelTitle}
-              expandIcon={<ExpandMoreIcon />}>
-                Détails de la répartition par fraction
-            </ExpansionPanelSummary>
-            <ExpansionPanelDetails>
-              Détails
-            </ExpansionPanelDetails>
-          </ExpansionPanel>
-        )}
+        // content2={(
+        //   <ExpansionPanel className={styles.expansionPanel}>
+        //     <ExpansionPanelSummary
+        //       className={styles.expansionPanelTitle}
+        //       expandIcon={<ExpandMoreIcon />}>
+        //         Détails de la répartition par fraction
+        //     </ExpansionPanelSummary>
+        //     <ExpansionPanelDetails>
+        //       Détails
+        //     </ExpansionPanelDetails>
+        //   </ExpansionPanel>
+        // )}
         title="Nombre de communes éligibles"
       />
     );

components/dotations/results/commune-type/CommuneType.tsx

@@ -8,16 +8,28 @@ import { DotationParHab } from "./dotation-par-hab";
 import { Eligibilite } from "./eligibilite";
 import { HabitantLabel } from "./habitant-label";
 import { PotentielFinancier } from "./potentiel-financier";
+import { RootState } from "../../../../redux/reducers";
+import { connect, ConnectedProps } from "react-redux";
+import CircularProgress from "@material-ui/core/CircularProgress";
 
-interface CommuneResult {
-  eligible: boolean;
-  dotationParHab: number;
+const mapStateToProps = ({ results }: RootState) => ({
+  isFetching: results.amendement.dotations.isFetching ||
+    results.base.dotations.isFetching ||
+    results.plf.dotations.isFetching,
+});
+
+const connector = connect(mapStateToProps);
+
+type PropsFromRedux = ConnectedProps<typeof connector>
+
+type Props = PropsFromRedux & Commune & {
+  index: number;
 }
 
-export class CommuneType extends PureComponent<Commune & CommuneResult> {
+class CommuneType extends PureComponent<Props> {
   render() {
     const {
-      departement, dotationParHab, eligible, habitants, name, potentielFinancier,
+      departement, index, habitants, name, potentielFinancier, isFetching
     } = this.props;
     return (
       <Card
@@ -31,15 +43,17 @@ export class CommuneType extends PureComponent<Commune & CommuneResult> {
             />
           </Fragment>
         )}
-        content2={(
+        content2={
+          isFetching ? <CircularProgress /> :
+          (
           <Fragment>
             <div className={styles.resultCaption}>
               Eligibilité et montant de la DSR
             </div>
             <div className={styles.eligibilite}>
-              <Eligibilite eligible={eligible} />
+              <Eligibilite index={index} />
             </div>
-            <DotationParHab dotationParHab={dotationParHab} />
+            <DotationParHab index={index} />
           </Fragment>
         )}
         subTitle={departement}
@@ -48,3 +62,7 @@ export class CommuneType extends PureComponent<Commune & CommuneResult> {
     );
   }
 }
+
+const ConnectedCommuneType = connector(CommuneType);
+
+export { ConnectedCommuneType as CommuneType };

components/dotations/results/commune-type/dotation-par-hab/DotationParHab.tsx

 import { PureComponent } from "react";
 
 import styles from "./DotationParHab.module.scss";
+import { ResultValues } from "../../../../articles-inputs/parameter";
 
 interface Props {
-  dotationParHab: number;
+  index: number;
 }
 
 export class DotationParHab extends PureComponent<Props> {
   render() {
-    const { dotationParHab } = this.props;
+    const { index } = this.props;
     return (
       <div className={styles.text}>
-        {dotationParHab}
+        <ResultValues 
+          path={`dotations.state.communes.dsr.communes.${index}.dotationParHab`}
+        />
         <span> €/hab</span>
       </div>
     );

components/dotations/results/commune-type/eligibilite/Eligibilite.tsx

@@ -2,25 +2,49 @@ import classNames from "classnames";
 import { PureComponent } from "react";
 
 import styles from "./Eligibilite.module.scss";
+import { getResultBoolValues } from "../../../../../redux/utils";
+import { RootState } from "../../../../../redux/reducers";
+import { connect, ConnectedProps } from "react-redux";
+import { Parameter } from "../../../../articles-inputs";
 
-interface Props {
-  eligible: boolean;
+
+const mapStateToProps = ({ results }: RootState, { index }: { index: number }) => getResultBoolValues(results, `dotations.state.communes.dsr.communes.${index}.eligible`);
+
+const connector = connect(mapStateToProps);
+
+type PropsFromRedux = ConnectedProps<typeof connector>
+
+type Props = PropsFromRedux & {
+  index: number;
 }
 
-export class Eligibilite extends PureComponent<Props> {
+class Eligibilite extends PureComponent<Props> {
   render() {
-    const { eligible } = this.props;
+    const { amendementValue, plfValue, baseValue } = this.props;
     return (
       <div className={styles.container}>
         <div>
-          {eligible ? "éligible" : "non éligible"}
+          {/* Hack: Parameter only accepts numbers */}
+          <Parameter
+            amendementValue={(amendementValue ? "éligible" : "non éligible") as any}
+            baseValue={(baseValue ? "éligible" : "non éligible") as any}
+            plfValue={(plfValue ? "éligible" : "non éligible") as any} />
         </div>
+        {
+          typeof amendementValue !== 'undefined' && (
             <div className={classNames({
               [styles.spot]: true,
-          [styles.eligible]: eligible,
+              [styles.eligible]: amendementValue,
             })} />
+          )
+        }
       </div>
 
     );
   }
 }
+
+const ConnectedEligibilite = connector(Eligibilite);
+
+export { ConnectedEligibilite as Eligibilite };
+

redux/utils/get-result-values.ts

 import { RootState } from "../reducers";
 import { getIn } from "immutable";
 
-export function getResultValues(results: RootState["results"], path: string): {
+export function getResultNumberValues(results: RootState["results"], path: string): {
   amendementValue: number | undefined,
   baseValue: number | undefined,
   plfValue: number | undefined,
@@ -13,3 +13,16 @@ export function getResultValues(results: RootState["results"], path: string): {
     plfValue: getIn(results.plf, propertyNames, undefined),
   };
 }
+
+export function getResultBoolValues(results: RootState["results"], path: string): {
+  amendementValue: boolean | undefined,
+  baseValue: boolean | undefined,
+  plfValue: boolean | undefined,
+} {
+  const propertyNames = path.split(".");
+  return {
+    amendementValue: getIn(results.amendement, propertyNames, undefined),
+    baseValue: getIn(results.base, propertyNames, undefined),
+    plfValue: getIn(results.plf, propertyNames, undefined),
+  };
+}
\ No newline at end of file