@ta-interaktiv/react-municipality-search 1.4.1 → 1.5.3

package/src/municipalitySearch.tsx

@@ -3,12 +3,9 @@ import React, { ChangeEvent, Component } from 'react'
 import '@ta-interaktiv/semantic-ui/semantic/dist/components/icon.css'
 import '@ta-interaktiv/semantic-ui/semantic/dist/components/input.css'
 import '@ta-interaktiv/semantic-ui/semantic/dist/components/label.css'
-import styles from './styles.module.css'
-import {
-  animated,
-  config as springConfig,
-  Transition,
-} from 'react-spring'
+// import './styles.scss'
+import styled from 'styled-components'
+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'
@@ -133,7 +130,7 @@ export class MunicipalitySearch extends Component<Props, State> {
   public static defaultProps = {
     municipalityData: '2021v3',
     locale: 'de',
-    numberOfLastSelectedMunicipalities: 1,
+    numberOfLastSelectedMunicipalities: 1
   }
 
   public state = {
@@ -141,14 +138,14 @@ export class MunicipalitySearch extends Component<Props, State> {
     results: [],
     value: '',
     error: null,
-    municipalities: [],
+    municipalities: []
   }
 
   private resetComponent = () => {
     this.setState({
       isLoading: false,
       results: [],
-      value: '',
+      value: ''
     })
   }
 
@@ -205,7 +202,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}`
       })
     }
 
@@ -217,7 +214,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 {
@@ -276,48 +273,57 @@ 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) => {
-    const localStorageItemName =
-      'selectedMunicipalities_' + this.props.municipalityData
-    const prevSelectedMunicipalities =
-      localStorage.getItem(localStorageItemName) ?? JSON.stringify([])
-    const newArray = JSON.parse(prevSelectedMunicipalities)
+    let prevSelectedMunicipalities
+    let newArray: Municipality[] = []
+    const localStorageItemName = 'selectedMunicipalities'
+    try {
+      prevSelectedMunicipalities =
+        localStorage.getItem(localStorageItemName) ?? JSON.stringify([])
+      newArray = JSON.parse(prevSelectedMunicipalities)
+    } catch {
+      console.warn('🗄 localStorage is not available')
+    }
     // limit the number of stored municipalities
     const slicedArray = newArray.slice(0, 15)
     slicedArray.unshift(newMuni)
-    // deduplicate the array and stringify it for localStorage
-    localStorage.setItem(
-      localStorageItemName,
-      JSON.stringify([
-        ...new Map(
-          slicedArray.map((muni: Municipality) => [
-            muni.ORTNAME + muni.GDENR,
-            muni,
-          ])
-        ).values(),
-      ])
-    )
+    try {
+      // deduplicate the array and stringify it for localStorage
+      localStorage.setItem(
+        localStorageItemName,
+        JSON.stringify([
+          ...new Map(
+            slicedArray.map((muni: Municipality) => [
+              muni.ORTNAME + muni.GDENR,
+              muni
+            ])
+          ).values()
+        ])
+      )
+    } catch {
+      console.warn('🗄 localStorage is not writeable')
+    }
   }
 
   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}.`
@@ -325,13 +331,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(
@@ -342,7 +349,7 @@ export class MunicipalitySearch extends Component<Props, State> {
           )
           this.setState({
             isLoading: false,
-            error: 'error.municipalitiesNotDownloaded',
+            error: 'error.municipalitiesNotDownloaded'
           })
         } else {
           throw error
@@ -361,24 +368,31 @@ export class MunicipalitySearch extends Component<Props, State> {
 
   /** Component mounting */
   public componentDidMount() {
-    // set the municipalities from localStorage as results
-    const locallyStoredMunicipalitiesArray = localStorage.getItem(
-      'selectedMunicipalities_' + this.props.municipalityData
-    )
-    if (
-      this.props.showLastSelectedMunicipalities &&
-      locallyStoredMunicipalitiesArray
-    ) {
-      const parsed = JSON.parse(
-        locallyStoredMunicipalitiesArray
-      ) as Municipality[]
-      const muniCount = this.props.numberOfLastSelectedMunicipalities ?? 1
-      this.setState({ results: parsed.slice(0, muniCount) })
-    }
-
     // Download municipalities list
     // This is a preliminary measure, before we get a proper API
-    this.getMunicipalitiesData()
+    this.getMunicipalitiesData().then(data => {
+      // set the municipalities from localStorage as results
+      let locallyStoredMunicipalitiesArray
+      try {
+        locallyStoredMunicipalitiesArray = localStorage.getItem(
+          'selectedMunicipalities'
+        )
+      } catch {
+        console.warn('🗄 localStorage is not available')
+      }
+      if (
+        this.props.showLastSelectedMunicipalities &&
+        locallyStoredMunicipalitiesArray
+      ) {
+        const parsed = JSON.parse(
+          locallyStoredMunicipalitiesArray
+        ) as Municipality[]
+        const allIDs = data.map(muni => muni.GDENR)
+        const filtered = parsed.filter(muni => allIDs.includes(muni.GDENR))
+        const muniCount = this.props.numberOfLastSelectedMunicipalities ?? 3
+        this.setState({ results: filtered.slice(0, muniCount) })
+      }
+    })
   }
 
   public render() {
@@ -414,13 +428,13 @@ export class MunicipalitySearch extends Component<Props, State> {
       : 'left pointing'
 
     return (
-      <div className={`municipality-search ${styles.municipalitySearch}`}>
-        <div className={styles.inputRow}>
+      <MunicipalitySearchContainer className='municipality-search'>
+        <InputRow className='inputRow'>
           <div className='ui left icon input'>
-            <input
+            <FlexInput
               id='search'
               type='text'
-              className={`prompt ${styles.flexInput}`}
+              className='prompt flexInput'
               placeholder={
                 this.props.placeholder || (t('placeholder') as string)
               }
@@ -430,7 +444,20 @@ export class MunicipalitySearch extends Component<Props, State> {
               }
               onChange={this.handleSearchChange}
             />
-            <i className='search icon' />
+            <Icon>
+              <svg
+                width='18'
+                height='18'
+                viewBox='0 0 18 18'
+                fill='none'
+                xmlns='http://www.w3.org/2000/svg'
+                stroke='black'
+                strokeWidth='3'
+              >
+                <circle cx='7.5' cy='7.5' r='6' />
+                <line x1='11' y1='11' x2='17' y2='17' />
+              </svg>
+            </Icon>
           </div>
           {!this.props.hideTooltip && (
             <div>
@@ -444,9 +471,9 @@ export class MunicipalitySearch extends Component<Props, State> {
               </label>
             </div>
           )}
-        </div>
+        </InputRow>
         {showResults(results) && (
-          <div className={`results ${styles.results}`}>
+          <Results className='results'>
             {showResults(results) && (
               <Transition
                 native
@@ -459,48 +486,110 @@ export class MunicipalitySearch extends Component<Props, State> {
                 leave={{ transform: 'translate(0, 60px)', opacity: 0 }}
                 config={springConfig.gentle}
               >
-                {(values, result)  =>
-                  (
-                    <animated.div
-                      onClick={() => {
+                {(values, result) => (
+                  <animated.div
+                    onClick={() => {
+                      this.props.onSelectionHandler(result)
+                      // this.sendToDataPipeline(result.PLZ4)
+                      if (this.props.showLastSelectedMunicipalities) {
+                        this.pushToLocalStorageArray(result)
+                      }
+                      if (this.props.resetOnSelect) {
+                        this.resetComponent()
+                      }
+                    }}
+                    onKeyUp={e => {
+                      if (e.key === 'Enter' || e.key === 'Space') {
                         this.props.onSelectionHandler(result)
                         // this.sendToDataPipeline(result.PLZ4)
-                        if (this.props.showLastSelectedMunicipalities) {
-                          this.pushToLocalStorageArray(result)
-                        }
                         if (this.props.resetOnSelect) {
                           this.resetComponent()
                         }
-                      }}
-                      onKeyUp={(e) => {
-                        if (e.key === 'Enter' || e.key === 'Space') {
-                          this.props.onSelectionHandler(result)
-                          // this.sendToDataPipeline(result.PLZ4)
-                          if (this.props.resetOnSelect) {
-                            this.resetComponent()
-                          }
-                        }
-                      }}
-                      className={`result ${styles.result}`}
-                      style={values}
-                      tabIndex={0}
-                    >
-                      <div className={styles.resultHeader}>
-                        <span className={styles.resultPlz}>{result.PLZ4}</span>{' '}
-                        {result.ORTNAME}
-                      </div>
-                      <div className={styles.resultMeta}>
-                        {t('list.municipalityPrefix')} {result.GDENAMK}
-                      </div>
-                    </animated.div>
-                  )}
+                      }
+                    }}
+                    className='result'
+                    style={values}
+                    tabIndex={0}
+                  >
+                    <ResultHeader className='resultHeader'>
+                      <ResultPlz className='resultPlz'>{result.PLZ4}</ResultPlz>{' '}
+                      {result.ORTNAME}
+                    </ResultHeader>
+                    <ResultMeta className='resultMeta'>
+                      {t('list.municipalityPrefix')} {result.GDENAMK}
+                    </ResultMeta>
+                  </animated.div>
+                )}
               </Transition>
             )}
-          </div>
+          </Results>
         )}
-      </div>
+      </MunicipalitySearchContainer>
     )
   }
 
   // endregion
 }
+const Icon = styled.i`
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  padding-left: 0.8em;
+  opacity: 0.5;
+  transition: opacity 0.5s ease-in-out;
+`
+const MunicipalitySearchContainer = styled.div``
+const InputRow = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  input:focus ~ i {
+    opacity: 1;
+  }
+  @media screen and (max-width: 599px) {
+    flex-direction: column;
+    .ui.input {
+      width: 100%;
+      max-width: 100%;
+    }
+  }
+`
+const FlexInput = styled.input`
+  display: flex;
+`
+const Results = styled.div`
+  margin-top: 1ex;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
+  grid-gap: 0;
+  font-family: var(--ui-font-stack);
+  .result {
+    padding: calc(11 / 16 * 1em) calc(14 / 16 * 1em);
+    border-radius: 0.2ex;
+    box-shadow: 0 0 0 rgba(0, 0, 0, 0.3);
+    //border: 1px solid #007abf;
+    color: rgba(0, 0, 0, 0.9);
+    line-height: 1.1em;
+    cursor: pointer;
+    transition: box-shadow 200ms ease-in-out;
+    background-color: transparent;
+
+    &:hover,
+    &:focus {
+      box-shadow: 0 0 0.5ex rgba(0, 0, 0, 0.2), 0 0 0 1px #007abf inset;
+      background-color: $backgroundColor;
+    }
+  }
+`
+const ResultHeader = styled.div`
+  font-weight: 700;
+`
+const ResultPlz = styled.span`
+  opacity: 0.5;
+  font-weight: 400;
+`
+const ResultMeta = styled.div`
+  opacity: 0.66;
+  font-size: 0.9em;
+`

package/src/styles.module.css

@@ -1,77 +0,0 @@
-/* IDENTIFICATOR STYLES */
-
-
-.flexInput {
-  display: flex;
-}
-
-
-.municipalitySearch {
-  --backgroundColor: rgba(255, 255, 255, 0.95);
-}
-
-
-.inputRow {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-
-
-  @media screen and (max-width: 599px) {
-    flex-direction: column;
-
-
-    :global .ui.input {
-      width: 100%;
-      max-width: 100%;
-    }
-  }
-}
-
-
-.results {
-  margin-top: 1ex;
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
-  grid-gap: 0;
-  font-family: var(--ui-font-stack);
-}
-
-
-.result {
-  padding: calc(11 / 16 * 1em) calc(14 / 16 * 1em);
-  border-radius: 0.2ex;
-  box-shadow: 0 0 0 rgba(0, 0, 0, 0.3);
-  /* //border: 1px solid #007abf; */
-  color: rgba(0, 0, 0, 0.9);
-  line-height: 1.1em;
-  cursor: pointer;
-  transition: box-shadow 200ms ease-in-out;
-  background-color: transparent;
-
-
-  
-}
-.result:hover,
-.result:focus {
-    box-shadow: 0 0 0.5ex rgba(0, 0, 0, 0.2), 0 0 0 1px #007abf inset;
-    background-color: var(--backgroundColor);
-  }
-
-
-.resultHeader {
-  font-weight: 700;
-}
-
-
-.resultPlz {
-  opacity: 0.5;
-  font-weight: 400;
-}
-
-
-.resultMeta {
-  opacity: 0.66;
-  font-size: 0.9em;
-}
-