Feature/refactor components

app/controllers/country_controller.rb

@@ -6,13 +6,13 @@ class CountryController < ApplicationController
   def show
     @title = @country && @country["name"]
     @desc = "Data about forest change, tenure, forest related employment and land use in #{@title}"
-    if params[:widget]
-      widgets_config = JSON.parse(File.read(Rails.root.join('app', 'javascript', 'components', 'widget', 'widget-config.json')))
-      widget_data = widgets_config[params[:widget]]
-      @og_title = "#{widget_data["title"]} in #{@title}"
-      # for dynamic widget image when the feature is ready
-      # @img = "widgets/#{@widget}.png"
-    end
+    # if params[:widget]
+    #   widgets_config = JSON.parse(File.read(Rails.root.join('app', 'javascript', 'components', 'widget', 'widget-config.json')))
+    #   widget_data = widgets_config[params[:widget]]
+    #   @og_title = "#{widget_data["title"]} in #{@title}"
+    #   # for dynamic widget image when the feature is ready
+    #   # @img = "widgets/#{@widget}.png"
+    # end
   end
 
   def embed

app/javascript/components/charts/composed-chart/composed-chart-component.js

@@ -51,6 +51,7 @@ class CustomComposedChart extends PureComponent {
       handleMouseMove,
       handleMouseLeave
     } = this.props;
+
     const { lines, bars, areas } = yKeys;
     const maxYValue = this.findMaxValue(data, config);
 

