Fix search results when navigating back in history after page load

explorer/client/src/__tests__/reducers/search.test.ts

@@ -1,25 +1,23 @@
 import reducer, { IState } from '../../reducers'
-import { SearchAction } from '../../reducers/search'
+import { Action } from '../../reducers/search'
 
 describe('reducers/search', () => {
   it('returns an initial state', () => {
-    const action = {} as SearchAction
+    const action = {} as Action
     const state = reducer({}, action) as IState
 
     expect(state.search).toEqual({
       query: undefined
     })
   })
 
-  it('can update the search query', () => {
-    const action = {
-      type: 'UPDATE_SEARCH_QUERY',
-      query: 'something'
-    } as SearchAction
+  it('can parse the search query from a query param', () => {
+    const location = { toString: () => 'http://localhost/?search=find-me' }
+    const action = { location } as Action
     const state = reducer({}, action) as IState
 
     expect(state.search).toEqual({
-      query: 'something'
+      query: 'find-me'
     })
   })
 })

explorer/client/src/containers/JobRuns/Index.tsx

@@ -11,6 +11,7 @@ import {
 import List from '../../components/JobRuns/List'
 import { getJobRuns } from '../../actions/jobRuns'
 import { IState } from '../../reducers'
+import { ChangePageEvent } from '../../components/Table'
 
 const EMPTY_MSG =
   "We couldn't find any results for your search query. Try again with the job id, run id, requester, requester id or transaction hash"
@@ -42,14 +43,14 @@ interface IProps extends WithStyles<typeof styles> {
 
 const Index = withStyles(styles)((props: IProps) => {
   const [currentPage, setCurrentPage] = useState(0)
-  const onChangePage = (event: any, page: number) => {
+  const onChangePage = (_event: ChangePageEvent, page: number) => {
     setCurrentPage(page)
     props.getJobRuns(props.query, page + 1, props.rowsPerPage)
   }
 
   useEffect(() => {
     props.getJobRuns(props.query, currentPage + 1, props.rowsPerPage)
-  }, [])
+  }, [props.query])
 
   return (
     <div className={props.classes.container}>

explorer/client/src/reducers/search.ts

@@ -4,30 +4,19 @@ export interface IState {
 
 export type Query = string | undefined
 
-export type SearchAction =
-  | { type: 'UPDATE_SEARCH_QUERY'; query?: string }
-  | { type: '@@redux/INIT' }
-  | { type: '@@INIT' }
+export type Action = { type: string; location?: Location }
 
 const initialState = { query: undefined }
 
-const initQuery = (): Query => {
-  const searchParams = new URL(document.location.toString()).searchParams
+const parseQuery = (location: Location = document.location): Query => {
+  const searchParams = new URL(location.toString()).searchParams
   const search = searchParams.get('search')
 
   if (search) {
     return search
   }
 }
 
-export default (state: IState = initialState, action: SearchAction) => {
-  switch (action.type) {
-    case '@@redux/INIT':
-    case '@@INIT':
-      return Object.assign({}, state, { query: initQuery() })
-    case 'UPDATE_SEARCH_QUERY':
-      return Object.assign({}, state, { query: action.query })
-    default:
-      return state
-  }
+export default (state: IState = initialState, action: Action) => {
+  return Object.assign({}, state, { query: parseQuery(action.location) })
 }