Merge branch 'master' into mx

2018-11-05 12:07:45 -02:00 · 2018-11-05 12:07:45 -02:00 · 65a03c55e2
parent 98e03e8dab 6aee805673
commit 65a03c55e2
5 changed files with 50 additions and 29 deletions
--- a/src/components/EnhancedSearch.js
+++ b/src/components/EnhancedSearch.js
@ -42,7 +42,7 @@ const styles = theme => ({
 class EnhancedSearch extends Component {

 	render() {
-		const {query, onUpdateQuery, onColumnChange} = this.props;
+		const {query, onUpdateQuery, onColumnChange, textComponent} = this.props;
 		const { classes } = this.props;

 		return (
@ -62,6 +62,7 @@ class EnhancedSearch extends Component {
 		            startAdornment: <InputAdornment position="start"><Search /></InputAdornment>,
 		          }}
 		        />
+            {textComponent}
 						<br />
            {this.props.showSearchColumns && this.props.columns.map(column => (
              <FormControlLabel
--- a/src/components/EnhancedTable.js
+++ b/src/components/EnhancedTable.js
@ -57,6 +57,7 @@ const defaultProps = {
  onEdit: () => {},
  onDelete: () => {},
  onMultipleDelete: () => {},
+  description: ''
 };

 /**
@ -87,6 +88,8 @@ class EnhancedTable extends Component {
    const orderBy = property;
    let order = 'desc';

+    if(orderBy === 'map') return;
+
    if (this.state.orderBy === property && this.state.order === 'desc') {
      order = 'asc';
    }
@ -94,15 +97,15 @@ class EnhancedTable extends Component {
    const data =
      order === 'desc'
        ? this.state.data.sort((a, b) => {
-          let a_value = a[orderBy];
-          let b_value = b[orderBy];
+          let a_value = (a[orderBy] !== undefined) ? a[orderBy]: '';
+          let b_value = (b[orderBy] !== undefined) ? b[orderBy]: '';
          a_value = a_value.hasOwnProperty('searchText') ?  a_value.searchText.toLowerCase() : a_value.toLowerCase();
          b_value = b_value.hasOwnProperty('searchText') ?  b_value.searchText.toLowerCase() : b_value.toLowerCase();
          return (b_value < a_value) ? -1 : 1;
        })
        : this.state.data.sort((a, b) => {
-          let a_value = a[orderBy];
-          let b_value = b[orderBy];
+          let a_value = (a[orderBy] !== undefined) ? a[orderBy]: '';
+          let b_value = (b[orderBy] !== undefined) ? b[orderBy]: '';
          a_value = a_value.hasOwnProperty('searchText') ?  a_value.searchText.toLowerCase() : a_value.toLowerCase();
          b_value = b_value.hasOwnProperty('searchText') ?  b_value.searchText.toLowerCase() : b_value.toLowerCase();
          if(a_value.trim() === '') a_value = 'zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz';
@ -250,6 +253,7 @@ class EnhancedTable extends Component {
    return (
      <div style={styles.root}>
        <EnhancedSearch
+          textComponent={this.props.description}
          query={searchQuery}
          columns={searchColumns}
          showSearchColumns={showSearchColumns}
--- a/src/components/pages/AmbassadorsPage.js
+++ b/src/components/pages/AmbassadorsPage.js
@ -3,6 +3,7 @@ import { FormattedMessage, FormattedHTMLMessage } from 'react-intl';
 import Modal from 'react-modal';
 import { Link } from 'react-router-dom';
 import Button from '@material-ui/core/Button';
+import sortBy from 'sort-by';

 // Custom components
 import AppHeader from '../AppHeader';
@ -143,7 +144,8 @@ class AmbassadorsPage extends Component {
        searchText: ambassador.telegram,
        value: (
          <a
-            href={`https://t.me/${(ambassador.telegram.trim().charAt(0) === '@') ? ambassador.telegram.trim().slice(1): ambassador.telegram.trim()}`}
+            href={`https://t.me/${(ambassador.telegram.trim().charAt(0) === '@') ?
+              ambassador.telegram.trim().slice(1): ambassador.telegram.trim()}`}
            target="_blank"
            rel="noopener noreferrer"
          >{ambassador.telegram}</a>
@ -244,7 +246,7 @@ class AmbassadorsPage extends Component {
  addLocationSearchText(cities){
    let searchText = '';
    cities.forEach((location) => {
-      searchText += `${(location.name).replace(/(^|\s)\S/g, l => l.toUpperCase())} - ${countries.getName(location.country)} `;
+      searchText += `${countries.getName(location.country)} - ${(location.name).replace(/(^|\s)\S/g, l => l.toUpperCase())}`;
    });

    return searchText;
@ -315,7 +317,7 @@ class AmbassadorsPage extends Component {
  }

  render() {
-    const { data } = this.state.ambassadors;
+    let { data } = this.state.ambassadors;
    const { ambassadorsSearch, merchantMarkers } = this.state;

    const ambassadorsMarkers = [];
@ -346,6 +348,18 @@ class AmbassadorsPage extends Component {
      });
    });

+    data = data.sort(sortBy('location.searchText'));
+
+    const textComponent = (
+      <span>
+        <FormattedHTMLMessage id="ambassadors.description1" />
+        <Link to="/merchants">
+        <FormattedMessage id="ambassadors.merchants_link_description" />
+        </Link>
+        <FormattedHTMLMessage id="ambassadors.description2" />
+      </span>
+    );
+
    return (
      <div>
        <AppHeader />
@ -356,21 +370,12 @@ class AmbassadorsPage extends Component {
      <div className="row">
      <div className="col-md-10 mx-md-auto">

-
        <h2 className="ambassadorsTitle" style={centerStyle}><FormattedMessage id="ambassadors.title" /></h2>
        { /* Conditional Rendering */}
            {(this.state.loading) ? (
              <img src={LoadingGif} alt="Loading" style={loadingStyle} />
        ): (
          <div>
-            <p style={{ textAlign: 'left', marginRight: 20 }}>
-              <FormattedHTMLMessage id="ambassadors.description1" />
-              <Link to="/merchants">
-                <FormattedMessage id="ambassadors.merchants_link_description" />
-              </Link>
-              <FormattedHTMLMessage id="ambassadors.description2" />
-            </p>
-
            <Modal
              isOpen={this.state.mapsModalIsOpen}
              onRequestClose={() => this.closeMapsModal()}
@ -392,9 +397,10 @@ class AmbassadorsPage extends Component {
              <div>
                <br />
                <EnhancedTable
+                  description={textComponent}
                  columnData={columnData}
                  data={data}
-                  orderBy="nickname"
+                  orderBy="Location"
                  showSearchColumns={false}
                  rowsPerPage={10}
                  isAdmin={false}
--- a/src/components/pages/MerchantsPage.js
+++ b/src/components/pages/MerchantsPage.js
@ -3,6 +3,7 @@ import { FormattedMessage, FormattedHTMLMessage } from 'react-intl';
 import Modal from 'react-modal';
 import { Link } from 'react-router-dom';
 import Button from '@material-ui/core/Button';
+import sortBy from 'sort-by';

 // Custom components
 import AppHeader from '../AppHeader';
@ -53,9 +54,9 @@ const mapsStyles = {

 const columnData = [
  { id: 'name', numeric: false, disablePadding: true, label: 'Name' },
+  { id: 'phone', numeric: false, disablePadding: true, label: 'Contact' },
  { id: 'address', numeric: false, disablePadding: true, label: 'Address' },
-  { id: 'city', numeric: false, disablePadding: false, label: 'City' },
-  { id: 'country', numeric: false, disablePadding: false, label: 'Country' },
+  { id: 'location', numeric: false, disablePadding: false, label: 'Location' },
  { id: 'map', numeric: false, disablePadding: false, label: 'Maps', disableSearch: true}
 ];

@ -203,6 +204,10 @@ class MerchantsPage extends Component {
        <div><b>Address</b>: {merchant.address}</div>
        {(merchant.phone) && (<div><b>Phone</b>: {merchant.phone}</div>)}
        </div>;
+      merchant.location = {
+        searchText: `${merchant.country} - ${merchant.city}`,
+        value: (merchant.city) ? `${merchant.city} - ${merchant.country}`: merchant.country
+      }
      merchant.map = <Button
        className="App-button"
        variant="contained"
@ -255,7 +260,7 @@ class MerchantsPage extends Component {
  }

  render() {
-    const { data: merchantsData } = this.state.merchants;
+    let { data: merchantsData } = this.state.merchants;
    const { ambassadorsMarkers, merchantsSearch } = this.state;

    const merchantMarkers = merchantsSearch.map(merchant => {
@ -273,6 +278,17 @@ class MerchantsPage extends Component {
      return marker;
    });

+    merchantsData = merchantsData.sort(sortBy('location.searchText'));
+
+    const textComponent = (
+      <span>
+        <FormattedHTMLMessage id="merchants.description1" />
+        <Link to="/ambs">
+          <FormattedMessage id="merchants.ambassadors_link_description" />
+        </Link>
+        <FormattedHTMLMessage id="merchants.description2" />
+      </span>
+    );

    return (
      <div>
@ -289,13 +305,6 @@ class MerchantsPage extends Component {
              <img src={LoadingGif} alt="Loading" style={loadingStyle} />
        ): (
          <div>
-            <p style={{ textAlign: 'left', marginRight: 20 }}>
-              <FormattedHTMLMessage id="merchants.description1" />
-              <Link to="/ambs">
-                <FormattedMessage id="merchants.ambassadors_link_description" />
-              </Link>
-              <FormattedHTMLMessage id="merchants.description2" />
-            </p>

            <Modal
              isOpen={this.state.mapsModalIsOpen}
@ -319,6 +328,7 @@ class MerchantsPage extends Component {
              <div>
                <br />
                <EnhancedTable
+                  description={textComponent}
                  columnData={columnData}
                  data={merchantsData}
                  orderBy="account"
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@ -1,3 +1,3 @@
-const GOOGLE_MAPS_API = 'AIzaSyD5BzjBYtpnQcztK18LEIvDZr9Y0L99k0s';
+const GOOGLE_MAPS_API = 'AIzaSyAwVFmgFPt_0fji8qFH5ecGG1A_ZviHe7M';

 export default GOOGLE_MAPS_API;