feat: use searchParams in the ui

.gitignore

@@ -10,3 +10,5 @@ mse_langs.c
 
 mse_langs.h
 /cmake-build-debug/
+
+frontend/pnpm-lock.yaml

frontend/package.json

@@ -18,9 +18,9 @@
     "@types/react-dom": "18.2.7",
     "autoprefixer": "10.4.14",
     "eslint": "8.45.0",
-    "eslint-config-next": "13.4.12",
+    "eslint-config-next": "14.0.3",
     "font-awesome": "^4.7.0",
-    "next": "13.4.12",
+    "next": "14.0.3",
     "postcss": "8.4.27",
     "react": "18.2.0",
     "react-dom": "18.2.0",

frontend/src/app/layout.tsx

@@ -34,7 +34,7 @@ export default function RootLayout({
             <FontAwesomeIcon icon={faGithub} />
           </Link>
         </div>
-        <div className='bg-slate-100'>
+        <div className="bg-slate-100">
           <div className="p-5 justify-center">{children}</div>
         </div>
       </body>

frontend/src/app/page.tsx

@@ -28,14 +28,19 @@ export default function Home() {
             <h3 className="text-xl font-bold">Query Composition</h3>
             <p>The syntax is designed to mimic that of Scryfall.</p>
             <p>You can use brackets as normal with negation.</p>
-            <p>The below query gets all mutally exclusive cards in m20 and m19.</p>
+            <p>
+              The below query gets all mutally exclusive cards in m20 and m19.
+            </p>
             <blockquote>
-            (set:m19 or set:m20) and !(set:m20 and set:m19)
+              (set:m19 or set:m20) and !(set:m20 and set:m19)
             </blockquote>
           </div>
           <div>
             <h3 className="text-xl font-bold">Operations</h3>
-            <p>Used in this form <blockquote>{'<query> <operator> <query>'}</blockquote></p>
+            <p>
+              Used in this form{" "}
+              <blockquote>{"<query> <operator> <query>"}</blockquote>
+            </p>
             <ul>
               <li>and</li>
               <li>or</li>

frontend/src/app/q/[query]/[page]/page.tsx → frontend/src/app/q/page.tsx

@@ -2,19 +2,19 @@ import Card from "./card";
 import PageChanger from "./pageChanger";
 
 export default async function SearchResultPage({
-  params,
+  searchParams,
 }: {
-  params: {
+  searchParams: {
     query: string;
-    page: number;
+    page?: string;
   };
 }) {
-  const query = decodeURIComponent(params.query);
+  const query = decodeURIComponent(searchParams.query);
   const resp = await fetch("http://127.0.0.1:4365/api", {
     method: "POST",
     body: query,
     headers: {
-      page: (params.page - 1).toString(),
+      page: (parseInt(searchParams.page ?? "1") - 1).toString(),
     },
   });
   const data = await resp.json();
@@ -38,7 +38,12 @@ export default async function SearchResultPage({
           .fill(0)
           .slice(Math.max(0, page - 5), page + 1 + 50)
           .map((_, i) => (
-            <PageChanger base_url={"/q/" + params.query} page={i + 1} key={i} />
+            <PageChanger
+              base_url={"/q/?query=" + searchParams.query}
+              page={i + 1}
+              key={i}
+              currentPage={(i + 1).toString() == searchParams.page}
+            />
           ))}
       </div>
     </div>

frontend/src/app/q/pageChanger.tsx

@@ -0,0 +1,21 @@
+import Link from "next/link";
+
+interface Props {
+  base_url: string;
+  page: number;
+  currentPage: boolean;
+}
+
+export default function PageChanger({ base_url, page, currentPage }) {
+  return (
+    <Link href={base_url + "&page=" + page.toString()}>
+      <h1
+        className={`p-3 ${
+          currentPage ? "bg-red-700" : "bg-blue-500"
+        } text-white rounded`}
+      >
+        {page}
+      </h1>
+    </Link>
+  );
+}

frontend/src/app/searchBar.tsx

@@ -1,9 +1,12 @@
 "use client";
 import { useState } from "react";
 import { useRouter } from "next/navigation";
+import { useSearchParams } from "next/navigation";
 
-export default function SearchBar(props: { query?: string }) {
-  const [name, setName] = useState(props.query || "");
+export default function SearchBar() {
+  const searchParams = useSearchParams();
+  const query = searchParams.get("query");
+  const [name, setName] = useState(query);
   const router = useRouter();
 
   return (
@@ -12,7 +15,7 @@ export default function SearchBar(props: { query?: string }) {
         <form
           className="flex flex-row w-full justify-between gap-3"
           onSubmit={(e) => {
-            router.push("/q/" + encodeURIComponent(name) + "/1");
+            router.push("/q/?query=" + encodeURIComponent(name) + "&page=1");
             e.preventDefault();
           }}
         >