Improve search

olimpiadi-informatica · Jul 12, 2024 · c089bbe · c089bbe
1 parent 8d4dd1f
commit c089bbe
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 61 deletions.
diff --git a/frontend/app/navbar.tsx b/frontend/app/navbar.tsx
@@ -2,12 +2,11 @@ import Link from "next/link";
 
 import {
   Navbar as BaseNavbar,
-  NavbarMenu as BaseNavbarMenu,
-  Dropdown,
-  DropdownButton,
-  DropdownMenu,
+  NavbarBrand,
+  NavbarContent,
+  NavbarMenu,
+  NavbarMenuItem,
 } from "@olinfo/react-components";
-import { MenuIcon } from "lucide-react";
 
 import { Image } from "~/components/image";
 import { Search } from "~/components/search";
@@ -20,50 +19,32 @@ import logoLight from "./oiistats-light.png?h=32";
 export function Navbar() {
   return (
     <BaseNavbar color="bg-base-300 text-base-content">
-      <div>
-        <Dropdown className="lg:hidden">
-          <DropdownButton>
-            <MenuIcon aria-label="Menu" />
-          </DropdownButton>
-          <DropdownMenu>
-            <NavbarMenu />
-          </DropdownMenu>
-        </Dropdown>
+      <NavbarBrand>
         <picture>
           <source media="(prefers-color-scheme: dark)" srcSet={logoDark.srcSet} />
-          <Image src={logoLight} alt="Logo OII stats" className="mx-2 h-8 w-auto flex-none" />
+          <Image src={logoLight} alt="Logo OII stats" className="h-full w-auto flex-none" />
         </picture>
-        <div className="max-lg:hidden">
-          <BaseNavbarMenu>
-            <NavbarMenu />
-          </BaseNavbarMenu>
-        </div>
-      </div>
-      <div className="max-sm:hidden">
+      </NavbarBrand>
+      <NavbarMenu>
+        <NavbarMenuItem>
+          <Link href="/">Home</Link>
+        </NavbarMenuItem>
+        <NavbarMenuItem>
+          <Link href="/contests">Edizioni</Link>
+        </NavbarMenuItem>
+        <NavbarMenuItem>
+          <Link href="/contestants">Hall of Fame</Link>
+        </NavbarMenuItem>
+        <NavbarMenuItem>
+          <Link href="/regions">Regioni</Link>
+        </NavbarMenuItem>
+        <NavbarMenuItem>
+          <Link href="/tasks">Problemi</Link>
+        </NavbarMenuItem>
+      </NavbarMenu>
+      <NavbarContent>
         <Search />
-      </div>
+      </NavbarContent>
     </BaseNavbar>
   );
 }
-
-function NavbarMenu() {
-  return (
-    <>
-      <li>
-        <Link href="/">Home</Link>
-      </li>
-      <li>
-        <Link href="/contests">Edizioni</Link>
-      </li>
-      <li>
-        <Link href="/contestants">Hall of Fame</Link>
-      </li>
-      <li>
-        <Link href="/regions">Regioni</Link>
-      </li>
-      <li>
-        <Link href="/tasks">Problemi</Link>
-      </li>
-    </>
-  );
-}
diff --git a/frontend/app/search/page.tsx b/frontend/app/search/page.tsx
@@ -3,6 +3,7 @@
 import { useSearchParams } from "next/navigation";
 import { Suspense, useMemo } from "react";
 
+import { Form, SubmitButton, TextField } from "@olinfo/react-components";
 import MiniSearch from "minisearch";
 import useSWR from "swr";
 
@@ -13,29 +14,54 @@ import { SearchCard } from "./search";
 export default function Page() {
   return (
     <>
-      <h1 className="my-4 text-center text-4xl font-bold">Risultati ricerca</h1>
+      <h1 className="my-4 text-center text-4xl font-bold max-lg:hidden">Risultati ricerca</h1>
+      <h1 className="text-center text-2xl font-bold lg:hidden">Ricerca</h1>
+      <Form onSubmit={searchAction} className="mb-4 lg:hidden">
+        <TextField
+          field="q"
+          label="Parola da cercare"
+          placeholder="Inserisci la parola da cercare"
+        />
+        <div className="self-start px-1 text-sm text-base-content/60">
+          Puoi cercare un partecipante, un problema o una gara
+        </div>
+        <SubmitButton className="!mt-2">Cerca</SubmitButton>
+      </Form>
       <Suspense fallback={<Loading />}>
         <PageInner />
       </Suspense>
     </>
   );
 }
 
+function searchAction({ q }: { q: string }) {
+  window.history.pushState({}, "", `/search?q=${q}`);
+}
+
 function PageInner() {
   const params = useSearchParams();
 
   const { data: search } = useSWR("search-index", fetcher, {
     revalidateIfStale: false,
     revalidateOnFocus: false,
   });
+
+  const query = params.get("q") ?? "";
   const results = useMemo(
-    () => search?.search(params.get("q") ?? "", { prefix: true, fuzzy: true }).slice(0, 20),
-    [search, params],
+    () => search?.search(query, { prefix: true, fuzzy: true }).slice(0, 20),
+    [search, query],
   );
 
+  if (!query) {
+    return (
+      <div className="m-8 text-center text-2xl text-base-content/60 max-lg:hidden">
+        Usa la barra di ricerca per trovare un partecipante, un problema o una gara
+      </div>
+    );
+  }
   if (!results) return <Loading />;
   if (results.length === 0) {
-    return <div className="mt-8 text-center text-2xl">Nessun risultato trovato</div>;
+    return <div className="m-8 text-center text-2xl">Nessun risultato trovato</div>;
   }
 
   return (

diff --git a/frontend/components/search.tsx b/frontend/components/search.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { FormEvent } from "react";
 
@@ -14,18 +15,23 @@ export function Search() {
   };
 
   return (
-    <form role="search" className="join" action="/search" onSubmit={onSubmit}>
-      <input
-        className="input join-item input-bordered"
-        name="q"
-        type="search"
-        placeholder="Cerca"
-        aria-label="Parola da cercare"
-        required
-      />
-      <button className="btn btn-outline join-item border-base-content/20" aria-label="Cerca">
+    <>
+      <form role="search" className="join max-lg:hidden" action="/search" onSubmit={onSubmit}>
+        <input
+          className="input join-item input-bordered"
+          name="q"
+          type="search"
+          placeholder="Cerca"
+          aria-label="Parola da cercare"
+          required
+        />
+        <button className="btn btn-outline join-item border-base-content/20" aria-label="Cerca">
+          <SearchIcon />
+        </button>
+      </form>
+      <Link href="/search" className="btn btn-ghost lg:hidden">
         <SearchIcon />
-      </button>
-    </form>
+      </Link>
+    </>
   );
 }