feat: remove unnecessary lodash map values dep (#572)

Author: montezume

examples/form-inputs.example.story.js

@@ -7,7 +7,6 @@ import { action } from '@storybook/addon-actions';
 import omitEmpty from 'omit-empty';
 import withReadme from 'storybook-readme/with-readme';
 import { withKnobs, select } from '@storybook/addon-knobs';
-import mapValues from 'lodash.mapvalues';
 import { FormikBox, Section } from '../.storybook/decorators';
 import {
   Text,
@@ -182,11 +181,17 @@ const validate = (formValues, locale) => {
     errors.slug.missing = true;
   } else {
     const isValidSlug = value => /^[a-zA-Z0-9_-]{2,256}$/.test(value);
-    const translationErrors = mapValues(
-      LocalizedTextInput.omitEmptyTranslations(formValues.slug),
-      // more validation errors could be added in theory
-      slug => (isValidSlug(slug) ? {} : { hasForbiddenChars: true })
-    );
+    const translationErrors = Object.keys(
+      LocalizedTextInput.omitEmptyTranslations(formValues.slug)
+    ).reduce((acc, language) => {
+      const value = isValidSlug(formValues.slug[language])
+        ? {}
+        : { hasForbiddenChars: true };
+      return {
+        ...acc,
+        [language]: value,
+      };
+    }, {});
 
     errors.slug.translations = translationErrors;
   }
@@ -349,24 +354,31 @@ class ProductForm extends React.Component {
               // specific messages in code means we can make use of our existing
               // translation mechanism. We could easily render
               // <FormattedMessage /> instead of rendering the warning string.
-              mapValues(
-                // We only show errors once the field has been touched
-                LocalizedTextInput.isTouched(this.props.formik.touched.slug) &&
-                  this.props.formik.errors.slug
-                  ? // We map on the per-field errors which are present on
-                    // the "translations" field
-                    this.props.formik.errors.slug.translations
-                  : {},
-                error => {
-                  if (error.hasForbiddenChars) {
-                    return <ErrorMessage>This slug is not valid.</ErrorMessage>;
-                  }
-                  // we could map other errors here as well
+              (() => {
+                const allLocales =
+                  LocalizedTextInput.isTouched(
+                    this.props.formik.touched.slug
+                  ) && this.props.formik.errors.slug
+                    ? // We map on the per-field errors which are present on
+                      // the "translations" field
+                      this.props.formik.errors.slug.translations
+                    : {};
+                return Object.entries(allLocales).reduce(
+                  (acc, [key, error]) => {
+                    const value = error.hasForbiddenChars ? (
+                      <ErrorMessage>This slug is not valid.</ErrorMessage>
+                    ) : (
+                      undefined
+                    );
 
-                  // returning undefined results in no error for that field
-                  return undefined;
-                }
-              )
+                    return {
+                      [key]: value,
+                      ...acc,
+                    };
+                  },
+                  {}
+                );
+              })()
             }
           />
           {LocalizedTextInput.isTouched(this.props.formik.touched.slug) &&

package.json

@@ -71,7 +71,6 @@
     "lodash.flowright": "3.5.0",
     "lodash.has": "4.5.2",
     "lodash.isnil": "4.0.0",
-    "lodash.mapvalues": "4.6.0",
     "lodash.omit": "4.5.0",
     "lodash.sortby": "4.7.0",
     "lodash.uniq": "4.5.0",

src/components/avatar/avatar.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import oneLineTrim from 'common-tags/lib/oneLineTrim';
+import { oneLineTrim } from 'common-tags';
 import { css } from '@emotion/core';
 import vars from '../../../materials/custom-properties';
 import filterDataAttributes from '../../utils/filter-data-attributes';

src/components/buttons/secondary-button/secondary-button.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import oneLine from 'common-tags/lib/oneLine';
+import { oneLine } from 'common-tags';
 import { Link } from 'react-router-dom';
 import flowRight from 'lodash.flowright';
 import isNil from 'lodash.isnil';

src/components/fields/localized-multiline-text-field/localized-multiline-text-field.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import requiredIf from 'react-required-if';
-import oneLine from 'common-tags/lib/oneLine';
+import { oneLine } from 'common-tags';
 import Constraints from '../../constraints';
 import Spacings from '../../spacings';
 import FieldLabel from '../../field-label';

src/components/fields/localized-text-field/localized-text-field.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import requiredIf from 'react-required-if';
-import oneLine from 'common-tags/lib/oneLine';
+import { oneLine } from 'common-tags';
 import Constraints from '../../constraints';
 import Spacings from '../../spacings';
 import FieldLabel from '../../field-label';

src/components/inputs/localized-money-input/localized-money-input.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import without from 'lodash.without';
-import oneLine from 'common-tags/lib/oneLine';
+import { oneLine } from 'common-tags';
 import { injectIntl } from 'react-intl';
 import { css } from '@emotion/core';
 import Spacings from '../../spacings';

src/components/inputs/localized-multiline-text-input/localized-multiline-text-input.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import requiredIf from 'react-required-if';
-import mapValues from 'lodash.mapvalues';
-import oneLine from 'common-tags/lib/oneLine';
+import { oneLine } from 'common-tags';
 import { injectIntl } from 'react-intl';
 import Spacings from '../../spacings';
 import Constraints from '../../constraints';
@@ -95,8 +94,14 @@ export class LocalizedMultilineTextInput extends React.Component {
     // This state is used to show/hide the remaining translations
     areLanguagesOpened: this.props.defaultExpandLanguages,
     // This state is to manage the expand/collapse of multiline text inputs
-    expandedTranslations: mapValues(this.props.value, () =>
-      Boolean(this.props.defaultExpandMultilineText)
+    expandedTranslations: Object.keys(this.props.value).reduce(
+      (translations, locale) => {
+        return {
+          [locale]: Boolean(this.props.defaultExpandMultilineText),
+          ...translations,
+        };
+      },
+      {}
     ),
   };
 
@@ -115,9 +120,14 @@ export class LocalizedMultilineTextInput extends React.Component {
 
   expandAllTranslations = () =>
     this.setState(prevState => ({
-      expandedTranslations: mapValues(
-        prevState.expandedTranslations,
-        () => true
+      expandedTranslations: Object.keys(prevState.expandedTranslations).reduce(
+        (translations, locale) => {
+          return {
+            [locale]: true,
+            ...translations,
+          };
+        },
+        {}
       ),
     }));
 
@@ -145,6 +155,7 @@ export class LocalizedMultilineTextInput extends React.Component {
       this.props.selectedLanguage,
       Object.keys(this.props.value)
     );
+
     return (
       <Constraints.Horizontal constraint={this.props.horizontalConstraint}>
         <Spacings.Stack scale="s">

src/components/inputs/localized-text-input/localized-text-input.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import requiredIf from 'react-required-if';
-import oneLine from 'common-tags/lib/oneLine';
+import { oneLine } from 'common-tags';
 import { FormattedMessage } from 'react-intl';
 import { css } from '@emotion/core';
 import ErrorMessage from '../../messages/error-message';