Merge branch 'master' into mx

src/components/EnhancedTable.js

@@ -169,37 +169,38 @@ class EnhancedTable extends Component {
 
     const searchQuery = query;
     const searchColumns = this.state.searchColumns;
-    const data = this.props.data.filter((item) => {
+    const data = this.filterData(this.props.data, searchQuery, searchColumns);
-      let insert = false;
-
-        // Iterate over the search column select boxes
-        searchColumns.map(column => {
-          try {
-            if( column.checked && (item[column.name] !== undefined) ) {
-
-              if(item[column.name].hasOwnProperty('searchText') && item[column.name].searchText.toLowerCase().indexOf(searchQuery.toLowerCase().trim()) !== -1){
-                insert = true;
-              }
-              else if(item[column.name].toLowerCase().indexOf(searchQuery.toLowerCase().trim()) !== -1){
-                insert = true;
-              }
-            }
-          }
-          catch(error) {
-            //console.error(error);
-          }
-          return column;
-        });
-
-      if(insert){
-        return item;
-      }
-      return false;
-    });
 
     this.props.onSearchChange(data);
   };
 
+  // Sort the passed data based on the current component state.
+  sortData = (data) => {
+    const orderBy = this.state.orderBy;
+    const order = this.state.order;
+
+    data =
+      order === 'desc'
+        ? data.sort((a, b) => {
+          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;
+        })
+        : data.sort((a, b) => {
+          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';
+          if(b_value.trim() === '') b_value = 'zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz';
+          return (a_value < b_value) ? -1 : 1;
+        }
+      );
+    return data;
+  };
+
   /*
    * Update the search column select box
    */
