Merged in fix/sw-1177-search-history (pull request #1124)

fix(SW-1177): fix localization problems in search history

* fix(SW-1177): fix localization problems in search history

When saving search history the whole location objects where stored and
also used later. This made the list display in different languages if
the user previously had search for something in another language.
Another issue where that the list where also deduped based on name of
the search item, which meant that there could be multiple history
items for the same entity and the same ID, e.g. `Gothenburg` and
`Göteborg`.


Approved-by: Bianca Widstam

components/Forms/BookingWidget/FormContent/Search/index.tsx

@@ -26,8 +26,8 @@ import {
   ActionType,
   type SetStorageData,
 } from "@/types/components/form/bookingwidget"
-import type { SearchProps } from "@/types/components/search"
-import type { Location } from "@/types/trpc/routers/hotel/locations"
+import type { SearchHistoryItem, SearchProps } from "@/types/components/search"
+import type { Location, Locations } from "@/types/trpc/routers/hotel/locations"
 
 const name = "search"
 
@@ -99,23 +99,30 @@ export default function Search({ locations, handlePressEnter }: SearchProps) {
       sessionStorage.setItem(sessionStorageKey, stringified)
       setValue(name, selectedItem.name)
 
-      const searchHistoryMap = new Map()
-      searchHistoryMap.set(selectedItem.name, selectedItem)
-      if (state.searchHistory) {
-        state.searchHistory.forEach((location) => {
-          searchHistoryMap.set(location.name, location)
-        })
+      const newHistoryItem: SearchHistoryItem = {
+        type: selectedItem.type,
+        id: selectedItem.id,
       }
+      const oldSearchHistoryWithoutTheNew =
+        state.searchHistory?.filter(
+          (h) => h.type !== newHistoryItem.type || h.id !== newHistoryItem.id
+        ) ?? []
+      const oldHistoryItems = oldSearchHistoryWithoutTheNew.map((h) => ({
+        id: h.id,
+        type: h.type,
+      }))
 
-      const searchHistory: Location[] = []
-      searchHistoryMap.forEach((location) => {
-        searchHistory.push(location)
-      })
+      const searchHistory = [newHistoryItem, ...oldHistoryItems]
       localStorage.setItem(localStorageKey, JSON.stringify(searchHistory))
+
+      const enhancedSearchHistory: Locations = [
+        ...getEnhancedSearchHistory([newHistoryItem], locations),
+        ...oldSearchHistoryWithoutTheNew,
+      ]
       dispatch({
         payload: {
           location: selectedItem,
-          searchHistory,
+          searchHistory: enhancedSearchHistory,
         },
         type: ActionType.SELECT_ITEM,
       })
@@ -132,13 +139,16 @@ export default function Search({ locations, handlePressEnter }: SearchProps) {
       payload.searchData = JSON.parse(searchData)
     }
     if (searchHistory) {
-      payload.searchHistory = JSON.parse(searchHistory)
+      payload.searchHistory = getEnhancedSearchHistory(
+        JSON.parse(searchHistory),
+        locations
+      )
     }
     dispatch({
       payload,
       type: ActionType.SET_STORAGE_DATA,
     })
-  }, [dispatch])
+  }, [dispatch, locations])
 
   const stayType = state.searchData?.type === "cities" ? "city" : "hotel"
   const stayValue =
@@ -261,9 +271,27 @@ export function SearchSkeleton() {
           <span>{intl.formatMessage({ id: "Where to" })}</span>
         </Caption>
       </div>
-      <div className={styles.input}>
+      <div>
         <SkeletonShimmer width={"100%"} />
       </div>
     </div>
   )
 }
+
+/**
+ * Takes a stored search history and returns the same history, but with the same
+ * data and the same format as the complete location objects
+ */
+function getEnhancedSearchHistory(
+  searchHistory: SearchHistoryItem[],
+  locations: Locations
+): Locations {
+  return searchHistory
+    .map((historyItem) =>
+      locations.find(
+        (location) =>
+          location.type === historyItem.type && location.id === historyItem.id
+      )
+    )
+    .filter((r) => !!r) as Locations
+}

types/components/search.ts

@@ -9,6 +9,11 @@ export interface SearchProps {
   handlePressEnter: () => void
 }
 
+export type SearchHistoryItem = {
+  type: "cities" | "hotels"
+  id: string
+}
+
 type HighlightedIndex = number | null
 
 export interface SearchListProps {