Merge branch 'master' into mx

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

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 a_value = (a[orderBy] !== undefined) ? a[orderBy]: '';
-          let b_value = b[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 a_value = (a[orderBy] !== undefined) ? a[orderBy]: '';
-          let b_value = b[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}

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}

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: 'location', numeric: false, disablePadding: false, label: 'Location' },
-  { id: 'country', numeric: false, disablePadding: false, label: 'Country' },
   { 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"

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;