Issue #388 - removed objectNested

- removed lib - added babel nullish-coalescing-operator and optional-chaining
webcompat · May 14, 2021 · 5df6951 · 5df6951
1 parent cbe556c
commit 5df6951
Show file tree

Hide file tree

Showing 29 changed files with 101 additions and 290 deletions.
diff --git a/.babelrc b/.babelrc
@@ -4,33 +4,42 @@
       "presets": ["next/babel"],
       "plugins": [
         [
-            "babel-plugin-inline-react-svg",
-            {
-              "svgo": {
-                "plugins": [
-                  {
-                    "name": "removeViewBox", 
-                    "active": false
-                  }
-                ]
-              }
+          "babel-plugin-inline-react-svg",
+          {
+            "svgo": {
+              "plugins": [
+              {
+                "name": "removeViewBox", 
+                "active": false
+              }]
             }
-          ],
-          [
-            "babel-plugin-transform-react-remove-prop-types",
-            {
-              "mode": "wrap"
-            }
-          ]
-        ]
+          }
+        ],
+        [
+          "babel-plugin-transform-react-remove-prop-types",
+          {
+            "mode": "wrap"
+          }
+        ],
+        "@babel/plugin-proposal-nullish-coalescing-operator",
+        "@babel/plugin-proposal-optional-chaining"
+      ]
     },
     "development": {
       "presets": ["next/babel"],
-      "plugins": ["babel-plugin-inline-react-svg"]
+      "plugins": [
+        "babel-plugin-inline-react-svg", 
+        "@babel/plugin-proposal-nullish-coalescing-operator",
+        "@babel/plugin-proposal-optional-chaining"
+      ]
     },
     "test": {
       "presets": ["next/babel"],
-      "plugins": ["babel-plugin-inline-react-svg"]
+      "plugins": [
+        "babel-plugin-inline-react-svg", 
+        "@babel/plugin-proposal-nullish-coalescing-operator",
+        "@babel/plugin-proposal-optional-chaining"
+      ]
     }
   }
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -46,6 +46,8 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "^7.13.0",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.14.2",
+    "@babel/plugin-proposal-optional-chaining": "^7.14.2",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/preset-env": "^7.14.1",
     "@babel/preset-react": "^7.13.13",

diff --git a/src/api/index.js b/src/api/index.js
@@ -4,7 +4,7 @@
 
 import jsonFetch from "simple-json-fetch";
 
