Adds status to look search page

navapbc · Jun 25, 2024 · d1426e3 · d1426e3
1 parent 3b1b01e
commit d1426e3
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 37 deletions.
diff --git a/frontend/src/app/[locale]/look/QueryProvider.tsx b/frontend/src/app/[locale]/look/QueryProvider.tsx
@@ -1,11 +1,14 @@
 "use client"
 
-import React, { use } from "react"
-import { createContext, useCallback, useContext, useMemo, useState } from 'react';
+import { createContext, useCallback, useMemo, useState } from 'react';
 import { useSearchParams } from "next/navigation";
-import { set } from "lodash";
 
-export const QueryContext = createContext<any>({});
+interface QueryContextParams {
+  queryTerm: string | null | undefined;
+  updateQueryTerm: (term: string) => void;
+}
+
+export const QueryContext = createContext( {} as QueryContextParams );
 
 export default function QueryProvider({
     children,

diff --git a/frontend/src/app/[locale]/look/SearchBar.tsx b/frontend/src/app/[locale]/look/SearchBar.tsx
@@ -4,14 +4,14 @@ import { Icon } from "@trussworks/react-uswds";
 import { sendGAEvent } from "@next/third-parties/google";
 import { useSearchParams, usePathname, useRouter } from 'next/navigation';
 import { QueryContext } from "./QueryProvider";
-import { useContext, useState } from "react";
+import { useContext } from "react";
 
 interface SearchBarProps {
   query: string;
 }
 
 export default function SearchBar({ query }: SearchBarProps) {
-  let { queryTerm, updateQueryTerm } = useContext(QueryContext);
+  const { queryTerm, updateQueryTerm } = useContext(QueryContext);
 
   const searchParams = useSearchParams() || undefined;
   const pathname = usePathname() || "";

diff --git a/frontend/src/app/[locale]/look/SearchOpportunityStatus.tsx b/frontend/src/app/[locale]/look/SearchOpportunityStatus.tsx
@@ -16,7 +16,7 @@ interface StatusOption {
 }
 
 interface SearchOpportunityStatusProps {
-  selectedStatuses: Set<string>;
+  selectedStatuses: string;
 }
 
 const statusOptions: StatusOption[] = [
@@ -28,50 +28,36 @@ const statusOptions: StatusOption[] = [
 
 // Wait a half-second before updating query params
 // and submitting the form
-const SEARCH_OPPORTUNITY_STATUS_DEBOUNCE_TIME = 500;
+// const SEARCH_OPPORTUNITY_STATUS_DEBOUNCE_TIME = 500;
 
 const SearchOpportunityStatus: React.FC<SearchOpportunityStatusProps> = ({
   selectedStatuses,
 }) => {
-  let { queryTerm } = useContext(QueryContext);
-
-  const debouncedUpdate = useDebouncedCallback(
-    (selectedStatuses: Set<string>) => {
-      const key = "status";
-      updateQueryParams(selectedStatuses, key);
-      formRef?.current?.requestSubmit();
-    },
-    SEARCH_OPPORTUNITY_STATUS_DEBOUNCE_TIME,
-  );
+  const { queryTerm } = useContext(QueryContext);
 
   const searchParams = useSearchParams() || undefined;
   const pathname = usePathname() || "";
   const router = useRouter();
-  console.log("queryTerm:", queryTerm, "vs. query:", query);
+  console.log("queryTerm:", queryTerm, "vs. query:", queryTerm);
+  console.log("statuses", selectedStatuses)
 
-  const handleSubmit = (statusValue: string, isChecked: boolean) => {
+  const handleCheck = (statusValue: string, isChecked: boolean) => {
     const params = new URLSearchParams(searchParams);
+    console.log(isChecked)
+    if (statusValue) {
+      params.set('status', statusValue);
+    } else {
+      params.delete('status');
+    }
     if (queryTerm) {
       params.set('query', queryTerm);
     } else {
       params.delete('query');
     }
-    sendGAEvent("event", "search", { search_term: queryTerm });
+    sendGAEvent("event", "search", { status: statusValue });
     router.replace(`${pathname}?${params.toString()}`);
   };
 
-  const handleCheck = (statusValue: string, isChecked: boolean) => {
-    setSelectedStatuses((prevSelectedStatuses) => {
-      const updatedStatuses = new Set(prevSelectedStatuses);
-      isChecked
-        ? updatedStatuses.add(statusValue)
-        : updatedStatuses.delete(statusValue);
-
-      debouncedUpdate(updatedStatuses);
-      return updatedStatuses;
-    });
-  };
-
   return (
     <>
       <h2 className="margin-bottom-1 font-sans-xs">Opportunity status</h2>
@@ -84,7 +70,7 @@ const SearchOpportunityStatus: React.FC<SearchOpportunityStatusProps> = ({
               label={option.label}
               tile={true}
               onChange={(e) => handleCheck(option.value, e.target.checked)}
-              checked={selectedStatuses.has(option.value)}
+             //  checked={selectedStatuses?.has(option.value)}
             />
           </div>
         ))}

diff --git a/frontend/src/app/[locale]/look/page.tsx b/frontend/src/app/[locale]/look/page.tsx
@@ -12,6 +12,7 @@ import { Suspense } from 'react';
 import Loading from "src/app/[locale]/search/loading";
 import SearchResultsList from "./SearchResultList";
 import QueryProvider from "./QueryProvider";
+import SearchOpportunityStatus from "./SearchOpportunityStatus";
 
 export async function generateMetadata() {
   const t = await getTranslations({ locale: "en" });
@@ -27,14 +28,17 @@ export default function Look({
 }: {
   searchParams: {
     query?: string;
+    status?: string
     page?: string;
   };
 }) {
   unstable_setRequestLocale("en");
   const t = useTranslations("Process");
   const query = searchParams?.query || '';
+  const statuses = searchParams?.status || '';
 
   console.log("rendering page");
+  console.log("statuses", statuses)
 
 
   return (
@@ -52,9 +56,9 @@ export default function Look({
         <div className="grid-row grid-gap">
           <div className="tablet:grid-col-4">
             <QueryProvider>
-              <div>
-                Term will be here 
-              </div>
+              <SearchOpportunityStatus
+                selectedStatuses={statuses}
+              />
             </QueryProvider>
           </div>
           <div className="tablet:grid-col-8">