2992 Add findMatchingSelection

Author: hannaseithe

native/src/components/CityEntry.tsx

@@ -3,7 +3,7 @@ import { Text } from 'react-native'
 import Highlighter from 'react-native-highlight-words'
 import styled from 'styled-components/native'
 
-import { normalizeString } from 'shared'
+import { findBoldSections, normalizeString } from 'shared'
 import { CityModel } from 'shared/api'
 
 import { AppContext } from '../contexts/AppContextProvider'
@@ -65,6 +65,7 @@ const CityEntry = ({ city, query, navigateToDashboard }: CityEntryProps): ReactE
               textToHighlight={it}
               autoEscape
               sanitize={normalizeString}
+              findChunks={findBoldSections}
               highlightStyle={{
                 fontWeight: 'bold',
               }}
@@ -99,6 +100,7 @@ const CityEntry = ({ city, query, navigateToDashboard }: CityEntryProps): ReactE
           autoEscape
           textToHighlight={city.name}
           sanitize={normalizeString}
+          findChunks={findBoldSections}
           highlightStyle={{
             fontWeight: 'bold',
           }}

shared/index.ts

@@ -13,6 +13,7 @@ export * from './utils/licences'
 export * from './utils/pois'
 export * from './utils/replaceLinks'
 export * from './utils/normalizeString'
+export * from './utils/findMatchingSections'
 export * from './utils'
 export * from './tracking'
 export * from './constants/maps'

shared/utils/__tests__/findMatchingSections.spec.ts

@@ -0,0 +1,36 @@
+import { findMatchingSections } from '../findMatchingSections'
+
+describe('findMatchingSections', () => {
+  it('should find sections with ß', () => {
+    expect(findMatchingSections({ searchWords: ['ß'], textToHighlight: 'aßaßaß' })).toEqual([
+      { start: 1, end: 2 },
+      { start: 3, end: 4 },
+      { start: 5, end: 6 },
+    ])
+    expect(findMatchingSections({ searchWords: ['ß'], textToHighlight: 'wasserstraße' })).toEqual([
+      { start: 2, end: 4 },
+      { start: 10, end: 11 },
+    ])
+  })
+  it('should find sections with ss', () => {
+    expect(findMatchingSections({ searchWords: ['ss'], textToHighlight: 'aßaßaß' })).toEqual([
+      { start: 1, end: 2 },
+      { start: 3, end: 4 },
+      { start: 5, end: 6 },
+    ])
+    expect(findMatchingSections({ searchWords: ['ss'], textToHighlight: 'wasserstraße' })).toEqual([
+      { start: 2, end: 4 },
+      { start: 10, end: 11 },
+    ])
+  })
+  it('should find sections of words', () => {
+    expect(findMatchingSections({ searchWords: ['straße'], textToHighlight: 'Strassenstraße' })).toEqual([
+      { start: 0, end: 7 },
+      { start: 8, end: 14 },
+    ])
+    expect(findMatchingSections({ searchWords: ['städt'], textToHighlight: 'stadt städtchen' })).toEqual([
+      { start: 0, end: 5 },
+      { start: 6, end: 11 },
+    ])
+  })
+})

shared/utils/findMatchingSections.ts

