feat: SW-693 Moved borwser storage code in useEffect of component

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

@@ -5,6 +5,7 @@ import {
   FocusEvent,
   FormEvent,
   useCallback,
+  useEffect,
   useReducer,
 } from "react"
 import { useFormContext, useWatch } from "react-hook-form"
@@ -28,10 +29,9 @@ export default function Search({ locations }: SearchProps) {
   const { register, setValue, trigger } = useFormContext<BookingWidgetSchema>()
   const intl = useIntl()
   const value = useWatch({ name })
-  const searchData = useWatch({ name: "location" })
   const [state, dispatch] = useReducer(
     reducer,
-    { defaultLocations: locations, searchData },
+    { defaultLocations: locations },
     init
   )
 
@@ -114,6 +114,17 @@ export default function Search({ locations }: SearchProps) {
     }
   }
 
+  useEffect(() => {
+    state.searchData =
+      typeof window !== "undefined"
+        ? JSON.parse(sessionStorage.getItem(sessionStorageKey) || "")
+        : undefined
+    state.searchHistory =
+      typeof window !== "undefined"
+        ? JSON.parse(localStorage.getItem(localStorageKey) || "")
+        : null
+  }, [state])
+
   return (
     <Downshift
       initialSelectedItem={state.searchData}

components/Forms/BookingWidget/FormContent/Search/reducer.ts

@@ -4,33 +4,18 @@ import {
   type InitState,
   type State,
 } from "@/types/components/form/bookingwidget"
-import type { Location, Locations } from "@/types/trpc/routers/hotel/locations"
+import type { Locations } from "@/types/trpc/routers/hotel/locations"
 
 export const localStorageKey = "searchHistory"
-export function getSearchHistoryFromLocalStorage() {
-  if (typeof window !== "undefined") {
-    const storageSearchHistory = window.localStorage.getItem(localStorageKey)
-    if (storageSearchHistory) {
-      const parsedStorageSearchHistory: Locations =
-        JSON.parse(storageSearchHistory)
-      if (parsedStorageSearchHistory?.length) {
-        return parsedStorageSearchHistory
-      }
-    }
-  }
-  return null
-}
-
 export const sessionStorageKey = "searchData"
 
 export function init(initState: InitState): State {
-  const searchHistory = getSearchHistoryFromLocalStorage()
   return {
     defaultLocations: initState.defaultLocations,
     locations: [],
     search: "",
-    searchData: initState.searchData,
+    searchData: undefined,
-    searchHistory,
+    searchHistory: null,
   }
 }
 

types/components/form/bookingwidget.ts

@@ -60,5 +60,4 @@ export interface State {
   searchHistory: Locations | null
 }
 
-export interface InitState
+export interface InitState extends Pick<State, "defaultLocations"> {}
-  extends Pick<State, "defaultLocations" | "searchData"> {}