#106 Loading indicators on new/edit doc

mitaai · Dec 28, 2020 · eff051b · eff051b
1 parent 05ac0fb
commit eff051b
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 11 deletions.
diff --git a/src/components/DocumentForm/DocumentForm.js b/src/components/DocumentForm/DocumentForm.js
@@ -56,6 +56,7 @@ const DocumentForm = ({
   mode,
   data,
   setErrors,
+  setPageLoading,
 }) => {
   const router = useRouter();
   const [showModal, setShowModal] = useState(false);
@@ -314,6 +315,7 @@ const DocumentForm = ({
     <Formik
       onSubmit={(values, actions) => {
         const submitFunction = mode === 'edit' ? editDocument : createDocument;
+        setPageLoading(true);
         setTimeout(() => {
           submitFunction(values)
             .then(() => {
@@ -328,6 +330,7 @@ const DocumentForm = ({
             })
             .catch((err) => {
               setErrors([err.message]);
+              setPageLoading(false);
             });
           actions.setSubmitting(false);
         }, 1000);
@@ -563,6 +566,7 @@ const DocumentForm = ({
                           handleCloseModal={handleCloseModal}
                           show={showModal}
                           onClick={(event) => {
+                            setPageLoading(true);
                             event.target.setAttribute('disabled', 'true');
                             deleteDocumentById(data.id).then(() => {
                               router.push({
@@ -574,6 +578,7 @@ const DocumentForm = ({
                               });
                             }).catch((err) => {
                               setErrors([err.message]);
+                              setPageLoading(false);
                             });
                             handleCloseModal();
                           }}

diff --git a/src/pages/documents/[slug]/edit.jsx b/src/pages/documents/[slug]/edit.jsx
@@ -1,5 +1,5 @@
 import { useSession } from 'next-auth/client';
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import {
   Card, Col,
 } from 'react-bootstrap';
@@ -10,24 +10,37 @@ import DocumentForm from '../../../components/DocumentForm';
 import { prefetchDocumentBySlug } from '../../../utils/docUtil';
 
 const EditDocument = ({ document, alerts, statefulSession }) => {
-  const [session] = useSession();
+  const [session, loading] = useSession();
+  const [pageLoading, setPageLoading] = useState(true);
+
+  useEffect(() => {
+    if (loading === false) {
+      setPageLoading(false);
+    }
+  }, [loading]);
   const [errors, setErrors] = useState(alerts || []);
   return (
     <Layout alerts={errors} type="document" title={document ? `Edit Document: ${document.title}` : 'error'} statefulSession={statefulSession}>
       <Col lg="12" className="mx-auto">
         <Card>
-          {!session && (
+          {((!session && loading) || pageLoading) && (
             <LoadingSpinner />
           )}
-          {session && document && (
+          {session && document && !loading && !pageLoading && (
             <>
               <Card.Header><Card.Title>Edit document</Card.Title></Card.Header>
               <Card.Body>
-                <DocumentForm mode="edit" session={session} data={document} setErrors={setErrors} />
+                <DocumentForm
+                  mode="edit"
+                  session={session}
+                  data={document}
+                  setErrors={setErrors}
+                  setPageLoading={setPageLoading}
+                />
               </Card.Body>
             </>
           )}
-          {session && !document && (
+          {session && !document && !loading && !pageLoading && (
             <>
               <Card.Header><Card.Title>Document not found</Card.Title></Card.Header>
               <Card.Body>Sorry, this document could not be found.</Card.Body>

diff --git a/src/pages/documents/new.jsx b/src/pages/documents/new.jsx
@@ -1,5 +1,5 @@
 import { useSession } from 'next-auth/client';
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import {
   Card, Col,
 } from 'react-bootstrap';
@@ -8,20 +8,33 @@ import LoadingSpinner from '../../components/LoadingSpinner';
 import DocumentForm from '../../components/DocumentForm';
 
 const NewDocument = ({ statefulSession }) => {
-  const [session] = useSession();
+  const [session, loading] = useSession();
+  const [pageLoading, setPageLoading] = useState(true);
+
+  useEffect(() => {
+    if (loading === false) {
+      setPageLoading(false);
+    }
+  }, [loading]);
+
   const [errors, setErrors] = useState([]);
   return (
     <Layout alerts={errors} type="document" title="New Document" statefulSession={statefulSession}>
       <Col lg="12" className="mx-auto">
         <Card>
-          {!session && (
+          {((!session && loading) || pageLoading) && (
             <LoadingSpinner />
           )}
-          {session && (
+          {session && !loading && !pageLoading && (
             <>
               <Card.Header><Card.Title>Create a new document</Card.Title></Card.Header>
               <Card.Body>
-                <DocumentForm mode="new" session={session} setErrors={setErrors} />
+                <DocumentForm
+                  mode="new"
+                  session={session}
+                  setErrors={setErrors}
+                  setPageLoading={setPageLoading}
+                />
               </Card.Body>
             </>
           )}