diff --git a/explorer/client/src/__tests__/reducers/search.test.ts b/explorer/client/src/__tests__/reducers/search.test.ts index 19bec8ecc78..8e795894be1 100644 --- a/explorer/client/src/__tests__/reducers/search.test.ts +++ b/explorer/client/src/__tests__/reducers/search.test.ts @@ -1,9 +1,9 @@ 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({ @@ -11,15 +11,13 @@ describe('reducers/search', () => { }) }) - 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' }) }) }) diff --git a/explorer/client/src/containers/JobRuns/Index.tsx b/explorer/client/src/containers/JobRuns/Index.tsx index a621e7a2ccf..5b26d4f921b 100644 --- a/explorer/client/src/containers/JobRuns/Index.tsx +++ b/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 { 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 (
diff --git a/explorer/client/src/reducers/search.ts b/explorer/client/src/reducers/search.ts index 8b080945351..95ff1b0eac4 100644 --- a/explorer/client/src/reducers/search.ts +++ b/explorer/client/src/reducers/search.ts @@ -4,15 +4,12 @@ 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) { @@ -20,14 +17,6 @@ const initQuery = (): Query => { } } -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) }) }