feat(workflow-provider): add retry button (#95)

i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2021-09-02T13:26:50.571Z\n"
-"PO-Revision-Date: 2021-09-02T13:26:50.571Z\n"
+"POT-Creation-Date: 2021-09-28T13:14:40.432Z\n"
+"PO-Revision-Date: 2021-09-28T13:14:40.432Z\n"
 
 msgid "Not authorized"
 msgstr "Not authorized"
@@ -286,3 +286,6 @@ msgstr "No workflows found. None may exist, or you may not have access to any."
 
 msgid "Could not load approval data"
 msgstr "Could not load approval data"
+
+msgid "Retry loading approval data"
+msgstr "Retry loading approval data"

src/data-workspace/display/display.js

@@ -4,7 +4,10 @@ import { NoticeBox, CircularLoader } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React, { useEffect } from 'react'
 import { useSelectionContext } from '../../selection-context/index.js'
-import { getFixedPeriodsForTypeAndDateRange } from '../../shared/index.js'
+import {
+    getFixedPeriodsForTypeAndDateRange,
+    RetryButton,
+} from '../../shared/index.js'
 import styles from './display.module.css'
 import { Table } from './table.js'
 
@@ -97,12 +100,9 @@ const Display = ({ dataSetId }) => {
                             `This data set couldn't be loaded or displayed. Try again, or contact your system administrator.`
                         )}
                     </p>
-                    <button
-                        className={styles.retryButton}
-                        onClick={fetchDataSet}
-                    >
+                    <RetryButton onClick={fetchDataSet}>
                         {i18n.t('Retry loading data set')}
-                    </button>
+                    </RetryButton>
                 </NoticeBox>
             </div>
         )

src/data-workspace/display/display.module.css

@@ -42,13 +42,6 @@
     color: var(--colors-grey700);
 }
 
-.retryButton {
-    border: 0;
-    padding: 0;
-    background: transparent;
-    cursor: pointer;
-    text-decoration: underline;
-}
 .nonDefaultFormWarning {
     margin-bottom: var(--spacers-dp12);
 }

src/shared/index.js

@@ -2,3 +2,4 @@ export * from './error-message/index.js'
 export * from './fixed-periods/index.js'
 export * from './loader/index.js'
 export * from './approval-status/index.js'
+export * from './retry-button/index.js'

src/shared/retry-button/index.js

@@ -0,0 +1 @@
+export { RetryButton } from './retry-button.js'

src/shared/retry-button/retry-button.js

@@ -0,0 +1,14 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import styles from './retry-button.module.css'
+
+export const RetryButton = ({ onClick, children }) => (
+    <button className={styles.button} onClick={onClick}>
+        {children}
+    </button>
+)
+
+RetryButton.propTypes = {
+    children: PropTypes.node.isRequired,
+    onClick: PropTypes.func.isRequired,
+}

src/shared/retry-button/retry-button.module.css

@@ -0,0 +1,7 @@
+.button {
+    border: 0;
+    padding: 0;
+    background: transparent;
+    cursor: pointer;
+    text-decoration: underline;
+}

src/workflow-context/workflow-provider.js

@@ -3,7 +3,7 @@ import i18n from '@dhis2/d2-i18n'
 import { PropTypes } from '@dhis2/prop-types'
 import React, { useEffect } from 'react'
 import { useSelectionContext } from '../selection-context/index.js'
-import { ErrorMessage, Loader } from '../shared/index.js'
+import { ErrorMessage, Loader, RetryButton } from '../shared/index.js'
 import { WorkflowContext } from './workflow-context.js'
 
 const query = {
@@ -22,10 +22,11 @@ const WorkflowProvider = ({ children }) => {
     const { fetching, error, data, called, refetch } = useDataQuery(query, {
         lazy: true,
     })
+    const fetchApprovalStatus = () => refetch({ workflow, period, orgUnit })
 
     useEffect(() => {
         if (workflow && period && orgUnit) {
-            refetch({ workflow, period, orgUnit })
+            fetchApprovalStatus()
         }
     }, [workflow, period, orgUnit])
 
@@ -40,7 +41,10 @@ const WorkflowProvider = ({ children }) => {
     if (error) {
         return (
             <ErrorMessage title={i18n.t('Could not load approval data')}>
-                {error.message}
+                <p>{error.message}</p>
+                <RetryButton onClick={fetchApprovalStatus}>
+                    {i18n.t('Retry loading approval data')}
+                </RetryButton>
             </ErrorMessage>
         )
     }