@@ -212,6 +213,48 @@ class EnhancedTable extends Component {
 
   isSelected = id => this.state.selected.indexOf(id) !== -1;
 
+  filterData(data, searchQuery, searchColumns) {
+    // Remove white spaces and wrong "" split
+    const queryTerms = searchQuery.split(' ').filter(value => value !== '');
+
+    return data.filter((item) => {
+
+      const insertArray = [];
+      // Implement hardcoded AND query over each column
+      // Iterate over each search term
+      queryTerms.forEach(searchItem => {
+        let insert = false;
+        // Iterate over the search column select boxes
+        searchColumns.map(column => {
+          try {
+            if( column.checked && (item[column.name] !== undefined) ) {
+              if(item[column.name].hasOwnProperty('searchText') &&
+                item[column.name].searchText.toLowerCase().indexOf(searchItem.toLowerCase().trim()) !== -1
+              ){
+                insert = true;
+              }
+              else if(item[column.name].toLowerCase().indexOf(searchItem.toLowerCase().trim()) !== -1){
+                insert = true;
+              }
+            }
+          }
+          catch(error) {
+            //console.error(error);
+          }
+          return column;
+        });
+
+        insertArray.push(insert);
+      });
+
+      // AND logic
+      if(insertArray.filter(item => !item).length === 0){
+        return item;
+      }
+      return false;
+    });
+  }
+
   render() {
     let { data } = this.props;
     const { columnData, rowsPerPageOptions, showSearchColumns } = this.props;
@@ -219,36 +262,10 @@ class EnhancedTable extends Component {
 
     // Logic of search query and columns
     if(searchQuery.length > 0) {
-      data = data.filter((item) => {
+      data = this.filterData(data, searchQuery, searchColumns);
-        let insert = false;
-
-          // Iterate over the search column select boxes
-          searchColumns.map(column => {
-            try {
-              if( column.checked && (item[column.name] !== undefined) ) {
-
-                if(item[column.name].hasOwnProperty('searchText') && item[column.name].searchText.toLowerCase().indexOf(searchQuery.toLowerCase().trim()) !== -1){
-                  insert = true;
-                }
-                else if(item[column.name].toLowerCase().indexOf(searchQuery.toLowerCase().trim()) !== -1){
-                  insert = true;
-                }
-              }
-            }
-            catch(error) {
-              //console.error(error);
-            }
-            return column;
-          });
-
-        if(insert){
-          return item;
-        }
-        return false;
-      });
     }
 
-
+    data = this.sortData(data);
 
     return (
       <div style={styles.root}>

src/components/LayerMap.js

@@ -44,6 +44,10 @@ import tel_m3 from '../assets/img/map/cluster/tellers/m3.png';
 import tel_m4 from '../assets/img/map/cluster/tellers/m4.png';
 import tel_m5 from '../assets/img/map/cluster/tellers/m5.png';
 
+import { addProtocol, getProtocol } from '../utils/url';
+
+import { WHICH_OPTIONS } from '../utils/constants';
+
 // List of countries
 const countries = Countries();
 
@@ -59,8 +63,6 @@ const propTypes = {
   showControls: PropTypes.bool
 };
 
-
-
 /**
  * This object sets default values to the optional props.
  */
@@ -308,10 +310,27 @@ CustomLayerMap.propTypes = propTypes;
 // Assign default values to the optional props
 CustomLayerMap.defaultProps = defaultProps;
 
-// Type checking the props of the component
+/**
-CustomLayerMap.propTypes = propTypes;
+ * This object is used for type checking the props of the component.
-// Assign default values to the optional props
+ */
-CustomLayerMap.defaultProps = defaultProps;
+const propTypesLayerMap = {
+  ambassadorsLayer: PropTypes.bool,
+  merchantsLayer: PropTypes.bool,
+  showControls: PropTypes.bool,
+  mapHeight: PropTypes.string,
+  ambassadors: PropTypes.array,
+  merchants: PropTypes.array,
+  tellers: PropTypes.array,
+};
+
+/**
+ * This object sets default values to the optional props.
+ */
+const defaultPropsLayerMap = {
+  ambassadors: null,
+  merchants: null,
+  tellers: null
+};
 
 class LayerMap extends Component {
   constructor(props) {
@@ -330,9 +349,22 @@ class LayerMap extends Component {
    * @description Lifecycle event handler called just after the App loads into the DOM.
    */
   UNSAFE_componentWillMount() {
-    this.getAmbassadors();
+    this.updateMarkers();
-    this.getMerchants();
+  }
-    this.getTellers();
+
+  // Update markers based if props are informed
+  updateMarkers() {
+    if(!this.props.ambassadors) {
+      this.getAmbassadors();
+    }
+
+    if(!this.props.merchants) {
+      this.getMerchants();
+    }
+
+    if (!this.props.tellers) {
+      this.getTellers();
+    }
   }
 
   fillResults(result) {
@@ -496,25 +528,53 @@ class LayerMap extends Component {
       if(tellers.country !== undefined) tellers.country = countries.getName(tellers.country);
     });
 
-    const markers = result.data.map(merchant => {
+    const markers = result.data.map(teller => {
-      const infoDescription = <div>
+      if(teller.telegram){
-      <div><b>Address</b>: {merchant.address}</div>
+        teller.telegram_original = teller.telegram;
-      {(merchant.phone) && (<div><b>Phone</b>: {merchant.phone}</div>)}
+        teller.telegram = {
-      {(merchant.telegram) && (<div><b>Telegram</b>:
+          searchText: teller.telegram_original,
-        <a
+          value: (
-          href={`https://t.me/${(merchant.telegram.trim().charAt(0) === '@') ? merchant.telegram.trim().slice(1): merchant.telegram.trim()}`}
+            <a
-          target="_blank"
+              href={`https://t.me/${(teller.telegram_original.trim().charAt(0) === '@') ?
-          rel="noopener noreferrer"
+                teller.telegram_original.trim().slice(1): teller.telegram_original.trim()}`}
-        >{merchant.telegram}</a>
+              target="_blank"
-        </div>)}
+              rel="noopener noreferrer"
-      {(merchant.url) && (<div><b>Website:</b>: <a target="_blank" rel="noopener noreferrer"
+            >{teller.telegram}</a>
-        href={merchant.url}>{stripProtocol(merchant.url)}</a></div>)}
+          )
-      </div>;
+        };
+      }
+      const which = WHICH_OPTIONS.filter(w => w.id.toLowerCase() === teller.which.toLowerCase());
+        teller.which_value = ( teller.which && which.length > 0)  ?
+          which[0].value :
+          '';
+      const infoDescription = (
+        <div>
+          <div><b>Address</b>: {teller.address}</div>
+          {(teller.which) && (<div><b>Which:</b>: {teller.which}</div>)}
+          {(teller.bitshares_address) && (<div><b>BTS Account:</b>: {teller.bitshares_address}</div>)}
+          {(teller.address) && (<div><b>Address:</b>: {teller.address}</div>)}
+          {(teller.telegram_original) && (<div><b>Telegram</b>:
+            <a
+              href={`https://t.me/${(teller.telegram_original.trim().charAt(0) === '@') ? teller.telegram_original.trim().slice(1): teller.telegram_original.trim()}`}
+              target="_blank"
+              rel="noopener noreferrer"
+            >{teller.telegram_original}</a>
+            </div>)
+          }
+          {(teller.keybase) && (<div><b>Keybase</b>: {teller.keybase}</div>)}
+          {(teller.whatsapp) && (<div><b>Whatsapp</b>: {teller.whatsapp}</div>)}
+          {(teller.viber) && (<div><b>Viber</b>: {teller.viber}</div>)}
+          {(teller.email) && (<div><b>Email</b>: {teller.email}</div>)}
+          {(teller.phone) && (<div><b>Phone</b>: {teller.phone}</div>)}
+          {(teller.url) && (<div><b>URL:</b>: <a target="_blank" rel="noopener noreferrer"
+            href={addProtocol(teller.url, getProtocol(teller.url))}>{stripProtocol(teller.url)}</a></div>)}
+        </div>
+      );
       const marker = {
-        lat: merchant.lat,
+        lat: teller.lat,
-        lng: merchant.lon,
+        lng: teller.lon,
         withInfo: true,
-        infoTitle: merchant.gt_name,
+        infoTitle: teller.gt_name,
         infoDescription: infoDescription,
       };
       return marker;
@@ -530,13 +590,33 @@ class LayerMap extends Component {
   handleLayerChange = name => event => {
     this.setState({ [name]: event.target.checked });
     // Update any time changes
-    this.getAmbassadors();
+    this.updateMarkers();
-    this.getMerchants();
-    this.getTellers();
   };
 
   render() {
-    // create an array with marker components
+    const {
+      ambassadors: ambassadorsProps,
+      merchants: merchantsProps,
+      tellers: tellersProps
+    } = this.props;
+
+    let {
+      ambassadors,
+      merchants,
+      tellers
+    } = this.state;
+
+    if(ambassadorsProps) {
+      ambassadors = ambassadorsProps;
+    }
+
+    if(merchantsProps) {
+      merchants = merchantsProps;
+    }
+
+    if(tellersProps) {
+      tellers = tellersProps;
+    }
 
     return (
       <div>
@@ -551,9 +631,9 @@ class LayerMap extends Component {
           <div style={{ height: 56 }}></div>
         )}
         <CustomLayerMap
-          ambassadors={this.state.ambassadorLayer ? this.state.ambassadors: []}
+          ambassadors={this.state.ambassadorLayer ? ambassadors: []}
-          merchants={this.state.merchantLayer ? this.state.merchants: []}
+          merchants={this.state.merchantLayer ? merchants: []}
-          tellers={this.state.tellerLayer ? this.state.tellers: []}
+          tellers={this.state.tellerLayer ? tellers: []}
           mapZoom={3}
           mapCenter={{ lat: 0, lng: 0 }}
           loadingElement={<div style={{ height: `100%` }} />}
@@ -565,4 +645,9 @@ class LayerMap extends Component {
   }
 }
 
+// Type checking the props of the component
+LayerMap.propTypes = propTypesLayerMap;
+// Assign default values to the optional props
+LayerMap.defaultProps = defaultPropsLayerMap;
+
 export default LayerMap;

src/components/pages/AmbassadorsPage.js

@@ -357,7 +357,7 @@ class AmbassadorsPage extends Component {
       });
     });
 
-    data = data.sort(sortBy('location.searchText'));
+    data = data.sort(sortBy('nickname'));
 
     const textComponent = (
       <span>
@@ -374,7 +374,7 @@ class AmbassadorsPage extends Component {
         <AppHeader />
 
         <div id="maincontent">
-      <section data-spy="scroll" data-target="#mainNav" id="services">
+      <section data-spy="scroll" data-target="#mainNav" id="services" className="ambs_services">
       <div className="containerfix">
       <div className="row">
       <div className="col-md-10 mx-md-auto">

src/components/pages/MerchantsPage.css

@@ -3,4 +3,8 @@
 }
 .merchants_services .MuiNotchedOutline-focused-120 {
   border-color: rgb(19, 143, 82) !important;
+}
+.merchants_services table,
+.ambs_services table {
+  min-width: 100% !important;
 }

src/components/pages/MerchantsPage.js

@@ -307,10 +307,6 @@ class MerchantsPage extends Component {
     });
 
     result.data.map(merchant => {
-      const infoDescription = <div>
-        <div><b>Address</b>: {merchant.address}</div>
-        {(merchant.phone) && (<div><b>Phone</b>: {merchant.phone}</div>)}
-        </div>;
       if(merchant.telegram){
         merchant.telegram_original = merchant.telegram;
         merchant.telegram = {
@@ -419,7 +415,7 @@ class MerchantsPage extends Component {
       return this.getMerchantMarker(merchant);
     });
 
-    merchantsData = merchantsData.sort(sortBy('location.searchText'));
+    merchantsData = merchantsData.sort(sortBy('name'));
 
     const textComponent = (
       <span>

src/utils/feathers.js

@@ -3,7 +3,7 @@ import feathers from '@feathersjs/client';
 const app = feathers();
 // Change to your production ambassador web service
 //const restClient = feathers.rest('http://localhost:3030');
-const restClient = feathers.rest('https://intranet.palmpay.io');
+const restClient = feathers.rest('https://websvc.palmpay.io');
 
 // Configure an Fetch AJAX library with that client. For fetch details see https://facebook.github.io/react-native/docs/network.html
 // For rest details see https://docs.feathersjs.com/api/client/rest.html