refactor: remove containers

dhis2 · Mar 29, 2023 · 2280887 · 2280887
1 parent 4d98b23
commit 2280887
Show file tree

Hide file tree

Showing 18 changed files with 200 additions and 468 deletions.
diff --git a/src/components/Routes/Routes.js b/src/components/Routes/Routes.js
@@ -1,18 +1,18 @@
 import React from 'react'
 import { Route } from 'react-router-dom'
 import { Router } from 'react-router'
-import { JobListContainer } from '../../pages/JobList'
-import { JobEditContainer } from '../../pages/JobEdit'
-import { JobView } from '../../pages/JobView'
-import { JobAddContainer } from '../../pages/JobAdd'
+import JobList from '../../pages/JobList'
+import JobEdit from '../../pages/JobEdit'
+import JobView from '../../pages/JobView'
+import JobAdd from '../../pages/JobAdd'
 import history from '../../services/history'
 
 const Routes = () => (
     <Router history={history}>
-        <Route exact path="/" component={JobListContainer} />
-        <Route path="/edit/:id" component={JobEditContainer} />
+        <Route exact path="/" component={JobList} />
+        <Route path="/edit/:id" component={JobEdit} />
         <Route path="/view/:id" component={JobView} />
-        <Route path="/add" component={JobAddContainer} />
+        <Route path="/add" component={JobAdd} />
     </Router>
 )
 

diff --git a/src/pages/JobAdd/JobAdd.js b/src/pages/JobAdd/JobAdd.js
@@ -1,5 +1,4 @@
-import React from 'react'
-import { PropTypes } from '@dhis2/prop-types'
+import React, { useState } from 'react'
 import { Card, IconInfo16 } from '@dhis2/ui'
 import i18n from '@dhis2/d2-i18n'
 import { DiscardFormButton } from '../../components/Buttons'
@@ -9,45 +8,42 @@ import styles from './JobAdd.module.css'
 const infoLink =
     'https://docs.dhis2.org/en/use/user-guides/dhis-core-version-236/maintaining-the-system/scheduling.html'
 
