diff --git a/src/features/App/AuthenticatedApp.tsx b/src/features/App/AuthenticatedApp.tsx
index 8ee87ba8..24213b1f 100644
--- a/src/features/App/AuthenticatedApp.tsx
+++ b/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 = () => {
-
- {!isMobile && }
-
-
-
+
+
+ {!isMobile && }
+
+
+
-
-
-
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/features/ExtendedSearchPage/index.tsx b/src/features/ExtendedSearchPage/index.tsx
index 2a45ffed..2af39a2b 100644
--- a/src/features/ExtendedSearchPage/index.tsx
+++ b/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 = () => {
)
}
-
-export const ExtendedSearchPage = () => (
-
-
-
-)
diff --git a/src/features/ExtendedSearchPage/store/hooks/index.tsx b/src/features/ExtendedSearchPage/store/hooks/index.tsx
index bb7fc004..a6ee53b9 100644
--- a/src/features/ExtendedSearchPage/store/hooks/index.tsx
+++ b/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,
diff --git a/src/features/Search/hooks/index.tsx b/src/features/Search/hooks/index.tsx
index bc99052b..877c35da 100644
--- a/src/features/Search/hooks/index.tsx
+++ b/src/features/Search/hooks/index.tsx
@@ -1,27 +1,18 @@
-import type { FormEvent, ChangeEvent } from 'react'
-import {
- useState,
- useRef,
- useCallback,
-} from 'react'
+import type { FormEvent } from 'react'
+import { useCallback, useEffect } from 'react'
-import trim from 'lodash/trim'
-import debounce from 'lodash/debounce'
-import size from 'lodash/size'
+import { useToggle } from 'hooks'
-import type { SearchItems } from 'requests'
-import { getSearchItems } from 'requests'
-import {
- useRequest,
- useToggle,
-} from 'hooks'
-
-import { SEARCH_DELAY, MIN_CHARACTERS_LENGTH } from '../config'
-import { normalizeItems } from '../helpers'
+import { useExtendedSearchStore } from 'features/ExtendedSearchPage/store'
export const useSearch = () => {
- const [searchItems, setSearchItems] = useState({})
- const abortControllerRef = useRef(null)
+ const {
+ 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) => {
- 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) => {
e.preventDefault()
}, [])
+ useEffect(() => {
+ reset()
+ }, [reset])
+
return {
close,
isFetching,
- normalizedItems: normalizeItems(searchItems),
- onChange,
+ onChange: onQueryChange,
onFocus: open,
onSubmit,
+ query,
+ searchItems,
showResults: isOpen,
}
}
diff --git a/src/features/Search/index.tsx b/src/features/Search/index.tsx
index 3fca7528..7f4fb781 100644
--- a/src/features/Search/index.tsx
+++ b/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 = () => {