refactor: rename to namefilter

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 (
         <StoreContext.Provider
             value={{
-                jobAndQueueFilter: jobAndQueueFilterState,
+                nameFilter: nameFilterState,
                 showSystemJobs: showSystemJobsState,
             }}
         >

src/components/Store/StoreContext.js

@@ -1,7 +1,7 @@
 import { createContext } from 'react'
 
 const StoreContext = createContext({
-    jobAndQueueFilter: '',
+    nameFilter: '',
     showSystemJobs: false,
 })
 

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 = () => {

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 }) => (
             <StoreContext.Provider value={store}>
                 {children}
             </StoreContext.Provider>
         )
-        const { result } = renderHook(() => useJobAndQueueFilter(), { wrapper })
+        const { result } = renderHook(() => useNameFilter(), { wrapper })
 
-        expect(result.current).toBe(jobAndQueueFilter)
+        expect(result.current).toBe(nameFilter)
     })
 })
 

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 }

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"

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, () => {}]),
 }))
 

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

src/pages/JobAndQueueList/filter-jobs-and-queues.test.js

@@ -1,53 +1,53 @@
 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,
             })
         ).toEqual([expected])
     })
 
     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,
             })
         ).toEqual([expected])
     })
 
     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,22 +56,22 @@ describe('filterJobsAndQueues', () => {
 
         expect(
             filterJobsAndQueues({
-                jobAndQueueFilter,
+                nameFilter,
                 showSystemJobs,
                 jobsAndQueues,
             })
         ).toEqual(jobsAndQueues)
     })
 
     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,
             })