lint

src/components/search.jsx

@@ -1,11 +1,11 @@
 import { useTranslation } from "react-i18next";
 import { useEffect, useState, useRef } from "react";
 import classNames from "classnames";
+
 import { resolveIcon } from "./services/item";
 
-export default function HomepageSearch({bookmarks, services, searchString, setSearchString, isOpen, close}) {
+export default function HomepageSearch({bookmarksAndServices, searchString, setSearchString, isOpen, close}) {
-  const { t, i18n } = useTranslation();
+  const { t } = useTranslation();
-  const all = [...bookmarks.map(bg => bg.bookmarks).flat(), ...services.map(sg => sg.services).flat()];
 
   const searchField = useRef();
 
@@ -25,10 +25,10 @@ export default function HomepageSearch({bookmarks, services, searchString, setSe
       close(false);
       const result = results[currentItemIndex];
       window.open(result.href, '_blank');
-    } else if (event.key == "ArrowDown" && results[currentItemIndex + 1]) {
+    } else if (event.key === "ArrowDown" && results[currentItemIndex + 1]) {
       setCurrentItemIndex(currentItemIndex + 1);
       event.preventDefault();
-    } else if (event.key == "ArrowUp" && currentItemIndex > 0) {
+    } else if (event.key === "ArrowUp" && currentItemIndex > 0) {
       setCurrentItemIndex(currentItemIndex - 1);
       event.preventDefault();
     }
@@ -37,13 +37,13 @@ export default function HomepageSearch({bookmarks, services, searchString, setSe
   useEffect(() => {
     if (searchString.length === 0) setResults([]);
     else {
-      const newResults = all.filter(r => r.name.toLowerCase().includes(searchString));
+      const newResults = bookmarksAndServices.filter(r => r.name.toLowerCase().includes(searchString));
       setResults(newResults);
       if (newResults.length) {
         setCurrentItemIndex(0);
       }
     }
-  }, [searchString])
+  }, [searchString, bookmarksAndServices])
 
 
   const [hidden, setHidden] = useState(true);
@@ -65,7 +65,7 @@ export default function HomepageSearch({bookmarks, services, searchString, setSe
       !hidden && isOpen && "opacity-100",
       !isOpen && "opacity-0",
     )} role="dialog" aria-modal="true">
-      <div className="fixed inset-0 bg-gray-500 bg-opacity-50"></div>
+      <div className="fixed inset-0 bg-gray-500 bg-opacity-50" />
       <div className="fixed inset-0 z-10 overflow-y-auto">
         <div className="flex min-h-full min-w-full items-start justify-center text-center">
           <div className="mt-[10%] min-w-[80%] md:min-w-[40%] rounded-md font-medium text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-theme-900/10 dark:shadow-theme-900/20 bg-theme-50 dark:bg-theme-800">
@@ -74,11 +74,9 @@ export default function HomepageSearch({bookmarks, services, searchString, setSe
               results.length === 0 && "rounded-md",
               "w-full p-4 m-0 border-0 border-b border-slate-700 focus:border-slate-700 focus:outline-0 focus:ring-0 text-sm md:text-xl text-theme-700 dark:text-theme-200 bg-theme-60 dark:bg-theme-800"
               )} type="text" ref={searchField} value={searchString} onChange={handleSearchChange} onKeyDown={handleSearchKeyDown} />
-                <ul>
+            {results.length > 0 && <ul className="max-h-[60vh] overflow-y-auto">
-                  {results.map((r, i) => {
+              {results.map((r, i) => (
-                    return (
                 <li className={classNames(
-                        i === 0 && "mt-4",
                   i === currentItemIndex && "bg-theme-300/50 dark:bg-theme-700/50",
                   "flex flex-row items-center justify-between rounded-md text-sm md:text-xl m-2 py-2 px-4 cursor-pointer text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 hover:bg-theme-200/50 dark:hover:bg-theme-900/30",
                   )} key={r.name}>
@@ -90,10 +88,9 @@ export default function HomepageSearch({bookmarks, services, searchString, setSe
                     {r.name}
                   </div>
                   <div className="text-xs text-theme-600">{r.abbr ? t("homepagesearch.bookmark") : t("homepagesearch.service")}</div>
-                      </li>)
+                </li>
-                  })
+              ))}
-                  }
+            </ul>}
-                </ul>
           </div>
         </div>
       </div>

src/pages/index.jsx

@@ -161,11 +161,6 @@ const headerStyles = {
   clean: "m-4 mb-0 sm:m-8 sm:mb-0",
 };
 
-function handleChange(event) {
-  // this.setState({value: event.target.value});
-  console.log(event);
-}
-
 function Home({ initialSettings }) {
   const { i18n } = useTranslation();
   const { theme, setTheme } = useContext(ThemeContext);
@@ -180,6 +175,8 @@ function Home({ initialSettings }) {
   const { data: bookmarks } = useSWR("/api/bookmarks");
   const { data: widgets } = useSWR("/api/widgets");
   
+  const bookmarksAndServices = [...bookmarks.map(bg => bg.bookmarks).flat(), ...services.map(sg => sg.services).flat()]
+
   useEffect(() => {
     if (settings.language) {
       i18n.changeLanguage(settings.language);
@@ -198,10 +195,7 @@ function Home({ initialSettings }) {
   const [searchString, setSearchString] = useState("");
 
   useEffect(() => {
-    document.addEventListener('keydown', handleKeyDown);
-
     function handleKeyDown(e) {
-      console.log(e.target.tagName, e.key, e);
       if (e.target.tagName === "BODY") {
         if (String.fromCharCode(e.keyCode).match(/(\w|\s)/g) && !(e. altKey || e.ctrlKey || e.metaKey || e.shiftKey)) {
           setSearching(true);
@@ -212,6 +206,8 @@ function Home({ initialSettings }) {
       }
     }
 
+    document.addEventListener('keydown', handleKeyDown);
+
     return function cleanup() {
         document.removeEventListener('keydown', handleKeyDown);
     }
@@ -240,7 +236,7 @@ function Home({ initialSettings }) {
             headerStyles[initialSettings.headerStyle || "underlined"]
           )}
         >
-          <HomepageSearch services={services} bookmarks={bookmarks} searchString={searchString} setSearchString={setSearchString} isOpen={searching} close={setSearching} />
+          <HomepageSearch bookmarksAndServices={bookmarksAndServices} searchString={searchString} setSearchString={setSearchString} isOpen={searching} close={setSearching} />
           {widgets && (
             <>
               {widgets