@ta-interaktiv/react-municipality-search 1.5.4 → 1.7.0

package/src/municipalitySearch.tsx

@@ -9,6 +9,7 @@ import { animated, config as springConfig, Transition } from 'react-spring'
 import IntlMessageFormat from 'intl-messageformat'
 import de from './locales/de.yml'
 import fr from './locales/fr.yml'
+import Cookies from 'js-cookie'
 
 type MessageListContent = string | MessageList
 
@@ -30,6 +31,7 @@ export interface Municipality {
   readonly KTKZ: string
   readonly NORMORTSNAME: string
   readonly NORMGEMEINDE: string
+  timestamp?: number
 }
 
 export interface Props {
@@ -76,6 +78,7 @@ interface State {
 
 /** All localised strings for the component */
 const MESSAGES = { de, fr }
+const localStorageItemName = 'selectedMunicipalities'
 
 /**
  * Create a translation Service function, using the provided MessageList and
@@ -103,7 +106,16 @@ const translationServiceFactory = (
     )
   }
 }
-
+function getDomain():string {
+  let url = window.location.hostname
+  url = url.replace(/(https?:\/\/)?(www.)?/i, '')
+  const urlArray = url.split('.')
+  url = urlArray.slice(urlArray.length - 2).join('.')
+  if (url.indexOf('/') !== -1) {
+      return url.split('/')[0]
+  }
+  return url;
+}
 class MunicipalityDownloadError extends Error {}
 
 /** RegEx to look whether a string starts with a number */
@@ -130,7 +142,7 @@ export class MunicipalitySearch extends Component<Props, State> {
   public static defaultProps = {
     municipalityData: '2021v3',
     locale: 'de',
-    numberOfLastSelectedMunicipalities: 1
+    numberOfLastSelectedMunicipalities: 1,
   }
 
   public state = {
@@ -138,14 +150,14 @@ export class MunicipalitySearch extends Component<Props, State> {
     results: [],
     value: '',
     error: null,
-    municipalities: []
+    municipalities: [],
   }
 
   private resetComponent = () => {
     this.setState({
       isLoading: false,
       results: [],
-      value: ''
+      value: '',
     })
   }
 
@@ -202,7 +214,7 @@ export class MunicipalitySearch extends Component<Props, State> {
       window.dataLayer.push({
         event: 'Interactions',
         event_action: 'input',
-        event_label: `search:for_${searchTerm}:results_${results.length}`
+        event_label: `search:for_${searchTerm}:results_${results.length}`,
       })
     }
 
@@ -214,7 +226,7 @@ export class MunicipalitySearch extends Component<Props, State> {
     searchTerm: string
   ): Municipality[] {
     const map = new Map()
-    arr.forEach(v => {
+    arr.forEach((v) => {
       if (this.props.dedupe) {
         map.set(v.ORTNAME + v.GDENR, v)
       } else {
@@ -273,57 +285,130 @@ export class MunicipalitySearch extends Component<Props, State> {
       .fetch(url, {
         method: 'GET',
         mode: 'no-cors',
-        credentials: 'include'
+        credentials: 'include',
       })
-      .then(response => {
+      .then((response) => {
         console.log(response)
       })
-      .catch(error => {
+      .catch((error) => {
         console.log(error)
       })
   }
 
-  private pushToLocalStorageArray = (newMuni: Municipality) => {
-    let prevSelectedMunicipalities
-    let newArray: Municipality[] = []
-    const localStorageItemName = 'selectedMunicipalities'
+  /**
+   * Get the history of the last selected municipalities from localStorage and cookies
+   */
+  private getStoredMunicipalities = (): Municipality[] | [] => {
+    let munisFromLocalStorage: Municipality[] = []
+    let munisFromCookies: Municipality[] = []
     try {
-      prevSelectedMunicipalities =
-        localStorage.getItem(localStorageItemName) ?? JSON.stringify([])
-      newArray = JSON.parse(prevSelectedMunicipalities)
-    } catch {
-      console.warn('🗄 localStorage is not available')
+      const munisFromLocalStorageString =
+        localStorage.getItem('selectedMunicipalities') ?? '[]'
+      munisFromLocalStorage = JSON.parse(munisFromLocalStorageString)
+    } catch (e) {
+      console.log(e)
+      console.warn('🗄 localStorage of selectedMunicipalities is not available')
+    }
+    try {
+      const munisFromCookiesString =
+        Cookies.get('selectedMunicipalities') ?? '[]'
+      munisFromCookies = JSON.parse(munisFromCookiesString)
+    } catch (e) {
+      console.log(e)
+      console.warn('🍪 cookies of selectedMunicipalities is not available')
     }
+    const ordered = [...munisFromLocalStorage, ...munisFromCookies].sort(
+      (a, b) => {
+        if (b.timestamp && a.timestamp) {
+          return b.timestamp - a.timestamp
+        }
+        if (b.timestamp) {
+          return 1
+        }
+        if (a.timestamp) {
+          return -1
+        }
+        return 0
+      }
+    )
+    return this.deduplicateMunicipalityArray(ordered)
+  }
+
+  /**
+   * Save the history of the last selected municipalities
+   * They will be saved in localStorage and in cookies
+   * Cookies are used for exchange between subdomains eg. interaktiv.tagesanzeiger.ch and tagesanzeiger.ch
+   */
+  private saveToSelectedMunicipalities = (newMuni: Municipality) => {
+    const prevSelectedMunicipalities = this.getStoredMunicipalities()
     // limit the number of stored municipalities
-    const slicedArray = newArray.slice(0, 15)
+    const slicedArray = prevSelectedMunicipalities.slice(
+      0,
+      15
+    ) as Municipality[]
+    newMuni.timestamp = Date.now()
     slicedArray.unshift(newMuni)
+    console.log('domain:', getDomain())
+
     try {
-      // deduplicate the array and stringify it for localStorage
-      localStorage.setItem(
-        localStorageItemName,
-        JSON.stringify([
-          ...new Map(
-            slicedArray.map((muni: Municipality) => [
-               muni.GDENR + muni.ORTNAME + muni.PLZ4,
-              muni
-            ])
-          ).values()
-        ])
+      // deduplicate the array, sort it by timestamp and stringify it for localStorage and cookies
+      const newMuniArray = JSON.stringify(
+        this.deduplicateMunicipalityArray(slicedArray)
       )
+      localStorage.setItem(localStorageItemName, newMuniArray)
+      Cookies.set(localStorageItemName, newMuniArray, {
+        expires: 365,
+        domain: getDomain(),
+      })
     } catch {
       console.warn('🗄 localStorage is not writeable')
     }
   }
 
+  /**
+   *  Deduplicate the array of municipalities
+   * @param munis Municipalities array to deduplicate
+   * @returns Municipalities array deduplicated by ORTNAME, GDENR and PLZ4
+   */
+
+  private deduplicateMunicipalityArray = (
+    munis: Municipality[]
+  ): Municipality[] => {
+    return [
+      ...new Map(
+        munis
+          .slice()
+          .reverse()
+          .map((muni: Municipality) => [
+            muni.ORTNAME + muni.GDENR + (this.props.dedupe ? '' : muni.PLZ4),
+            muni,
+          ])
+      ).values(),
+    ]
+      .reverse()
+      .sort((a, b) => {
+        if (b.timestamp && a.timestamp) {
+          return b.timestamp - a.timestamp
+        }
+        if (b.timestamp) {
+          return 1
+        }
+        if (a.timestamp) {
+          return -1
+        }
+        return 0
+      })
+  }
+
   private getMunicipalitiesData = () => {
     this.setState({
-      isLoading: true
+      isLoading: true,
     })
 
     return fetch(
       `https://interaktiv.tagesanzeiger.ch/static/gemeindesuche/${this.props.municipalityData}.json`
     )
-      .then(res => {
+      .then((res) => {
         if (!res.ok) {
           throw new MunicipalityDownloadError(
             `Download error: ${res.status}: ${res.statusText}.`
@@ -331,14 +416,14 @@ export class MunicipalitySearch extends Component<Props, State> {
         }
         return res.json()
       })
-      .then(data => {
+      .then((data) => {
         this.setState({
           isLoading: false,
-          municipalities: data
+          municipalities: data,
         })
         return Promise.resolve(data)
       })
-      .catch(error => {
+      .catch((error) => {
         if (error instanceof MunicipalityDownloadError) {
           console.log(error)
           console.info(
@@ -349,7 +434,7 @@ export class MunicipalitySearch extends Component<Props, State> {
           )
           this.setState({
             isLoading: false,
-            error: 'error.municipalitiesNotDownloaded'
+            error: 'error.municipalitiesNotDownloaded',
           })
         } else {
           throw error
@@ -369,7 +454,7 @@ export class MunicipalitySearch extends Component<Props, State> {
   /** Component mounting */
   public componentDidMount() {
     // Download municipalities list
-    this.getMunicipalitiesData().then(data => {
+    this.getMunicipalitiesData().then((data) => {
       // set the municipalities that have the same GDENR, ORTNAME and PLZ4 as the ones in localStorage as results
       let locallyStoredMunicipalitiesArray
       try {
@@ -387,30 +472,34 @@ export class MunicipalitySearch extends Component<Props, State> {
           locallyStoredMunicipalitiesArray
         ) as Municipality[]
         const allBfsIdsAndNames = parsed.map(
-          muni => muni.GDENR + muni.ORTNAME + muni.PLZ4
+          (muni) => muni.GDENR + muni.ORTNAME + muni.PLZ4
         )
         const filteredFromFetchedData: Municipality[] = data.filter(
           (muni: Municipality) =>
             allBfsIdsAndNames.includes(muni.GDENR + muni.ORTNAME + muni.PLZ4)
         )
         // sort before deduplication
-        filteredFromFetchedData.sort((a, b) =>{
-          return allBfsIdsAndNames.indexOf((a.GDENR + a.ORTNAME + a.PLZ4)) - allBfsIdsAndNames.indexOf((b.GDENR + b.ORTNAME + b.PLZ4))
-        } )
-          // always dedupe bc. sometimes there is duplicate data in the jsons
-         const  dedupedData =  [ ...new Map(
-            filteredFromFetchedData.slice().reverse().map((muni: Municipality) => [
-              muni.GDENR + muni.ORTNAME + (this.props.dedupe ? "" : muni.PLZ4),
-              muni,
-            ])
-          ).values()].reverse()
+        filteredFromFetchedData.sort((a, b) => {
+          return (
+            allBfsIdsAndNames.indexOf(a.GDENR + a.ORTNAME + a.PLZ4) -
+            allBfsIdsAndNames.indexOf(b.GDENR + b.ORTNAME + b.PLZ4)
+          )
+        })
+        // always dedupe bc. sometimes there is duplicate data in the jsons
+        const dedupedData = this.deduplicateMunicipalityArray(
+          filteredFromFetchedData
+        )
+        
         // sort the dedupedData in the same order as in the localStorage
-        dedupedData.sort((a, b) =>{
-          return allBfsIdsAndNames.indexOf((a.GDENR + a.ORTNAME + a.PLZ4)) - allBfsIdsAndNames.indexOf((b.GDENR + b.ORTNAME + b.PLZ4))
-        } )
-        const muniCount = this.props.numberOfLastSelectedMunicipalities
+        dedupedData.sort((a, b) => {
+          return (
+            allBfsIdsAndNames.indexOf(a.GDENR + a.ORTNAME + a.PLZ4) -
+            allBfsIdsAndNames.indexOf(b.GDENR + b.ORTNAME + b.PLZ4)
+            )
+          })
+          const muniCount = this.props.numberOfLastSelectedMunicipalities
         this.setState({
-          results: dedupedData.slice(0, muniCount)
+          results: dedupedData.slice(0, muniCount),
         })
       }
     })
@@ -488,7 +577,7 @@ export class MunicipalitySearch extends Component<Props, State> {
                   this.state.error ? 'red' : 'basic grey'
                 } ${labelDirection} label`}
               >
-                {labelContent()}
+                {String(labelContent())}
               </label>
             </div>
           )}
@@ -513,13 +602,13 @@ export class MunicipalitySearch extends Component<Props, State> {
                       this.props.onSelectionHandler(result)
                       // this.sendToDataPipeline(result.PLZ4)
                       if (this.props.showLastSelectedMunicipalities) {
-                        this.pushToLocalStorageArray(result)
+                        this.saveToSelectedMunicipalities(result)
                       }
                       if (this.props.resetOnSelect) {
                         this.resetComponent()
                       }
                     }}
-                    onKeyUp={e => {
+                    onKeyUp={(e) => {
                       if (e.key === 'Enter' || e.key === 'Space') {
                         this.props.onSelectionHandler(result)
                         // this.sendToDataPipeline(result.PLZ4)
@@ -537,7 +626,9 @@ export class MunicipalitySearch extends Component<Props, State> {
                       {result.ORTNAME}
                     </ResultHeader>
                     <ResultMeta className='resultMeta'>
-                      {t('list.municipalityPrefix')} {result.GDENAMK}
+                      <>
+                        {t('list.municipalityPrefix')} {result.GDENAMK}
+                      </>
                     </ResultMeta>
                   </animated.div>
                 )}