From e640ba953936337d0a35f327bc14c920416eeceb Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Mon, 28 Dec 2020 11:31:00 -0500
Subject: [PATCH] #106 Loading indicators on group routes

---
 src/pages/groups/[id]/edit.jsx | 60 ++++++++++++++++++++++++++--------
 src/pages/groups/index.jsx     | 18 +++++++---
 src/pages/groups/new.jsx       | 17 +++++++---
 3 files changed, 74 insertions(+), 21 deletions(-)

diff --git a/src/pages/groups/[id]/edit.jsx b/src/pages/groups/[id]/edit.jsx
index c426e46a..47246702 100644
--- a/src/pages/groups/[id]/edit.jsx
+++ b/src/pages/groups/[id]/edit.jsx
@@ -1,6 +1,6 @@
 import { useSession } from 'next-auth/client';
 import { Pencil, TrashFill } from 'react-bootstrap-icons';
-import { useState, useRef } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import {
   Button,
   Card,
@@ -40,6 +40,15 @@ const EditGroup = ({
   statefulSession,
 }) => {
   const [session, loading] = useSession();
+  const [pageLoading, setPageLoading] = useState(true);
+
+  useEffect(() => {
+    if (loading === false) {
+      setPageLoading(false);
+    }
+  }, [loading]);
+
+
   const [alerts, setAlerts] = useState(initAlerts || []);
 
   const router = useRouter();
@@ -80,10 +89,10 @@ const EditGroup = ({
   return (
     <Layout alerts={alerts} type="group" title={`Manage Group: ${group.name}`} statefulSession={statefulSession}>
       <Card>
-        {!session && loading && (
+        {((!session && loading) || pageLoading) && (
           <LoadingSpinner />
         )}
-        {session && !loading
+        {session && !loading && !pageLoading
           && (session.user.role === 'admin'
             || roleInGroup(session) === 'owner'
             || roleInGroup(session) === 'manager')
@@ -115,6 +124,7 @@ const EditGroup = ({
                   })}
                   onSubmit={(values, actions) => {
                     setTimeout(() => {
+                      setPageLoading(true);
                       renameGroup(group, values.groupName).then(() => {
                         setAlerts([...alerts, {
                           text: 'Group successfully renamed.',
@@ -123,8 +133,10 @@ const EditGroup = ({
                         setState({
                           ...state, editingGroupName: false, groupName: values.groupName,
                         });
+                        setPageLoading(false);
                       }).catch((err) => {
                         setAlerts([...alerts, { text: err.message, variant: 'danger' }]);
+                        setPageLoading(false);
                       });
                       actions.setSubmitting(false);
                     }, 1000);
@@ -200,6 +212,7 @@ const EditGroup = ({
                                 <Dropdown.Item
                                   disabled={member.role === 'member'}
                                   onClick={() => {
+                                    setPageLoading(true);
                                     changeUserRole(group, member, 'member').then(() => {
                                       const newArray = [...state.members];
                                       const newMember = { ...member, role: 'member' };
@@ -209,8 +222,10 @@ const EditGroup = ({
                                         text: 'User\'s role changed successfully.',
                                         variant: 'success',
                                       }]);
+                                      setPageLoading(false);
                                     }).catch((err) => {
                                       setAlerts([...alerts, { text: err.message, variant: 'danger' }]);
+                                      setPageLoading(false);
                                     });
                                   }}
                                 >
@@ -219,6 +234,7 @@ const EditGroup = ({
                                 <Dropdown.Item
                                   disabled={member.role === 'manager'}
                                   onClick={() => {
+                                    setPageLoading(true);
                                     changeUserRole(group, member, 'manager').then(() => {
                                       const newArray = [...state.members];
                                       const newMember = { ...member, role: 'manager' };
@@ -228,8 +244,10 @@ const EditGroup = ({
                                         text: 'User\'s role changed successfully.',
                                         variant: 'success',
                                       }]);
+                                      setPageLoading(false);
                                     }).catch((err) => {
                                       setAlerts([...alerts, { text: err.message, variant: 'danger' }]);
+                                      setPageLoading(false);
                                     });
                                   }}
                                 >
@@ -245,16 +263,21 @@ const EditGroup = ({
                                 variant="outline-danger"
                                 className="btn-sm"
                                 type="button"
-                                onClick={() => removeUserFromGroup(group, member).then(() => {
-                                  const members = state.members.filter((val, i) => i !== idx);
-                                  setState({ ...state, members });
-                                  setAlerts([...alerts, {
-                                    text: 'User successfully removed from group.',
-                                    variant: 'warning',
-                                  }]);
-                                }).catch((err) => {
-                                  setAlerts([...alerts, { text: err.message, variant: 'danger' }]);
-                                })}
+                                onClick={() => {
+                                  setPageLoading(true);
+                                  removeUserFromGroup(group, member).then(() => {
+                                    const members = state.members.filter((val, i) => i !== idx);
+                                    setState({ ...state, members });
+                                    setAlerts([...alerts, {
+                                      text: 'User successfully removed from group.',
+                                      variant: 'warning',
+                                    }]);
+                                    setPageLoading(false);
+                                  }).catch((err) => {
+                                    setAlerts([...alerts, { text: err.message, variant: 'danger' }]);
+                                    setPageLoading(false);
+                                  });
+                                }}
                               >
                                 Remove
                               </Button>
@@ -274,6 +297,7 @@ const EditGroup = ({
                         <Button
                           variant="outline-secondary"
                           onClick={(event) => {
+                            setPageLoading(true);
                             event.target.setAttribute('disabled', 'true');
                             generateInviteToken(group).then((data) => {
                               const inviteUrl = `${baseUrl}/auth/signin?callbackUrl=${baseUrl}&groupToken=${data.value.inviteToken}`;
@@ -282,8 +306,10 @@ const EditGroup = ({
                                 text: 'Group invite token created successfully.',
                                 variant: 'success',
                               }]);
+                              setPageLoading(false);
                             }).catch((err) => {
                               setAlerts([...alerts, { text: err.message, variant: 'danger' }]);
+                              setPageLoading(false);
                             });
                           }}
                         >
@@ -304,14 +330,17 @@ const EditGroup = ({
                             size="sm"
                             style={{ padding: 0 }}
                             onClick={() => {
+                              setPageLoading(true);
                               deleteInviteToken(group).then(() => {
                                 setState({ ...state, inviteUrl: '' });
                                 setAlerts([...alerts, {
                                   text: 'Group invite token deleted successfully.',
                                   variant: 'warning',
                                 }]);
+                                setPageLoading(false);
                               }).catch((err) => {
                                 setAlerts([...alerts, { text: err.message, variant: 'danger' }]);
+                                setPageLoading(false);
                               });
                             }}
                           >
@@ -373,6 +402,7 @@ const EditGroup = ({
                       })}
                       onSubmit={(values, actions) => {
                         setTimeout(async () => {
+                          setPageLoading(true);
                           await addUserToGroup(group, values.email).then((data) => {
                             const { _id, name } = data[state.members.length].value;
                             const { email } = values;
@@ -385,8 +415,10 @@ const EditGroup = ({
                               variant: 'success',
                             }]);
                             actions.resetForm();
+                            setPageLoading(false);
                           }).catch((err) => {
                             setAlerts([...alerts, { text: err.message, variant: 'danger' }]);
+                            setPageLoading(false);
                           });
                           actions.setSubmitting(false);
                         }, 1000);
@@ -457,6 +489,7 @@ const EditGroup = ({
                         handleCloseModal={handleCloseModal}
                         show={state.showModal}
                         onClick={(event) => {
+                          setPageLoading(true);
                           event.target.setAttribute('disabled', 'true');
                           deleteGroup(group).then(() => {
                             router.push({
@@ -468,6 +501,7 @@ const EditGroup = ({
                             }, '/groups');
                           }).catch((err) => {
                             setAlerts([...alerts, { text: err.message, variant: 'danger' }]);
+                            setPageLoading(false);
                           });
                           handleCloseModal();
                         }}
diff --git a/src/pages/groups/index.jsx b/src/pages/groups/index.jsx
index 094709cd..5076a39c 100644
--- a/src/pages/groups/index.jsx
+++ b/src/pages/groups/index.jsx
@@ -21,6 +21,7 @@ import { deepEqual } from '../../utils/objectUtil';
 const GroupList = ({ query, initAlerts, statefulSession }) => {
   const [session, loading] = useSession();
   const [alerts, setAlerts] = useState(initAlerts);
+  const [pageLoading, setPageLoading] = useState(true);
   const [groups, setGroups] = useState([]);
 
   const [showModal, setShowModal] = useState('');
@@ -30,22 +31,25 @@ const GroupList = ({ query, initAlerts, statefulSession }) => {
   };
 
   if (query.deletedGroupId && groups.some((g) => g.id === query.deletedGroupId)) {
-    setGroups(groups.filter((g) => g.id !== query.deletedGroupId));
+    setGroups(groups.filter((g) => g.id !== query.deletedGroupId))
+      .then(setPageLoading(false))
+      .catch((err) => setAlerts([...alerts, { text: err.message, variant: 'danger' }]));
   }
 
   React.useEffect(() => {
     if (session && !deepEqual(session.user.groups, groups)) {
       setGroups(session.user.groups);
+      setPageLoading(false);
     }
   }, [session]);
 
   return (
     <Layout alerts={alerts} type="group" statefulSession={statefulSession}>
       <Card>
-        {!session && loading && (
+        {((!session && loading) || pageLoading) && (
           <LoadingSpinner />
         )}
-        {session && (
+        {session && !loading && !pageLoading && (
           <>
             <Card.Header>
               Groups
@@ -88,6 +92,7 @@ const GroupList = ({ query, initAlerts, statefulSession }) => {
                           <Button
                             variant="outline-danger"
                             onClick={async () => {
+                              setPageLoading(true);
                               await getUserByEmail(session.user.email).then((user) => {
                                 removeUserFromGroup(group, user).then(() => {
                                   setGroups(groups.filter((g) => g.id !== group.id));
@@ -95,9 +100,11 @@ const GroupList = ({ query, initAlerts, statefulSession }) => {
                                     text: 'You have successfully left the group.',
                                     variant: 'warning',
                                   }]);
+                                  setPageLoading(false);
                                 });
                               }).catch((err) => {
                                 setAlerts([...alerts, { text: err.message, variant: 'danger' }]);
+                                setPageLoading(false);
                               });
                             }}
                           >
@@ -113,7 +120,7 @@ const GroupList = ({ query, initAlerts, statefulSession }) => {
                               onClick={handleShowModal}
                               data-key={group.id}
                             >
-                              <TrashFill 
+                              <TrashFill
                                 data-key={group.id}
                                 className="align-text-bottom mr-1"
                               />
@@ -125,6 +132,7 @@ const GroupList = ({ query, initAlerts, statefulSession }) => {
                               handleCloseModal={handleCloseModal}
                               show={showModal === group.id}
                               onClick={(event) => {
+                                setPageLoading(true);
                                 event.target.setAttribute('disabled', 'true');
                                 deleteGroupById(group.id).then(() => {
                                   setGroups(groups.filter((g) => g.id !== group.id));
@@ -132,8 +140,10 @@ const GroupList = ({ query, initAlerts, statefulSession }) => {
                                     text: 'You have successfully deleted the group.',
                                     variant: 'warning',
                                   }]);
+                                  setPageLoading(false);
                                 }).catch((err) => {
                                   setAlerts([...alerts, { text: err.message, variant: 'danger' }]);
+                                  setPageLoading(false);
                                 });
                                 handleCloseModal();
                               }}
diff --git a/src/pages/groups/new.jsx b/src/pages/groups/new.jsx
index 337befe5..b929cd83 100644
--- a/src/pages/groups/new.jsx
+++ b/src/pages/groups/new.jsx
@@ -1,7 +1,7 @@
 import fetch from 'unfetch';
 import { Formik } from 'formik';
 import { useSession } from 'next-auth/client';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import {
   Button, Card, Col, Form, Row,
 } from 'react-bootstrap';
@@ -12,9 +12,16 @@ import Layout from '../../components/Layout';
 import LoadingSpinner from '../../components/LoadingSpinner';
 
 const NewGroup = ({ statefulSession }) => {
-  const [session] = useSession();
+  const [session, loading] = useSession();
+  const [pageLoading, setPageLoading] = useState(true);
   const [alerts, setAlerts] = useState([]);
 
+  useEffect(() => {
+    if (loading === false) {
+      setPageLoading(false);
+    }
+  }, [loading]);
+
   const createGroup = async (values) => {
     const url = '/api/group';
     const { name } = values;
@@ -56,18 +63,20 @@ const NewGroup = ({ statefulSession }) => {
     <Layout alerts={alerts} type="group" title="New Group" statefulSession={statefulSession}>
       <Col lg="8" className="mx-auto">
         <Card>
-          {!session && (
+          {((!session && loading) || pageLoading) && (
             <LoadingSpinner />
           )}
-          {session && (
+          {session && !loading && !pageLoading && (
             <Card.Body className="text-center">
               <Card.Title>Create a new group</Card.Title>
 
               <Formik
                 onSubmit={(values, actions) => {
+                  setPageLoading(true);
                   setTimeout(() => {
                     createGroup(values).catch((err) => {
                       setAlerts([...alerts, { text: err.message, variant: 'danger' }]);
+                      setPageLoading(false);
                     });
                     actions.setSubmitting(false);
                   }, 1000);