Only update url searchParams on Dashboard media pages

First-Peoples-Cultural-Council · Sep 10, 2024 · bb8f9b8 · bb8f9b8
1 parent a391638
commit bb8f9b8
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 28 deletions.
diff --git a/src/common/dataHooks/useMediaSearch.js b/src/common/dataHooks/useMediaSearch.js
@@ -1,17 +1,15 @@
 import { useEffect, useState } from 'react'
-import { useNavigate, useParams, useSearchParams } from 'react-router-dom'
+import { useSearchParams } from 'react-router-dom'
 import PropTypes from 'prop-types'
 
 // FPCC
 import useSearchLoader from 'common/dataHooks/useSearchLoader'
 import useIntersectionObserver from 'common/hooks/useIntersectionObserver'
-import { AUDIO, IMAGE, VIDEO, TYPES, SORT, SORT_CREATED_DESC, MEDIA } from 'common/constants'
+import { AUDIO, IMAGE, VIDEO, TYPES, SORT, SORT_CREATED_DESC } from 'common/constants'
 import { getPathForMediaType } from 'common/utils/mediaHelpers'
 
 function useMediaSearch({ type }) {
-  const navigate = useNavigate()
-  const { sitename } = useParams()
-  const [searchParams] = useSearchParams()
+  const [searchParams, setSearchParams] = useSearchParams()
 
   const path = getPathForMediaType(type)
 
@@ -39,11 +37,11 @@ function useMediaSearch({ type }) {
   const handleSearchSubmit = (event) => {
     event.preventDefault()
     setSearchTerm(searchInputValue)
-    if (searchInputValue) {
-      navigate(`/${sitename}/dashboard/${MEDIA}/${path}?q=${searchInputValue}`)
-    } else {
-      navigate(`/${sitename}/dashboard/${MEDIA}/${path}`)
-    }
+  }
+
+  const handleSearchSubmitWithUrlSync = (event) => {
+    handleSearchSubmit(event)
+    setSearchParams({ q: searchInputValue })
   }
 
   useEffect(() => {
@@ -71,6 +69,7 @@ function useMediaSearch({ type }) {
 
   return {
     handleSearchSubmit,
+    handleSearchSubmitWithUrlSync,
     handleTextFieldChange,
     infiniteScroll,
     isLoadingEntries: isInitialLoading,

diff --git a/src/components/DashboardMediaAudio/DashboardMediaAudioContainer.js b/src/components/DashboardMediaAudio/DashboardMediaAudioContainer.js
@@ -13,33 +13,28 @@ function DashboardMediaAudioContainer() {
     searchValue,
     currentFile,
     setCurrentFile,
-    handleSearchSubmit,
+    handleSearchSubmitWithUrlSync,
     handleTextFieldChange,
     infiniteScroll,
     isLoadingEntries,
     loadRef,
     loadLabel,
   } = useMediaSearch({ type: TYPE_AUDIO })
 
-  const hasResults = !!(
-    media?.pages !== undefined && media?.pages?.[0]?.results?.length > 0
-  )
+  const hasResults = !!(media?.pages !== undefined && media?.pages?.[0]?.results?.length > 0)
 
   return (
     <SearchSelector.Presentation
       searchQuery={searchValue}
       searchPromptText="Search all audio"
       setSearchQuery={handleTextFieldChange}
-      search={handleSearchSubmit}
+      search={handleSearchSubmitWithUrlSync}
       headerSection=""
       resultsSection={
         <div className="grid grid-cols-3 w-full">
           <main className="col-span-2 pt-4 mx-2">
             <section className="p-2 h-full" aria-labelledby="results-header">
-              <h1
-                id="results-header"
-                className="capitalize flex text-2xl font-bold text-fv-charcoal mb-4"
-              >
+              <h1 id="results-header" className="capitalize flex text-2xl font-bold text-fv-charcoal mb-4">
                 Audio
               </h1>
               <DashboardMediaAudioPresentation

diff --git a/src/components/DashboardMediaVisual/DashboardMediaVisualContainer.js b/src/components/DashboardMediaVisual/DashboardMediaVisualContainer.js
@@ -14,7 +14,7 @@ function DashboardMediaVisualContainer({ type }) {
     searchValue,
     currentFile,
     setCurrentFile,
-    handleSearchSubmit,
+    handleSearchSubmitWithUrlSync,
     handleTextFieldChange,
     infiniteScroll,
     isLoadingEntries,
@@ -23,25 +23,20 @@ function DashboardMediaVisualContainer({ type }) {
     typePlural,
   } = useMediaSearch({ type })
 
-  const hasResults = !!(
-    media?.pages !== undefined && media?.pages?.[0]?.results?.length > 0
-  )
+  const hasResults = !!(media?.pages !== undefined && media?.pages?.[0]?.results?.length > 0)
 
   return (
     <SearchSelector.Presentation
       searchQuery={searchValue}
       searchPromptText={`Search all ${typePlural}`}
       setSearchQuery={handleTextFieldChange}
-      search={handleSearchSubmit}
+      search={handleSearchSubmitWithUrlSync}
       headerSection=""
       resultsSection={
         <div className="grid grid-cols-3 w-full">
           <main className="col-span-2 pt-4 mx-2">
             <section className="p-2 h-full" aria-labelledby="results-header">
-              <h1
-                id="results-header"
-                className="capitalize flex text-2xl font-bold text-fv-charcoal mb-4"
-              >
+              <h1 id="results-header" className="capitalize flex text-2xl font-bold text-fv-charcoal mb-4">
                 {typePlural}
               </h1>
               <DashboardMediaVisualPresentation