@@ -0,0 +1,70 @@
+import normalizeString from './normalizeString'
+
+const mapReplacedString = (
+  text: string,
+  map: [string, string][],
+): { sanitizedText: string; replacementMap: number[] } => {
+  let transformed = ''
+  const repMap: number[] = []
+  let i = 0
+  let matcher
+  while (i < text.length) {
+    const findMatch = (index: number) => (element: [string, string]) => text.startsWith(element[0], index)
+
+    matcher = map.find(findMatch(i))
+    if (matcher) {
+      transformed += matcher[1]
+      repMap.push(...Array(matcher[1].length).fill(i))
+      i += matcher[0].length
+    } else {
+      transformed += text[i]
+      repMap.push(i)
+      i += 1
+    }
+  }
+  return {
+    sanitizedText: transformed,
+    replacementMap: repMap,
+  }
+}
+
+export const findMatchingSections = ({
+  searchWords,
+  textToHighlight,
+}: {
+  searchWords: (string | RegExp)[]
+  textToHighlight: string
+}): { start: number; end: number }[] => {
+  const { sanitizedText, replacementMap } = mapReplacedString(normalizeString(textToHighlight), [['ß', 'ss']])
+
+  let result: { start: number; end: number }[] = []
+  if (replacementMap.length > 0) {
+    searchWords.forEach((word: string | RegExp) => {
+      let matches: { start: number; end: number }[] = []
+      if (typeof word === 'string' && word !== '') {
+        const sanitizedWord = normalizeString(word).replace('ß', 'ss')
+        const regex = new RegExp(sanitizedWord, 'gi')
+
+        matches = [...sanitizedText.matchAll(regex)].map(match => {
+          const start = replacementMap[match.index]
+          const end = replacementMap[match.index + match[0].length] ?? textToHighlight.length
+          if (start !== undefined && !Number.isNaN(start) && !Number.isNaN(end)) {
+            return {
+              start,
+              end,
+            }
+          }
+          return { start: 0, end: 0 }
+        })
+      }
+
+      if (matches.length > 0) {
+        result = result.concat(matches)
+      }
+    })
+  }
+
+  return result
+}
+
+export default findMatchingSections

shared/utils/search.ts

@@ -1,18 +1,19 @@
 import CityModel from '../api/models/CityModel'
-import normalizeString from './normalizeString'
+import { normalizeString } from './normalizeString'
 
 const cityFilter =
   (filterText: string, developerFriendly: boolean) =>
   (cityModel: CityModel): boolean => {
-    const normalizedFilter = normalizeString(filterText)
-
+    const normalizedFilter = normalizeString(filterText).replace('ß', 'ss')
     if (normalizedFilter === 'wirschaffendas') {
       return !cityModel.live
     }
 
     const validCity = cityModel.live || developerFriendly
     const aliases = Object.keys(cityModel.aliases ?? {})
-    const matchesFilter = [cityModel.name, ...aliases].some(it => normalizeString(it).includes(normalizedFilter))
+    const matchesFilter = [cityModel.name, ...aliases].some(it =>
+      normalizeString(it).replace('ß', 'ss').includes(normalizedFilter),
+    )
     return validCity && matchesFilter
   }
 

web/src/components/CityEntry.tsx

@@ -3,7 +3,7 @@ import Highlighter from 'react-highlight-words'
 import { Link } from 'react-router-dom'
 import styled, { useTheme } from 'styled-components'
 
-import { cityContentPath, normalizeString } from 'shared'
+import { cityContentPath, normalizeString, findMatchingSections } from 'shared'
 import { CityModel } from 'shared/api'
 
 const MAX_NUMBER_OF_ALIASES = 3
@@ -35,10 +35,10 @@ type CityEntryProps = {
 
 const CityEntry = ({ filterText, city, language }: CityEntryProps): ReactElement => {
   const theme = useTheme()
-  const normalizedFilter = normalizeString(filterText)
+  const normalizedFilter = normalizeString(filterText).replace('ß', 'ss')
   const aliases =
     city.aliases && normalizedFilter.length >= 1
-      ? Object.keys(city.aliases).filter(alias => normalizeString(alias).includes(normalizedFilter))
+      ? Object.keys(city.aliases).filter(alias => normalizeString(alias).replace('ß', 'ss').includes(normalizedFilter))
       : []
 
   return (
@@ -48,6 +48,7 @@ const CityEntry = ({ filterText, city, language }: CityEntryProps): ReactElement
         sanitize={normalizeString}
         aria-label={city.name}
         textToHighlight={city.name}
+        findChunks={findMatchingSections}
         autoEscape
         highlightStyle={{ backgroundColor: theme.colors.backgroundColor, fontWeight: 'bold' }}
       />
@@ -59,6 +60,7 @@ const CityEntry = ({ filterText, city, language }: CityEntryProps): ReactElement
               searchWords={[filterText]}
               sanitize={normalizeString}
               textToHighlight={alias}
+              findChunks={findMatchingSections}
               autoEscape
               highlightStyle={{ backgroundColor: theme.colors.backgroundColor, fontWeight: 'bold' }}
             />