-const JobAdd = ({ isPristine, setIsPristine }) => (
-    <React.Fragment>
-        <header className={styles.pageHeader}>
-            <DiscardFormButton
-                shouldConfirm={!isPristine}
-                className={styles.pageHeaderButton}
-                small
-            >
-                {i18n.t('Back to all jobs')}
-            </DiscardFormButton>
-            <h2 className={styles.pageHeaderTitle}>{i18n.t('New Job')}</h2>
-        </header>
-        <Card className={styles.card}>
-            <header className={styles.cardHeader}>
-                <h3 className={styles.cardHeaderTitle}>
-                    {i18n.t('Configuration')}
-                </h3>
-                <a
-                    href={infoLink}
-                    className={styles.cardHeaderLink}
-                    target="_blank"
-                    rel="noopener noreferrer"
+const JobAdd = () => {
+    const [isPristine, setIsPristine] = useState(true)
+
+    return (
+        <React.Fragment>
+            <header className={styles.pageHeader}>
+                <DiscardFormButton
+                    shouldConfirm={!isPristine}
+                    className={styles.pageHeaderButton}
+                    small
                 >
-                    <span className={styles.cardHeaderInfo}>
-                        <IconInfo16 />
-                    </span>
-                    {i18n.t('About job configuration')}
-                </a>
+                    {i18n.t('Back to all jobs')}
+                </DiscardFormButton>
+                <h2 className={styles.pageHeaderTitle}>{i18n.t('New Job')}</h2>
             </header>
-            <JobAddFormContainer setIsPristine={setIsPristine} />
-        </Card>
-    </React.Fragment>
-)
-
-const { bool, func } = PropTypes
-
-JobAdd.propTypes = {
-    isPristine: bool.isRequired,
-    setIsPristine: func.isRequired,
+            <Card className={styles.card}>
+                <header className={styles.cardHeader}>
+                    <h3 className={styles.cardHeaderTitle}>
+                        {i18n.t('Configuration')}
+                    </h3>
+                    <a
+                        href={infoLink}
+                        className={styles.cardHeaderLink}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                        <span className={styles.cardHeaderInfo}>
+                            <IconInfo16 />
+                        </span>
+                        {i18n.t('About job configuration')}
+                    </a>
+                </header>
+                <JobAddFormContainer setIsPristine={setIsPristine} />
+            </Card>
+        </React.Fragment>
+    )
 }
 
 export default JobAdd
diff --git a/src/pages/JobAdd/JobAdd.test.js b/src/pages/JobAdd/JobAdd.test.js
diff --git a/src/pages/JobAdd/JobAddContainer.js b/src/pages/JobAdd/JobAddContainer.js
diff --git a/src/pages/JobAdd/JobAddContainer.test.js b/src/pages/JobAdd/JobAddContainer.test.js
diff --git a/src/pages/JobAdd/index.js b/src/pages/JobAdd/index.js
@@ -1,3 +1,3 @@
-import JobAddContainer from './JobAddContainer'
+import JobAdd from './JobAdd'
 
-export { JobAddContainer }
+export default JobAdd
diff --git a/src/pages/JobEdit/JobEdit.js b/src/pages/JobEdit/JobEdit.js
@@ -1,7 +1,14 @@
-import React from 'react'
-import { PropTypes } from '@dhis2/prop-types'
-import { Card, IconInfo16 } from '@dhis2/ui'
+import React, { useState } from 'react'
+import {
+    CircularLoader,
+    Layer,
+    CenteredContent,
+    Card,
+    IconInfo16,
+} from '@dhis2/ui'
+import { useParams } from 'react-router-dom'
 import i18n from '@dhis2/d2-i18n'
+import { useJobById } from '../../hooks/jobs'
 import { DiscardFormButton } from '../../components/Buttons'
 import { JobEditFormContainer } from '../../components/Forms'
 import { JobDetails } from '../../components/JobDetails'
@@ -10,68 +17,72 @@ import styles from './JobEdit.module.css'
 const infoLink =
     'https://docs.dhis2.org/en/use/user-guides/dhis-core-version-236/maintaining-the-system/scheduling.html'
 
-const JobEdit = ({
-    isPristine,
-    setIsPristine,
-    name,
-    created,
-    lastExecutedStatus,
-    lastExecuted,
-}) => (
-    <React.Fragment>
-        <header className={styles.pageHeader}>
-            <DiscardFormButton
-                shouldConfirm={!isPristine}
-                className={styles.pageHeaderButton}
-                small
-            >
-                {i18n.t('Back to all jobs')}
-            </DiscardFormButton>
-            <h2 className={styles.pageHeaderTitle}>
-                {i18n.t('Job: {{ name }}', {
-                    name,
-                    nsSeparator: '>',
-                })}
-            </h2>
-        </header>
-        <Card className={styles.card}>
-            <header className={styles.cardHeader}>
-                <h3 className={styles.cardHeaderTitle}>
-                    {i18n.t('Configuration')}
-                </h3>
-                <a
-                    href={infoLink}
-                    className={styles.cardHeaderLink}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                >
-                    <span className={styles.cardHeaderInfo}>
-                        <IconInfo16 />
-                    </span>
-                    {i18n.t('About job configuration')}
-                </a>
-            </header>
-            <div className={styles.jobDetails}>
-                <JobDetails
-                    created={created}
-                    lastExecutedStatus={lastExecutedStatus}
-                    lastExecuted={lastExecuted}
-                />
-            </div>
-            <JobEditFormContainer setIsPristine={setIsPristine} />
-        </Card>
-    </React.Fragment>
-)
+const JobEdit = () => {
+    const [isPristine, setIsPristine] = useState(true)
+    const { id } = useParams()
+    const { data, loading, error } = useJobById(id)
+
+    if (loading) {
+        return (
+            <Layer>
+                <CenteredContent>
+                    <CircularLoader />
+                </CenteredContent>
+            </Layer>
+        )
+    }
 
-const { bool, func, string } = PropTypes
+    if (error) {
+        throw error
+    }
 
-JobEdit.propTypes = {
-    created: string.isRequired,
-    isPristine: bool.isRequired,
-    lastExecuted: string.isRequired,
-    lastExecutedStatus: string.isRequired,
-    name: string.isRequired,
-    setIsPristine: func.isRequired,
+    const { name, created, lastExecutedStatus, lastExecuted } = data
+
+    return (
+        <React.Fragment>
+            <header className={styles.pageHeader}>
+                <DiscardFormButton
+                    shouldConfirm={!isPristine}
+                    className={styles.pageHeaderButton}
+                    small
+                >
+                    {i18n.t('Back to all jobs')}
+                </DiscardFormButton>
+                <h2 className={styles.pageHeaderTitle}>
+                    {i18n.t('Job: {{ name }}', {
+                        name,
+                        nsSeparator: '>',
+                    })}
+                </h2>
+            </header>
+            <Card className={styles.card}>
+                <header className={styles.cardHeader}>
+                    <h3 className={styles.cardHeaderTitle}>
+                        {i18n.t('Configuration')}
+                    </h3>
+                    <a
+                        href={infoLink}
+                        className={styles.cardHeaderLink}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                        <span className={styles.cardHeaderInfo}>
+                            <IconInfo16 />
+                        </span>
+                        {i18n.t('About job configuration')}
+                    </a>
+                </header>
+                <div className={styles.jobDetails}>
+                    <JobDetails
+                        created={created}
+                        lastExecutedStatus={lastExecutedStatus}
+                        lastExecuted={lastExecuted}
+                    />
+                </div>
+                <JobEditFormContainer setIsPristine={setIsPristine} />
+            </Card>
+        </React.Fragment>
+    )
 }
 
 export default JobEdit
diff --git a/src/pages/JobEdit/JobEdit.test.js b/src/pages/JobEdit/JobEdit.test.js
diff --git a/src/pages/JobEdit/JobEditContainer.js b/src/pages/JobEdit/JobEditContainer.js