feat(Search): Add text and categories search

src/components/Map/index.tsx

@@ -30,10 +30,7 @@
 import { useMapHighlightMarker } from '@lib/hooks/useMapHighlightMarker'
 import { useMaplibreMap } from '@lib/hooks/useMaplibreMap'
 import { useFiltersWithActiveProp } from '@lib/hooks/useFiltersWithActiveProp'
-import {
-  getActiveLabelGroups,
-  isFaclilityActive,
-} from '@lib/facilityFilterUtil'
+import { getActiveLabelGroups, isFacilityActive } from '@lib/facilityFilterUtil'
 import { useActiveIdsBySearchTerm } from '@lib/hooks/useActiveIdsBySearchTerm'
 
 interface MapType {
@@ -184,13 +181,13 @@
 
   const updateFilteredFacilities = useCallback(() => {
     if (!map || !markers || !mapLayersLoaded) return
-    const { activeTopcisLabels, activeTargetLabels } =
+    const { activeTopicsLabels, activeTargetLabels } =
       getActiveLabelGroups(labels)
     markers.forEach((marker) => {
-      const active = isFaclilityActive({
+      const active = isFacilityActive({
         facilityId: marker.id,
         facilityLabels: marker.labels,
-        activeTopcisLabels,
+        activeTopicsLabels,
         activeTargetLabels,
         activeIdsBySearchTerm: activeIdsBySearchTerm.ids,
       })
@@ -289,7 +286,7 @@
       })
       setIsSpiderfied(true)
     }
   }, [query.id, markers, map])
 
   useEffect(() => {
     if (!mapStylesLoaded || !markers || !map) return

src/components/TextSearch.tsx

@@ -11,7 +11,7 @@ type CategoriesType = Partial<{
   categoryAdvising: boolean
   categoryClinics: boolean
   categoryOnlineOffers: boolean
-  categoryDisctrictOfficeHelp: boolean
+  categoryDistrictOfficeHelp: boolean
 }>
 interface StateType {
   text: string
@@ -152,7 +152,7 @@ export const getCategoriesTexts = (
     categoryAdvising: texts.textSearchCategoryAdvising,
     categoryClinics: texts.textSearchCategoryClinics,
     categoryOnlineOffers: texts.textSearchCategoryOnlineOffers,
-    categoryDisctrictOfficeHelp: texts.textSearchCategoryDisctrictOfficeHelp,
+    categoryDistrictOfficeHelp: texts.textSearchcategoryDistrictOfficeHelp,
   }
 }
 

src/lib/TextsContext.tsx

@@ -124,7 +124,7 @@ const defaultValue = {
   textSearchCategoryAdvising: '',
   textSearchCategoryClinics: '',
   textSearchCategoryOnlineOffers: '',
-  textSearchCategoryDisctrictOfficeHelp: '',
+  textSearchcategoryDistrictOfficeHelp: '',
   optionalFurtherSearchIntroText: '',
   filtersButtonLoading: '',
 }

src/lib/UrlStateContext.tsx

@@ -15,7 +15,7 @@ type ParsedSearchTermCategoriesType = {
   categorySelfHelp: boolean
   categoryAdvising: boolean
   categoryClinics: boolean
-  categoryDisctrictOfficeHelp: boolean
+  categoryDistrictOfficeHelp: boolean
   categoryOnlineOffers: boolean
 }
 
@@ -34,48 +34,28 @@ export const useUrlState = (): [PageQueryType, SetUrlStateHandlerType] =>
 export const UrlStateProvider: FC = ({ children }) => {
   const { query, pathname } = useRouter()
   const mappedQuery = mapRawQueryToState(query)
-  const [latitude, setLatitude] = useState<number | undefined>(
-    mappedQuery.latitude
-  )
-  const [longitude, setLongitude] = useState<number | undefined>(
-    mappedQuery.longitude
-  )
-  const [zoom, setZoom] = useState<number | undefined>(mappedQuery.zoom)
-  const [tags, setTags] = useState<number[] | undefined>(mappedQuery.tags)
-  const [back, setBack] = useState<string | undefined>(mappedQuery.back)
-  const [q, setQ] = useState<string | undefined>(mappedQuery.q)
-  const [qCategories, setQCategories] = useState<
-    PageQueryType['qCategories'] | undefined
-  >(mappedQuery.qCategories)
+  const [latitude, setLatitude] = useState(mappedQuery.latitude)
+  const [longitude, setLongitude] = useState(mappedQuery.longitude)
+  const [zoom, setZoom] = useState(mappedQuery.zoom)
+  const [tags, setTags] = useState(mappedQuery.tags)
+  const [back, setBack] = useState(mappedQuery.back)
+  const [q, setQ] = useState(mappedQuery.q)
+  const [qCategories, setQCategories] = useState(mappedQuery.qCategories)
 
-  const updateUrlState = useCallback(
-    (newState: PageQueryType) => {
-      const path = typeof query.id === 'string' ? `/${query.id}` : pathname
-      const state = removeFalsyFromQuery({
-        latitude,
-        longitude,
-        zoom,
-        tags,
-        qCategories,
-        back,
-        q,
-        ...newState,
-      })
-      state.q = truncateSearchTerm(state.q)
-      const paramsString = new URLSearchParams(
-        state as Record<string, string>
-      ).toString()
-      const as = [path, paramsString].filter(Boolean).join('?')
-      window.history.replaceState(
-        {
-          ...window.history.state,
-          ...state,
-          as,
-          url: as,
-        },
-        '',
-        as
-      )
+  // GET A COMBINED STATE OBJECT WITH APPLIED DEFAULTS
+  const state = getFormattedUrlStateWithDefaults({
+    latitude,
+    longitude,
+    zoom,
+    tags,
+    back,
+    q,
+    qCategories,
+  })
+
+  // UTILITY FUNCTION TO UPDATE ALL REACT STATES
+  const updateReactUrlState = useCallback(
+    (state: PageQueryType) => {
       setLatitude(state.latitude)
       setLongitude(state.longitude)
       setZoom(state.zoom)
@@ -84,51 +64,53 @@ export const UrlStateProvider: FC = ({ children }) => {
       setQ(state.q)
       setQCategories(state.qCategories)
     },
-    [query.id, pathname, latitude, longitude, zoom, tags, qCategories, back, q]
+    [setLatitude, setLongitude, setZoom, setTags, setBack, setQ, setQCategories]
   )
 
-  useEffect(() => {
-    setLatitude(mappedQuery.latitude)
-    setLongitude(mappedQuery.longitude)
-    setZoom(mappedQuery.zoom)
-    setTags(mappedQuery.tags)
-    setBack(mappedQuery.back)
-    setQ(mappedQuery.q)
-    setQCategories(mappedQuery.qCategories)
+  // UTILITY FUNCTION TO UPDATE URL STATE (Passed down the context as a setter)
+  const updateUrlState = useCallback(
+    (newState: PageQueryType) => {
+      const path = typeof query.id === 'string' ? `/${query.id}` : pathname
+
+      const fullNewState = removeFalsyFromQuery({
+        ...state,
+        ...newState,
+      })
+      fullNewState.q = truncateSearchTerm(fullNewState.q)
+
+      updateStateWindowLocation(path, fullNewState)
+      updateReactUrlState(fullNewState)
+    },
+    [query.id, pathname, state, updateReactUrlState]
+  )
+
+  // UPDATE REACT STATE ON NEXTJS ROUTER QUERY CHANGE
+  useEffect(
+    () => updateReactUrlState(mappedQuery),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [query])
+    [query]
+  )
 
+  // UPADTE URL WITH DEFAULTS ON INITIAL LOAD AND PAGE CHANGE
   useEffect(() => {
     if (typeof window === 'undefined') return
-    const urlParams = new URLSearchParams(window.location.search)
-    if (!urlParams.get('qCategories')) {
-      const query = mapRawQueryToState({
-        latitude: urlParams.get('latitude') || undefined,
-        longitude: urlParams.get('longitude') || undefined,
-        zoom: urlParams.get('zoom') || undefined,
-        tags: urlParams.getAll('tags')?.join(',') || undefined,
-        back: urlParams.get('back') || undefined,
-        q: urlParams.get('q') || undefined,
+
+    const urlStateFromWindowLocation = getUrlStateFromWindowLocation()
+    const allCatergoriesAreUnselected =
+      !urlStateFromWindowLocation.qCategories?.length
+
+    if (allCatergoriesAreUnselected) {
+      updateUrlState({
+        ...urlStateFromWindowLocation,
         qCategories: stateSearchCategoriesToUrlSearchCategories({
           categorySelfHelp: true,
           categoryAdvising: true,
-        })?.join(','),
+        }),
       })
-      updateUrlState(query)
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [query.id, pathname])
 
-  const state = {
-    latitude,
-    longitude,
-    zoom,
-    tags: tags || [],
-    back,
-    q: q || '',
-    qCategories: qCategories || [],
-  }
-
   return <Provider value={[state, updateUrlState]}>{children}</Provider>
 }
 
@@ -139,7 +121,7 @@ export function urlSearchCategoriesToStateSearchCategories(
     categorySelfHelp: !!qCategories?.includes(1),
     categoryAdvising: !!qCategories?.includes(2),
     categoryClinics: !!qCategories?.includes(3),
-    categoryDisctrictOfficeHelp: !!qCategories?.includes(4),
+    categoryDistrictOfficeHelp: !!qCategories?.includes(4),
     categoryOnlineOffers: !!qCategories?.includes(5),
   }
 }
@@ -153,7 +135,59 @@ export function stateSearchCategoriesToUrlSearchCategories(
     searchTermCategories.categorySelfHelp && 1,
     searchTermCategories.categoryAdvising && 2,
     searchTermCategories.categoryClinics && 3,
-    searchTermCategories.categoryDisctrictOfficeHelp && 4,
+    searchTermCategories.categoryDistrictOfficeHelp && 4,
     searchTermCategories.categoryOnlineOffers && 5,
   ].filter(Boolean) as PageQueryType['qCategories']
 }
+
+function getUrlStateFromWindowLocation(): PageQueryType {
+  const urlParams = new URLSearchParams(window.location.search)
+  return mapRawQueryToState({
+    latitude: urlParams.get('latitude') || undefined,
+    longitude: urlParams.get('longitude') || undefined,
+    zoom: urlParams.get('zoom') || undefined,
+    tags: urlParams.getAll('tags')?.join(',') || undefined,
+    back: urlParams.get('back') || undefined,
+    q: urlParams.get('q') || undefined,
+    qCategories: urlParams.getAll('qCategories')?.join(',') || undefined,
+  })
+}
+
+function getFormattedUrlStateWithDefaults({
+  latitude,
+  longitude,
+  zoom,
+  tags,
+  back,
+  q,
+  qCategories,
+}: PageQueryType): PageQueryType {
+  return {
+    latitude,
+    longitude,
+    zoom,
+    tags: tags || [],
+    back,
+    q: q || '',
+    qCategories: qCategories || [],
+  }
+}
+
+function updateStateWindowLocation(path: string, state: PageQueryType): void {
+  const paramsString = new URLSearchParams(
+    state as Record<string, string>
+  ).toString()
+
+  const as = [path, paramsString].filter(Boolean).join('?')
+
+  window.history.replaceState(
+    {
+      ...window.history.state,
+      ...state,
+      as,
+      url: as,
+    },
+    '',
+    as
+  )
+}

src/lib/facilityFilterUtil.ts

@@ -7,9 +7,9 @@ interface GetFilteredFacilitiesPropType {
   activeIdsBySearchTerm: MinimalRecordType['id'][] | null
 }
 
-interface IsFaclilityActivePropType {
+interface isFacilityActivePropType {
   activeTargetLabels: GristLabelType[]
-  activeTopcisLabels: GristLabelType[]
+  activeTopicsLabels: GristLabelType[]
   facilityLabels: GristLabelType['id'][]
   facilityId: MinimalRecordType['id']
   activeIdsBySearchTerm: MinimalRecordType['id'][] | null
@@ -18,7 +18,7 @@ interface IsFaclilityActivePropType {
 type GetFilterStatusType = (props: {
   activeIdsBySearchTerm: MinimalRecordType['id'][] | null
   activeTargetLabels: GristLabelType[]
-  activeTopcisLabels: GristLabelType[]
+  activeTopicsLabels: GristLabelType[]
 }) => {
   isFilteredByTopic: boolean
   isFilteredByTarget: boolean
@@ -29,10 +29,10 @@ type GetFilterStatusType = (props: {
 export const getFilterStatus: GetFilterStatusType = ({
   activeIdsBySearchTerm,
   activeTargetLabels,
-  activeTopcisLabels,
+  activeTopicsLabels,
 }) => {
   const isFilteredBySearchTerm = activeIdsBySearchTerm !== null
-  const isFilteredByTopic = activeTopcisLabels.length > 0
+  const isFilteredByTopic = activeTopicsLabels.length > 0
   const isFilteredByTarget = activeTargetLabels.length > 0
   return {
     isFilteredByTopic,
@@ -49,13 +49,13 @@ export function truncateSearchTerm(searchTerm: unknown): string {
   return searchTerm.slice(0, MAX_TEXT_SEARCH_STRING_LENGTH)
 }
 
-export const isFaclilityActive = ({
+export const isFacilityActive = ({
   activeTargetLabels,
-  activeTopcisLabels,
+  activeTopicsLabels,
   facilityLabels,
   facilityId,
   activeIdsBySearchTerm,
-}: IsFaclilityActivePropType): boolean => {
+}: isFacilityActivePropType): boolean => {
   const {
     isNotFilteredAtAll,
     isFilteredByTopic,
@@ -64,11 +64,11 @@ export const isFaclilityActive = ({
   } = getFilterStatus({
     activeIdsBySearchTerm,
     activeTargetLabels,
-    activeTopcisLabels,
+    activeTopicsLabels,
   })
   if (isNotFilteredAtAll) return true
   const hasAllOfTheActiveTopics =
-    activeTopcisLabels?.every((tag) => facilityLabels.includes(tag.id)) || false
+    activeTopicsLabels?.every((tag) => facilityLabels.includes(tag.id)) || false
   const hasAnActiveTarget =
     (activeTargetLabels[0] &&
       facilityLabels.includes(activeTargetLabels[0].id)) ||
@@ -94,10 +94,10 @@ export const isFaclilityActive = ({
 export const getActiveLabelGroups = (
   labels: GristLabelType[]
 ): {
-  activeTopcisLabels: GristLabelType[]
+  activeTopicsLabels: GristLabelType[]
   activeTargetLabels: GristLabelType[]
 } => ({
-  activeTopcisLabels: labels.filter(
+  activeTopicsLabels: labels.filter(
     (f) => f.isActive && f.fields.group2 !== 'zielpublikum'
   ),
   activeTargetLabels: labels.filter(
@@ -110,19 +110,19 @@ export const getFilteredFacilities = ({
   labels,
   activeIdsBySearchTerm,
 }: GetFilteredFacilitiesPropType): MinimalRecordType[] => {
-  const { activeTopcisLabels, activeTargetLabels } =
+  const { activeTopicsLabels, activeTargetLabels } =
     getActiveLabelGroups(labels)
   const { isNotFilteredAtAll } = getFilterStatus({
     activeIdsBySearchTerm,
     activeTargetLabels,
-    activeTopcisLabels,
+    activeTopicsLabels,
   })
   if (isNotFilteredAtAll) return facilities
   return facilities.filter((facility) => {
-    return isFaclilityActive({
+    return isFacilityActive({
       facilityLabels: facility.labels,
       facilityId: facility.id,
-      activeTopcisLabels,
+      activeTopicsLabels,
       activeTargetLabels,
       activeIdsBySearchTerm,
     })