add js free thread searching

app/routes/index.jsx

@@ -54,7 +54,35 @@ export async function action({ request }) {
   return redirect(`threads/${newThread.id}`);
 }
 
-export async function loader() {
+export async function loader({ request }) {
+  const url = new URL(request.url);
+  const term = url.searchParams.get("search-term");
+  
+  if (term) {
+    if (typeof term !== 'string') throw new Error("bad search term")
+    const data = await prisma.thread.findMany({
+      where: {
+        OR: [
+          {
+            title: {
+              contains: term,
+            },
+          },
+          {
+            post: {
+              contains: term,
+            },
+          },
+        ],
+      },
+      include: {
+        posts: true,
+      },
+    });
+  
+    return data;
+  };
+
   const data = await prisma.thread.findMany({
     include: {
       posts: true,
@@ -90,8 +118,8 @@ export default function Index() {
             <button className=" bg-ctp-surface1 text-ctp-flamingo shadow shadow-ctp-overlay0 hover hover:bg-ctp-surface2 py-2 px-4 hover:underline rounded-full" type="submit">Create!</button>   
         </Form>
       </div>
-      <Form className="pt-8" method="get">
-        <label className="flex flex-col items-center" htmlFor="thread-search"><span className="text-2xl tracking-widest">Search for a thread {search}</span>
+      <Form onSubmit={e => e.preventDefault()} className="pt-8" method="get">
+        <label className="flex flex-col items-center" htmlFor="thread-search"><span className="text-2xl tracking-widest">{search ? `Searching with term: ${search}` : 'Search for a thread'}</span>
           <input onChange={e => setSearch(e.target.value)} value={search} className="w-fit bg-ctp-surface0 m-1 p-1 rounded shadow shadow-ctp-overlay0" placeholder="Search term..." type="text" name="search-term" id="search" />
         </label>
       </Form>