Add lat/lon bypass for API v1 call

src/components/pages/AmbassadorsPage0.js

@@ -0,0 +1,286 @@
+import React, { Component } from 'react';
+import { FormattedMessage, FormattedHTMLMessage } from 'react-intl';
+import Modal from 'react-modal';
+import { Link } from 'react-router-dom';
+import Button from '@material-ui/core/Button';
+
+// Custom components
+import AppHeader from '../AppHeader';
+import Footer from '../Footer';
+import EnhancedTable from '../EnhancedTable';
+import LayerMap from '../LayerMap';
+import PreviewMap from '../PreviewMap';
+
+// Helpers
+import Client from '../../utils/feathers';
+import { stripProtocol } from '../../utils/url';
+import Countries from 'country-list';
+
+// Images
+import AmbassadorPin from '../../assets/img/map/ambassador_pin.png';
+import LoadingGif from '../../assets/img/loading_icon.gif';
+
+
+
+import GOOGLE_MAPS_API from '../../utils/constants';
+
+const googleMapsClient = require('@google/maps').createClient({
+  key: GOOGLE_MAPS_API
+});
+
+// List of countries
+const countries = Countries();
+
+const centerStyle = {
+  textAlign: 'center',
+  marginTop: 20,
+  marginBottom: 20
+};
+
+const loadingStyle = {
+  textAlign: 'center',
+  marginTop: 20,
+  marginBottom: 20,
+  display: 'block',
+  marginLeft: 'auto',
+  marginRight: 'auto'
+};
+
+const mapsStyles = {
+  content : {
+    top                   : '50%',
+    left                  : '50%',
+    right                 : 'auto',
+    bottom                : 'auto',
+    marginRight           : '-50%',
+    transform             : 'translate(-50%, -50%)',
+    minWidth              : '300px'
+  }
+};
+
+const columnData = [
+  { id: 'nickname', numeric: false, disablePadding: true, label: 'Nickname' },
+  { id: 'location', numeric: false, disablePadding: true, label: 'Location' },
+  { id: 'telegram', numeric: false, disablePadding: false, label: 'Telegram Account' },
+  { id: 'keybase', numeric: false, disablePadding: false, label: 'Keybase' },
+  { id: 'email', numeric: false, disablePadding: false, label: 'Email' },
+  { id: 'phone', numeric: false, disablePadding: false, label: 'Phone' },
+  // { id: 'link', numeric: false, disablePadding: false, label: 'URL' },
+  { id: 'map', numeric: false, disablePadding: false, label: 'Maps', disableSearch: true}
+];
+
+/**
+ * Ambassador page component.
+ */
+class AmbassadorsPage extends Component {
+  constructor(props, context) {
+    super(props, context);
+
+    /** @type {ComponentState} */
+    this.state = {
+      ambassadors: {
+        total: 0,
+        limit: 0,
+        skip: 0,
+        data: []
+      },
+      loading: true,
+      rowsPerPage: [100,200,300],
+      numberOfRows: 100,
+      page: 1,
+      total: undefined,
+      mapsModalIsOpen: false,
+      mapsTitle: '',
+      mapsDescription: '',
+      mapsLat: 0,
+      mapsLon: 0,
+      cities: {}
+    };
+  }
+
+  /**
+   * Geocode an address.
+   * @param address
+   */
+  async geocodeAddress(data) {
+    const app = this;
+    let aqq = {};
+    return data.map( async ambassador => {
+      const address = `{${ambassador.city} - ${ambassador.country}`;
+      googleMapsClient.geocode({
+      address
+    }, function(err, response) {
+      const state = { loading: false, loadingText: ''};
+      if(err) {
+        state.resolvedGeoCode = false;
+        state.geocodingErrorMessage = 'Geocoding Error';
+        state.lat = null;
+        state.lon = null;
+      }
+      else {
+        state.resolvedGeoCode = true;
+        state.geocodingErrorMessage = '';
+        const location = response.json.results[0].geometry.location;
+        const aw = {};
+        aw[ambassador.cityId] = {};
+        aw[ambassador.cityId].lat = location.lat;
+        aw[ambassador.cityId].lon = location.lng;
+        aqq = { ...aw, ...aqq};
+        console.log('--------------------------')
+        console.log(JSON.stringify(aqq));
+        app.setState({ cities: { ...aw, ...this.state.cities} });
+
+      }
+    });
+      return ambassador;
+    });
+
+
+  }
+
+  /**
+   * @description Lifecycle event handler called just after the App loads into the DOM.
+   */
+  UNSAFE_componentWillMount() {
+    // Get the ambassadors list
+    this.getAmbassadors();
+  }
+
+  fillResults(result) {
+    const data = result;
+    return (item) => data.data.push(item);
+  }
+
+  /**
+   * @description Get ambassadors from the web service
+   * @param {number} [limit=10] - Max items to be returned.
+   * @param {number} [skip=0] - Start index search
+   */
+  getAmbassadors = async (limit = 50, skip = 0) => {
+    const app = this;
+    // Initially we don't know how much the total value is, so to make sure we enter the loop
+    // at least once we're just setting it to be 1
+    let total = 1;
+
+    const ambassadors = Client.service('api/v1/ambassadors');
+    this.setState({loading: true});
+    let result;
+    while(skip < total){
+      let partialResponse = await ambassadors.find({
+        query: {
+          $sort: { account: 1 },
+          $limit: limit,
+          $skip: skip
+        }
+      });
+      total = partialResponse.total;
+      result === undefined ? result = partialResponse : partialResponse.data.map(this.fillResults(result));
+      skip = skip + limit;
+    }
+
+    result.data.forEach(function(ambassador){
+      if(ambassador.city !== undefined) ambassador.city = (ambassador.city).replace(/(^|\s)\S/g, l => l.toUpperCase());
+      if(ambassador.country !== undefined) ambassador.country = countries.getName(ambassador.country);
+      // Setup disabled to be string
+      ambassador.disabled = (ambassador.disabled) ? 'yes': '';
+    });
+
+    // Once both return, update the state
+    app.setState({loading: false, ambassadors: result});
+  };
+
+  /**
+   * @description Close Maps modal.
+   */
+  closeMapsModal() {
+     this.setState({
+       mapsLat: 0,
+       mapsLon: 0,
+       mapsModalIsOpen: false
+     });
+  }
+
+  openMaps(name, address, lat, lon){
+    this.setState({
+      mapsTitle: name,
+      mapsDescription: address,
+      mapsLat: lat,
+      mapsLon: lon,
+      mapsModalIsOpen: true
+    });
+  }
+
+  render() {
+    const { data } = this.state.ambassadors;
+
+    console.log(data);
+
+      const city = this.geocodeAddress(data);
+      console.log('ola');
+      console.log(this.state.cities);
+
+
+
+
+    // Works for both v0, v1 and v2 API response
+    /*
+    data.map(ambassador => {
+      let cities = [];
+      // V0/V1
+      if(ambassador.city) {
+        if(ambassador.lat){
+          cities.push({
+              city: ambassador.city,
+              country: ambassador.country,
+              lat: ambassador.lat,
+              lon: ambassador.lon
+            }
+          );
+        }
+        else{
+          cities.push({
+              city: ambassador.city,
+              country: ambassador.country,
+              lat: ambassador.lat,
+              lon: ambassador.lon
+            }
+          );
+        }
+
+      }
+      // v2
+      else {
+        cities = ambassador.cities;
+      }
+      cities.forEach( location => {
+        ambassador.location = `${location.city} - ${location.country}`;
+        ambassador.map = <Button
+          className="App-button"
+          variant="contained"
+          style={{
+              backgroundColor: "#2069b3",
+              color: 'white'
+          }}
+          onClick={() => this.openMaps(
+            ambassador.nickname,
+            `${location.city} - ${location.country}`,
+            location.lat,
+            location.lon
+          )}
+        >Show on Map
+        </Button>;
+      });
+
+      /*ambassador.link = <a target="_blank" rel="noopener noreferrer"
+        href={ambassador.url}>{stripProtocol(ambassador.url)}</a>;
+
+      return ambassador;
+    });*/
+
+    return (
+      <div>{JSON.stringify(this.state.cities)}</div>
+    );
+  }
+}
+
+export { AmbassadorsPage };

src/components/pages/MerchantsPage.js

@@ -12,7 +12,7 @@ import LayerMap from '../LayerMap';
 import PreviewMap from '../PreviewMap';
 
 // Helpers
-import Client from '../../utils/feathers';
+import Client from '../../utils/feathers_merchants';
 import Countries from 'country-list';
 
 // Images

src/utils/feathers.js

@@ -3,7 +3,9 @@ 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://palmpaybackend.leticiacamara.com');
+const restClient = feathers.rest('https://ambpay.palmpay.io');
+//const restClient = feathers.rest('https://palmpaybackend.leticiacamara.com');
+
 // 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
 app.configure(restClient.fetch(window.fetch));

src/utils/feathers_merchants.js

@@ -0,0 +1,21 @@
+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://palmpaybackend.leticiacamara.com');
+
+// 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
+app.configure(restClient.fetch(window.fetch));
+
+// Configure authentication data to be saved at the browser localstorage (see https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)
+// For authentication client details see https://docs.feathersjs.com/api/authentication/client.html .
+app.configure(feathers.authentication({
+  storage: window.localStorage
+}));
+
+/**
+ * Feathers app with client configuration
+ */
+export default app;