From fedecc1b1d561227cbc2ebb664279a827aab9e42 Mon Sep 17 00:00:00 2001
From: Dave Shawley <daves@aweber.com>
Date: Tue, 27 Aug 2024 12:03:20 -0400
Subject: [PATCH 1/2] Fix the global search box on project search page

Entering a search into the *global* search box navigates to the project
search page with the filter added to the URL. Doing this while *on the
project search page* would update the URL but not the filter since the
query params are only read on initial render (eg, `useCallback({}, [])`).

Adding a small snippet that sets the filter & refresh state when the
location is updated and the f search param is included and does not
match the current filter seems to address the issue.
---
 src/js/views/Projects/Projects.jsx | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/js/views/Projects/Projects.jsx b/src/js/views/Projects/Projects.jsx
index cb08a1a..97417cd 100644
--- a/src/js/views/Projects/Projects.jsx
+++ b/src/js/views/Projects/Projects.jsx
@@ -5,7 +5,7 @@ import {
   toElasticsearchQuery
 } from '@cybernetex/kbn-es-query'
 import { byString, byNumber, byValues } from 'sort-es'
-import { useSearchParams } from 'react-router-dom'
+import { useLocation, useSearchParams } from 'react-router-dom'
 
 import { Alert, ScoreBadge, Table } from '../../components'
 import { Context } from '../../state'
@@ -37,6 +37,7 @@ function Projects() {
   const [globalState, dispatch] = useContext(Context)
   const [searchParams, setSearchParams] = useSearchParams()
   const { t } = useTranslation()
+  const location = useLocation()
 
   const [state, setState] = useState({
     columns: [],
@@ -76,6 +77,21 @@ function Projects() {
     )
   }
 
+  // Users can use the <ProjectSearch> component to change the filter
+  // The component changes the `f` parameter via `navigate(...)`. However,
+  // if we are already on the projects page, then the `navigate()` function
+  // does not rerender the page. We can catch this with the `useLocation()`
+  // hook and update the filter appropriately.
+  useEffect(() => {
+    if (searchParams.get('f') && state.filter !== searchParams.get('f')) {
+      setState((prevState) => ({
+        ...prevState,
+        filter: searchParams.get('f') || '',
+        refresh: true
+      }))
+    }
+  }, [location])
+
   function onRefresh() {
     setState({
       ...state,

From 45333edef92bc919b224bbfd7821efe6ec755771 Mon Sep 17 00:00:00 2001
From: Dave Shawley <daves@aweber.com>
Date: Wed, 28 Aug 2024 15:13:35 -0400
Subject: [PATCH 2/2] Combine refresh processing in Projects.Projects

---
 src/js/views/Projects/Projects.jsx | 15 +++++----------
 1 file changed, 5 insertions(+), 10 deletions(-)

diff --git a/src/js/views/Projects/Projects.jsx b/src/js/views/Projects/Projects.jsx
index 97417cd..ad903a3 100644
--- a/src/js/views/Projects/Projects.jsx
+++ b/src/js/views/Projects/Projects.jsx
@@ -84,21 +84,16 @@ function Projects() {
   // hook and update the filter appropriately.
   useEffect(() => {
     if (searchParams.get('f') && state.filter !== searchParams.get('f')) {
-      setState((prevState) => ({
-        ...prevState,
-        filter: searchParams.get('f') || '',
-        refresh: true
-      }))
+      onRefresh()
     }
   }, [location])
 
   function onRefresh() {
-    setState({
-      ...state,
-      data: [],
-      filter: searchParams.get('f') ? searchParams.get('f') : '',
+    setState((prevState) => ({
+      ...prevState,
+      filter: searchParams.get('f') || '',
       refresh: true
-    })
+    }))
   }
 
   function onSortChange(column, direction) {