app/javascript/components/forms/contact/contact-component.jsx

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import Button from 'components/button';
+import Button from 'components/ui/button';
 import { Field, reduxForm } from 'redux-form';
 
 import {

app/javascript/components/items-list/items-list-component.jsx

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 
-import Icon from 'components/icon';
+import Icon from 'components/ui/icon';
 import arrowIcon from 'assets/icons/flechita.svg';
 import './items-list-styles.scss';
 

app/javascript/components/map/components/map-controls/map-controls-component.jsx

@@ -2,8 +2,8 @@ import React, { PureComponent } from 'react';
 import Proptypes from 'prop-types';
 import Sticky from 'react-stickynode';
 
-import Button from 'components/button';
-import Icon from 'components/icon';
+import Button from 'components/ui/button';
+import Icon from 'components/ui/icon';
 
 import plusIcon from 'assets/icons/plus.svg';
 import minusIcon from 'assets/icons/minus.svg';

app/javascript/components/map/components/mini-legend/mini-legend-component.jsx

@@ -2,9 +2,9 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { isTouch } from 'utils/browser';
 
-import Button from 'components/button';
-import Icon from 'components/icon';
-import Tip from 'components/tip';
+import Button from 'components/ui/button';
+import Icon from 'components/ui/icon';
+import Tip from 'components/ui/tip';
 
 import linkIcon from 'assets/icons/link.svg';
 import './mini-legend-styles.scss';

app/javascript/components/map/map-component.js

@@ -1,8 +1,8 @@
 import React, { PureComponent } from 'react';
 import Proptypes from 'prop-types';
 
-import Loader from 'components/loader';
-import NoContent from 'components/no-content';
+import Loader from 'components/ui/loader';
+import NoContent from 'components/ui/no-content';
 import MiniLegend from 'components/map/components/mini-legend';
 
 import './map-styles.scss';

app/javascript/components/map/map.js

@@ -18,20 +18,19 @@ export { default as reducers } from './map-reducers';
 export { default as actions } from './map-actions';
 
 const mapStateToProps = (
-  state,
-  { isParentLoading, layers, parentLayersKey }
+  { map, countryData, widgets },
+  { isParentLoading, layers, widgetKey }
 ) => {
-  const { map, countryData } = state;
-  const parentSettings =
-    state[parentLayersKey] && state[parentLayersKey].settings;
+  const widget = widgets[widgetKey];
+  const widgetSettings = widget && widget.settings;
   const activeLayers =
-    layers || (parentSettings && parentSettings.layers) || map.layers;
+    layers || (widgetSettings && widgetSettings.layers) || map.layers;
   return {
     loading: map.loading || isParentLoading,
     error: map.error,
     bounds: countryData.geostore.bounds,
     layerSpec: map.layerSpec,
-    settings: { ...map.settings, ...parentSettings },
+    settings: { ...map.settings, ...widgetSettings },
     options: map.options,
     layers: getLayers({ layers: activeLayers, layerSpec: map.layerSpec }),
     layersKeys: activeLayers

app/javascript/components/modal-meta/modal-meta-component.jsx → app/javascript/components/modals/meta/meta-component.jsx

@@ -4,11 +4,11 @@ import isEmpty from 'lodash/isEmpty';
 import lowerCase from 'lodash/lowerCase';
 import ReactHtmlParser from 'react-html-parser';
 
-import Modal from 'components/modal';
-import Loader from 'components/loader';
-import NoContent from 'components/no-content';
+import Loader from 'components/ui/loader';
+import NoContent from 'components/ui/no-content';
+import Modal from '../modal';
 
-import './modal-meta-styles.scss';
+import './meta-styles.scss';
 
 class ModalMeta extends PureComponent {
   getContent() {
@@ -78,7 +78,8 @@ class ModalMeta extends PureComponent {
     return (
       <div>
         {ReactHtmlParser(html, {
-          transform: node => { // eslint-disable-line
+          transform: node => {
+            // eslint-disable-line
             if (node.name === 'a') {
               return (
                 <a

app/javascript/components/modal-meta/modal-meta.js → app/javascript/components/modals/meta/meta.js

@@ -1,9 +1,9 @@
 import { connect } from 'react-redux';
 import pick from 'lodash/pick';
 
-import actions from './modal-meta-actions';
-import reducers, { initialState } from './modal-meta-reducers';
-import ModalMetaComponent from './modal-meta-component';
+import actions from './meta-actions';
+import reducers, { initialState } from './meta-reducers';
+import ModalMetaComponent from './meta-component';
 
 const MASTER_META_FIELDS = ['title', 'subtitle', 'citation', 'overview'];
 const MASTER_TABLE_FIELDS = [

app/javascript/components/modal/modal-component.jsx → app/javascript/components/modals/modal/modal-component.jsx

@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import Modal from 'react-modal';
 import PropTypes from 'prop-types';
 
-import Icon from 'components/icon';
+import Icon from 'components/ui/icon';
 
 import closeIcon from 'assets/icons/close.svg';
 

app/javascript/components/share/share-component.jsx → app/javascript/components/modals/share/share-component.jsx

@@ -1,15 +1,15 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import Modal from 'components/modal';
-
-import Button from 'components/button';
-import Icon from 'components/icon/icon';
-import Loader from 'components/loader';
 
 import googleplusIcon from 'assets/icons/googleplus.svg';
 import twitterIcon from 'assets/icons/twitter.svg';
 import facebookIcon from 'assets/icons/facebook.svg';
 
+import Button from 'components/ui/button';
+import Icon from 'components/ui/icon/icon';
+import Loader from 'components/ui/loader';
+import Modal from '../modal';
+
 import './share-styles.scss';
 
 class Share extends PureComponent {
@@ -97,7 +97,9 @@ class Share extends PureComponent {
             <Icon icon={googleplusIcon} className="googleplus-icon" />
           </Button>
           <Button
-            extLink={`https://twitter.com/intent/tweet?text=${socialText}&via=globalforests&url=${shareUrl}`}
+            extLink={`https://twitter.com/intent/tweet?text=${
+              socialText
+            }&via=globalforests&url=${shareUrl}`}
             className="social-button -twitter"
             trackingData={{
               ...data,

app/javascript/components/modal-video/modal-video-component.jsx → app/javascript/components/modals/video/video-component.jsx

@@ -1,9 +1,9 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 
-import Modal from 'components/modal';
+import Modal from '../modal';
 
-import './modal-video-styles.scss';
+import './video-styles.scss';
 
 class ModalVideo extends PureComponent {
   getContent() {

app/javascript/components/modal-video/modal-video.js → app/javascript/components/modals/video/video.js

@@ -1,8 +1,8 @@
 import { connect } from 'react-redux';
 
-import actions from './modal-video-actions';
-import reducers, { initialState } from './modal-video-reducers';
-import ModalVideoComponent from './modal-video-component';
+import actions from './video-actions';
+import reducers, { initialState } from './video-reducers';
+import ModalVideoComponent from './video-component';
 
 const mapStateToProps = ({ modalVideo }) => ({
   open: modalVideo.open,

app/javascript/components/numbered-list/numbered-list-component.jsx

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import Link from 'redux-first-router-link';
 import PropTypes from 'prop-types';
-import { format } from 'd3-format';
+import { format as unitFormat } from 'd3-format';
 
 import Paginate from 'components/paginate';
 
@@ -17,7 +17,7 @@ class NumberedList extends PureComponent {
       linksDisabled,
       linksExt
     } = this.props;
-    const { page, pageSize, unit, unitFormat } = settings;
+    const { page, pageSize, unit, format } = settings;
     const pageData = pageSize
       ? data.slice(page * pageSize, (page + 1) * pageSize)
       : data;
@@ -39,30 +39,38 @@ class NumberedList extends PureComponent {
                     <div className="item-name">{item.label}</div>
                   </div>
                   <div className="item-value">
-                    {unitFormat
-                      ? unitFormat(item.value)
-                      : format('.3s')(item.value)}
+                    {format
+                      ? unitFormat(format)(item.value)
+                      : unitFormat('.3s')(item.value)}
                     {unit}
                   </div>
                 </div>
               );
               return (
                 <li key={`${item.label}-${item.id}`}>
-                  {linksExt ? (
-                    <a
-                      href={`http://${window.location.host}${item.path}`}
-                      target="_blank"
-                      rel="noopener nofollower"
-                    >
-                      {linkContent}
-                    </a>
-                  ) : (
-                    <Link
-                      className={`${linksDisabled ? 'disabled' : ''}`}
-                      to={item.path}
-                    >
+                  {item.path &&
+                    linksExt && (
+                      <a
+                        href={`http://${window.location.host}${item.path}`}
+                        target="_blank"
+                        rel="noopener nofollower"
+                      >
+                        {linkContent}
+                      </a>
+                    )}
+                  {item.path &&
+                    !linksExt && (
+                      <Link
+                        className={`${linksDisabled ? 'disabled' : ''}`}
+                        to={item.path}
+                      >
+                        {linkContent}
+                      </Link>
+                    )}
+                  {!item.path && (
+                    <div className={`${linksDisabled ? 'disabled' : ''}`}>
                       {linkContent}
-                    </Link>
+                    </div>
                   )}
                 </li>
               );

app/javascript/components/paginate/paginate-component.js

@@ -1,8 +1,8 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 
-import Button from 'components/button';
-import Icon from 'components/icon';
+import Button from 'components/ui/button';
+import Icon from 'components/ui/icon';
 import arrowDownIcon from 'assets/icons/arrow-down.svg';
 
 import './paginate-styles.scss';

app/javascript/components/button/button-component.jsx → app/javascript/components/ui/button/button-component.jsx

@@ -4,7 +4,7 @@ import Link from 'redux-first-router-link';
 import { isTouch } from 'utils/browser';
 
 import { Tooltip } from 'react-tippy';
-import Tip from 'components/tip';
+import Tip from 'components/ui/tip';
 
 import './button-styles.scss';
 import './themes/button-light.scss'; // eslint-disable-line

app/javascript/components/card/card-component.jsx → app/javascript/components/ui/card/card-component.jsx

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import Button from 'components/button';
+import Button from 'components/ui/button';
 import Dotdotdot from 'react-dotdotdot';
 
 import './card-styles.scss';

app/javascript/components/carousel/carousel-component.jsx → app/javascript/components/ui/carousel/carousel-component.jsx

@@ -1,8 +1,8 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import SlickSlider from 'react-slick';
-import Button from 'components/button';
-import Icon from 'components/icon';
+import Button from 'components/ui/button';
+import Icon from 'components/ui/icon';
 
 import arrowIcon from 'assets/icons/arrow-down.svg';
 import { SCREEN_M, SCREEN_XL } from 'utils/constants';

app/javascript/components/dropdown/components/item.jsx → app/javascript/components/ui/dropdown/components/item.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import Icon from 'components/icon';
-import Button from 'components/button';
+import Icon from 'components/ui/icon';
+import Button from 'components/ui/button';
 
 import arrowDownIcon from 'assets/icons/arrow-down.svg';
 import infoIcon from 'assets/icons/info.svg';

app/javascript/components/dropdown/components/selector.jsx → app/javascript/components/ui/dropdown/components/selector.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import Icon from 'components/icon';
+import Icon from 'components/ui/icon';
 
 import arrowDownIcon from 'assets/icons/arrow-down.svg';
 import closeIcon from 'assets/icons/close.svg';

app/javascript/components/dropdown/dropdown-component.jsx → app/javascript/components/ui/dropdown/dropdown-component.jsx

@@ -2,10 +2,10 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 
 import Downshift from 'downshift';
-import Button from 'components/button';
-import Icon from 'components/icon';
+import Button from 'components/ui/button';
+import Icon from 'components/ui/icon';
 import { Tooltip } from 'react-tippy';
-import Tip from 'components/tip';
+import Tip from 'components/ui/tip';
 
 import infoIcon from 'assets/icons/info.svg';
 

app/javascript/components/dropdown/dropdown.js → app/javascript/components/ui/dropdown/dropdown.js

@@ -76,6 +76,9 @@ class DropdownContainer extends PureComponent {
     if (changes && changes.selectedItem) {
       this.setState({ isOpen: false, inputValue: '' });
     }
+    if (Object.keys(changes).indexOf('isOpen') > -1) {
+      this.setState({ inputValue: '' });
+    }
     if (
       (changes && changes.highlightedIndex) ||
       changes.highlightedIndex === 0
@@ -109,7 +112,7 @@ class DropdownContainer extends PureComponent {
   handleClearSelection = () => {
     const { onChange } = this.props;
     onChange();
-    this.setState({ isOpen: false, showGroup: '' });
+    this.setState({ isOpen: false, showGroup: '', inputValue: '' });
   };
 
   handleSelectGroup = item => {

app/javascript/components/search/search-component.jsx → app/javascript/components/ui/search/search-component.jsx

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import Icon from 'components/icon';
-import Button from 'components/button';
+import Icon from 'components/ui/icon';
+import Button from 'components/ui/button';
 import debounce from 'lodash/debounce';
 
 import searchIcon from 'assets/icons/search.svg';