diff --git a/src/components/Store/Store.js b/src/components/Store/Store.js index 14d929428..a912969e0 100644 --- a/src/components/Store/Store.js +++ b/src/components/Store/Store.js @@ -4,13 +4,13 @@ import StoreContext from './StoreContext' const Store = ({ children }) => { // State that should persist - const jobAndQueueFilterState = useState('') + const nameFilterState = useState('') const showSystemJobsState = useState(false) return ( diff --git a/src/components/Store/StoreContext.js b/src/components/Store/StoreContext.js index 58f944c7f..4044daf46 100644 --- a/src/components/Store/StoreContext.js +++ b/src/components/Store/StoreContext.js @@ -1,7 +1,7 @@ import { createContext } from 'react' const StoreContext = createContext({ - jobAndQueueFilter: '', + nameFilter: '', showSystemJobs: false, }) diff --git a/src/components/Store/hooks.js b/src/components/Store/hooks.js index 0b5249639..ee2cb288f 100644 --- a/src/components/Store/hooks.js +++ b/src/components/Store/hooks.js @@ -6,9 +6,9 @@ import StoreContext from './StoreContext' * to the store since they have to persist after a refetch. */ -export const useJobAndQueueFilter = () => { +export const useNameFilter = () => { const store = useContext(StoreContext) - return store.jobAndQueueFilter + return store.nameFilter } export const useShowSystemJobs = () => { diff --git a/src/components/Store/hooks.test.js b/src/components/Store/hooks.test.js index d55dff04b..059cbd07b 100644 --- a/src/components/Store/hooks.test.js +++ b/src/components/Store/hooks.test.js @@ -1,22 +1,22 @@ import React from 'react' import { renderHook } from '@testing-library/react-hooks' -import { useJobAndQueueFilter, useShowSystemJobs } from './hooks' +import { useNameFilter, useShowSystemJobs } from './hooks' import StoreContext from './StoreContext' -describe('useJobAndQueueFilter', () => { - it('should return the jobAndQueueFilter part of the store', () => { - const jobAndQueueFilter = 'jobAndQueueFilter' +describe('useNameFilter', () => { + it('should return the nameFilter part of the store', () => { + const nameFilter = 'nameFilter' const store = { - jobAndQueueFilter, + nameFilter, } const wrapper = ({ children }) => ( {children} ) - const { result } = renderHook(() => useJobAndQueueFilter(), { wrapper }) + const { result } = renderHook(() => useNameFilter(), { wrapper }) - expect(result.current).toBe(jobAndQueueFilter) + expect(result.current).toBe(nameFilter) }) }) diff --git a/src/components/Store/index.js b/src/components/Store/index.js index c4998afed..e8f0fe683 100644 --- a/src/components/Store/index.js +++ b/src/components/Store/index.js @@ -1,4 +1,4 @@ -import { useJobAndQueueFilter, useShowSystemJobs } from './hooks' +import { useNameFilter, useShowSystemJobs } from './hooks' export { default as Store } from './Store' -export { useJobAndQueueFilter, useShowSystemJobs } +export { useNameFilter, useShowSystemJobs } diff --git a/src/pages/JobAndQueueList/JobAndQueueList.js b/src/pages/JobAndQueueList/JobAndQueueList.js index d5fe6a26b..352349579 100644 --- a/src/pages/JobAndQueueList/JobAndQueueList.js +++ b/src/pages/JobAndQueueList/JobAndQueueList.js @@ -2,7 +2,7 @@ import React from 'react' import { NoticeBox, Card, Checkbox, InputField } from '@dhis2/ui' import i18n from '@dhis2/d2-i18n' import { useJobsAndQueues } from '../../hooks/jobs-and-queues' -import { useJobAndQueueFilter, useShowSystemJobs } from '../../components/Store' +import { useNameFilter, useShowSystemJobs } from '../../components/Store' import { JobTable } from '../../components/JobTable' import { LinkButton } from '../../components/LinkButton' import { InfoLink } from '../../components/InfoLink' @@ -11,7 +11,7 @@ import styles from './JobAndQueueList.module.css' import filterJobsAndQueues from './filter-jobs-and-queues' const JobAndQueueList = () => { - const [jobAndQueueFilter, setJobAndQueueFilter] = useJobAndQueueFilter() + const [nameFilter, setNameFilter] = useNameFilter() const [showSystemJobs, setShowSystemJobs] = useShowSystemJobs() const { data, loading, error, refetch } = useJobsAndQueues() @@ -31,7 +31,7 @@ const JobAndQueueList = () => { // Apply the current filter settings const jobsAndQueues = filterJobsAndQueues({ - jobAndQueueFilter, + nameFilter, showSystemJobs, jobsAndQueues: data, }) @@ -50,9 +50,9 @@ const JobAndQueueList = () => { dataTest="name-filter-input" label={i18n.t('Filter by name')} onChange={({ value }) => { - setJobAndQueueFilter(value) + setNameFilter(value) }} - value={jobAndQueueFilter} + value={nameFilter} type="search" role="searchbox" name="name-filter" diff --git a/src/pages/JobAndQueueList/JobAndQueueList.test.js b/src/pages/JobAndQueueList/JobAndQueueList.test.js index 18d28083a..a7cc59e72 100644 --- a/src/pages/JobAndQueueList/JobAndQueueList.test.js +++ b/src/pages/JobAndQueueList/JobAndQueueList.test.js @@ -8,7 +8,7 @@ jest.mock('../../hooks/jobs-and-queues', () => ({ })) jest.mock('../../components/Store', () => ({ - useJobAndQueueFilter: jest.fn(() => ['', () => {}]), + useNameFilter: jest.fn(() => ['', () => {}]), useShowSystemJobs: jest.fn(() => [false, () => {}]), })) diff --git a/src/pages/JobAndQueueList/filter-jobs-and-queues.js b/src/pages/JobAndQueueList/filter-jobs-and-queues.js index 7db6e18dc..c8d60a8cc 100644 --- a/src/pages/JobAndQueueList/filter-jobs-and-queues.js +++ b/src/pages/JobAndQueueList/filter-jobs-and-queues.js @@ -1,20 +1,14 @@ -const filterJobsAndQueues = ({ - jobAndQueueFilter, - showSystemJobs, - jobsAndQueues, -}) => { - // Filter jobs and queues by the current jobAndQueueFilter - const applyJobAndQueueFilter = (jobOrQueue) => - jobOrQueue.name.toLowerCase().includes(jobAndQueueFilter.toLowerCase()) +const filterJobsAndQueues = ({ nameFilter, showSystemJobs, jobsAndQueues }) => { + // Filter jobs and queues by the current nameFilter + const applyNameFilter = (jobOrQueue) => + jobOrQueue.name.toLowerCase().includes(nameFilter.toLowerCase()) // Filter jobs depending on the current showSystemJobs const applyShowSystemJobs = (jobOrQueue) => // Jobs that are configurable are user jobs showSystemJobs ? true : jobOrQueue.configurable - return jobsAndQueues - .filter(applyJobAndQueueFilter) - .filter(applyShowSystemJobs) + return jobsAndQueues.filter(applyNameFilter).filter(applyShowSystemJobs) } export default filterJobsAndQueues diff --git a/src/pages/JobAndQueueList/filter-jobs-and-queues.test.js b/src/pages/JobAndQueueList/filter-jobs-and-queues.test.js index 69c1b8ab3..772a34ece 100644 --- a/src/pages/JobAndQueueList/filter-jobs-and-queues.test.js +++ b/src/pages/JobAndQueueList/filter-jobs-and-queues.test.js @@ -1,15 +1,15 @@ import filterJobsAndQueues from './filter-jobs-and-queues' describe('filterJobsAndQueues', () => { - it('should filter jobs and queues by the current jobAndQueueFilter', () => { - const jobAndQueueFilter = 'One' + it('should filter jobs and queues by the current nameFilter', () => { + const nameFilter = 'One' const showSystemJobs = true const expected = { name: 'One', configurable: true } const jobsAndQueues = [expected, { name: 'Two', configurable: true }] expect( filterJobsAndQueues({ - jobAndQueueFilter, + nameFilter, showSystemJobs, jobsAndQueues, }) @@ -17,29 +17,29 @@ describe('filterJobsAndQueues', () => { }) it('should ignore job or queue name capitalization', () => { - const jobAndQueueFilter = 'one' + const nameFilter = 'one' const showSystemJobs = true const expected = { name: 'One', configurable: true } const jobsAndQueues = [expected, { name: 'Two', configurable: true }] expect( filterJobsAndQueues({ - jobAndQueueFilter, + nameFilter, showSystemJobs, jobsAndQueues, }) ).toEqual([expected]) }) - it('should ignore jobAndQueueFilter capitalization', () => { - const jobAndQueueFilter = 'One' + it('should ignore nameFilter capitalization', () => { + const nameFilter = 'One' const showSystemJobs = true const expected = { name: 'one', configurable: true } const jobsAndQueues = [expected, { name: 'Two', configurable: true }] expect( filterJobsAndQueues({ - jobAndQueueFilter, + nameFilter, showSystemJobs, jobsAndQueues, }) @@ -47,7 +47,7 @@ describe('filterJobsAndQueues', () => { }) it('should show system jobs and user jobs if showSystemJobs is true', () => { - const jobAndQueueFilter = '' + const nameFilter = '' const showSystemJobs = true const jobsAndQueues = [ { name: 'One', configurable: false }, @@ -56,7 +56,7 @@ describe('filterJobsAndQueues', () => { expect( filterJobsAndQueues({ - jobAndQueueFilter, + nameFilter, showSystemJobs, jobsAndQueues, }) @@ -64,14 +64,14 @@ describe('filterJobsAndQueues', () => { }) it('should hide system jobs and show user jobs if showSystemJobs is false', () => { - const jobAndQueueFilter = '' + const nameFilter = '' const showSystemJobs = false const expected = { name: 'Two', configurable: true } const jobsAndQueues = [{ name: 'One', configurable: false }, expected] expect( filterJobsAndQueues({ - jobAndQueueFilter, + nameFilter, showSystemJobs, jobsAndQueues, })