fix(#548): moved store higher to share search results btw pages (#216)

src/features/App/AuthenticatedApp.tsx

@@ -15,7 +15,7 @@ import { TeamPage } from 'features/TeamPage'
 import { MatchPage } from 'features/MatchPage'
 import { PlayerPage } from 'features/PlayerPage'
 import { TournamentPage } from 'features/TournamentPage'
-import { ExtendedSearchPage } from 'features/ExtendedSearchPage'
+import { ExtendedSearchStore, ExtendedSearchPage } from 'features/ExtendedSearchPage'
 import { LanguageSelect } from 'features/LanguageSelect'
 import { UserAccount } from 'features/UserAccount'
 import { ScoreStore, ToggleScore } from 'features/ToggleScore'
@@ -45,29 +45,31 @@ export const AuthenticatedApp = () => {
           <UserAccountForm />
         </Route>
         <UserFavoritesStore>
-          <MainWrapper>
+          <ExtendedSearchStore>
-            {!isMobile && <UserFavorites />}
+            <MainWrapper>
-            <Route exact path={PAGES.home}>
+              {!isMobile && <UserFavorites />}
-              <HomePage />
+              <Route exact path={PAGES.home}>
-            </Route>
+                <HomePage />
+              </Route>
 
-            <Route path={`/:sportName${PAGES.tournament}/:pageId`}>
+              <Route path={`/:sportName${PAGES.tournament}/:pageId`}>
-              <TournamentPage />
+                <TournamentPage />
-            </Route>
+              </Route>
 
-            <Route path={`/:sportName${PAGES.team}/:pageId`}>
+              <Route path={`/:sportName${PAGES.team}/:pageId`}>
-              <TeamPage />
+                <TeamPage />
-            </Route>
+              </Route>
-            <Route path={`/:sportName${PAGES.player}/:pageId`}>
+              <Route path={`/:sportName${PAGES.player}/:pageId`}>
-              <PlayerPage />
+                <PlayerPage />
-            </Route>
+              </Route>
-            <Route path={`/:sportName${PAGES.match}/:pageId`}>
+              <Route path={`/:sportName${PAGES.match}/:pageId`}>
-              <MatchPage />
+                <MatchPage />
-            </Route>
+              </Route>
-            <Route path={PAGES.extendedSearch}>
+              <Route path={PAGES.extendedSearch}>
-              <ExtendedSearchPage />
+                <ExtendedSearchPage />
-            </Route>
+              </Route>
-          </MainWrapper>
+            </MainWrapper>
+          </ExtendedSearchStore>
         </UserFavoritesStore>
         <Redirect to={PAGES.home} />
       </Switch>

src/features/ExtendedSearchPage/index.tsx

@@ -7,11 +7,13 @@ import { useMediaQuery } from 'features/MediaQuery'
 import { MobileHeader } from './components/MobileHeader'
 import { DesktopHeader } from './components/DesktopHeader'
 import { Results } from './components/Results'
-import { ExtendedSearchStore, useExtendedSearchStore } from './store'
+import { useExtendedSearchStore } from './store'
 
 import { Main } from './styled'
 
-const ExtendedSearch = () => {
+export { ExtendedSearchStore } from './store'
+
+export const ExtendedSearchPage = () => {
   const { searchItems } = useExtendedSearchStore()
   const isMobile = useMediaQuery({ query: devices.tablet })
   return (
@@ -27,9 +29,3 @@ const ExtendedSearch = () => {
     </Fragment>
   )
 }
-
-export const ExtendedSearchPage = () => (
-  <ExtendedSearchStore>
-    <ExtendedSearch />
-  </ExtendedSearchStore>
-)

src/features/ExtendedSearchPage/store/hooks/index.tsx

@@ -72,6 +72,14 @@ export const useExtendedSearch = () => {
     cancelSearch,
   ])
 
+  const reset = useCallback(() => {
+    setSearchItems(initialState)
+    setQuery('')
+    setSelectedSport(null)
+    setSelectedGender(null)
+    setSelectedProfile(null)
+  }, [])
+
   return {
     isFetching,
     onGenderChange,
@@ -79,6 +87,7 @@ export const useExtendedSearch = () => {
     onQueryChange,
     onSportChange: setSelectedSport,
     query,
+    reset,
     searchItems,
     selectedGender,
     selectedProfile,

src/features/Search/hooks/index.tsx

@@ -1,27 +1,18 @@
-import type { FormEvent, ChangeEvent } from 'react'
+import type { FormEvent } from 'react'
-import {
+import { useCallback, useEffect } from 'react'
-  useState,
-  useRef,
-  useCallback,
-} from 'react'
 
-import trim from 'lodash/trim'
+import { useToggle } from 'hooks'
-import debounce from 'lodash/debounce'
-import size from 'lodash/size'
 
-import type { SearchItems } from 'requests'
+import { useExtendedSearchStore } from 'features/ExtendedSearchPage/store'
-import { getSearchItems } from 'requests'
-import {
-  useRequest,
-  useToggle,
-} from 'hooks'
-
-import { SEARCH_DELAY, MIN_CHARACTERS_LENGTH } from '../config'
-import { normalizeItems } from '../helpers'
 
 export const useSearch = () => {
-  const [searchItems, setSearchItems] = useState<SearchItems>({})
+  const {
-  const abortControllerRef = useRef<AbortController | null>(null)
+    isFetching,
+    onQueryChange,
+    query,
+    reset,
+    searchItems,
+  } = useExtendedSearchStore()
 
   const {
     close,
@@ -29,58 +20,22 @@ export const useSearch = () => {
     open,
   } = useToggle()
 
-  const {
-    isFetching,
-    request: searchItemsRequest,
-  } = useRequest(getSearchItems)
-
-  const fetchSearchItems = useCallback(debounce((searchString: string) => {
-    const abortController = new window.AbortController()
-    abortControllerRef.current = abortController
-    searchItemsRequest(searchString, abortController.signal).then((data) => {
-      setSearchItems(data)
-      abortControllerRef.current = null
-    })
-  }, SEARCH_DELAY), [])
-
-  const cancelRequest = useCallback(() => {
-    const abortController = abortControllerRef.current
-
-    if (abortController) {
-      abortController.abort()
-      abortControllerRef.current = null
-    }
-  }, [])
-
-  const onChange = useCallback(({ target: { value } }: ChangeEvent<HTMLInputElement>) => {
-    const trimmedValue = trim(value)
-
-    if (size(trimmedValue) >= MIN_CHARACTERS_LENGTH) {
-      cancelRequest()
-      setSearchItems({})
-      fetchSearchItems(trimmedValue)
-      open()
-    } else {
-      close()
-    }
-  }, [
-    cancelRequest,
-    close,
-    fetchSearchItems,
-    open,
-  ])
-
   const onSubmit = useCallback((e: FormEvent<HTMLFormElement>) => {
     e.preventDefault()
   }, [])
 
+  useEffect(() => {
+    reset()
+  }, [reset])
+
   return {
     close,
     isFetching,
-    normalizedItems: normalizeItems(searchItems),
+    onChange: onQueryChange,
-    onChange,
     onFocus: open,
     onSubmit,
+    query,
+    searchItems,
     showResults: isOpen,
   }
 }

src/features/Search/index.tsx

@@ -26,14 +26,15 @@ export const Search = () => {
   const {
     close,
     isFetching,
-    normalizedItems: {
+    onChange,
+    onFocus,
+    onSubmit,
+    query,
+    searchItems: {
       players,
       teams,
       tournaments,
     },
-    onChange,
-    onFocus,
-    onSubmit,
     showResults,
   } = useSearch()
 
@@ -45,6 +46,7 @@ export const Search = () => {
           <Input
             autoComplete='off'
             type='search'
+            value={query}
             onChange={onChange}
             onFocus={onFocus}
           />