Refactor multi & single providers & retain `provider` key only

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,8 +93,34 @@ export default function Search({ options }) {
     setQuery("");
   }
 
-  const multiProviders = () => (
-    <Listbox as="div" value={selectedProvider} onChange={setSelectedProvider} className="relative text-left">
+  const onChangeProvider = (provider) => {
+    setSelectedProvider(provider);
+    localStorage.setItem(key, provider.name);
+  }
+
+  return (
+    <form className="flex-col relative h-8 my-4 min-w-fit grow first:ml-0 ml-4" onSubmit={handleSubmit}>
+      <div className="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none w-full text-theme-800 dark:text-white" />
+      <input
+        type="text"
+        className="
+          overflow-hidden w-full h-full rounded-md
+          text-xs text-theme-900 dark:text-white
+          placeholder-theme-900 dark:placeholder-white/80
+          bg-white/50 dark:bg-white/10
+          focus:ring-theme-500 dark:focus:ring-white/50
+          focus:border-theme-500 dark:focus:border-white/50
+          border border-theme-300 dark:border-theme-200/50"
+        placeholder={t("search.placeholder")}
+        onChange={(s) => setQuery(s.currentTarget.value)}
+        required
+        autoCapitalize="off"
+        autoCorrect="off"
+        autoComplete="off"
+        // eslint-disable-next-line jsx-a11y/no-autofocus
+        autoFocus={options.focus}
+      />
+      <Listbox as="div" value={selectedProvider} onChange={onChangeProvider} className="relative text-left" disabled={availableProviderIds?.length === 1}>
         <div>
           <Listbox.Button
             className="
@@ -113,7 +133,6 @@ export default function Search({ options }) {
             <span className="sr-only">{t("search.search")}</span>
           </Listbox.Button>
         </div>
-
         <Transition
           as={Fragment}
           enter="transition ease-out duration-100"
@@ -130,7 +149,7 @@ export default function Search({ options }) {
           >
             <div className="flex flex-col">
               {availableProviderIds.map((providerId) => {
-              const p = providers[providerId];
+                const p = searchProviders[providerId];
                 return (
                   <Listbox.Option key={providerId} value={p} as={Fragment}>
                     {({ active }) => (
@@ -150,45 +169,6 @@ export default function Search({ options }) {
           </Listbox.Options>
         </Transition>
       </Listbox>
-  );
-
-  const singleProvider = () => (
-    <button
-      type="submit"
-      className="
-        absolute right-0.5 bottom-0.5 rounded-r-md px-4 py-2 border-1
-        text-white font-medium text-sm
-        bg-theme-600/40 dark:bg-white/10
-        focus:ring-theme-500 dark:focus:ring-white/50"
-    >
-      <provider.icon className="text-white w-3 h-3" />
-      <span className="sr-only">{t("search.search")}</span>
-    </button>
-  );
-
-  return (
-    <form className="flex-col relative h-8 my-4 min-w-fit grow first:ml-0 ml-4" onSubmit={handleSubmit}>
-      <div className="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none w-full text-theme-800 dark:text-white" />
-      <input
-        type="text"
-        className="
-          overflow-hidden w-full h-full rounded-md
-          text-xs text-theme-900 dark:text-white
-          placeholder-theme-900 dark:placeholder-white/80
-          bg-white/50 dark:bg-white/10
-          focus:ring-theme-500 dark:focus:ring-white/50
-          focus:border-theme-500 dark:focus:border-white/50
-          border border-theme-300 dark:border-theme-200/50"
-        placeholder={t("search.placeholder")}
-        onChange={(s) => setQuery(s.currentTarget.value)}
-        required
-        autoCapitalize="off"
-        autoCorrect="off"
-        autoComplete="off"
-        // eslint-disable-next-line jsx-a11y/no-autofocus
-        autoFocus={options.focus}
-      />
-      {provider ? singleProvider() : multiProviders()}
     </form>
   );
 }