v1.2 - fix empty cityName issue and refactor code

Author: iamsainikhil

src/containers/autocomplete/AutoCompleteContainer.js

@@ -8,10 +8,11 @@ import LoaderComponent from '../../components/loader/LoaderComponent'
 import ErrorComponent from '../../components/error/ErrorComponent'
 import {AddressContext} from '../../context/AddressContext'
 import SearchComponent from '../../components/search/SearchComponent'
-import {isEmpty, isUndefined, isNull} from 'lodash-es'
+import {isEmpty, isUndefined} from 'lodash-es'
 import * as Sentry from '@sentry/browser'
 import {Event} from '../../utils/ReactAnalytics'
 import HEADERS from '../../utils/AlgoliaHeaders'
+import validName from '../../utils/ValidCityName'
 
 // Exponential back-off retry delay between requests
 axiosRetry(axios, {retryDelay: axiosRetry.exponentialDelay})
@@ -31,12 +32,6 @@ class AutoCompleteContainer extends Component {
     this.setState({errorMessage: message})
   }
 
-  validName(name, showDelimeter = true) {
-    return !isEmpty(name) && !isUndefined(name) && !isNull(name)
-      ? `${name}${showDelimeter ? ', ' : ''}`
-      : ''
-  }
-
   // debounced function
   debounceAddress = debounce(this.getAddresses, 1000)
 
@@ -83,7 +78,7 @@ class AutoCompleteContainer extends Component {
             }`
 
             // prettier-ignore
-            const cityName = `${this.validName(city)}${this.validName(state)}${this.validName(country, false)}`
+            const cityName = `${validName(city)}${validName(state)}${validName(country, false)}`
             const {lat, lng} = hit['_geoloc']
             return {
               cityName: cityName,

src/context/AddressContext.js

@@ -4,6 +4,7 @@ import axios from 'axios'
 import * as Sentry from '@sentry/browser'
 import {isEmpty, isUndefined} from 'lodash-es'
 import HEADERS from '../utils/AlgoliaHeaders'
+import validName from './../utils/ValidCityName'
 
 // const token = process.env.REACT_APP_IPINFO_TOKEN
 const AddressContext = React.createContext(null)
@@ -45,9 +46,13 @@ class AddressContextProvider extends Component {
       hit = hits[0]
 
       if (!isEmpty(hit) && !isUndefined(hit)) {
-        const cityName = `${hit.city ? hit.city[0] : ''}, ${
-          hit.administrative ? hit.administrative[0] : ''
-        }, ${hit.country ? hit.country : ''}`
+        const city = hit.city ? hit.city[0] : ''
+        const state = hit.administrative ? hit.administrative[0] : ''
+        const country = hit.country ? hit.country : ''
+        const cityName = `${validName(city)}${validName(state)}${validName(
+          country,
+          false
+        )}`
         const cityId = hit.objectID ? hit.objectID : ''
         this.updateState({
           address: {

src/utils/ValidCityName.js

@@ -0,0 +1,14 @@
+import {isEmpty, isUndefined, isNull} from 'lodash-es'
+
+/**
+ * util func to check and return the valid name
+ * @param {*} name (city or state or country)
+ * @param {*} showDelimeter (false for country)
+ */
+const validName = (name, showDelimeter = true) => {
+  return !isEmpty(name) && !isUndefined(name) && !isNull(name)
+    ? `${name}${showDelimeter ? ', ' : ''}`
+    : ''
+}
+
+export default validName