diff --git a/src/components/widgets/search/search.jsx b/src/components/widgets/search/search.jsx index 61b8786d5..0189e809a 100644 --- a/src/components/widgets/search/search.jsx +++ b/src/components/widgets/search/search.jsx @@ -41,33 +41,12 @@ function classNames(...classes) { return classes.filter(Boolean).join(" "); } -function useProviderState() { - const key = "search-name"; - - const [value, setValue] = useState(providers.google); - useEffect(() => { - const storedName = localStorage.getItem(key); - let storedProvider = null; - if (storedName) { - storedProvider = Object.values(providers).find((el) => el.name === storedName); - if (storedProvider) { - setValue(storedProvider); - } - } - }, []); - - return [ - value, - (val) => { - setValue(val); - localStorage.setItem(key, val.name); - }, - ]; -} - function getAvailableProviderIds(options) { - if (options.providers && Array.isArray(options.providers)) { - return Object.keys(providers).filter((value) => options.providers.includes(value)); + if (options.provider && Array.isArray(options.provider)) { + return Object.keys(searchProviders).filter((value) => options.provider.includes(value)); + } + if (options.provider && searchProviders[options.provider]) { + return [options.provider]; } return null; } @@ -75,19 +54,34 @@ function getAvailableProviderIds(options) { export default function Search({ options }) { const { t } = useTranslation(); - const provider = searchProviders[options.provider]; + const availableProviderIds = getAvailableProviderIds(options); + + const key = "search-name"; + const [query, setQuery] = useState(""); - const [selectedProvider, setSelectedProvider] = useProviderState(); + const [selectedProvider, setSelectedProvider] = useState(searchProviders[availableProviderIds[0] ?? searchProviders.google]); - const availableProviderIds = getAvailableProviderIds(options); - if (!provider && !availableProviderIds) { + useEffect(() => { + const storedName = localStorage.getItem(key); + let storedProvider = null; + let storedProviderKey = null; + if (storedName) { + storedProvider = Object.values(searchProviders).find((el) => el.name === storedName); + storedProviderKey = Object.keys(searchProviders).find((pkey) => searchProviders[pkey] === storedProvider); + if (storedProvider && availableProviderIds.includes(storedProviderKey)) { + setSelectedProvider(storedProvider); + } + } + }, [availableProviderIds]); + + if (!availableProviderIds) { return null; } function handleSubmit(event) { const q = encodeURIComponent(query); - const url = provider ? provider.url : selectedProvider.url; + const url = { selectedProvider }; if (url) { window.open(`${url}${q}`, options.target || "_blank"); } else { @@ -99,72 +93,10 @@ export default function Search({ options }) { setQuery(""); } - const multiProviders = () => ( - -
- - - {t("search.search")} - -
- - - -
- {availableProviderIds.map((providerId) => { - const p = providers[providerId]; - return ( - - {({ active }) => ( -
  • - -
  • - )} -
    - ); - })} -
    -
    -
    -
    - ); - - const singleProvider = () => ( - - ); + const onChangeProvider = (provider) => { + setSelectedProvider(provider); + localStorage.setItem(key, provider.name); + } return (
    @@ -188,7 +120,55 @@ export default function Search({ options }) { // eslint-disable-next-line jsx-a11y/no-autofocus autoFocus={options.focus} /> - {provider ? singleProvider() : multiProviders()} + +
    + + + {t("search.search")} + +
    + + +
    + {availableProviderIds.map((providerId) => { + const p = searchProviders[providerId]; + return ( + + {({ active }) => ( +
  • + +
  • + )} +
    + ); + })} +
    +
    +
    +
    ); }