Supprimer tout le jaune côté impact tant qu'il n'y a pas de modifs

components/card/Card.tsx

@@ -12,8 +12,8 @@ interface Props {
   onClose?: () => void;
   onEdit?: () => void;
   content1: JSX.Element;
-  content2?: JSX.Element;
-  content3?: JSX.Element;
+  content2?: JSX.Element | null;
+  content3?: JSX.Element | null;
 }
 
 export class Card extends PureComponent<Props> {

components/carte-etat/bar-chart.jsx

@@ -14,28 +14,33 @@ class BarChart extends PureComponent {
       return { ...acc, [keycols[index]]: value };
     };
 
+    const result = [];
+
     const accResAvant = { color: "#ded500", id: "  " };
     const resavant = deciles
       .map(element => element.avant)
       .reduce(reduceValues, accResAvant);
+    result.push(resavant);
+
+    const showPLF = !deciles.find(element => typeof element.plf !== "number");
+    if (showPLF) {
+      const accResPLF = { color: "#ff6b6b", id: " " };
+      const resplf = deciles
+        .map(element => element.plf)
+        .reduce(reduceValues, accResPLF);
+      result.push(resplf);
+    }
 
+    const showAmendement = !deciles.find(element => typeof element.apres !== "number");
+    if (showAmendement) {
       const accResApres = { color: "#00a3ff", id: "" };
       const resapres = deciles
         .map(element => element.apres)
         .reduce(reduceValues, accResApres);
-
-    const montrerPLF = !deciles.find(element => typeof element.plf !== "number");
-
-    if (!montrerPLF) {
-      return [resapres, resavant];
+      result.push(resapres);
     }
 
-    const accResPLF = { color: "#ff6b6b", id: " " };
-    const resplf = deciles
-      .map(element => element.plf)
-      .reduce(reduceValues, accResPLF);
-
-    return [resapres, resplf, resavant];
+    return result;
   };
 
   render() {
@@ -163,7 +168,7 @@ class BarChart extends PureComponent {
 BarChart.propTypes = {
   deciles: PropTypes.arrayOf(
     PropTypes.shape({
-      apres: PropTypes.number.isRequired,
+      apres: PropTypes.number,
       avant: PropTypes.number.isRequired,
       plf: PropTypes.number,
       poids: PropTypes.number.isRequired,

components/carte-etat/carte-etat-component.module.scss

@@ -1,5 +1,9 @@
 @import 'styles/variables';
 
+.center {
+  text-align: center;
+}
+
 .uniteImpotEtat {
   &.avant {
     font-family: $default-font-family;

components/carte-etat/carte-etat-component.jsx → components/carte-etat/carte-etat-component.tsx

@@ -12,9 +12,13 @@ import CachedIcon from "@material-ui/icons/Cached";
 import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
 import FaceIcon from "@material-ui/icons/Face";
 import classNames from "classnames";
-import PropTypes from "prop-types";
 import { Fragment, PureComponent } from "react";
+// eslint-disable-next-line no-unused-vars
+import { connect, ConnectedProps } from "react-redux";
 
+import { fetchSimPop, simulateCasTypes } from "../../redux/actions";
+// eslint-disable-next-line no-unused-vars
+import { RootState } from "../../redux/reducers";
 import { Card } from "../card";
 import BarChart from "./bar-chart";
 import styles2 from "./carte-etat-component.module.scss";
@@ -58,12 +62,39 @@ const styles = () => ({
   },
 });
 
-function getRoundedTotal(value) {
-  const rounded = Math.round(value / 100000000) / 10;
-  return rounded;
+function inBillions(value: number): number {
+  return Math.round(value / 100000000) / 10;
 }
 
-class CarteEtat extends PureComponent {
+const mapStateToProps = ({ loadingEtat, results }: RootState) => {
+  const isLoadingEtat = loadingEtat === "loading";
+  const isDisabledEtat = loadingEtat === "disabled";
+  const { deciles, frontieresDeciles, total } = results.totalPop;
+  return {
+    deciles,
+    frontieresDeciles,
+    isDisabledEtat,
+    isLoadingEtat,
+    total,
+  };
+};
+
+const mapDispatchToProps = dispatch => ({
+  onClickSimPop: () => {
+    dispatch(fetchSimPop());
+    dispatch(simulateCasTypes());
+  },
+});
+
+const connector = connect(mapStateToProps, mapDispatchToProps);
+
+type PropsFromRedux = ConnectedProps<typeof connector>;
+
+type Props = PropsFromRedux & {
+  classes: any;
+}
+
+class CarteEtat extends PureComponent<Props> {
   render() {
     const {
       classes,
@@ -78,16 +109,16 @@ class CarteEtat extends PureComponent {
 
     const montrerPLF = typeof plf === "number";
 
-    const totalAvant = getRoundedTotal(avant);
-    const totalApres = getRoundedTotal(apres);
-    const totalPLF = montrerPLF ? getRoundedTotal(plf) : null;
+    const totalAvant = inBillions(avant);
+    const totalApres = typeof apres === "number" ? inBillions(apres) : null;
+    const totalPLF = typeof plf === "number" ? inBillions(plf) : null;
     return (
       <Card
         content1={(
           <Fragment>
             {isDisabledEtat && (
               <div>
-                <center className={classes.buttonPosition}>
+                <div className={`${classes.buttonPosition} ${styles2.center}`}>
                   <Button
                     color="secondary"
                     size="medium"
@@ -98,13 +129,13 @@ class CarteEtat extends PureComponent {
                     &nbsp;Estimer ~60&quot;
                     <CachedIcon className={classes.miniIcon} />
                   </Button>
-                </center>
+                </div>
               </div>
             )}
             {!isDisabledEtat && isLoadingEtat && (
-              <center className={classes.buttonPosition}>
+              <div className={`${classes.buttonPosition} ${styles2.center}`}>
                 <CircularProgress color="secondary" />
-              </center>
+              </div>
             )}
             {!isDisabledEtat && !isLoadingEtat && (
               <div>
@@ -118,15 +149,13 @@ class CarteEtat extends PureComponent {
                       [styles2.noPLF]: !montrerPLF,
                     })}>
                       <Typography
-                        inline
                         className={classNames({
                           [styles2.impotEtat]: true,
                           [styles2.avant]: true,
                         })}>
                         {totalAvant}
                       </Typography>
                       <Typography
-                        inline
                         className={classNames({
                           [styles2.uniteImpotEtat]: true,
                           [styles2.avant]: true,
@@ -142,15 +171,13 @@ class CarteEtat extends PureComponent {
                             [styles2.noPLF]: !montrerPLF,
                           })}>
                             <Typography
-                              inline
                               className={classNames({
                                 [styles2.impotEtat]: true,
                                 [styles2.plf]: true,
                               })}>
                               {totalPLF}
                             </Typography>
                             <Typography
-                              inline
                               className={classNames({
                                 [styles2.uniteImpotEtat]: true,
                                 [styles2.plf]: true,
@@ -161,27 +188,29 @@ class CarteEtat extends PureComponent {
                         )
                         : null
                     }
+                    {
+                      totalApres !== null ? (
                         <div className={classNames({
                           [styles2.montantImpots]: true,
                           [styles2.noPLF]: !montrerPLF,
                         })}>
                           <Typography
-                        inline
                             className={classNames({
                               [styles2.impotEtat]: true,
                               [styles2.apres]: true,
                             })}>
                             {totalApres}
                           </Typography>
                           <Typography
-                        inline
                             className={classNames({
                               [styles2.uniteImpotEtat]: true,
                               [styles2.apres]: true,
                             })}>
                                 Md€*
                           </Typography>
                         </div>
+                      ) : null
+                    }
                   </div>
                 </div>
                 <div className={styles2.sourceInsee}>
@@ -221,25 +250,4 @@ class CarteEtat extends PureComponent {
   }
 }
 
-CarteEtat.propTypes = {
-  classes: PropTypes.shape().isRequired,
-  deciles: PropTypes.arrayOf(
-    PropTypes.shape({
-      apres: PropTypes.number.isRequired,
-      avant: PropTypes.number.isRequired,
-      plf: PropTypes.number,
-      poids: PropTypes.number.isRequired,
-    }).isRequired,
-  ).isRequired,
-  frontieresDeciles: PropTypes.arrayOf(PropTypes.number).isRequired,
-  isDisabledEtat: PropTypes.bool.isRequired,
-  isLoadingEtat: PropTypes.bool.isRequired,
-  onClickSimPop: PropTypes.func.isRequired,
-  total: PropTypes.shape({
-    apres: PropTypes.number.isRequired,
-    avant: PropTypes.number.isRequired,
-    plf: PropTypes.number,
-  }).isRequired,
-};
-
-export default withStyles(styles)(CarteEtat);
+export default withStyles(styles)(connector(CarteEtat));

components/carte-etat/index.ts

@@ -0,0 +1,3 @@
+import CarteEtatComponent from "./carte-etat-component";
+
+export default CarteEtatComponent;