-import { isEmptyObject, toQueryString, ObjectNested } from "../libraries";
+import { isEmptyObject, toQueryString } from "../libraries";
 import { CONFIG_API, GET, CALLBACK_API, METHODS, POST } from "../constants/Api";
 
 /**
@@ -27,7 +27,7 @@ const request = (args = {}, callback = CALLBACK_API) => {
     ...CONFIG_API,
     ...config,
   };
-  const method = ObjectNested.get(config, "method");
+  const method = config?.method;
 
   /* methods : get or post */
   if ("string" !== typeof method) {

diff --git a/src/components/Chart/CommonFilters.js b/src/components/Chart/CommonFilters.js
@@ -6,7 +6,6 @@ import React from "react";
 import PropTypes from "prop-types";
 
 import Input from "../Input";
-import { ObjectNested } from "../../libraries";
 
 const CommonFilters = ({ onChange, filters, minFrom, minTo }) => {
   return (
@@ -16,15 +15,15 @@ const CommonFilters = ({ onChange, filters, minFrom, minTo }) => {
         name="from"
         placeholder="From"
         min={minFrom}
-        value={ObjectNested.get(filters, "from", "")}
+        value={filters?.from ?? ""}
         onChange={onChange}
       />
       <Input
         type="date"
         name="to"
         placeholder="To"
         min={minTo}
-        value={ObjectNested.get(filters, "to", "")}
+        value={filters?.to ?? ""}
         onChange={onChange}
       />
     </React.Fragment>

diff --git a/src/components/SimpleStat/Stat.js b/src/components/SimpleStat/Stat.js
@@ -5,14 +5,12 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-import { ObjectNested } from "../../libraries";
-
 import classes from "./SimpleStat.module.css";
 
 const Stat = ({ stat }) => {
-  const label = ObjectNested.get(stat, "label");
-  const count = ObjectNested.get(stat, "count");
-  const style = ObjectNested.get(stat, "style");
+  const label = stat?.label;
+  const count = stat?.count;
+  const style = stat?.style;
 
   return (
     <div {...(style ? { style } : undefined)} className={classes.stat}>

diff --git a/src/containers/ContactReady/index.js b/src/containers/ContactReady/index.js
@@ -8,7 +8,6 @@ import React from "react";
 import LineChart from "../../components/LineChart";
 import { CommonFilters } from "../../components/Chart";
 import MetricsTemplate from "../MetricsTemplate";
-import { ObjectNested } from "../../libraries";
 import {
   mostAndLeast,
   normalize,
@@ -18,7 +17,7 @@ import { TEMP_MIN_DATE } from "../../constants/Charts";
 import Router from "../../routes";
 
 const handleData = (data) => {
-  const localData = ObjectNested.get(data, "timeline", {});
+  const localData = data?.timeline ?? {};
   return {
     globalStats: mostAndLeast(localData),
     chart: normalize(localData, "openIssues"),
@@ -46,9 +45,9 @@ const ContactReady = () => {
         <LineChart
           title={"Open issues in contactready milestone"}
           label={""}
-          labels={ObjectNested.get(data, "chart.dates", [])}
+          labels={data?.chart?.dates ?? []}
           legend={{ display: false }}
-          data={ObjectNested.get(data, "chart.openIssues", [])}
+          data={data?.chart?.openIssues ?? []}
           options={{
             scales: {
               xAxes: [

diff --git a/src/containers/Intervention/Filters.js b/src/containers/Intervention/Filters.js
@@ -7,7 +7,6 @@ import PropTypes from "prop-types";
 
 import Input from "../../components/Input";
 import Select from "../../components/Select";
-import { ObjectNested } from "../../libraries";
 
 const Filters = ({ onChange, filters }) => {
   return (
@@ -16,19 +15,19 @@ const Filters = ({ onChange, filters }) => {
         type="date"
         name="start"
         placeholder="From"
-        value={ObjectNested.get(filters, "start", "")}
+        value={filters?.start ?? ""}
         onChange={onChange}
       />
       <Input
         type="date"
         name="end"
         placeholder="To"
-        value={ObjectNested.get(filters, "end", "")}
+        value={filters?.end ?? ""}
         onChange={onChange}
       />
       <Select
         name="distribution"
-        value={ObjectNested.get(filters, "distribution", "upstream")}
+        value={filters?.distribution}
         onChange={onChange}
         optionList={[
           { label: "Upstream", value: "upstream" },
@@ -40,7 +39,7 @@ const Filters = ({ onChange, filters }) => {
       />
       <Select
         name="type"
-        value={ObjectNested.get(filters, "type", "all")}
+        value={filters?.type}
         onChange={onChange}
         optionList={[
           { label: "All Interventions", value: "all" },
@@ -57,13 +56,17 @@ Filters.propTypes = {
   filters: PropTypes.shape({
     start: PropTypes.string,
     end: PropTypes.string,
+    distribution: PropTypes.string,
+    type: PropTypes.string,
   }),
 };
 
 Filters.defaultProps = {
   filters: {
     start: "",
     end: "",
+    distribution: "upstream",
+    type: "all",
   },
 };
 

diff --git a/src/containers/Intervention/index.js b/src/containers/Intervention/index.js
@@ -7,7 +7,6 @@ import dayjs from "dayjs";
 
 import LineChart from "../../components/LineChart";
 import MetricsTemplate from "../MetricsTemplate";
-import { ObjectNested } from "../../libraries";
 import { interventionParse } from "../../modules/Intervention";
 import Router from "../../routes";
 
@@ -39,9 +38,9 @@ const Intervention = () => {
         <LineChart
           title={"Number of interventions"}
           label={""}
-          labels={ObjectNested.get(data, "dates", [])}
+          labels={data?.dates ?? []}
           legend={{ display: true, position: "bottom" }}
-          data={ObjectNested.get(data, "counters", [])}
+          data={data?.counters ?? []}
           multiple={true}
           options={{
             responsive: true,

diff --git a/src/containers/MetricsTemplate/__tests__/MetricsTemplate-test.js b/src/containers/MetricsTemplate/__tests__/MetricsTemplate-test.js
@@ -5,7 +5,6 @@
 import React from "react";
 import renderer from "react-test-renderer";
 
-import { ObjectNested } from "../../../libraries";
 import { mostAndLeast, normalize } from "../../../modules/Chart";
 import LineChart from "../../../components/LineChart";
 import Component from "..";
@@ -54,9 +53,9 @@ it("renders Component default correctly", () => {
           title={"Issues Reported per Week"}
           fill={true}
           label={""}
-          labels={ObjectNested.get(data, "chart.dates", [])}
+          labels={data?.chart?.dates ?? []}
           legend={{ display: false }}
-          data={ObjectNested.get(data, "chart.newIssues", [])}
+          data={data?.chart?.newIssues ?? []}
           options={{
             scales: {
               xAxes: [
@@ -122,9 +121,9 @@ it("renders Component with custom props", () => {
             title={"Issues Reported per Week"}
             fill={true}
             label={""}
-            labels={ObjectNested.get(data, "chart.dates", [])}
+            labels={data?.chart?.dates ?? []}
             legend={{ display: false }}
-            data={ObjectNested.get(data, "chart.newIssues", [])}
+            data={data?.chart?.newIssues ?? []}
             options={{
               scales: {
                 xAxes: [

diff --git a/src/containers/MetricsTemplate/index.js b/src/containers/MetricsTemplate/index.js
@@ -8,7 +8,6 @@ import PropTypes from "prop-types";
 
 import request from "../../api";
 import {
-  ObjectNested,
   getFiltersFromUrl,
   toQueryObject,
   pushFiltersToUrl,
@@ -96,8 +95,8 @@ class MetricsTemplate extends React.Component {
   getFormatedDate(filters = {}) {
     const { nameFieldDateFrom, nameFieldDateTo } = this.props;
     const filterList = [];
-    const from = ObjectNested.get(filters, nameFieldDateFrom);
-    const to = ObjectNested.get(filters, nameFieldDateTo);
+    const from = filters?.[nameFieldDateFrom];
+    const to = filters?.[nameFieldDateTo];
     if (from) {
       filterList.push(dayjs(filters.from).format("DD MMMM YYYY"));
     }
@@ -154,9 +153,9 @@ class MetricsTemplate extends React.Component {
     this.setState({
       isFetching: false,
       error: {
-        message: ObjectNested.get(payload, "message", "Error"),
-        errors: ObjectNested.get(payload, "errors", []),
-        code: ObjectNested.get(payload, "code"),
+        message: payload?.message ?? "Error",
+        errors: payload?.errors ?? [],
+        code: payload?.code,
       },
     });
   }
@@ -190,7 +189,7 @@ class MetricsTemplate extends React.Component {
 
   render() {
     const { filters, data } = this.state;
-    const globalStats = ObjectNested.get(data, "globalStats", []);
+    const globalStats = data?.globalStats ?? [];
     return (
       <section>
         {this.props.shouldRenderJumbotron && (

diff --git a/src/containers/NeedsContact/index.js b/src/containers/NeedsContact/index.js
@@ -7,7 +7,6 @@ import React from "react";
 import LineChart from "../../components/LineChart";
 import { CommonFilters } from "../../components/Chart";
 import MetricsTemplate from "../MetricsTemplate";
-import { ObjectNested } from "../../libraries";
 import {
   mostAndLeast,
   normalize,
@@ -17,7 +16,7 @@ import { TEMP_MIN_DATE } from "../../constants/Charts";
 import Router from "../../routes";
 
 const handleData = (data) => {
-  const localData = ObjectNested.get(data, "timeline", {});
+  const localData = data?.timeline ?? {};
   return {
     globalStats: mostAndLeast(localData),
     chart: normalize(localData, "openIssues"),
@@ -45,9 +44,9 @@ const NeedsContact = () => {
         <LineChart
           title={"Open issues in needscontact milestone"}
           label={""}
-          labels={ObjectNested.get(data, "chart.dates", [])}
+          labels={data?.chart?.dates ?? []}
           legend={{ display: false }}
-          data={ObjectNested.get(data, "chart.openIssues", [])}
+          data={data?.chart?.openIssues ?? []}
           options={{
             scales: {
               xAxes: [

diff --git a/src/containers/NeedsDiagnosis/index.js b/src/containers/NeedsDiagnosis/index.js
@@ -6,12 +6,11 @@ import React from "react";
 
 import LineChart from "../../components/LineChart";
 import MetricsTemplate from "../MetricsTemplate";
-import { ObjectNested } from "../../libraries";
 import { mostAndLeast, normalize } from "../../modules/Chart";
 import Router from "../../routes";
 
 const handleData = (data) => {
-  const localData = ObjectNested.get(data, "timeline", {});
+  const localData = data?.timeline ?? {};
   return {
     globalStats: mostAndLeast(localData),
     chart: normalize(localData, "openIssues"),
@@ -29,9 +28,9 @@ const NeedsDiagnosis = () => {
         <LineChart
           title={"Open issues in needsdiagnosis milestone"}
           label={""}
-          labels={ObjectNested.get(data, "chart.dates", [])}
+          labels={data?.chart?.dates ?? []}
           legend={{ display: false }}
-          data={ObjectNested.get(data, "chart.openIssues", [])}
+          data={data?.chart?.openIssues ?? []}
           options={{
             scales: {
               xAxes: [