Merge pull request #81 from dhis2/use-hooks-with-store

refactor(store): use hooks instead of selectors

src/components/FormFields/JobTypeField.js

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import React from 'react'
 import {
     ReactFinalForm,
     SingleSelectFieldFF,
@@ -7,7 +7,7 @@ import {
     string,
 } from '@dhis2/ui'
 import i18n from '@dhis2/d2-i18n'
-import { StoreContext, selectors } from '../Store'
+import { hooks } from '../Store'
 import { jobTypesMap } from '../../services/server-translations'
 
 const { Field } = ReactFinalForm
@@ -17,9 +17,7 @@ export const FIELD_NAME = 'jobType'
 const VALIDATOR = composeValidators(string, hasValue)
 
 const JobTypeField = () => {
-    const store = useContext(StoreContext)
-    const jobTypes = selectors.getJobTypesStore(store)
-
+    const jobTypes = hooks.useAllJobTypes()
     const options = jobTypes.map(({ jobType }) => ({
         value: jobType,
         label: jobTypesMap[jobType],

src/components/FormFields/LabeledOptionsField.js

@@ -1,15 +1,14 @@
-import React, { useContext } from 'react'
+import React from 'react'
 import { PropTypes } from '@dhis2/prop-types'
 import { MultiSelectFieldFF, ReactFinalForm, MultiSelectField } from '@dhis2/ui'
 import i18n from '@dhis2/d2-i18n'
-import { StoreContext, selectors } from '../Store'
+import { hooks } from '../Store'
 
 const { Field } = ReactFinalForm
 
 // A labeled options field has options that have both an id and a label.
 const LabeledOptionsField = ({ label, name, parameterName }) => {
-    const store = useContext(StoreContext)
-    const options = selectors.getParameterOptions(store, parameterName)
+    const options = hooks.useParameterOptions(parameterName)
 
     if (options.length === 0) {
         return (

src/components/FormFields/ParameterFields.js

@@ -1,8 +1,8 @@
-import React, { useContext } from 'react'
+import React from 'react'
 import i18n from '@dhis2/d2-i18n'
 import { PropTypes } from '@dhis2/prop-types'
 import { ReactFinalForm, InputFieldFF, SwitchFieldFF, Box } from '@dhis2/ui'
-import { selectors, StoreContext } from '../Store'
+import { hooks } from '../Store'
 import { formatToString } from './formatters'
 import SkipTableTypesField from './SkipTableTypesField'
 import LabeledOptionsField from './LabeledOptionsField'
@@ -15,8 +15,7 @@ const FIELD_NAME = 'jobParameters'
 
 // Renders all parameters for a given jobtype
 const ParameterFields = ({ jobType }) => {
-    const store = useContext(StoreContext)
-    const parameters = selectors.getJobTypeParameters(store, jobType)
+    const parameters = hooks.useJobTypeParameters(jobType)
 
     if (parameters.length === 0) {
         return null

src/components/FormFields/ScheduleField.js

@@ -1,13 +1,12 @@
-import React, { useContext } from 'react'
+import React from 'react'
 import { PropTypes } from '@dhis2/prop-types'
-import { StoreContext, selectors } from '../Store'
+import { hooks } from '../Store'
 import CronField from './CronField'
 import DelayField from './DelayField'
 
 const ScheduleField = ({ jobType }) => {
-    const store = useContext(StoreContext)
-    const currentJob = selectors.getJobType(store, jobType)
-    const schedulingType = currentJob.schedulingType
+    const currentJobType = hooks.useJobType(jobType)
+    const schedulingType = currentJobType.schedulingType
 
     switch (schedulingType) {
         case 'CRON':

src/components/FormFields/SkipTableTypesField.js

@@ -1,15 +1,14 @@
-import React, { useContext } from 'react'
+import React from 'react'
 import { PropTypes } from '@dhis2/prop-types'
 import i18n from '@dhis2/d2-i18n'
 import { MultiSelectField, ReactFinalForm, MultiSelectFieldFF } from '@dhis2/ui'
-import { StoreContext, selectors } from '../Store'
+import { hooks } from '../Store'
 import { analyticsTableTypes } from '../../services/server-translations'
 
 const { Field } = ReactFinalForm
 
 const SkipTableTypesField = ({ label, name, parameterName }) => {
-    const store = useContext(StoreContext)
-    const options = selectors.getParameterOptions(store, parameterName)
+    const options = hooks.useParameterOptions(parameterName)
 
     if (options.length === 0) {
         return (

src/components/Forms/JobEditFormContainer.js

@@ -1,9 +1,9 @@
-import React, { useContext } from 'react'
+import React from 'react'
 import { PropTypes } from '@dhis2/prop-types'
 import { ReactFinalForm } from '@dhis2/ui'
 import { useParams } from 'react-router-dom'
 import { useUpdateJob } from '../../hooks/jobs'
-import { StoreContext, selectors } from '../Store'
+import { hooks } from '../Store'
 import JobEditForm from './JobEditForm'
 
 const { Form } = ReactFinalForm
@@ -26,9 +26,8 @@ const initialFields = [
 const JobEditFormContainer = ({ setIsPristine }) => {
     const { id } = useParams()
     const [updateJob] = useUpdateJob({ id })
-    const store = useContext(StoreContext)
-    const refetchJobs = selectors.getRefetchJobs(store)
-    const job = selectors.getJobById(store, id)
+    const refetchJobs = hooks.useRefetchJobs()
+    const job = hooks.useJob(id)
 
     // Creating an object with just the values we want to use as initial values
     const initialValues = initialFields.reduce((filtered, key) => {

src/components/JobTable/DeleteJobAction.js

@@ -1,14 +1,13 @@
-import React, { useState, useContext } from 'react'
+import React, { useState } from 'react'
 import { PropTypes } from '@dhis2/prop-types'
 import { MenuItem } from '@dhis2/ui'
 import i18n from '@dhis2/d2-i18n'
 import { DeleteJobModal } from '../Modal'
-import { StoreContext, selectors } from '../Store'
+import { hooks } from '../Store'
 
 const DeleteJobAction = ({ id }) => {
     const [showModal, setShowModal] = useState(false)
-    const store = useContext(StoreContext)
-    const refetchJobs = selectors.getRefetchJobs(store)
+    const refetchJobs = hooks.useRefetchJobs()
 
     return (
         <React.Fragment>

src/components/Modal/RunJobModal.js

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import React from 'react'
 import { PropTypes } from '@dhis2/prop-types'
 import { useDataEngine } from '@dhis2/app-runtime'
 import {
@@ -9,7 +9,7 @@ import {
     ButtonStrip,
 } from '@dhis2/ui'
 import i18n from '@dhis2/d2-i18n'
-import { StoreContext, selectors } from '../Store'
+import { hooks } from '../Store'
 
 const RunJobModal = ({ id, hideModal }) => {
     const engine = useDataEngine()
@@ -19,8 +19,7 @@ const RunJobModal = ({ id, hideModal }) => {
         },
     }
     const runJob = () => engine.query(query)
-    const store = useContext(StoreContext)
-    const refetchJobs = selectors.getRefetchJobs(store)
+    const refetchJobs = hooks.useRefetchJobs()
 
     return (
         <Modal open small onClose={hideModal}>

src/components/Store/hooks.js

@@ -1,24 +1,36 @@
 import { useContext } from 'react'
 import StoreContext from './StoreContext'
 
-export const useJobs = () => {
+export const useAllJobs = () => {
     const store = useContext(StoreContext)
     return store.jobs
 }
 
+export const useAllParameterOptions = () => {
+    const store = useContext(StoreContext)
+    return store.parameterOptions
+}
+
+export const useAllJobTypes = () => {
+    const store = useContext(StoreContext)
+    return store.jobTypes
+}
+
+export const useRefetchJobs = () => {
+    const store = useContext(StoreContext)
+    return store.refetchJobs
+}
+
 /**
- * This state is used in the job list, but kept in the
+ * The state for the job filter and showing system
+ * jobs is used in the job list, but kept in the
  * store since it has to persist after a refetch.
  */
 export const useJobFilter = () => {
     const store = useContext(StoreContext)
     return store.jobFilter
 }
 
-/**
- * This state is used in the job list, but kept in the
- * store since it has to persist after a refetch.
- */
 export const useShowSystemJobs = () => {
     const store = useContext(StoreContext)
     return store.showSystemJobs
@@ -30,10 +42,10 @@ export const useShowSystemJobs = () => {
  * string and the show system jobs toggle from the store
  * state.
  */
-export const useListJobs = () => {
+export const useJobListJobs = () => {
     const [jobFilter] = useJobFilter()
     const [showSystemJobs] = useShowSystemJobs()
-    const jobs = useJobs()
+    const jobs = useAllJobs()
 
     // Filter jobs by the current jobFilter
     const applyJobFilter = job =>
@@ -46,3 +58,33 @@ export const useListJobs = () => {
 
     return jobs.filter(applyJobFilter).filter(applyShowSystemJobs)
 }
+
+// Finds a job by id
+export const useJob = id => {
+    const jobs = useAllJobs()
+    return jobs.find(job => job.id === id)
+}
+
+// Finds a jobType by the jobType string
+export const useJobType = jobType => {
+    const jobTypes = useAllJobTypes()
+    return jobTypes.find(job => job.jobType === jobType)
+}
+
+// Returns an array with all parameters for a certain jobType
+export const useJobTypeParameters = jobType => {
+    const selectedJobType = useJobType(jobType)
+    const hasParameters = 'jobParameters' in selectedJobType
+
+    if (!hasParameters) {
+        return []
+    }
+
+    return selectedJobType.jobParameters
+}
+
+// Returns the parameter options for a given parameter
+export const useParameterOptions = parameter => {
+    const parameterOptions = useAllParameterOptions()
+    return parameterOptions[parameter]
+}