React migration: Search form

client/app/components/checkbox.tsx

@@ -0,0 +1,23 @@
+const Checkbox = ({
+  label,
+  onChange,
+  checked,
+}: {
+  label: string;
+  onChange: () => void;
+  checked: boolean;
+}) => {
+  return (
+    <div className="col-lg-2 col-xl-2" role="category-group">
+      <input
+        type="checkbox"
+        onChange={() => onChange()}
+        checked={checked}
+        id={`check-${label.toLowerCase()}`}
+      />
+      <label htmlFor={`check-${label.toLowerCase()}`}></label> {label}
+    </div>
+  );
+};
+
+export default Checkbox;

client/app/components/header.tsx

@@ -90,7 +90,9 @@ const Header: React.FC<HeaderProps> = ({
                     id="userDropdown"
                     data-bs-toggle="dropdown"
                     aria-expanded="false"
-                  >{loginForm?.username}</a>
+                  >
+                    {loginForm?.username}
+                  </a>
                   <ul className="dropdown-menu" aria-labelledby="userDropdown">
                     <li>
                       <a

client/app/context/action.ts

@@ -6,7 +6,7 @@ export type LoginState = {
   error?: string | null;
 };
 
-export const submitAction = async (
+export const submitLoginAction = async (
   prevState: LoginState,
   formData: FormData
 ): Promise<LoginState> => {
@@ -55,3 +55,23 @@ export const submitAction = async (
     };
   }
 };
+
+export const submitSearchAction = async ({ categories, query }: { categories: string[], query: string }) => {
+  const params = new URLSearchParams({ query });
+  categories.forEach((category) => params.append("category", category));
+
+  try {
+    const response = await tekdbApi.get("/api/search/", {
+      params,
+    });
+
+    if (response.status === 200) {
+      return response.data;
+    }
+
+    throw new Error("Search failed");
+  } catch (error) {
+    console.error("Search error", error);
+    throw error;
+  }
+};

client/app/context/loginContext.tsx

@@ -1,10 +1,11 @@
 import React, {
   useEffect,
   createContext,
-  useContext,
+  use,
   useCallback,
 } from "react";
-import { submitAction } from "./action";
+import type { ReactNode } from "react";
+import { submitLoginAction } from "./action";
 import { getAuthSession } from "../api/tekdbApi";
 
 type UseLoginFormReturn = {
@@ -24,7 +25,11 @@ type useLogin = {
 
 const LoginContext = createContext<useLogin | null>(null);
 
-export const LoginProvider: React.FC<React.PropsWithChildren<{}>> = ({
+interface LoginProviderProps {
+  children: ReactNode;
+}
+
+export const LoginProvider: React.FC<LoginProviderProps> = ({
   children,
 }) => {
   const [showLoginModal, setShowLoginModal] = React.useState(false);
@@ -66,7 +71,7 @@ export const LoginProvider: React.FC<React.PropsWithChildren<{}>> = ({
   const formAction = useCallback(async (formData: FormData) => {
     setIsPending(true);
     try {
-      const loginState = await submitAction(
+      const loginState = await submitLoginAction(
         {
           success: false,
           error: null,
@@ -77,7 +82,7 @@ export const LoginProvider: React.FC<React.PropsWithChildren<{}>> = ({
       if (loginState.success) {
         setIsAuthenticated(true);
         setError(null);
-        setShowLoginModal(false);
+        setShowLoginModal(false); 
         return;
       }
 
@@ -104,12 +109,12 @@ export const LoginProvider: React.FC<React.PropsWithChildren<{}>> = ({
   };
 
   return (
-    <LoginContext.Provider value={value}>{children}</LoginContext.Provider>
+    <LoginContext value={value}>{children}</LoginContext>
   );
 };
 
 export const useLogin = () => {
-  const context = useContext(LoginContext);
+  const context = use(LoginContext);
   if (!context) {
     throw new Error("useLogin must be used within a LoginProvider");
   }

client/app/context/searchContext.tsx

@@ -0,0 +1,72 @@
+import React, { useCallback, use } from "react";
+import type { ReactNode } from "react";
+import { useNavigate } from "react-router";
+import { submitSearchAction } from "./action";
+
+type useSearch = {
+  categories: string[];
+  results: any[];
+  query: string;
+  handleCategoryTypeChange: (type: string) => void;
+  handleSearch: (formData: FormData) => Promise<void>;
+  handleQueryChange: (query: string) => void;
+};
+
+const SearchContext = React.createContext<useSearch | null>(null);
+
+interface SearchProviderProps {
+  children: ReactNode;
+}
+
+export const SearchProvider: React.FC<SearchProviderProps> = ({ children }) => {
+  const navigate = useNavigate();
+  const [categories, setCategories] = React.useState<string[]>([]);
+  const [results, setResults] = React.useState<any[]>([]);
+  const [query, setQuery] = React.useState<string>("");
+
+  const handleCategoryTypeChange = useCallback(
+    (type: string) => {
+      if (categories.includes(type)) {
+        setCategories(
+          categories.filter((category: string) => category !== type),
+        );
+      } else {
+        setCategories([...categories, type]);
+      }
+    },
+    [categories],
+  );
+
+  const handleQueryChange = useCallback((query: string) => {
+    setQuery(query);
+  }, []);
+
+  const handleSearch = useCallback(async () => {
+    try {
+      const response = await submitSearchAction({ categories, query });
+      const { results } = response;
+      setResults(results);
+      await navigate("/search");
+    } catch (error) {
+      console.error("Search failed", error);
+    }
+  }, [categories, query, navigate]);
+
+  const value = {
+    categories,
+    results,
+    query,
+    handleCategoryTypeChange,
+    handleSearch,
+    handleQueryChange,
+  };
+  return <SearchContext value={value}>{children}</SearchContext>;
+};
+
+export const useSearch = () => {
+  const context = use(SearchContext);
+  if (!context) {
+    throw new Error("useSearch must be used within a SearchProvider");
+  }
+  return context;
+};

client/app/layouts/private-route.tsx

@@ -5,7 +5,6 @@ import { useLogin } from "../context/loginContext";
 /** Return a 404 if the user is not authenticated */
 const PrivateRoute: React.FC = () => {
   const { loginForm } = useLogin();
-  console.log("PrivateRoute", loginForm);
   if (loginForm.isCheckingAuth) {
     return <></>;
   }

client/app/root.tsx

@@ -7,6 +7,7 @@ import {
   ScrollRestoration,
   useLoaderData,
 } from "react-router";
+import type { ReactNode } from "react";
 
 import type { Route } from "./+types/root";
 import "./App.css";
@@ -16,8 +17,10 @@ import {
   type PageContentAndSiteInfo,
 } from "./api/pageContent";
 import { LoginProvider } from "./context/loginContext";
+import { SearchProvider } from "./context/searchContext";
 
-export function Layout({ children }: { children: React.ReactNode }) {
+
+export function Layout({ children }: { children: ReactNode }) {
   return (
     <html lang="en">
       <head>
@@ -77,9 +80,11 @@ export default function Root() {
         }}
       />
       <LoginProvider>
+        <SearchProvider>
         <Outlet
           context={{ pageContent, siteInfo } satisfies PageContentAndSiteInfo}
         />
+      </SearchProvider>
       </LoginProvider>
     </>
   );

client/app/routes/explore.tsx

@@ -1,25 +1,32 @@
-import React, { useState } from "react";
+import React from "react";
+import { useSearch } from "../context/searchContext";
+import Checkbox from "../components/checkbox";
+import { CATEGORIES } from "../utils/constants";
+
 import "./explore.css";
 
 const ExploreRoute: React.FC = () => {
-  const [categories, setCategories] = useState<string[]>([]);
+  const {
+    handleCategoryTypeChange,
+    handleSearch,
+    handleQueryChange,
+    categories,
+    query,
+  } = useSearch();
 
-  const handleCategoryTypeChange = (type: string) => {
-    if (categories.includes(type)) {
-      setCategories(categories.filter((category) => category !== type));
-    } else {
-      setCategories([...categories, type]);
-    }
+  const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    handleSearch(new FormData(e.currentTarget));
   };
-  console.log("Selected categories:", categories);
+
   return (
     <div className="container-fluid content-container">
       <div className="row content-row">
         <div className="col well content-well accent-bg">
           <section className="container">
             <div className="explore-form-row row min-full-height">
               <div className="col form-wrapper">
-                <form className="explore-form" method="post" action="/api/search/">
+                <form className="explore-form" onSubmit={onSubmit}>
                   <h1>Search &amp; Browse</h1>
                   <p>
                     You can search by term alone and/or add category filters
@@ -65,6 +72,7 @@ const ExploreRoute: React.FC = () => {
                       name="query"
                       placeholder="Search"
                       aria-describedby="search-icon-label"
+                      onChange={(e) => handleQueryChange(e.target.value)}
                     />
                     <input type="submit" id="query-form-submit" value="GO" />
                   </div>
@@ -73,7 +81,7 @@ const ExploreRoute: React.FC = () => {
                     type="text"
                     id="search-category-type"
                     name="category"
-                    value=""
+                    value={categories.join(",")}
                     hidden
                   />
                   <div
@@ -84,46 +92,14 @@ const ExploreRoute: React.FC = () => {
                     <div className="col-12 col-xl-2" role="category-group">
                       <p>Categories:</p>
                     </div>
-                    <div className="col-lg-2 col-xl-2" role="category-group">
-                      <input
-                        type="checkbox"
-                        onChange={() => handleCategoryTypeChange("places")}
-                        id="check-places"
-                      />
-                      <label htmlFor="check-places"></label> Places
-                    </div>
-                    <div className="col-lg-3 col-xl-2" role="category-group">
-                      <input
-                        type="checkbox"
-                        onChange={() => handleCategoryTypeChange("resources")}
-                        id="check-resources"
-                      />
-                      <label htmlFor="check-resources"></label> Resources
-                    </div>
-                    <div className="col-lg-3 col-xl-2" role="category-group">
-                      <input
-                        type="checkbox"
-                        onChange={() => handleCategoryTypeChange("activities")}
-                        id="check-activities"
+                    {CATEGORIES.map((category) => (
+                      <Checkbox
+                        key={category}
+                        label={category}
+                        checked={categories.includes(category)}
+                        onChange={() => handleCategoryTypeChange(category)}
                       />
-                      <label htmlFor="check-activities"></label> Activity
-                    </div>
-                    <div className="col-lg-2 col-xl-2" role="category-group">
-                      <input
-                        type="checkbox"
-                        onChange={() => handleCategoryTypeChange("sources")}
-                        id="check-sources"
-                      />
-                      <label htmlFor="check-sources"></label> Source
-                    </div>
-                    <div className="col-lg-2 col-xl-2" role="category-group">
-                      <input
-                        type="checkbox"
-                        onChange={() => handleCategoryTypeChange("media")}
-                        id="check-media"
-                      />
-                      <label htmlFor="check-media"></label> Media
-                    </div>
+                    ))}
                   </div>
 
                   <div className="button-wrapper">