feat: add saving indicator to application forms

bcgov · Aug 21, 2020 · b4a3e6f · b4a3e6f
1 parent 12100ac
commit b4a3e6f
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 20 deletions.
diff --git a/app/components/helpers/SavingIndicator.tsx b/app/components/helpers/SavingIndicator.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import {faSync, faCheck} from '@fortawesome/free-solid-svg-icons';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+
+interface Props {
+  isSaved?: boolean;
+}
+
+const SavingIndicator: React.FunctionComponent<Props> = ({isSaved}) => {
+  return (
+    <div className="text-secondary">
+      <FontAwesomeIcon icon={isSaved ? faCheck : faSync} />
+      <span>{isSaved ? 'Form input saved' : 'Saving form input...'}</span>
+      <style jsx>
+        {`
+          div {
+            width: 100%;
+            display: inline-flex;
+            justify-content: flex-end;
+            align-items: baseline;
+            color: ;
+          }
+
+          span {
+            margin-left: 0.3em;
+          }
+        `}
+      </style>
+    </div>
+  );
+};
+
+export default SavingIndicator;
diff --git a/app/containers/Applications/ApplicationWizardStep.tsx b/app/containers/Applications/ApplicationWizardStep.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState} from 'react';
 import {graphql, createFragmentContainer, RelayProp} from 'react-relay';
 import {ApplicationWizardStep_query} from 'ApplicationWizardStep_query.graphql';
 import {Row, Col} from 'react-bootstrap';
@@ -27,19 +27,25 @@ const ApplicationWizardStep: React.FunctionComponent<Props> = ({
   relay
 }) => {
   const {application, formResult} = query;
+
+  const [isSaved, setSaved] = useState(true);
   // Function: store the form result
   const storeResult = async (result) => {
+    setSaved(false);
     const {environment} = relay;
     const variables = {
       input: {
         id: formResult.id,
         formResultPatch: {
           formResult: result
         }
+      },
+      messages: {
+        failure: 'An error occured while saving your form.'
       }
     };
-    const response = await updateFormResultMutation(environment, variables);
-    console.log('response', response);
+    await updateFormResultMutation(environment, variables);
+    setSaved(true);
   };
 
   // Define a callback methods on survey complete
@@ -51,7 +57,6 @@ const ApplicationWizardStep: React.FunctionComponent<Props> = ({
 
   const onValueChanged = async (change) => {
     const {formData} = change;
-    console.log(formData);
     await storeResult(formData);
   };
 
@@ -66,30 +71,26 @@ const ApplicationWizardStep: React.FunctionComponent<Props> = ({
 
   if (!application) return null;
 
+  const form = (
+    <Form
+      query={query}
+      isSaved={isSaved}
+      onComplete={onComplete}
+      onValueChanged={onValueChanged}
+      onBack={onStepBack}
+    />
+  );
+
   if (formResult.hasUnresolvedComments)
     return (
       <Row>
-        <Col md={8}>
-          <Form
-            query={query}
-            onComplete={onComplete}
-            onValueChanged={onValueChanged}
-            onBack={onStepBack}
-          />
-        </Col>
+        <Col md={8}>{form}</Col>
         <Col md={4}>
           <ApplicationComments formResult={formResult} review={false} />
         </Col>
       </Row>
     );
-  return (
-    <Form
-      query={query}
-      onComplete={onComplete}
-      onValueChanged={onValueChanged}
-      onBack={onStepBack}
-    />
-  );
+  return form;
 };
 
 export default createFragmentContainer(ApplicationWizardStep, {

diff --git a/app/containers/Forms/Form.tsx b/app/containers/Forms/Form.tsx
@@ -22,12 +22,14 @@ import NumberField from './NumberField';
 import EmissionCategoryRowIdField from './EmissionCategoryRowIdField';
 import ProblemReportField from 'components/Forms/ProblemReportField';
 import {customTransformErrors} from 'functions/customTransformErrors';
+import SavingIndicator from 'components/helpers/SavingIndicator';
 
 interface Props {
   query: Form_query;
   onComplete: (e: IChangeEvent) => void;
   onBack: () => void;
   onValueChanged?: (e: IChangeEvent, es?: ErrorSchema) => void;
+  isSaved: boolean;
 }
 
 const CUSTOM_FIELDS = {
@@ -55,6 +57,7 @@ const CUSTOM_FIELDS = {
 
 export const FormComponent: React.FunctionComponent<Props> = ({
   query,
+  isSaved,
   onComplete,
   onBack,
   onValueChanged
@@ -223,6 +226,9 @@ export const FormComponent: React.FunctionComponent<Props> = ({
         <Col md={8}>
           <h1 className="form-title">{name}</h1>
         </Col>
+        <Col md={4}>
+          <SavingIndicator isSaved={isSaved} />
+        </Col>
       </Row>
 
       {hasErrors && (