From 26357612eb062da9f4cb909d7c92a94baadcab7e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Let=C3=ADcia=20Camara?= Date: Tue, 15 Jan 2019 00:23:41 -0200 Subject: [PATCH 1/9] Improving LayerMap Component fixing search errors and adding better performance --- src/components/LayerMap.js | 151 +++++++++++++++++++++++++++++-------- 1 file changed, 118 insertions(+), 33 deletions(-) diff --git a/src/components/LayerMap.js b/src/components/LayerMap.js index 14dc537..b7475d7 100644 --- a/src/components/LayerMap.js +++ b/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; -// Assign default values to the optional props -CustomLayerMap.defaultProps = defaultProps; +/** + * This object is used for type checking the props of the component. + */ +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.getMerchants(); - this.getTellers(); + this.updateMarkers(); + } + + // 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 infoDescription =
-
Address: {merchant.address}
- {(merchant.phone) && (
Phone: {merchant.phone}
)} - {(merchant.telegram) && (
Telegram: - {merchant.telegram} -
)} - {(merchant.url) && (
Website:: {stripProtocol(merchant.url)}
)} -
; + const markers = result.data.map(teller => { + if(teller.telegram){ + teller.telegram_original = teller.telegram; + teller.telegram = { + searchText: teller.telegram_original, + value: ( + {teller.telegram} + ) + }; + } + 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 = ( +
+
Address: {teller.address}
+ {(teller.which) && (
Which:: {teller.which}
)} + {(teller.bitshares_address) && (
BTS Account:: {teller.bitshares_address}
)} + {(teller.address) && (
Address:: {teller.address}
)} + {(teller.telegram_original) && (
Telegram: + {teller.telegram_original} +
) + } + {(teller.keybase) && (
Keybase: {teller.keybase}
)} + {(teller.whatsapp) && (
Whatsapp: {teller.whatsapp}
)} + {(teller.viber) && (
Viber: {teller.viber}
)} + {(teller.email) && (
Email: {teller.email}
)} + {(teller.phone) && (
Phone: {teller.phone}
)} + {(teller.url) && (
URL:: {stripProtocol(teller.url)}
)} +
+ ); const marker = { - lat: merchant.lat, - lng: merchant.lon, + lat: teller.lat, + 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.getMerchants(); - this.getTellers(); + this.updateMarkers(); }; 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 (
@@ -551,9 +631,9 @@ class LayerMap extends Component {
)} } @@ -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; From 7a17666e762e91857303cb625c7c8be1fd150fbc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Let=C3=ADcia=20Camara?= Date: Wed, 16 Jan 2019 01:52:35 -0200 Subject: [PATCH 2/9] Extend search algorith to include AND between columns and sort at EnhacedTable component --- src/components/EnhancedTable.js | 25 +++++++++++++++++++------ src/components/pages/AmbassadorsPage.js | 2 +- src/components/pages/MerchantsPage.js | 2 +- 3 files changed, 21 insertions(+), 8 deletions(-) diff --git a/src/components/EnhancedTable.js b/src/components/EnhancedTable.js index 1dec23f..3ae0ae4 100644 --- a/src/components/EnhancedTable.js +++ b/src/components/EnhancedTable.js @@ -219,18 +219,27 @@ class EnhancedTable extends Component { // Logic of search query and columns if(searchQuery.length > 0) { - data = data.filter((item) => { - let insert = false; + // Remove white spaces and wrong "" split + const queryTerms = searchQuery.split(' ').filter(value => value !== ''); + + data = 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(searchQuery.toLowerCase().trim()) !== -1){ + 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(searchQuery.toLowerCase().trim()) !== -1){ + else if(item[column.name].toLowerCase().indexOf(searchItem.toLowerCase().trim()) !== -1){ insert = true; } } @@ -241,7 +250,11 @@ class EnhancedTable extends Component { return column; }); - if(insert){ + insertArray.push(insert); + }); + + // AND logic + if(insertArray.filter(item => !item).length === 0){ return item; } return false; diff --git a/src/components/pages/AmbassadorsPage.js b/src/components/pages/AmbassadorsPage.js index 3cdb462..a73895e 100644 --- a/src/components/pages/AmbassadorsPage.js +++ b/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 = ( diff --git a/src/components/pages/MerchantsPage.js b/src/components/pages/MerchantsPage.js index 2cf1f6e..3984666 100644 --- a/src/components/pages/MerchantsPage.js +++ b/src/components/pages/MerchantsPage.js @@ -419,7 +419,7 @@ class MerchantsPage extends Component { return this.getMerchantMarker(merchant); }); - merchantsData = merchantsData.sort(sortBy('location.searchText')); + merchantsData = merchantsData.sort(sortBy('name')); const textComponent = ( From c5576bb57bd6963f3c89bee73aae0697555e429f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Let=C3=ADcia=20Camara?= Date: Wed, 16 Jan 2019 20:00:44 -0200 Subject: [PATCH 3/9] Add sort logic after each search event --- src/components/EnhancedTable.js | 29 ++++++++++++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git a/src/components/EnhancedTable.js b/src/components/EnhancedTable.js index 3ae0ae4..54fa347 100644 --- a/src/components/EnhancedTable.js +++ b/src/components/EnhancedTable.js @@ -200,6 +200,33 @@ class EnhancedTable extends Component { 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 */ @@ -261,7 +288,7 @@ class EnhancedTable extends Component { }); } - + data = this.sortData(data); return (
From 65451e1cca71229b9cda81b691cb8f48efc5bbcf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Let=C3=ADcia=20Camara?= Date: Wed, 16 Jan 2019 21:28:38 -0200 Subject: [PATCH 4/9] The text in the name and address cells to wrap to next line --- src/components/pages/MerchantsPage.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/pages/MerchantsPage.css b/src/components/pages/MerchantsPage.css index 3205907..289b986 100644 --- a/src/components/pages/MerchantsPage.css +++ b/src/components/pages/MerchantsPage.css @@ -3,4 +3,8 @@ } .merchants_services .MuiNotchedOutline-focused-120 { border-color: rgb(19, 143, 82) !important; +} + +table tr th:nth-of-type(1), table tr th:nth-of-type(2) { + width: 156px; } \ No newline at end of file From deb9c2eb4f8a6e4c3db0647c2857e052728482be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Let=C3=ADcia=20Camara?= Date: Wed, 16 Jan 2019 22:26:34 -0200 Subject: [PATCH 5/9] Merchants responsive table --- src/components/pages/MerchantsPage.css | 4 ++-- src/components/pages/MerchantsPage.js | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/pages/MerchantsPage.css b/src/components/pages/MerchantsPage.css index 289b986..cb05de0 100644 --- a/src/components/pages/MerchantsPage.css +++ b/src/components/pages/MerchantsPage.css @@ -5,6 +5,6 @@ border-color: rgb(19, 143, 82) !important; } -table tr th:nth-of-type(1), table tr th:nth-of-type(2) { - width: 156px; +.merchants_services table { + min-width: 100% !important; } \ No newline at end of file diff --git a/src/components/pages/MerchantsPage.js b/src/components/pages/MerchantsPage.js index 3984666..2d2b2af 100644 --- a/src/components/pages/MerchantsPage.js +++ b/src/components/pages/MerchantsPage.js @@ -473,6 +473,7 @@ class MerchantsPage extends Component { columnData={columnData} data={merchantsData} orderBy="account" + className="teste-let" rowsPerPage={10} showSearchColumns={false} isAdmin={false} From 4df858b4f0e206d0403f196a8c472de24673a73b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Let=C3=ADcia=20Camara?= Date: Wed, 16 Jan 2019 22:43:10 -0200 Subject: [PATCH 6/9] Ambs responsive table --- src/components/pages/AmbassadorsPage.js | 2 +- src/components/pages/MerchantsPage.css | 4 ++-- src/components/pages/MerchantsPage.js | 1 - 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/pages/AmbassadorsPage.js b/src/components/pages/AmbassadorsPage.js index a73895e..f418c4d 100644 --- a/src/components/pages/AmbassadorsPage.js +++ b/src/components/pages/AmbassadorsPage.js @@ -374,7 +374,7 @@ class AmbassadorsPage extends Component {
-
+
diff --git a/src/components/pages/MerchantsPage.css b/src/components/pages/MerchantsPage.css index cb05de0..77beccd 100644 --- a/src/components/pages/MerchantsPage.css +++ b/src/components/pages/MerchantsPage.css @@ -4,7 +4,7 @@ .merchants_services .MuiNotchedOutline-focused-120 { border-color: rgb(19, 143, 82) !important; } - -.merchants_services table { +.merchants_services table, +.ambs_services table { min-width: 100% !important; } \ No newline at end of file diff --git a/src/components/pages/MerchantsPage.js b/src/components/pages/MerchantsPage.js index 2d2b2af..3984666 100644 --- a/src/components/pages/MerchantsPage.js +++ b/src/components/pages/MerchantsPage.js @@ -473,7 +473,6 @@ class MerchantsPage extends Component { columnData={columnData} data={merchantsData} orderBy="account" - className="teste-let" rowsPerPage={10} showSearchColumns={false} isAdmin={false} From bd40a19942a5404a897cbbf3c4de6ad6a7bed407 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Let=C3=ADcia=20Camara?= Date: Mon, 21 Jan 2019 00:09:52 -0200 Subject: [PATCH 7/9] Fix filtered data to external update query event --- src/components/EnhancedTable.js | 111 +++++++++++++------------------- 1 file changed, 44 insertions(+), 67 deletions(-) diff --git a/src/components/EnhancedTable.js b/src/components/EnhancedTable.js index 54fa347..febfdf6 100644 --- a/src/components/EnhancedTable.js +++ b/src/components/EnhancedTable.js @@ -169,33 +169,7 @@ class EnhancedTable extends Component { const searchQuery = query; const searchColumns = this.state.searchColumns; - const data = this.props.data.filter((item) => { - 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; - }); + const data = this.filterData(this.props.data, searchQuery, searchColumns); this.props.onSearchChange(data); }; @@ -239,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; @@ -246,46 +262,7 @@ class EnhancedTable extends Component { // Logic of search query and columns if(searchQuery.length > 0) { - - // Remove white spaces and wrong "" split - const queryTerms = searchQuery.split(' ').filter(value => value !== ''); - - data = 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; - }); + data = this.filterData(data, searchQuery, searchColumns); } data = this.sortData(data); From 19d02239599287b98c0e9800a62b498a25e05639 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Let=C3=ADcia=20Camara?= Date: Wed, 23 Jan 2019 22:20:16 -0200 Subject: [PATCH 8/9] Fix dependencies problem --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 4e5a2e1..f8294f4 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "@material-ui/icons": "^3.0.1", "bootstrap": "^4.1.3", "country-list": "^1.1.0", + "font-awesome": "^4.7.0", "mdbreact": "^4.7.1", "react": "^16.5.2", "react-dom": "^16.5.2", From 3489f290898408ce7ce81e5a199e61c374c76e29 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Let=C3=ADcia=20Camara?= Date: Thu, 24 Jan 2019 00:18:31 -0200 Subject: [PATCH 9/9] Update webservice url --- src/components/pages/MerchantsPage.js | 4 ---- src/utils/feathers.js | 2 +- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/src/components/pages/MerchantsPage.js b/src/components/pages/MerchantsPage.js index 3984666..2e8015b 100644 --- a/src/components/pages/MerchantsPage.js +++ b/src/components/pages/MerchantsPage.js @@ -307,10 +307,6 @@ class MerchantsPage extends Component { }); result.data.map(merchant => { - const infoDescription =
-
Address: {merchant.address}
- {(merchant.phone) && (
Phone: {merchant.phone}
)} -
; if(merchant.telegram){ merchant.telegram_original = merchant.telegram; merchant.telegram = { diff --git a/src/utils/feathers.js b/src/utils/feathers.js index 73ef7f1..2e8d259 100644 --- a/src/utils/feathers.js +++ b/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