[DSR] Utiliser la réponse de la requête simulation

README.md

@@ -29,7 +29,9 @@ LexImpact has two components:
 - [leximpact-server](https://github.com/betagouv/leximpact-server/): a Python application using [OpenFisca-France](https://github.com/openfisca/openfisca-france) and providing a Web API responding to requests on the impact of a change of the tax law,
 - Here, [leximpact-client](https://github.com/betagouv/leximpact-client/): a web interface interacting with leximpact-server API and providing to the users a web site to set law tax changes and see the results calculated by the API.
 
-## Organisation de l'état redux
+## Organisation de l'état de l'application
+
+![Etat de l'application](./redux-state.png)
 
 L'état redux est en cours de re-factorisation. Voici la manière dont il se présentera à terme:
 
@@ -60,7 +62,7 @@ L'état redux est en cours de re-factorisation. Voici la manière dont il se pr
   - baseToPlf # Résultats comparant le PLF avec le code existant
     - ir
     - dotations
-  - plfToAmendement  # Résultats comparant le PLF avec les valeurs proposées par l'utilisateur
+  - baseToAmendement  # Résultats comparant les valeurs proposées par l'utilisateur avec le code existant
     - ir
     - dotations
   - interfaces # Descriptions des états (identiques dans amendement, base et plf)
@@ -80,9 +82,9 @@ L'état redux est en cours de re-factorisation. Voici la manière dont il se pr
 Les données asynchrones (comme les résultats de la simulation) sont décrites par cette interface:
 
 ```typescript
-export interface AsyncItems<T> {
+export interface AsyncState<T> {
   isFetching: boolean;
-  items: T;
+  state: T | null;
 }
 ```
 

components/articles-inputs/parameter/Parameter.module.scss

@@ -1,17 +1,16 @@
 @import 'styles/variables.scss';
 
-$input-margin: 0.3rem;
-
 .baseValue {
   font-weight: bold;
-  margin-left: $input-margin;
   text-decoration-color: $amendement-bg-color;
+}
+
+.crossedOut {
   text-decoration-line: line-through;
 }
 
 .plfValue {
   font-weight: bold;
-  margin-left: $input-margin;
   color: $plf-color;
 }
 
@@ -29,8 +28,6 @@ $input-margin: 0.3rem;
 
 .amendementValue {
   font-weight: bold;
-  margin-left: $input-margin !important;
-  margin-right: $input-margin !important;
 }
 
 .amendementValueModified {

components/articles-inputs/parameter/Parameter.tsx

@@ -0,0 +1,108 @@
+import classNames from "classnames";
+import { PureComponent } from "react";
+
+import { PlfTooltip, ReformTooltip } from "../../tooltips";
+import { formatNumber } from "../../utils";
+import { NumberInput } from "./number-input";
+import styles from "./Parameter.module.scss";
+
+function withTooltip(
+  Tooltip: any, title: string|JSX.Element|undefined|null, element: JSX.Element,
+): JSX.Element {
+  if (title == null || title === undefined) {
+    return element;
+  }
+
+  return (
+    <Tooltip
+      placement="bottom-start"
+      title={title}>
+      {element}
+    </Tooltip>
+  );
+}
+
+/* The |null are added because we have JS files using this component. */
+interface Props {
+  amendementInputSize?: "small"|"xl"|null;
+  amendementTitle?: string|JSX.Element|null;
+  amendementValue?: number;
+  baseValue?: number|null;
+  decimals?: number;
+  editable?: boolean,
+  onAmendementChange?: (value: number) => void,
+  plfTitle?: string|JSX.Element|null;
+  plfValue?: number|null;
+}
+
+export class Parameter extends PureComponent<Props> {
+  render() {
+    const {
+      amendementInputSize, amendementTitle, amendementValue, baseValue,
+      decimals, editable, onAmendementChange, plfTitle, plfValue,
+    } = this.props;
+    const equal = baseValue === amendementValue;
+
+    function isDefined(value: number|null|undefined): value is number {
+      // The "=== null" checks is still needed because there are .jsx files using defaultProps.
+      return value !== null && value !== undefined;
+    }
+
+    return (
+      <span className={styles.noOverflow}>
+        {
+          !isDefined(baseValue) && !isDefined(plfValue) && !isDefined(amendementValue)
+            && "-"
+        }
+        {
+          isDefined(plfValue) && withTooltip(
+            PlfTooltip,
+            plfTitle,
+            <span className={styles.plfValue}>{formatNumber(plfValue, { decimals })}</span>,
+          )
+        }
+        {
+          isDefined(plfValue) && (isDefined(baseValue) || isDefined(amendementValue))
+            && <span>&nbsp;&nbsp;</span>
+        }
+        {
+          isDefined(baseValue) && !equal
+          && (
+            <span className={classNames({
+              [styles.baseValue]: true,
+              [styles.crossedOut]: amendementValue !== undefined,
+            })}>
+              {formatNumber(baseValue, { decimals })}
+            </span>
+          )
+        }
+        {
+          isDefined(baseValue) && isDefined(amendementValue) && !equal && <span>&nbsp;&nbsp;</span>
+        }
+        {
+          isDefined(amendementValue) && withTooltip(ReformTooltip, amendementTitle, editable
+            ? (
+              <NumberInput
+                className={classNames({
+                  [styles.amendementInput]: true,
+                  [styles.amendementValue]: true,
+                  [styles.amendementValueModified]: !equal,
+                  [styles.smallInput]: amendementInputSize === "small",
+                  [styles.xlInput]: amendementInputSize === "xl",
+                })}
+                value={amendementValue}
+                onChange={onAmendementChange || (() => {})} />
+            )
+            : (
+              <span className={classNames({
+                [styles.amendementValue]: true,
+                [styles.amendementValueModified]: !equal,
+              })}>
+                {formatNumber(amendementValue, { decimals })}
+              </span>
+            ))
+        }
+      </span>
+    );
+  }
+}

components/articles-inputs/parameter/ResultValues.tsx

@@ -0,0 +1,29 @@
+// eslint-disable-next-line no-unused-vars
+import { connect, ConnectedProps } from "react-redux";
+
+// eslint-disable-next-line no-unused-vars
+import { RootState } from "../../../redux/reducers";
+import { getResultNumberValues } from "../../../redux/utils";
+import { Parameter } from "./Parameter";
+
+const mapStateToProps = ({ results }: RootState, { path }) => getResultNumberValues(results, path);
+
+const connector = connect(mapStateToProps);
+
+type PropsFromRedux = ConnectedProps<typeof connector>
+
+type Props = PropsFromRedux & {
+  decimals?: number;
+  path: string;
+  plfTitle?: string|JSX.Element;
+  amendementInputSize?: "small"|"xl";
+  amendementTitle?: string|JSX.Element;
+}
+
+function ResultValues(props: Props) {
+  return <Parameter {...props} />;
+}
+
+const ConnectedResultValues = connector(ResultValues);
+
+export { ConnectedResultValues as ResultValues };

components/articles-inputs/parameter/StateParameter.tsx

@@ -33,7 +33,7 @@ type Props = PropsFromRedux & {
   editable?: boolean;
   path: string;
   plfTitle?: string|JSX.Element;
-  amendementInputSize?: "small"|"large"|"xl";
+  amendementInputSize?: "small"|"xl";
   amendementTitle?: string|JSX.Element;
 }
 

components/articles-inputs/parameter/index.js → components/articles-inputs/parameter/index.ts

@@ -1,2 +1,3 @@
 export { Parameter } from "./Parameter";
+export { ResultValues } from "./ResultValues";
 export { StateParameter } from "./StateParameter";

components/articles/article-alinea-3/article-alinea-3-component.jsx

@@ -41,16 +41,23 @@ class ArticleAlinea3 extends PureComponent {
         ) : null}
         3. Le montant de l'impôt résultant de l'application des
         dispositions précédentes est réduit de
+        {" "}
         {baseOutputInput("plafond_qf.abat_dom.taux_GuadMarReu")}
+        {" "}
         %, dans la limite de
+        {" "}
         {baseOutputInput("plafond_qf.abat_dom.plaf_GuadMarReu")}
+        {" "}
         € pour les
         contribuables domiciliés dans les départements de la Guadeloupe, de
         la Martinique et de la Réunion ; cette réduction est égale à
         {" "}
         {baseOutputInput("plafond_qf.abat_dom.taux_GuyMay")}
+        {" "}
         %, dans la limite de
+        {" "}
         {baseOutputInput("plafond_qf.abat_dom.plaf_GuyMay")}
+        {" "}
         €, pour les contribuables domiciliés dans les départements de la
         Guyane et de Mayotte ;
       </Fragment>

components/articles/article-alinea-4a/article-alinea-4a-component.jsx

@@ -14,16 +14,20 @@ class Alinea4a extends PureComponent {
         de la différence entre
         {" "}
         {baseOutputInput("decote.seuil_celib")}
+        {" "}
         € et
         {" "}
         {baseOutputInput("decote.taux")}
+        {" "}
         % de son montant pour les contribuables célibataires, divorcés ou
         veufs et de la différence entre
+        {" "}
         {baseOutputInput("decote.seuil_couple")}
         {" "}
         € et
         {" "}
         {formulaOutputInput("decote.taux")}
+        {" "}
         % de son montant pour les contribuables soumis à imposition
         commune.
       </Fragment>