From 9d4d5795710b0659f4af63b2b7312130959c5ba7 Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Tue, 28 Jul 2020 17:50:35 -0400
Subject: [PATCH 01/62] #28 Add timestamps to group PATCH

---
 src/pages/api/group/index.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/pages/api/group/index.js b/src/pages/api/group/index.js
index 2a2381da..51f7b762 100644
--- a/src/pages/api/group/index.js
+++ b/src/pages/api/group/index.js
@@ -11,6 +11,8 @@ const handler = nc()
     async (req, res) => {
       const token = await jwt.getJwt({ req, secret });
       if (token && token.exp > 0) {
+        const createdAt = new Date(Date.now());
+        const updatedAt = createdAt;
         const { name } = req.body;
         const members = [{
           id: ObjectID(token.user.id),
@@ -22,7 +24,9 @@ const handler = nc()
         await req.db
           .collection('groups')
           .insertOne(
-            { name, members, documents },
+            {
+              name, members, documents, createdAt, updatedAt,
+            },
             (err, doc) => {
               if (err) throw err;
               res.status(200).json(doc);

From 6c9320cbef80b88815955164dcc17b9591cb3142 Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Tue, 28 Jul 2020 18:38:03 -0400
Subject: [PATCH 02/62] #28 Add user PATCH API route

---
 src/pages/api/user/[id].js | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/src/pages/api/user/[id].js b/src/pages/api/user/[id].js
index 04c04f52..0cbe8604 100644
--- a/src/pages/api/user/[id].js
+++ b/src/pages/api/user/[id].js
@@ -1,7 +1,10 @@
 import nc from 'next-connect';
+import jwt from 'next-auth/jwt';
 import { ObjectID } from 'mongodb';
 import middleware from '../../../middlewares/middleware';
 
+const secret = process.env.AUTH_SECRET;
+
 const handler = nc()
   .use(middleware)
   .get(
@@ -25,6 +28,34 @@ const handler = nc()
           },
         );
     },
+  )
+  .patch(
+    async (req, res) => {
+      const token = await jwt.getJwt({ req, secret });
+      if (token && token.exp > 0) {
+        const groupToPush = req.body.addedGroup
+          ? { groups: req.body.addedGroup }
+          : {};
+        await req.db
+          .collection('users')
+          .findOneAndUpdate(
+            { _id: ObjectID(req.query.id) },
+            {
+              $push: { ...groupToPush },
+              $currentDate: {
+                updatedAt: true,
+              },
+            },
+            {
+              returnOriginal: false,
+            },
+            (err, doc) => {
+              if (err) throw err;
+              res.status(200).json(doc);
+            },
+          );
+      } else res.status(403).json({ error: '403 Invalid or expired token' });
+    },
   );
 
 export default handler;

From 3eeb0b25e85da753a1cb480184dce350835ad33e Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Wed, 29 Jul 2020 11:52:39 -0400
Subject: [PATCH 03/62] #28 Add new group form

---
 src/pages/group/new.jsx | 138 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 138 insertions(+)
 create mode 100644 src/pages/group/new.jsx

diff --git a/src/pages/group/new.jsx b/src/pages/group/new.jsx
new file mode 100644
index 00000000..fd7abe67
--- /dev/null
+++ b/src/pages/group/new.jsx
@@ -0,0 +1,138 @@
+import fetch from 'unfetch';
+import { Formik } from 'formik';
+import { useSession } from 'next-auth/client';
+import {
+  Button, Card, Col, Form, Row, Spinner,
+} from 'react-bootstrap';
+import * as yup from 'yup';
+import Layout from '../../components/Layout';
+
+
+// async function updateOwnerWithGroup({ id, name, role }) {
+//   const url = `/api/user/${id}`;
+//   const res = await fetch(url, {
+//     method: 'PATCH',
+
+// }
+
+const NewGroup = () => {
+  const [session] = useSession();
+
+  const updateOwnerWithGroup = async ({ id, name, user }) => {
+    const url = `/api/user/${user}`;
+    const body = {
+      addedGroup: {
+        id,
+        name,
+        role: 'owner',
+      },
+    };
+    const res = await fetch(url, {
+      method: 'PATCH',
+      body: JSON.stringify(body),
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+    if (res.status === 200) {
+      const result = await res.json();
+      return Promise.resolve(result);
+    }
+    return Promise.reject(Error(`Unable to add group to user: error ${res.status} received from server`));
+  };
+
+  const submitHandler = async (name) => {
+    const url = '/api/group';
+    const res = await fetch(url, {
+      method: 'POST',
+      body: JSON.stringify({ name }),
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+    if (res.status === 200) {
+      const result = await res.json();
+      const group = {
+        id: result.insertedId,
+        name,
+        user: result.ops[0].members[0].id,
+      };
+      return updateOwnerWithGroup(group);
+    }
+    return Promise.reject(Error(`Unable to create group: error ${res.status} received from server`));
+  };
+
+  const schema = yup.object({
+    name: yup.string().required('Required'),
+  });
+
+  return (
+    <Layout>
+      <Col lg="8" className="mx-auto">
+        <Card>
+          {!session && (
+            <Card.Body className="text-center">
+              <Spinner animation="border" role="status">
+                <span className="sr-only">Loading...</span>
+              </Spinner>
+            </Card.Body>
+          )}
+          {session && (
+            <Card.Body className="text-center">
+              <Card.Title>Create a new group</Card.Title>
+
+              <Formik
+                onSubmit={(values, actions) => {
+                  setTimeout(() => {
+                    submitHandler(values);
+                    actions.setSubmitting(false);
+                  }, 1000);
+                }}
+                validationSchema={schema}
+                initialValues={{
+                  name: '',
+                }}
+              >
+                {(props) => (
+                  <Form onSubmit={props.handleSubmit} noValidate as={Row} className="pt-2">
+                    <Col lg>
+                      <Form.Group controlId="formPlaintextGroupName">
+                        <Form.Control
+                          size="lg"
+                          type="text"
+                          name="name"
+                          placeholder="Name"
+                          onChange={props.handleChange}
+                          onBlur={props.handleBlur}
+                          value={props.values.name}
+                          isValid={props.touched.name && !props.errors.name}
+                          isInvalid={!!props.errors.name}
+                        />
+                        <Form.Control.Feedback type="invalid">
+                          {props.errors.name}
+                        </Form.Control.Feedback>
+                      </Form.Group>
+                    </Col>
+                    <Col lg="auto">
+                      <Button
+                        variant="primary"
+                        size="lg"
+                        type="submit"
+                        disabled={props.isSubmitting || props.submitCount >= 1}
+                        data-testid="newgroup-submit-button"
+                      >
+                        Create
+                      </Button>
+                    </Col>
+                  </Form>
+                )}
+              </Formik>
+            </Card.Body>
+          )}
+        </Card>
+      </Col>
+    </Layout>
+  );
+};
+
+export default NewGroup;

From 8915352fd83c33af926c4831e4ccf10cfc95b1ae Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Wed, 29 Jul 2020 12:04:25 -0400
Subject: [PATCH 04/62] #28 Remove unused code

---
 src/pages/group/new.jsx | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/src/pages/group/new.jsx b/src/pages/group/new.jsx
index fd7abe67..ba3aec70 100644
--- a/src/pages/group/new.jsx
+++ b/src/pages/group/new.jsx
@@ -7,14 +7,6 @@ import {
 import * as yup from 'yup';
 import Layout from '../../components/Layout';
 
-
-// async function updateOwnerWithGroup({ id, name, role }) {
-//   const url = `/api/user/${id}`;
-//   const res = await fetch(url, {
-//     method: 'PATCH',
-
-// }
-
 const NewGroup = () => {
   const [session] = useSession();
 

From b4346048aad1b9abb6cda1ab6dfef5b366784c16 Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Wed, 29 Jul 2020 12:27:22 -0400
Subject: [PATCH 05/62] #28 Add new group form test suite

---
 src/__tests__/groups/new.test.js             | 18 ++++++++++++++++++
 src/__tests__/{ => user}/editprofile.test.js |  2 +-
 src/__tests__/{ => user}/newuser.test.js     |  2 +-
 src/pages/{group => groups}/new.jsx          |  0
 4 files changed, 20 insertions(+), 2 deletions(-)
 create mode 100644 src/__tests__/groups/new.test.js
 rename src/__tests__/{ => user}/editprofile.test.js (94%)
 rename src/__tests__/{ => user}/newuser.test.js (94%)
 rename src/pages/{group => groups}/new.jsx (100%)

diff --git a/src/__tests__/groups/new.test.js b/src/__tests__/groups/new.test.js
new file mode 100644
index 00000000..86db1f57
--- /dev/null
+++ b/src/__tests__/groups/new.test.js
@@ -0,0 +1,18 @@
+import { render, wait } from '@testing-library/react';
+import NewGroup from '../../pages/groups/new';
+
+test('renders new group card', async () => {
+  const { getByText } = render(<NewGroup />);
+  const textElement = getByText(/Create a new group/);
+  await wait(() => {
+    expect(textElement).toBeInTheDocument();
+  });
+});
+
+test('renders new group Formik form', async () => {
+  const { getByTestId } = render(<NewGroup />);
+  const submitButton = getByTestId('newgroup-submit-button');
+  await wait(() => {
+    expect(submitButton).toBeInTheDocument();
+  });
+});
diff --git a/src/__tests__/editprofile.test.js b/src/__tests__/user/editprofile.test.js
similarity index 94%
rename from src/__tests__/editprofile.test.js
rename to src/__tests__/user/editprofile.test.js
index a7865550..82ba3e97 100644
--- a/src/__tests__/editprofile.test.js
+++ b/src/__tests__/user/editprofile.test.js
@@ -1,5 +1,5 @@
 import { render, wait } from '@testing-library/react';
-import EditProfile from '../pages/user/[slug]/editprofile';
+import EditProfile from '../../pages/user/[slug]/editprofile';
 
 test('renders edit profile card', async () => {
   const { getByText } = render(<EditProfile user={{
diff --git a/src/__tests__/newuser.test.js b/src/__tests__/user/newuser.test.js
similarity index 94%
rename from src/__tests__/newuser.test.js
rename to src/__tests__/user/newuser.test.js
index 65a8cfd8..90206eda 100644
--- a/src/__tests__/newuser.test.js
+++ b/src/__tests__/user/newuser.test.js
@@ -1,5 +1,5 @@
 import { render, wait } from '@testing-library/react';
-import NewUser from '../pages/user/newuser';
+import NewUser from '../../pages/user/newuser';
 
 test('renders registration card', async () => {
   const { getByText } = render(<NewUser />);
diff --git a/src/pages/group/new.jsx b/src/pages/groups/new.jsx
similarity index 100%
rename from src/pages/group/new.jsx
rename to src/pages/groups/new.jsx

From 96352cca884b93a8e232f31434c87f1cfa837f95 Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Wed, 29 Jul 2020 12:42:50 -0400
Subject: [PATCH 06/62] #28 Move LoadingSpinner into reusable component

---
 .../LoadingSpinner/LoadingSpinner.js           | 13 +++++++++++++
 .../LoadingSpinner/LoadingSpinner.test.js      | 18 ++++++++++++++++++
 src/components/LoadingSpinner/index.js         |  3 +++
 3 files changed, 34 insertions(+)
 create mode 100644 src/components/LoadingSpinner/LoadingSpinner.js
 create mode 100644 src/components/LoadingSpinner/LoadingSpinner.test.js
 create mode 100644 src/components/LoadingSpinner/index.js

diff --git a/src/components/LoadingSpinner/LoadingSpinner.js b/src/components/LoadingSpinner/LoadingSpinner.js
new file mode 100644
index 00000000..90aa0ae8
--- /dev/null
+++ b/src/components/LoadingSpinner/LoadingSpinner.js
@@ -0,0 +1,13 @@
+import {
+  Card, Spinner,
+} from 'react-bootstrap';
+
+const LoadingSpinner = () => (
+  <Card.Body className="text-center" data-testid="loading-spinner-card">
+    <Spinner animation="border" role="status" data-testid="loading-spinner">
+      <span className="sr-only">Loading...</span>
+    </Spinner>
+  </Card.Body>
+);
+
+export default LoadingSpinner;
diff --git a/src/components/LoadingSpinner/LoadingSpinner.test.js b/src/components/LoadingSpinner/LoadingSpinner.test.js
new file mode 100644
index 00000000..cc90181c
--- /dev/null
+++ b/src/components/LoadingSpinner/LoadingSpinner.test.js
@@ -0,0 +1,18 @@
+import { render, wait } from '@testing-library/react';
+import LoadingSpinner from './LoadingSpinner';
+
+test('renders card.body', async () => {
+  const { getByTestId } = render(<LoadingSpinner />);
+  const cardElement = getByTestId('loading-spinner-card');
+  await wait(() => {
+    expect(cardElement).toBeInTheDocument();
+  });
+});
+
+test('renders spinner element', async () => {
+  const { getByTestId } = render(<LoadingSpinner />);
+  const spinnerElement = getByTestId('loading-spinner');
+  await wait(() => {
+    expect(spinnerElement).toBeInTheDocument();
+  });
+});
diff --git a/src/components/LoadingSpinner/index.js b/src/components/LoadingSpinner/index.js
new file mode 100644
index 00000000..72aa1b3c
--- /dev/null
+++ b/src/components/LoadingSpinner/index.js
@@ -0,0 +1,3 @@
+import LoadingSpinner from './LoadingSpinner';
+
+export default LoadingSpinner;

From 88998b63f0ddfe19a2ad51a0ee4fac56bf694acf Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Wed, 29 Jul 2020 12:45:59 -0400
Subject: [PATCH 07/62] #28 Replace all spinners with LoadingSpinner component

---
 src/pages/groups/new.jsx              |  9 +++------
 src/pages/user/[slug]/editprofile.jsx |  9 +++------
 src/pages/user/newuser.jsx            | 17 +++++++----------
 3 files changed, 13 insertions(+), 22 deletions(-)

diff --git a/src/pages/groups/new.jsx b/src/pages/groups/new.jsx
index ba3aec70..2728a903 100644
--- a/src/pages/groups/new.jsx
+++ b/src/pages/groups/new.jsx
@@ -2,10 +2,11 @@ import fetch from 'unfetch';
 import { Formik } from 'formik';
 import { useSession } from 'next-auth/client';
 import {
-  Button, Card, Col, Form, Row, Spinner,
+  Button, Card, Col, Form, Row,
 } from 'react-bootstrap';
 import * as yup from 'yup';
 import Layout from '../../components/Layout';
+import LoadingSpinner from '../../components/LoadingSpinner';
 
 const NewGroup = () => {
   const [session] = useSession();
@@ -63,11 +64,7 @@ const NewGroup = () => {
       <Col lg="8" className="mx-auto">
         <Card>
           {!session && (
-            <Card.Body className="text-center">
-              <Spinner animation="border" role="status">
-                <span className="sr-only">Loading...</span>
-              </Spinner>
-            </Card.Body>
+            <LoadingSpinner />
           )}
           {session && (
             <Card.Body className="text-center">
diff --git a/src/pages/user/[slug]/editprofile.jsx b/src/pages/user/[slug]/editprofile.jsx
index 2e4f87fa..ef3970e4 100644
--- a/src/pages/user/[slug]/editprofile.jsx
+++ b/src/pages/user/[slug]/editprofile.jsx
@@ -3,11 +3,12 @@ import { useSession, getSession } from 'next-auth/client';
 import { Formik } from 'formik';
 import * as yup from 'yup';
 import {
-  Button, Card, Col, Form, Row, Spinner,
+  Button, Card, Col, Form, Row,
 } from 'react-bootstrap';
 import Router from 'next/router';
 import fullName from '../../../utils/nameUtil';
 import Layout from '../../../components/Layout';
+import LoadingSpinner from '../../../components/LoadingSpinner';
 
 const EditProfile = ({ user }) => {
   const [session] = useSession();
@@ -54,11 +55,7 @@ const EditProfile = ({ user }) => {
       <Col lg="8" className="mx-auto">
         <Card>
           {!session && (
-            <Card.Body className="text-center">
-              <Spinner animation="border" role="status">
-                <span className="sr-only">Loading...</span>
-              </Spinner>
-            </Card.Body>
+            <LoadingSpinner />
           )}
           {session && user && (
             <Card.Body>
diff --git a/src/pages/user/newuser.jsx b/src/pages/user/newuser.jsx
index 8b88b6c1..0954c499 100644
--- a/src/pages/user/newuser.jsx
+++ b/src/pages/user/newuser.jsx
@@ -4,13 +4,14 @@ import fetch from 'unfetch';
 import { Formik } from 'formik';
 import * as yup from 'yup';
 import {
-  Button, Card, Col, Form, Row, Spinner,
+  Button, Card, Col, Form, Row,
 } from 'react-bootstrap';
 import Feedback from 'react-bootstrap/Feedback';
 import Link from 'next/link';
 import Router from 'next/router';
 import fullName from '../../utils/nameUtil';
 import Layout from '../../components/Layout';
+import LoadingSpinner from '../../components/LoadingSpinner';
 
 const NewUser = () => {
   const [session] = useSession();
@@ -57,11 +58,7 @@ const NewUser = () => {
       <Col lg="8" className="mx-auto">
         <Card>
           {!session && (
-            <Card.Body className="text-center">
-              <Spinner animation="border" role="status">
-                <span className="sr-only">Loading...</span>
-              </Spinner>
-            </Card.Body>
+            <LoadingSpinner />
           )}
           {session && (
             <Card.Body>
@@ -97,7 +94,7 @@ const NewUser = () => {
                       </Col>
                     </Form.Group>
 
-                    <Form.Group as={Row} controlId="validationFormik01">
+                    <Form.Group as={Row} controlId="formPlaintextFirstName">
                       <Form.Label column lg="4">
                         First Name
                       </Form.Label>
@@ -118,7 +115,7 @@ const NewUser = () => {
                       </Col>
                     </Form.Group>
 
-                    <Form.Group as={Row} controlId="validationFormik02">
+                    <Form.Group as={Row} controlId="formPlaintextLastName">
                       <Form.Label column lg="4">
                         Last Name
                       </Form.Label>
@@ -139,7 +136,7 @@ const NewUser = () => {
                       </Col>
                     </Form.Group>
 
-                    <Form.Group as={Row} controlId="validationFormik03">
+                    <Form.Group as={Row} controlId="formPlaintextAffiliation">
                       <Form.Label column lg="4">
                         Affiliation
                       </Form.Label>
@@ -156,7 +153,7 @@ const NewUser = () => {
                         />
                       </Col>
                     </Form.Group>
-                    <Form.Group>
+                    <Form.Group controlId="formCheckboxTos">
                       <Form.Check type="checkbox">
                         <Form.Check.Input
                           required

From acd145097c75d294b7c8bbe1eab1c90ee788aa97 Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Tue, 28 Jul 2020 17:50:35 -0400
Subject: [PATCH 08/62] #28 Add timestamps to group PATCH

---
 src/pages/api/group/index.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/pages/api/group/index.js b/src/pages/api/group/index.js
index 292bd87f..d4ea3340 100644
--- a/src/pages/api/group/index.js
+++ b/src/pages/api/group/index.js
@@ -11,6 +11,8 @@ const handler = nc()
     async (req, res) => {
       const token = await jwt.getToken({ req, secret });
       if (token && token.exp > 0) {
+        const createdAt = new Date(Date.now());
+        const updatedAt = createdAt;
         const { name } = req.body;
         const members = [{
           id: ObjectID(token.id),
@@ -22,7 +24,9 @@ const handler = nc()
         await req.db
           .collection('groups')
           .insertOne(
-            { name, members, documents },
+            {
+              name, members, documents, createdAt, updatedAt,
+            },
             (err, doc) => {
               if (err) throw err;
               res.status(200).json(doc);

From c2de7b764a058a129fddade6a524beee89d16b8a Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Tue, 28 Jul 2020 18:38:03 -0400
Subject: [PATCH 09/62] #28 Add user PATCH API route

---
 src/pages/api/user/[id].js | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/src/pages/api/user/[id].js b/src/pages/api/user/[id].js
index 04c04f52..0cbe8604 100644
--- a/src/pages/api/user/[id].js
+++ b/src/pages/api/user/[id].js
@@ -1,7 +1,10 @@
 import nc from 'next-connect';
+import jwt from 'next-auth/jwt';
 import { ObjectID } from 'mongodb';
 import middleware from '../../../middlewares/middleware';
 
+const secret = process.env.AUTH_SECRET;
+
 const handler = nc()
   .use(middleware)
   .get(
@@ -25,6 +28,34 @@ const handler = nc()
           },
         );
     },
+  )
+  .patch(
+    async (req, res) => {
+      const token = await jwt.getJwt({ req, secret });
+      if (token && token.exp > 0) {
+        const groupToPush = req.body.addedGroup
+          ? { groups: req.body.addedGroup }
+          : {};
+        await req.db
+          .collection('users')
+          .findOneAndUpdate(
+            { _id: ObjectID(req.query.id) },
+            {
+              $push: { ...groupToPush },
+              $currentDate: {
+                updatedAt: true,
+              },
+            },
+            {
+              returnOriginal: false,
+            },
+            (err, doc) => {
+              if (err) throw err;
+              res.status(200).json(doc);
+            },
+          );
+      } else res.status(403).json({ error: '403 Invalid or expired token' });
+    },
   );
 
 export default handler;

From 8dad1db877c3151ff717fa4105a79246111b061b Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Wed, 29 Jul 2020 11:52:39 -0400
Subject: [PATCH 10/62] #28 Add new group form

---
 src/pages/group/new.jsx | 138 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 138 insertions(+)
 create mode 100644 src/pages/group/new.jsx

diff --git a/src/pages/group/new.jsx b/src/pages/group/new.jsx
new file mode 100644
index 00000000..fd7abe67
--- /dev/null
+++ b/src/pages/group/new.jsx
@@ -0,0 +1,138 @@
+import fetch from 'unfetch';
+import { Formik } from 'formik';
+import { useSession } from 'next-auth/client';
+import {
+  Button, Card, Col, Form, Row, Spinner,
+} from 'react-bootstrap';
+import * as yup from 'yup';
+import Layout from '../../components/Layout';
+
+
+// async function updateOwnerWithGroup({ id, name, role }) {
+//   const url = `/api/user/${id}`;
+//   const res = await fetch(url, {
+//     method: 'PATCH',
+
+// }
+
+const NewGroup = () => {
+  const [session] = useSession();
+
+  const updateOwnerWithGroup = async ({ id, name, user }) => {
+    const url = `/api/user/${user}`;
+    const body = {
+      addedGroup: {
+        id,
+        name,
+        role: 'owner',
+      },
+    };
+    const res = await fetch(url, {
+      method: 'PATCH',
+      body: JSON.stringify(body),
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+    if (res.status === 200) {
+      const result = await res.json();
+      return Promise.resolve(result);
+    }
+    return Promise.reject(Error(`Unable to add group to user: error ${res.status} received from server`));
+  };
+
+  const submitHandler = async (name) => {
+    const url = '/api/group';
+    const res = await fetch(url, {
+      method: 'POST',
+      body: JSON.stringify({ name }),
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+    if (res.status === 200) {
+      const result = await res.json();
+      const group = {
+        id: result.insertedId,
+        name,
+        user: result.ops[0].members[0].id,
+      };
+      return updateOwnerWithGroup(group);
+    }
+    return Promise.reject(Error(`Unable to create group: error ${res.status} received from server`));
+  };
+
+  const schema = yup.object({
+    name: yup.string().required('Required'),
+  });
+
+  return (
+    <Layout>
+      <Col lg="8" className="mx-auto">
+        <Card>
+          {!session && (
+            <Card.Body className="text-center">
+              <Spinner animation="border" role="status">
+                <span className="sr-only">Loading...</span>
+              </Spinner>
+            </Card.Body>
+          )}
+          {session && (
+            <Card.Body className="text-center">
+              <Card.Title>Create a new group</Card.Title>
+
+              <Formik
+                onSubmit={(values, actions) => {
+                  setTimeout(() => {
+                    submitHandler(values);
+                    actions.setSubmitting(false);
+                  }, 1000);
+                }}
+                validationSchema={schema}
+                initialValues={{
+                  name: '',
+                }}
+              >
+                {(props) => (
+                  <Form onSubmit={props.handleSubmit} noValidate as={Row} className="pt-2">
+                    <Col lg>
+                      <Form.Group controlId="formPlaintextGroupName">
+                        <Form.Control
+                          size="lg"
+                          type="text"
+                          name="name"
+                          placeholder="Name"
+                          onChange={props.handleChange}
+                          onBlur={props.handleBlur}
+                          value={props.values.name}
+                          isValid={props.touched.name && !props.errors.name}
+                          isInvalid={!!props.errors.name}
+                        />
+                        <Form.Control.Feedback type="invalid">
+                          {props.errors.name}
+                        </Form.Control.Feedback>
+                      </Form.Group>
+                    </Col>
+                    <Col lg="auto">
+                      <Button
+                        variant="primary"
+                        size="lg"
+                        type="submit"
+                        disabled={props.isSubmitting || props.submitCount >= 1}
+                        data-testid="newgroup-submit-button"
+                      >
+                        Create
+                      </Button>
+                    </Col>
+                  </Form>
+                )}
+              </Formik>
+            </Card.Body>
+          )}
+        </Card>
+      </Col>
+    </Layout>
+  );
+};
+
+export default NewGroup;

From 9c72d37ced1701b3841d684377d54690fcdaa706 Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Wed, 29 Jul 2020 12:04:25 -0400
Subject: [PATCH 11/62] #28 Remove unused code

---
 src/pages/group/new.jsx | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/src/pages/group/new.jsx b/src/pages/group/new.jsx
index fd7abe67..ba3aec70 100644
--- a/src/pages/group/new.jsx
+++ b/src/pages/group/new.jsx
@@ -7,14 +7,6 @@ import {
 import * as yup from 'yup';
 import Layout from '../../components/Layout';
 
-
-// async function updateOwnerWithGroup({ id, name, role }) {
-//   const url = `/api/user/${id}`;
-//   const res = await fetch(url, {
-//     method: 'PATCH',
-
-// }
-
 const NewGroup = () => {
   const [session] = useSession();
 

From bbb7f43e5521cc42d2bc7589d3065d96501595d0 Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Wed, 29 Jul 2020 12:27:22 -0400
Subject: [PATCH 12/62] #28 Add new group form test suite

---
 src/__tests__/groups/new.test.js             | 18 ++++++++++++++++++
 src/__tests__/{ => user}/editprofile.test.js |  2 +-
 src/__tests__/{ => user}/newuser.test.js     |  2 +-
 src/pages/{group => groups}/new.jsx          |  0
 4 files changed, 20 insertions(+), 2 deletions(-)
 create mode 100644 src/__tests__/groups/new.test.js
 rename src/__tests__/{ => user}/editprofile.test.js (94%)
 rename src/__tests__/{ => user}/newuser.test.js (94%)
 rename src/pages/{group => groups}/new.jsx (100%)

diff --git a/src/__tests__/groups/new.test.js b/src/__tests__/groups/new.test.js
new file mode 100644
index 00000000..86db1f57
--- /dev/null
+++ b/src/__tests__/groups/new.test.js
@@ -0,0 +1,18 @@
+import { render, wait } from '@testing-library/react';
+import NewGroup from '../../pages/groups/new';
+
+test('renders new group card', async () => {
+  const { getByText } = render(<NewGroup />);
+  const textElement = getByText(/Create a new group/);
+  await wait(() => {
+    expect(textElement).toBeInTheDocument();
+  });
+});
+
+test('renders new group Formik form', async () => {
+  const { getByTestId } = render(<NewGroup />);
+  const submitButton = getByTestId('newgroup-submit-button');
+  await wait(() => {
+    expect(submitButton).toBeInTheDocument();
+  });
+});
diff --git a/src/__tests__/editprofile.test.js b/src/__tests__/user/editprofile.test.js
similarity index 94%
rename from src/__tests__/editprofile.test.js
rename to src/__tests__/user/editprofile.test.js
index a7865550..82ba3e97 100644
--- a/src/__tests__/editprofile.test.js
+++ b/src/__tests__/user/editprofile.test.js
@@ -1,5 +1,5 @@
 import { render, wait } from '@testing-library/react';
-import EditProfile from '../pages/user/[slug]/editprofile';
+import EditProfile from '../../pages/user/[slug]/editprofile';
 
 test('renders edit profile card', async () => {
   const { getByText } = render(<EditProfile user={{
diff --git a/src/__tests__/newuser.test.js b/src/__tests__/user/newuser.test.js
similarity index 94%
rename from src/__tests__/newuser.test.js
rename to src/__tests__/user/newuser.test.js
index 65a8cfd8..90206eda 100644
--- a/src/__tests__/newuser.test.js
+++ b/src/__tests__/user/newuser.test.js
@@ -1,5 +1,5 @@
 import { render, wait } from '@testing-library/react';
-import NewUser from '../pages/user/newuser';
+import NewUser from '../../pages/user/newuser';
 
 test('renders registration card', async () => {
   const { getByText } = render(<NewUser />);
diff --git a/src/pages/group/new.jsx b/src/pages/groups/new.jsx
similarity index 100%
rename from src/pages/group/new.jsx
rename to src/pages/groups/new.jsx

From 6ebbcd2597aeea15cd6d6be3608899c9f20eef02 Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Wed, 29 Jul 2020 12:42:50 -0400
Subject: [PATCH 13/62] #28 Move LoadingSpinner into reusable component

---
 .../LoadingSpinner/LoadingSpinner.js           | 13 +++++++++++++
 .../LoadingSpinner/LoadingSpinner.test.js      | 18 ++++++++++++++++++
 src/components/LoadingSpinner/index.js         |  3 +++
 3 files changed, 34 insertions(+)
 create mode 100644 src/components/LoadingSpinner/LoadingSpinner.js
 create mode 100644 src/components/LoadingSpinner/LoadingSpinner.test.js
 create mode 100644 src/components/LoadingSpinner/index.js

diff --git a/src/components/LoadingSpinner/LoadingSpinner.js b/src/components/LoadingSpinner/LoadingSpinner.js
new file mode 100644
index 00000000..90aa0ae8
--- /dev/null
+++ b/src/components/LoadingSpinner/LoadingSpinner.js
@@ -0,0 +1,13 @@
+import {
+  Card, Spinner,
+} from 'react-bootstrap';
+
+const LoadingSpinner = () => (
+  <Card.Body className="text-center" data-testid="loading-spinner-card">
+    <Spinner animation="border" role="status" data-testid="loading-spinner">
+      <span className="sr-only">Loading...</span>
+    </Spinner>
+  </Card.Body>
+);
+
+export default LoadingSpinner;
diff --git a/src/components/LoadingSpinner/LoadingSpinner.test.js b/src/components/LoadingSpinner/LoadingSpinner.test.js
new file mode 100644
index 00000000..cc90181c
--- /dev/null
+++ b/src/components/LoadingSpinner/LoadingSpinner.test.js
@@ -0,0 +1,18 @@
+import { render, wait } from '@testing-library/react';
+import LoadingSpinner from './LoadingSpinner';
+
+test('renders card.body', async () => {
+  const { getByTestId } = render(<LoadingSpinner />);
+  const cardElement = getByTestId('loading-spinner-card');
+  await wait(() => {
+    expect(cardElement).toBeInTheDocument();
+  });
+});
+
+test('renders spinner element', async () => {
+  const { getByTestId } = render(<LoadingSpinner />);
+  const spinnerElement = getByTestId('loading-spinner');
+  await wait(() => {
+    expect(spinnerElement).toBeInTheDocument();
+  });
+});
diff --git a/src/components/LoadingSpinner/index.js b/src/components/LoadingSpinner/index.js
new file mode 100644
index 00000000..72aa1b3c
--- /dev/null
+++ b/src/components/LoadingSpinner/index.js
@@ -0,0 +1,3 @@
+import LoadingSpinner from './LoadingSpinner';
+
+export default LoadingSpinner;

From 1cb8b3feb6fdacf70d62842c58e362451bc16447 Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Wed, 29 Jul 2020 12:45:59 -0400
Subject: [PATCH 14/62] #28 Replace all spinners with LoadingSpinner component

---
 src/pages/groups/new.jsx              |  9 +++------
 src/pages/user/[slug]/editprofile.jsx |  9 +++------
 src/pages/user/newuser.jsx            | 17 +++++++----------
 3 files changed, 13 insertions(+), 22 deletions(-)

diff --git a/src/pages/groups/new.jsx b/src/pages/groups/new.jsx
index ba3aec70..2728a903 100644
--- a/src/pages/groups/new.jsx
+++ b/src/pages/groups/new.jsx
@@ -2,10 +2,11 @@ import fetch from 'unfetch';
 import { Formik } from 'formik';
 import { useSession } from 'next-auth/client';
 import {
-  Button, Card, Col, Form, Row, Spinner,
+  Button, Card, Col, Form, Row,
 } from 'react-bootstrap';
 import * as yup from 'yup';
 import Layout from '../../components/Layout';
+import LoadingSpinner from '../../components/LoadingSpinner';
 
 const NewGroup = () => {
   const [session] = useSession();
@@ -63,11 +64,7 @@ const NewGroup = () => {
       <Col lg="8" className="mx-auto">
         <Card>
           {!session && (
-            <Card.Body className="text-center">
-              <Spinner animation="border" role="status">
-                <span className="sr-only">Loading...</span>
-              </Spinner>
-            </Card.Body>
+            <LoadingSpinner />
           )}
           {session && (
             <Card.Body className="text-center">
diff --git a/src/pages/user/[slug]/editprofile.jsx b/src/pages/user/[slug]/editprofile.jsx
index 1a294726..7e168288 100644
--- a/src/pages/user/[slug]/editprofile.jsx
+++ b/src/pages/user/[slug]/editprofile.jsx
@@ -3,11 +3,12 @@ import { useSession, getSession } from 'next-auth/client';
 import { Formik } from 'formik';
 import * as yup from 'yup';
 import {
-  Button, Card, Col, Form, Row, Spinner,
+  Button, Card, Col, Form, Row,
 } from 'react-bootstrap';
 import Router from 'next/router';
 import fullName from '../../../utils/nameUtil';
 import Layout from '../../../components/Layout';
+import LoadingSpinner from '../../../components/LoadingSpinner';
 
 const EditProfile = ({ user }) => {
   const [session, loading] = useSession();
@@ -54,11 +55,7 @@ const EditProfile = ({ user }) => {
       <Col lg="8" className="mx-auto">
         <Card>
           {!session && loading && (
-            <Card.Body className="text-center">
-              <Spinner animation="border" role="status">
-                <span className="sr-only">Loading...</span>
-              </Spinner>
-            </Card.Body>
+            <LoadingSpinner />
           )}
           {session && user && (
             <Card.Body>
diff --git a/src/pages/user/newuser.jsx b/src/pages/user/newuser.jsx
index 2f9735d8..64f7337a 100644
--- a/src/pages/user/newuser.jsx
+++ b/src/pages/user/newuser.jsx
@@ -4,13 +4,14 @@ import fetch from 'unfetch';
 import { Formik } from 'formik';
 import * as yup from 'yup';
 import {
-  Button, Card, Col, Form, Row, Spinner,
+  Button, Card, Col, Form, Row,
 } from 'react-bootstrap';
 import Feedback from 'react-bootstrap/Feedback';
 import Link from 'next/link';
 import Router from 'next/router';
 import fullName from '../../utils/nameUtil';
 import Layout from '../../components/Layout';
+import LoadingSpinner from '../../components/LoadingSpinner';
 
 const NewUser = () => {
   const [session] = useSession();
@@ -58,11 +59,7 @@ const NewUser = () => {
       <Col lg="8" className="mx-auto">
         <Card>
           {!session && (
-            <Card.Body className="text-center">
-              <Spinner animation="border" role="status">
-                <span className="sr-only">Loading...</span>
-              </Spinner>
-            </Card.Body>
+            <LoadingSpinner />
           )}
           {session && (
             <Card.Body>
@@ -98,7 +95,7 @@ const NewUser = () => {
                       </Col>
                     </Form.Group>
 
-                    <Form.Group as={Row} controlId="validationFormik01">
+                    <Form.Group as={Row} controlId="formPlaintextFirstName">
                       <Form.Label column lg="4">
                         First Name
                       </Form.Label>
@@ -119,7 +116,7 @@ const NewUser = () => {
                       </Col>
                     </Form.Group>
 
-                    <Form.Group as={Row} controlId="validationFormik02">
+                    <Form.Group as={Row} controlId="formPlaintextLastName">
                       <Form.Label column lg="4">
                         Last Name
                       </Form.Label>
@@ -140,7 +137,7 @@ const NewUser = () => {
                       </Col>
                     </Form.Group>
 
-                    <Form.Group as={Row} controlId="validationFormik03">
+                    <Form.Group as={Row} controlId="formPlaintextAffiliation">
                       <Form.Label column lg="4">
                         Affiliation
                       </Form.Label>
@@ -157,7 +154,7 @@ const NewUser = () => {
                         />
                       </Col>
                     </Form.Group>
-                    <Form.Group>
+                    <Form.Group controlId="formCheckboxTos">
                       <Form.Check type="checkbox">
                         <Form.Check.Input
                           required

From aac5c94884d76506ba4b5a37eb81c45b0370603b Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Wed, 29 Jul 2020 12:42:50 -0400
Subject: [PATCH 15/62] #28 Move LoadingSpinner into reusable component

---
 .../LoadingSpinner/LoadingSpinner.js           | 13 +++++++++++++
 .../LoadingSpinner/LoadingSpinner.test.js      | 18 ++++++++++++++++++
 src/components/LoadingSpinner/index.js         |  3 +++
 3 files changed, 34 insertions(+)
 create mode 100644 src/components/LoadingSpinner/LoadingSpinner.js
 create mode 100644 src/components/LoadingSpinner/LoadingSpinner.test.js
 create mode 100644 src/components/LoadingSpinner/index.js

diff --git a/src/components/LoadingSpinner/LoadingSpinner.js b/src/components/LoadingSpinner/LoadingSpinner.js
new file mode 100644
index 00000000..90aa0ae8
--- /dev/null
+++ b/src/components/LoadingSpinner/LoadingSpinner.js
@@ -0,0 +1,13 @@
+import {
+  Card, Spinner,
+} from 'react-bootstrap';
+
+const LoadingSpinner = () => (
+  <Card.Body className="text-center" data-testid="loading-spinner-card">
+    <Spinner animation="border" role="status" data-testid="loading-spinner">
+      <span className="sr-only">Loading...</span>
+    </Spinner>
+  </Card.Body>
+);
+
+export default LoadingSpinner;
diff --git a/src/components/LoadingSpinner/LoadingSpinner.test.js b/src/components/LoadingSpinner/LoadingSpinner.test.js
new file mode 100644
index 00000000..cc90181c
--- /dev/null
+++ b/src/components/LoadingSpinner/LoadingSpinner.test.js
@@ -0,0 +1,18 @@
+import { render, wait } from '@testing-library/react';
+import LoadingSpinner from './LoadingSpinner';
+
+test('renders card.body', async () => {
+  const { getByTestId } = render(<LoadingSpinner />);
+  const cardElement = getByTestId('loading-spinner-card');
+  await wait(() => {
+    expect(cardElement).toBeInTheDocument();
+  });
+});
+
+test('renders spinner element', async () => {
+  const { getByTestId } = render(<LoadingSpinner />);
+  const spinnerElement = getByTestId('loading-spinner');
+  await wait(() => {
+    expect(spinnerElement).toBeInTheDocument();
+  });
+});
diff --git a/src/components/LoadingSpinner/index.js b/src/components/LoadingSpinner/index.js
new file mode 100644
index 00000000..72aa1b3c
--- /dev/null
+++ b/src/components/LoadingSpinner/index.js
@@ -0,0 +1,3 @@
+import LoadingSpinner from './LoadingSpinner';
+
+export default LoadingSpinner;

From 5e3fa618664fd9a7014cc0f16a038eb7a1e41ee8 Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Wed, 29 Jul 2020 12:45:59 -0400
Subject: [PATCH 16/62] #28 Replace all spinners with LoadingSpinner component

---
 src/pages/groups/new.jsx              | 127 ++++++++++++++++++++++++++
 src/pages/user/[slug]/editprofile.jsx |   9 +-
 src/pages/user/newuser.jsx            |  17 ++--
 3 files changed, 137 insertions(+), 16 deletions(-)
 create mode 100644 src/pages/groups/new.jsx

diff --git a/src/pages/groups/new.jsx b/src/pages/groups/new.jsx
new file mode 100644
index 00000000..2728a903
--- /dev/null
+++ b/src/pages/groups/new.jsx
@@ -0,0 +1,127 @@
+import fetch from 'unfetch';
+import { Formik } from 'formik';
+import { useSession } from 'next-auth/client';
+import {
+  Button, Card, Col, Form, Row,
+} from 'react-bootstrap';
+import * as yup from 'yup';
+import Layout from '../../components/Layout';
+import LoadingSpinner from '../../components/LoadingSpinner';
+
+const NewGroup = () => {
+  const [session] = useSession();
+
+  const updateOwnerWithGroup = async ({ id, name, user }) => {
+    const url = `/api/user/${user}`;
+    const body = {
+      addedGroup: {
+        id,
+        name,
+        role: 'owner',
+      },
+    };
+    const res = await fetch(url, {
+      method: 'PATCH',
+      body: JSON.stringify(body),
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+    if (res.status === 200) {
+      const result = await res.json();
+      return Promise.resolve(result);
+    }
+    return Promise.reject(Error(`Unable to add group to user: error ${res.status} received from server`));
+  };
+
+  const submitHandler = async (name) => {
+    const url = '/api/group';
+    const res = await fetch(url, {
+      method: 'POST',
+      body: JSON.stringify({ name }),
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+    if (res.status === 200) {
+      const result = await res.json();
+      const group = {
+        id: result.insertedId,
+        name,
+        user: result.ops[0].members[0].id,
+      };
+      return updateOwnerWithGroup(group);
+    }
+    return Promise.reject(Error(`Unable to create group: error ${res.status} received from server`));
+  };
+
+  const schema = yup.object({
+    name: yup.string().required('Required'),
+  });
+
+  return (
+    <Layout>
+      <Col lg="8" className="mx-auto">
+        <Card>
+          {!session && (
+            <LoadingSpinner />
+          )}
+          {session && (
+            <Card.Body className="text-center">
+              <Card.Title>Create a new group</Card.Title>
+
+              <Formik
+                onSubmit={(values, actions) => {
+                  setTimeout(() => {
+                    submitHandler(values);
+                    actions.setSubmitting(false);
+                  }, 1000);
+                }}
+                validationSchema={schema}
+                initialValues={{
+                  name: '',
+                }}
+              >
+                {(props) => (
+                  <Form onSubmit={props.handleSubmit} noValidate as={Row} className="pt-2">
+                    <Col lg>
+                      <Form.Group controlId="formPlaintextGroupName">
+                        <Form.Control
+                          size="lg"
+                          type="text"
+                          name="name"
+                          placeholder="Name"
+                          onChange={props.handleChange}
+                          onBlur={props.handleBlur}
+                          value={props.values.name}
+                          isValid={props.touched.name && !props.errors.name}
+                          isInvalid={!!props.errors.name}
+                        />
+                        <Form.Control.Feedback type="invalid">
+                          {props.errors.name}
+                        </Form.Control.Feedback>
+                      </Form.Group>
+                    </Col>
+                    <Col lg="auto">
+                      <Button
+                        variant="primary"
+                        size="lg"
+                        type="submit"
+                        disabled={props.isSubmitting || props.submitCount >= 1}
+                        data-testid="newgroup-submit-button"
+                      >
+                        Create
+                      </Button>
+                    </Col>
+                  </Form>
+                )}
+              </Formik>
+            </Card.Body>
+          )}
+        </Card>
+      </Col>
+    </Layout>
+  );
+};
+
+export default NewGroup;
diff --git a/src/pages/user/[slug]/editprofile.jsx b/src/pages/user/[slug]/editprofile.jsx
index 1a294726..7e168288 100644
--- a/src/pages/user/[slug]/editprofile.jsx
+++ b/src/pages/user/[slug]/editprofile.jsx
@@ -3,11 +3,12 @@ import { useSession, getSession } from 'next-auth/client';
 import { Formik } from 'formik';
 import * as yup from 'yup';
 import {
-  Button, Card, Col, Form, Row, Spinner,
+  Button, Card, Col, Form, Row,
 } from 'react-bootstrap';
 import Router from 'next/router';
 import fullName from '../../../utils/nameUtil';
 import Layout from '../../../components/Layout';
+import LoadingSpinner from '../../../components/LoadingSpinner';
 
 const EditProfile = ({ user }) => {
   const [session, loading] = useSession();
@@ -54,11 +55,7 @@ const EditProfile = ({ user }) => {
       <Col lg="8" className="mx-auto">
         <Card>
           {!session && loading && (
-            <Card.Body className="text-center">
-              <Spinner animation="border" role="status">
-                <span className="sr-only">Loading...</span>
-              </Spinner>
-            </Card.Body>
+            <LoadingSpinner />
           )}
           {session && user && (
             <Card.Body>
diff --git a/src/pages/user/newuser.jsx b/src/pages/user/newuser.jsx
index 2f9735d8..64f7337a 100644
--- a/src/pages/user/newuser.jsx
+++ b/src/pages/user/newuser.jsx
@@ -4,13 +4,14 @@ import fetch from 'unfetch';
 import { Formik } from 'formik';
 import * as yup from 'yup';
 import {
-  Button, Card, Col, Form, Row, Spinner,
+  Button, Card, Col, Form, Row,
 } from 'react-bootstrap';
 import Feedback from 'react-bootstrap/Feedback';
 import Link from 'next/link';
 import Router from 'next/router';
 import fullName from '../../utils/nameUtil';
 import Layout from '../../components/Layout';
+import LoadingSpinner from '../../components/LoadingSpinner';
 
 const NewUser = () => {
   const [session] = useSession();
@@ -58,11 +59,7 @@ const NewUser = () => {
       <Col lg="8" className="mx-auto">
         <Card>
           {!session && (
-            <Card.Body className="text-center">
-              <Spinner animation="border" role="status">
-                <span className="sr-only">Loading...</span>
-              </Spinner>
-            </Card.Body>
+            <LoadingSpinner />
           )}
           {session && (
             <Card.Body>
@@ -98,7 +95,7 @@ const NewUser = () => {
                       </Col>
                     </Form.Group>
 
-                    <Form.Group as={Row} controlId="validationFormik01">
+                    <Form.Group as={Row} controlId="formPlaintextFirstName">
                       <Form.Label column lg="4">
                         First Name
                       </Form.Label>
@@ -119,7 +116,7 @@ const NewUser = () => {
                       </Col>
                     </Form.Group>
 
-                    <Form.Group as={Row} controlId="validationFormik02">
+                    <Form.Group as={Row} controlId="formPlaintextLastName">
                       <Form.Label column lg="4">
                         Last Name
                       </Form.Label>
@@ -140,7 +137,7 @@ const NewUser = () => {
                       </Col>
                     </Form.Group>
 
-                    <Form.Group as={Row} controlId="validationFormik03">
+                    <Form.Group as={Row} controlId="formPlaintextAffiliation">
                       <Form.Label column lg="4">
                         Affiliation
                       </Form.Label>
@@ -157,7 +154,7 @@ const NewUser = () => {
                         />
                       </Col>
                     </Form.Group>
-                    <Form.Group>
+                    <Form.Group controlId="formCheckboxTos">
                       <Form.Check type="checkbox">
                         <Form.Check.Input
                           required

From 2ce889c5945525a638af4c593a9d8b697adeda3e Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Wed, 29 Jul 2020 21:47:02 -0400
Subject: [PATCH 17/62] #28 add groups to session user obj

---
 src/pages/api/auth/[...nextauth].js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/api/auth/[...nextauth].js b/src/pages/api/auth/[...nextauth].js
index 8ccba8a9..dfe51666 100644
--- a/src/pages/api/auth/[...nextauth].js
+++ b/src/pages/api/auth/[...nextauth].js
@@ -76,6 +76,7 @@ const options = {
       if (res.status === 200) {
         const user = await res.json();
         session.user.name = user.name;
+        session.user.groups = user.groups;
       } else {
         return Promise.reject();
       }

From b6d4f66f50851cfeb438787dff0cb791c3e9fbd6 Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Wed, 29 Jul 2020 21:47:16 -0400
Subject: [PATCH 18/62] #28 add groups to GET and PATCH routes for user

---
 src/pages/api/user/[id].js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/pages/api/user/[id].js b/src/pages/api/user/[id].js
index 0cbe8604..1a8d5382 100644
--- a/src/pages/api/user/[id].js
+++ b/src/pages/api/user/[id].js
@@ -18,9 +18,10 @@ const handler = nc()
               const {
                 name, firstName, lastName, affiliation,
               } = doc;
+              const groups = doc.groups ? doc.groups : [];
               if (err) throw err;
               res.status(200).json({
-                name, firstName, lastName, affiliation,
+                name, firstName, lastName, affiliation, groups,
               });
             } else {
               res.status(404).json({ error: '404 Not Found' });
@@ -31,7 +32,7 @@ const handler = nc()
   )
   .patch(
     async (req, res) => {
-      const token = await jwt.getJwt({ req, secret });
+      const token = await jwt.getToken({ req, secret });
       if (token && token.exp > 0) {
         const groupToPush = req.body.addedGroup
           ? { groups: req.body.addedGroup }

From f30580c479d90527500803f2710d62188fd5ce74 Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Wed, 29 Jul 2020 22:14:16 -0400
Subject: [PATCH 19/62] #28 Implement Group Index and New views

---
 src/pages/groups/index.jsx | 79 ++++++++++++++++++++++++++++++++++++++
 src/pages/groups/new.jsx   | 70 ++++++++++++++++++---------------
 2 files changed, 118 insertions(+), 31 deletions(-)
 create mode 100644 src/pages/groups/index.jsx

diff --git a/src/pages/groups/index.jsx b/src/pages/groups/index.jsx
new file mode 100644
index 00000000..4182a441
--- /dev/null
+++ b/src/pages/groups/index.jsx
@@ -0,0 +1,79 @@
+import { useSession } from 'next-auth/client';
+import Link from 'next/link';
+import {
+  Button, ButtonGroup, Card, Table,
+} from 'react-bootstrap';
+import {
+  PencilSquare, TrashFill, Plus,
+} from 'react-bootstrap-icons';
+import Layout from '../../components/Layout';
+import LoadingSpinner from '../../components/LoadingSpinner';
+
+const GroupList = () => {
+  const [session, loading] = useSession();
+
+  return (
+    <Layout>
+      <Card>
+        {!session && loading && (
+          <LoadingSpinner />
+        )}
+        {session && (
+          <>
+            <Card.Header>
+              Groups
+            </Card.Header>
+            <Card.Body>
+              {session.user.groups.length === 0 && (
+              <>You are not a member of any groups.</>
+              )}
+              {session.user.groups.length > 0 && (
+              <Table striped bordered hover variant="light">
+                <thead>
+                  <tr>
+                    <th>Name</th>
+                    <th>Role</th>
+                    <th>Actions</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {session.user.groups.map((value) => (
+                    <tr>
+                      <td>
+                        <Link href="#">
+                          {value.name}
+                        </Link>
+                      </td>
+                      <td>{value.role}</td>
+                      <td>
+                        <ButtonGroup>
+                          <Button variant="outline-primary">
+                            <PencilSquare className="align-text-bottom mr-1" />
+                            Edit
+                          </Button>
+                          <Button variant="outline-danger">
+                            <TrashFill className="align-text-bottom mr-1" />
+                            Delete
+                          </Button>
+                        </ButtonGroup>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </Table>
+              )}
+            </Card.Body>
+            <Card.Footer>
+              <Button variant="primary" href="/groups/new">
+                <Plus className="mr-1 ml-n1 mt-n1" />
+                Create New Group
+              </Button>
+            </Card.Footer>
+          </>
+        )}
+      </Card>
+    </Layout>
+  );
+};
+
+export default GroupList;
diff --git a/src/pages/groups/new.jsx b/src/pages/groups/new.jsx
index 2728a903..d6f88581 100644
--- a/src/pages/groups/new.jsx
+++ b/src/pages/groups/new.jsx
@@ -1,9 +1,10 @@
 import fetch from 'unfetch';
 import { Formik } from 'formik';
-import { useSession } from 'next-auth/client';
+import { useSession, getSession } from 'next-auth/client';
 import {
   Button, Card, Col, Form, Row,
 } from 'react-bootstrap';
+import Router from 'next/router';
 import * as yup from 'yup';
 import Layout from '../../components/Layout';
 import LoadingSpinner from '../../components/LoadingSpinner';
@@ -29,13 +30,18 @@ const NewGroup = () => {
     });
     if (res.status === 200) {
       const result = await res.json();
+      getSession();
+      Router.push({
+        pathname: '/groups',
+      });
       return Promise.resolve(result);
     }
     return Promise.reject(Error(`Unable to add group to user: error ${res.status} received from server`));
   };
 
-  const submitHandler = async (name) => {
+  const submitHandler = async (values) => {
     const url = '/api/group';
+    const { name } = values;
     const res = await fetch(url, {
       method: 'POST',
       body: JSON.stringify({ name }),
@@ -83,36 +89,38 @@ const NewGroup = () => {
                 }}
               >
                 {(props) => (
-                  <Form onSubmit={props.handleSubmit} noValidate as={Row} className="pt-2">
-                    <Col lg>
-                      <Form.Group controlId="formPlaintextGroupName">
-                        <Form.Control
+                  <Form onSubmit={props.handleSubmit} noValidate className="pt-2">
+                    <Row>
+                      <Col lg className="pr-1">
+                        <Form.Group controlId="formPlaintextGroupName">
+                          <Form.Control
+                            size="lg"
+                            type="text"
+                            name="name"
+                            placeholder="Name"
+                            onChange={props.handleChange}
+                            onBlur={props.handleBlur}
+                            value={props.values.name}
+                            isValid={props.touched.name && !props.errors.name}
+                            isInvalid={!!props.errors.name}
+                          />
+                          <Form.Control.Feedback type="invalid">
+                            {props.errors.name}
+                          </Form.Control.Feedback>
+                        </Form.Group>
+                      </Col>
+                      <Col lg="auto">
+                        <Button
+                          variant="primary"
                           size="lg"
-                          type="text"
-                          name="name"
-                          placeholder="Name"
-                          onChange={props.handleChange}
-                          onBlur={props.handleBlur}
-                          value={props.values.name}
-                          isValid={props.touched.name && !props.errors.name}
-                          isInvalid={!!props.errors.name}
-                        />
-                        <Form.Control.Feedback type="invalid">
-                          {props.errors.name}
-                        </Form.Control.Feedback>
-                      </Form.Group>
-                    </Col>
-                    <Col lg="auto">
-                      <Button
-                        variant="primary"
-                        size="lg"
-                        type="submit"
-                        disabled={props.isSubmitting || props.submitCount >= 1}
-                        data-testid="newgroup-submit-button"
-                      >
-                        Create
-                      </Button>
-                    </Col>
+                          type="submit"
+                          disabled={props.isSubmitting || props.submitCount >= 1}
+                          data-testid="newgroup-submit-button"
+                        >
+                          Create
+                        </Button>
+                      </Col>
+                    </Row>
                   </Form>
                 )}
               </Formik>

From 15b10220fa6a55acd09a84e5ff19f1f0ef29d1af Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Wed, 29 Jul 2020 22:15:36 -0400
Subject: [PATCH 20/62] #28 Create empty pages for Group Edit and View

---
 src/pages/groups/[id]/edit.jsx  | 0
 src/pages/groups/[id]/index.jsx | 0
 2 files changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 src/pages/groups/[id]/edit.jsx
 create mode 100644 src/pages/groups/[id]/index.jsx

diff --git a/src/pages/groups/[id]/edit.jsx b/src/pages/groups/[id]/edit.jsx
new file mode 100644
index 00000000..e69de29b
diff --git a/src/pages/groups/[id]/index.jsx b/src/pages/groups/[id]/index.jsx
new file mode 100644
index 00000000..e69de29b

From 917760ea836a2fdebb3385361eb42e3d310bcbed Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Thu, 30 Jul 2020 10:32:32 -0400
Subject: [PATCH 21/62] #28 Add test for group list page

---
 src/__mocks__/next-auth/client.js  |  1 +
 src/__tests__/groups/index.test.js | 18 ++++++++++++++++++
 src/pages/groups/index.jsx         |  4 ++--
 3 files changed, 21 insertions(+), 2 deletions(-)
 create mode 100644 src/__tests__/groups/index.test.js

diff --git a/src/__mocks__/next-auth/client.js b/src/__mocks__/next-auth/client.js
index 1c1c22ad..8afa03a2 100644
--- a/src/__mocks__/next-auth/client.js
+++ b/src/__mocks__/next-auth/client.js
@@ -6,6 +6,7 @@ function useSession() {
       user: {
         name: 'Test User',
         email: 'test@email.com',
+        groups: [],
       },
       expires: '2081-10-05T14:48:00.000',
     },
diff --git a/src/__tests__/groups/index.test.js b/src/__tests__/groups/index.test.js
new file mode 100644
index 00000000..362d2505
--- /dev/null
+++ b/src/__tests__/groups/index.test.js
@@ -0,0 +1,18 @@
+import { render, wait } from '@testing-library/react';
+import GroupList from '../../pages/groups/index';
+
+test('renders group list card', async () => {
+  const { getByTestId } = render(<GroupList />);
+  const cardBody = getByTestId('grouplist-card-body');
+  await wait(() => {
+    expect(cardBody).toBeInTheDocument();
+  });
+});
+
+test('renders new group create button', async () => {
+  const { getByTestId } = render(<GroupList />);
+  const createButton = getByTestId('grouplist-create-button');
+  await wait(() => {
+    expect(createButton).toBeInTheDocument();
+  });
+});
diff --git a/src/pages/groups/index.jsx b/src/pages/groups/index.jsx
index 4182a441..418faa30 100644
--- a/src/pages/groups/index.jsx
+++ b/src/pages/groups/index.jsx
@@ -23,7 +23,7 @@ const GroupList = () => {
             <Card.Header>
               Groups
             </Card.Header>
-            <Card.Body>
+            <Card.Body data-testid="grouplist-card-body">
               {session.user.groups.length === 0 && (
               <>You are not a member of any groups.</>
               )}
@@ -64,7 +64,7 @@ const GroupList = () => {
               )}
             </Card.Body>
             <Card.Footer>
-              <Button variant="primary" href="/groups/new">
+              <Button variant="primary" href="/groups/new" data-testid="grouplist-create-button">
                 <Plus className="mr-1 ml-n1 mt-n1" />
                 Create New Group
               </Button>

From 424666176d9a70579511d0ef018c0da0dc31955b Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Thu, 30 Jul 2020 11:34:20 -0400
Subject: [PATCH 22/62] #28 Initialiize Group View page

---
 src/pages/groups/[id]/index.jsx | 52 +++++++++++++++++++++++++++++++++
 src/pages/groups/index.jsx      |  2 +-
 2 files changed, 53 insertions(+), 1 deletion(-)

diff --git a/src/pages/groups/[id]/index.jsx b/src/pages/groups/[id]/index.jsx
index e69de29b..e7a80253 100644
--- a/src/pages/groups/[id]/index.jsx
+++ b/src/pages/groups/[id]/index.jsx
@@ -0,0 +1,52 @@
+import { useSession } from 'next-auth/client';
+import { Card } from 'react-bootstrap';
+import Layout from '../../../components/Layout';
+
+const ViewGroup = ({ group }) => {
+  const [session, loading] = useSession();
+  return (
+    <Layout>
+      <Card>
+        <Card.Header>
+          {session && !loading && group.name}
+        </Card.Header>
+        <Card.Body>
+          {session && !loading && JSON.stringify(group)}
+        </Card.Body>
+      </Card>
+    </Layout>
+  );
+};
+
+export async function getServerSideProps(context) {
+  const { id } = context.params;
+
+  const url = `${process.env.SITE}/api/group/${id}`;
+  // eslint-disable-next-line no-undef
+  const res = await fetch(url, {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+      Cookie: context.req.headers.cookie,
+    },
+  });
+  if (res.status === 200) {
+    const foundGroup = await res.json();
+    const {
+      name,
+      members,
+    } = foundGroup;
+    const group = {
+      name,
+      members,
+    };
+    return {
+      props: { group },
+    };
+  }
+  return {
+    props: { },
+  };
+}
+
+export default ViewGroup;
diff --git a/src/pages/groups/index.jsx b/src/pages/groups/index.jsx
index 418faa30..b3ed52b3 100644
--- a/src/pages/groups/index.jsx
+++ b/src/pages/groups/index.jsx
@@ -40,7 +40,7 @@ const GroupList = () => {
                   {session.user.groups.map((value) => (
                     <tr>
                       <td>
-                        <Link href="#">
+                        <Link href={`/groups/${value.id}`}>
                           {value.name}
                         </Link>
                       </td>

From 733e5818b7e28ba82616cfdab8f54073c822f044 Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Mon, 3 Aug 2020 15:52:17 -0400
Subject: [PATCH 23/62] #28 restrict edit and delete by role

---
 src/pages/groups/index.jsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/pages/groups/index.jsx b/src/pages/groups/index.jsx
index b3ed52b3..d2b318b7 100644
--- a/src/pages/groups/index.jsx
+++ b/src/pages/groups/index.jsx
@@ -46,16 +46,20 @@ const GroupList = () => {
                       </td>
                       <td>{value.role}</td>
                       <td>
+                        {(value.role === 'owner' || value.role === 'manager') && (
                         <ButtonGroup>
                           <Button variant="outline-primary">
                             <PencilSquare className="align-text-bottom mr-1" />
                             Edit
                           </Button>
-                          <Button variant="outline-danger">
-                            <TrashFill className="align-text-bottom mr-1" />
-                            Delete
-                          </Button>
+                          {value.role === 'owner' && (
+                            <Button variant="outline-danger">
+                              <TrashFill className="align-text-bottom mr-1" />
+                              Delete
+                            </Button>
+                          )}
                         </ButtonGroup>
+                        )}
                       </td>
                     </tr>
                   ))}

From 295442b265a20c6e2aad483fe74d5bf5555e26ed Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Mon, 3 Aug 2020 16:19:33 -0400
Subject: [PATCH 24/62] #28 Group View page

---
 src/pages/groups/[id]/index.jsx | 62 +++++++++++++++++++++++++++++----
 1 file changed, 55 insertions(+), 7 deletions(-)

diff --git a/src/pages/groups/[id]/index.jsx b/src/pages/groups/[id]/index.jsx
index e7a80253..7753fa57 100644
--- a/src/pages/groups/[id]/index.jsx
+++ b/src/pages/groups/[id]/index.jsx
@@ -1,18 +1,65 @@
 import { useSession } from 'next-auth/client';
-import { Card } from 'react-bootstrap';
+import {
+  Button, ButtonGroup, Card, Table,
+} from 'react-bootstrap';
+import {
+  PencilSquare, TrashFill,
+} from 'react-bootstrap-icons';
 import Layout from '../../../components/Layout';
+import LoadingSpinner from '../../../components/LoadingSpinner';
 
 const ViewGroup = ({ group }) => {
   const [session, loading] = useSession();
+
+  const roleInGroup = (currentSession) => currentSession.user.groups.find((o) => Object.entries(o).some(([k, value]) => k === 'id' && value === group.id)).role;
+
   return (
     <Layout>
       <Card>
-        <Card.Header>
-          {session && !loading && group.name}
-        </Card.Header>
-        <Card.Body>
-          {session && !loading && JSON.stringify(group)}
-        </Card.Body>
+        {!session && loading && (
+          <LoadingSpinner />
+        )}
+        {session && !loading && (
+          <>
+            <Card.Header>
+              {group.name}
+            </Card.Header>
+            <Card.Body>
+              <Table striped bordered hover variant="light">
+                <thead>
+                  <tr>
+                    <th>Member</th>
+                    <th>Email</th>
+                    <th>Role</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {group.members.map((member) => (
+                    <tr>
+                      <td>{member.name}</td>
+                      <td>{member.email}</td>
+                      <td>{member.role}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </Table>
+              {(roleInGroup(session) === 'owner' || roleInGroup(session) === 'manager') && (
+                <ButtonGroup>
+                  <Button variant="outline-primary">
+                    <PencilSquare className="align-text-bottom mr-1" />
+                    Edit this group
+                  </Button>
+                  {roleInGroup(session) === 'owner' && (
+                    <Button variant="outline-danger">
+                      <TrashFill className="align-text-bottom mr-1" />
+                      Delete this group
+                    </Button>
+                  )}
+                </ButtonGroup>
+              )}
+            </Card.Body>
+          </>
+        )}
       </Card>
     </Layout>
   );
@@ -37,6 +84,7 @@ export async function getServerSideProps(context) {
       members,
     } = foundGroup;
     const group = {
+      id: context.params.id,
       name,
       members,
     };

From 3d207022ab0404e8706b553a511a1068c05fb43b Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Mon, 3 Aug 2020 17:05:38 -0400
Subject: [PATCH 25/62] #28 Add group role summaries to group pages

---
 .../GroupRoleSummaries/GroupRoleSummaries.js  | 27 +++++++++++++++++++
 .../GroupRoleSummaries.test.js                | 26 ++++++++++++++++++
 src/components/GroupRoleSummaries/index.js    |  3 +++
 src/pages/groups/[id]/index.jsx               |  2 ++
 src/pages/groups/index.jsx                    |  2 ++
 5 files changed, 60 insertions(+)
 create mode 100644 src/components/GroupRoleSummaries/GroupRoleSummaries.js
 create mode 100644 src/components/GroupRoleSummaries/GroupRoleSummaries.test.js
 create mode 100644 src/components/GroupRoleSummaries/index.js

diff --git a/src/components/GroupRoleSummaries/GroupRoleSummaries.js b/src/components/GroupRoleSummaries/GroupRoleSummaries.js
new file mode 100644
index 00000000..1ae59461
--- /dev/null
+++ b/src/components/GroupRoleSummaries/GroupRoleSummaries.js
@@ -0,0 +1,27 @@
+import { Card, ListGroup } from 'react-bootstrap';
+
+const GroupRoleSummaries = () => (
+  <Card className="mt-3" data-testid="group-roles-card">
+    <Card.Header>
+      Group role permissions explained
+    </Card.Header>
+    <ListGroup data-testid="group-roles-list">
+      <ListGroup.Item>
+        <strong>Members</strong>
+        : Group Members can see documents and annotations shared with the group,
+        and can annotate those documents. They can also see who else is in the group.
+      </ListGroup.Item>
+      <ListGroup.Item>
+        <strong>Managers</strong>
+        : Group Managers are Members who can also invite users to the group, remove
+        users from the group, and change users&apos; roles between Manager and Member.
+      </ListGroup.Item>
+      <ListGroup.Item>
+        <strong>Owners</strong>
+        : Group Owners are Managers who can also delete the group.
+      </ListGroup.Item>
+    </ListGroup>
+  </Card>
+);
+
+export default GroupRoleSummaries;
diff --git a/src/components/GroupRoleSummaries/GroupRoleSummaries.test.js b/src/components/GroupRoleSummaries/GroupRoleSummaries.test.js
new file mode 100644
index 00000000..dd843d1e
--- /dev/null
+++ b/src/components/GroupRoleSummaries/GroupRoleSummaries.test.js
@@ -0,0 +1,26 @@
+import { render, wait } from '@testing-library/react';
+import GroupRoleSummaries from './GroupRoleSummaries';
+
+test('renders card', async () => {
+  const { getByTestId } = render(<GroupRoleSummaries />);
+  const cardElement = getByTestId('group-roles-card');
+  await wait(() => {
+    expect(cardElement).toBeInTheDocument();
+  });
+});
+
+test('renders list', async () => {
+  const { getByTestId } = render(<GroupRoleSummaries />);
+  const listElement = getByTestId('group-roles-list');
+  await wait(() => {
+    expect(listElement).toBeInTheDocument();
+  });
+});
+
+test('displays info text', async () => {
+  const { getByText } = render(<GroupRoleSummaries />);
+  const textElement = getByText('Members');
+  await wait(() => {
+    expect(textElement).toBeInTheDocument();
+  });
+});
diff --git a/src/components/GroupRoleSummaries/index.js b/src/components/GroupRoleSummaries/index.js
new file mode 100644
index 00000000..edd402d0
--- /dev/null
+++ b/src/components/GroupRoleSummaries/index.js
@@ -0,0 +1,3 @@
+import GroupRoleSummaries from './GroupRoleSummaries';
+
+export default GroupRoleSummaries;
diff --git a/src/pages/groups/[id]/index.jsx b/src/pages/groups/[id]/index.jsx
index 7753fa57..15e0a68b 100644
--- a/src/pages/groups/[id]/index.jsx
+++ b/src/pages/groups/[id]/index.jsx
@@ -7,6 +7,7 @@ import {
 } from 'react-bootstrap-icons';
 import Layout from '../../../components/Layout';
 import LoadingSpinner from '../../../components/LoadingSpinner';
+import GroupRoleSummaries from '../../../components/GroupRoleSummaries';
 
 const ViewGroup = ({ group }) => {
   const [session, loading] = useSession();
@@ -61,6 +62,7 @@ const ViewGroup = ({ group }) => {
           </>
         )}
       </Card>
+      <GroupRoleSummaries />
     </Layout>
   );
 };
diff --git a/src/pages/groups/index.jsx b/src/pages/groups/index.jsx
index d2b318b7..a99abf5f 100644
--- a/src/pages/groups/index.jsx
+++ b/src/pages/groups/index.jsx
@@ -8,6 +8,7 @@ import {
 } from 'react-bootstrap-icons';
 import Layout from '../../components/Layout';
 import LoadingSpinner from '../../components/LoadingSpinner';
+import GroupRoleSummaries from '../../components/GroupRoleSummaries';
 
 const GroupList = () => {
   const [session, loading] = useSession();
@@ -76,6 +77,7 @@ const GroupList = () => {
           </>
         )}
       </Card>
+      <GroupRoleSummaries />
     </Layout>
   );
 };

From cb97af43580f741a313c13145543a7526f1f583c Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Mon, 3 Aug 2020 17:09:12 -0400
Subject: [PATCH 26/62] #28 Init edit group page

---
 src/pages/groups/[id]/edit.jsx  | 109 ++++++++++++++++++++++++++++++++
 src/pages/groups/[id]/index.jsx |   2 +-
 src/pages/groups/index.jsx      |   2 +-
 3 files changed, 111 insertions(+), 2 deletions(-)

diff --git a/src/pages/groups/[id]/edit.jsx b/src/pages/groups/[id]/edit.jsx
index e69de29b..0bac49b5 100644
--- a/src/pages/groups/[id]/edit.jsx
+++ b/src/pages/groups/[id]/edit.jsx
@@ -0,0 +1,109 @@
+import { useSession } from 'next-auth/client';
+import {
+  ButtonGroup, Row, Col, Button, Card, Table,
+} from 'react-bootstrap';
+import { TrashFill } from 'react-bootstrap-icons';
+import Layout from '../../../components/Layout';
+import LoadingSpinner from '../../../components/LoadingSpinner';
+import GroupRoleSummaries from '../../../components/GroupRoleSummaries';
+
+const EditGroup = ({ group }) => {
+  const [session, loading] = useSession();
+
+  const roleInGroup = (currentSession) => currentSession.user.groups.find((o) => Object.entries(o).some(([k, value]) => k === 'id' && value === group.id)).role;
+
+  return (
+    <Layout>
+      <Card>
+        {!session && loading && (
+          <LoadingSpinner />
+        )}
+        {session && !loading && (roleInGroup(session) === 'owner' || roleInGroup(session) === 'manager') && (
+          <>
+            <Card.Header>
+              Editing Group:
+              {' '}
+              {group.name}
+            </Card.Header>
+            <Card.Body>
+              <Row>
+                <Col>
+                  <Table striped bordered hover variant="light">
+                    <thead>
+                      <tr>
+                        <th>Member</th>
+                        <th>Email</th>
+                        <th>Role</th>
+                        <th>Actions</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {group.members.map((member) => (
+                        <tr>
+                          <td>{member.name}</td>
+                          <td>{member.email}</td>
+                          <td>{member.role}</td>
+                          <td>
+                            <ButtonGroup>
+                              <Button variant="outline-danger">
+                                <TrashFill className="align-text-bottom mr-1" />
+                                Remove
+                              </Button>
+                            </ButtonGroup>
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </Table>
+                </Col>
+                {roleInGroup(session) === 'owner' && (
+                  <Col>
+                    <Button variant="outline-danger">
+                      <TrashFill className="align-text-bottom mr-1" />
+                      Delete this group
+                    </Button>
+                  </Col>
+                )}
+              </Row>
+            </Card.Body>
+          </>
+        )}
+      </Card>
+      <GroupRoleSummaries />
+    </Layout>
+  );
+};
+
+export async function getServerSideProps(context) {
+  const { id } = context.params;
+
+  const url = `${process.env.SITE}/api/group/${id}`;
+  // eslint-disable-next-line no-undef
+  const res = await fetch(url, {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+      Cookie: context.req.headers.cookie,
+    },
+  });
+  if (res.status === 200) {
+    const foundGroup = await res.json();
+    const {
+      name,
+      members,
+    } = foundGroup;
+    const group = {
+      id: context.params.id,
+      name,
+      members,
+    };
+    return {
+      props: { group },
+    };
+  }
+  return {
+    props: { },
+  };
+}
+
+export default EditGroup;
diff --git a/src/pages/groups/[id]/index.jsx b/src/pages/groups/[id]/index.jsx
index 15e0a68b..27ab409a 100644
--- a/src/pages/groups/[id]/index.jsx
+++ b/src/pages/groups/[id]/index.jsx
@@ -46,7 +46,7 @@ const ViewGroup = ({ group }) => {
               </Table>
               {(roleInGroup(session) === 'owner' || roleInGroup(session) === 'manager') && (
                 <ButtonGroup>
-                  <Button variant="outline-primary">
+                  <Button variant="outline-primary" href={`${group.id}/edit`}>
                     <PencilSquare className="align-text-bottom mr-1" />
                     Edit this group
                   </Button>
diff --git a/src/pages/groups/index.jsx b/src/pages/groups/index.jsx
index a99abf5f..40f98414 100644
--- a/src/pages/groups/index.jsx
+++ b/src/pages/groups/index.jsx
@@ -49,7 +49,7 @@ const GroupList = () => {
                       <td>
                         {(value.role === 'owner' || value.role === 'manager') && (
                         <ButtonGroup>
-                          <Button variant="outline-primary">
+                          <Button variant="outline-primary" href={`/groups/${value.id}/edit`}>
                             <PencilSquare className="align-text-bottom mr-1" />
                             Edit
                           </Button>

From c586329087ff74fc375872ca888b8f6ad4a4b3cf Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Tue, 4 Aug 2020 17:44:09 -0400
Subject: [PATCH 27/62] #28 create group badges

---
 .../GroupRoleBadge/GroupRoleBadge.js          | 26 +++++++++++++++++++
 .../GroupRoleBadge/GroupRoleBadge.test.js     | 18 +++++++++++++
 src/components/GroupRoleBadge/index.js        |  3 +++
 3 files changed, 47 insertions(+)
 create mode 100644 src/components/GroupRoleBadge/GroupRoleBadge.js
 create mode 100644 src/components/GroupRoleBadge/GroupRoleBadge.test.js
 create mode 100644 src/components/GroupRoleBadge/index.js

diff --git a/src/components/GroupRoleBadge/GroupRoleBadge.js b/src/components/GroupRoleBadge/GroupRoleBadge.js
new file mode 100644
index 00000000..be0c56d3
--- /dev/null
+++ b/src/components/GroupRoleBadge/GroupRoleBadge.js
@@ -0,0 +1,26 @@
+import { Badge } from 'react-bootstrap';
+
+const GroupRoleBadge = (args) => {
+  let variant;
+  switch (args.groupRole) {
+    case 'member':
+      variant = 'secondary';
+      break;
+    case 'manager':
+      variant = 'warning';
+      break;
+    case 'owner':
+      variant = 'primary';
+      break;
+    default:
+      variant = 'secondary';
+      break;
+  }
+  return (
+    <Badge variant={variant} data-testid="group-role-badge">
+      {args.groupRole}
+    </Badge>
+  );
+};
+
+export default GroupRoleBadge;
diff --git a/src/components/GroupRoleBadge/GroupRoleBadge.test.js b/src/components/GroupRoleBadge/GroupRoleBadge.test.js
new file mode 100644
index 00000000..9c7bffdf
--- /dev/null
+++ b/src/components/GroupRoleBadge/GroupRoleBadge.test.js
@@ -0,0 +1,18 @@
+import { render, wait } from '@testing-library/react';
+import GroupRoleBadge from '.';
+
+test('renders badge', async () => {
+  const { getByTestId } = render(<GroupRoleBadge groupRole="test" />);
+  const badgeElement = getByTestId('group-role-badge');
+  await wait(() => {
+    expect(badgeElement).toBeInTheDocument();
+  });
+});
+
+test('renders text', async () => {
+  const { getByText } = render(<GroupRoleBadge groupRole="owner" />);
+  const badgeText = getByText('owner');
+  await wait(() => {
+    expect(badgeText).toBeInTheDocument();
+  });
+});
diff --git a/src/components/GroupRoleBadge/index.js b/src/components/GroupRoleBadge/index.js
new file mode 100644
index 00000000..8b6687c5
--- /dev/null
+++ b/src/components/GroupRoleBadge/index.js
@@ -0,0 +1,3 @@
+import GroupRoleBadge from './GroupRoleBadge';
+
+export default GroupRoleBadge;

From d48fe223ce4f4a1ef0119bbedf7afa67250fc122 Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Tue, 4 Aug 2020 17:51:59 -0400
Subject: [PATCH 28/62] #28 Add GroupRoleBadge to group views

---
 src/pages/groups/[id]/edit.jsx  |  3 ++-
 src/pages/groups/[id]/index.jsx | 20 ++++++++++++++++++--
 src/pages/groups/index.jsx      |  3 ++-
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/pages/groups/[id]/edit.jsx b/src/pages/groups/[id]/edit.jsx
index 0bac49b5..50f53de8 100644
--- a/src/pages/groups/[id]/edit.jsx
+++ b/src/pages/groups/[id]/edit.jsx
@@ -6,6 +6,7 @@ import { TrashFill } from 'react-bootstrap-icons';
 import Layout from '../../../components/Layout';
 import LoadingSpinner from '../../../components/LoadingSpinner';
 import GroupRoleSummaries from '../../../components/GroupRoleSummaries';
+import GroupRoleBadge from '../../../components/GroupRoleBadge';
 
 const EditGroup = ({ group }) => {
   const [session, loading] = useSession();
@@ -42,7 +43,7 @@ const EditGroup = ({ group }) => {
                         <tr>
                           <td>{member.name}</td>
                           <td>{member.email}</td>
-                          <td>{member.role}</td>
+                          <td><GroupRoleBadge groupRole={member.role} /></td>
                           <td>
                             <ButtonGroup>
                               <Button variant="outline-danger">
diff --git a/src/pages/groups/[id]/index.jsx b/src/pages/groups/[id]/index.jsx
index 27ab409a..ef69323c 100644
--- a/src/pages/groups/[id]/index.jsx
+++ b/src/pages/groups/[id]/index.jsx
@@ -1,6 +1,6 @@
 import { useSession } from 'next-auth/client';
 import {
-  Button, ButtonGroup, Card, Table,
+  Button, ButtonGroup, Card, Dropdown, Table,
 } from 'react-bootstrap';
 import {
   PencilSquare, TrashFill,
@@ -8,6 +8,7 @@ import {
 import Layout from '../../../components/Layout';
 import LoadingSpinner from '../../../components/LoadingSpinner';
 import GroupRoleSummaries from '../../../components/GroupRoleSummaries';
+import GroupRoleBadge from '../../../components/GroupRoleBadge';
 
 const ViewGroup = ({ group }) => {
   const [session, loading] = useSession();
@@ -39,7 +40,22 @@ const ViewGroup = ({ group }) => {
                     <tr>
                       <td>{member.name}</td>
                       <td>{member.email}</td>
-                      <td>{member.role}</td>
+                      <td>
+                        {member.role === 'owner' && (
+                          <GroupRoleBadge groupRole={member.role} />
+                        )}
+                        {member.role !== 'owner' && (
+                          <Dropdown>
+                            <Dropdown.Toggle variant="outline-secondary">
+                              {member.role}
+                            </Dropdown.Toggle>
+                            <Dropdown.Menu>
+                              <Dropdown.Item href="#/action-1">manager</Dropdown.Item>
+                              <Dropdown.Item href="#/action-2">member</Dropdown.Item>
+                            </Dropdown.Menu>
+                          </Dropdown>
+                        )}
+                      </td>
                     </tr>
                   ))}
                 </tbody>
diff --git a/src/pages/groups/index.jsx b/src/pages/groups/index.jsx
index 40f98414..92054859 100644
--- a/src/pages/groups/index.jsx
+++ b/src/pages/groups/index.jsx
@@ -9,6 +9,7 @@ import {
 import Layout from '../../components/Layout';
 import LoadingSpinner from '../../components/LoadingSpinner';
 import GroupRoleSummaries from '../../components/GroupRoleSummaries';
+import GroupRoleBadge from '../../components/GroupRoleBadge';
 
 const GroupList = () => {
   const [session, loading] = useSession();
@@ -45,7 +46,7 @@ const GroupList = () => {
                           {value.name}
                         </Link>
                       </td>
-                      <td>{value.role}</td>
+                      <td><GroupRoleBadge groupRole={value.role} /></td>
                       <td>
                         {(value.role === 'owner' || value.role === 'manager') && (
                         <ButtonGroup>

From 8093513c50af050bbe6ac4ef7de5602ede12686a Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Tue, 4 Aug 2020 18:16:11 -0400
Subject: [PATCH 29/62] #28 Add form components to Group Edit view

---
 src/pages/groups/[id]/edit.jsx  | 67 ++++++++++++++++++++++++++++-----
 src/pages/groups/[id]/index.jsx | 19 +---------
 2 files changed, 60 insertions(+), 26 deletions(-)

diff --git a/src/pages/groups/[id]/edit.jsx b/src/pages/groups/[id]/edit.jsx
index 50f53de8..245ff2ba 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 {
-  ButtonGroup, Row, Col, Button, Card, Table,
+  Button, Card, Col, Dropdown, FormControl, InputGroup, Row, Table,
 } from 'react-bootstrap';
 import { TrashFill } from 'react-bootstrap-icons';
 import Layout from '../../../components/Layout';
@@ -28,7 +28,7 @@ const EditGroup = ({ group }) => {
             </Card.Header>
             <Card.Body>
               <Row>
-                <Col>
+                <Col sm={6}>
                   <Table striped bordered hover variant="light">
                     <thead>
                       <tr>
@@ -43,28 +43,77 @@ const EditGroup = ({ group }) => {
                         <tr>
                           <td>{member.name}</td>
                           <td>{member.email}</td>
-                          <td><GroupRoleBadge groupRole={member.role} /></td>
                           <td>
-                            <ButtonGroup>
+                            {member.role === 'owner' && (
+                            <GroupRoleBadge groupRole={member.role} />
+                            )}
+                            {member.role !== 'owner' && (
+                            <Dropdown>
+                              <Dropdown.Toggle variant="outline-secondary">
+                                {member.role}
+                              </Dropdown.Toggle>
+                              <Dropdown.Menu>
+                                <Dropdown.Item href="#/action-1">manager</Dropdown.Item>
+                                <Dropdown.Item href="#/action-2">member</Dropdown.Item>
+                              </Dropdown.Menu>
+                            </Dropdown>
+                            )}
+                          </td>
+                          <td>
+                            {member.role !== 'owner' && (
                               <Button variant="outline-danger">
                                 <TrashFill className="align-text-bottom mr-1" />
                                 Remove
                               </Button>
-                            </ButtonGroup>
+                            )}
                           </td>
                         </tr>
                       ))}
                     </tbody>
                   </Table>
                 </Col>
-                {roleInGroup(session) === 'owner' && (
-                  <Col>
+                <Col>
+                  <Row>
+                    <h6>Invite link</h6>
+                    <p>Generate an invite link to send to registered or new users.</p>
+                    <Button variant="outline-secondary">
+                      Generate
+                    </Button>
+                  </Row>
+                  <Row>
+                    <h6 className="mt-3">Add registered user</h6>
+                    <p>
+                      Automatically add a registered user to this group by entering
+                      their email here.
+                    </p>
+                    <InputGroup>
+                      <FormControl
+                        aria-describedby="basic-addon1"
+                        placeholder="User's email"
+                        aria-label="User's email"
+                      />
+                      <InputGroup.Append>
+                        <Button variant="outline-secondary">Add</Button>
+                      </InputGroup.Append>
+                    </InputGroup>
+                  </Row>
+                </Col>
+                <Col>
+                  <h6>Delete group</h6>
+                  <p>
+                    Delete this group permanently. This action cannot be undone.
+                  </p>
+                  <p>
+                    Documents assigned to this group will not be deleted, but may
+                    become inaccessible to group members.
+                  </p>
+                  {roleInGroup(session) === 'owner' && (
                     <Button variant="outline-danger">
                       <TrashFill className="align-text-bottom mr-1" />
                       Delete this group
                     </Button>
-                  </Col>
-                )}
+                  )}
+                </Col>
               </Row>
             </Card.Body>
           </>
diff --git a/src/pages/groups/[id]/index.jsx b/src/pages/groups/[id]/index.jsx
index ef69323c..c5056454 100644
--- a/src/pages/groups/[id]/index.jsx
+++ b/src/pages/groups/[id]/index.jsx
@@ -1,6 +1,6 @@
 import { useSession } from 'next-auth/client';
 import {
-  Button, ButtonGroup, Card, Dropdown, Table,
+  Button, ButtonGroup, Card, Table,
 } from 'react-bootstrap';
 import {
   PencilSquare, TrashFill,
@@ -40,22 +40,7 @@ const ViewGroup = ({ group }) => {
                     <tr>
                       <td>{member.name}</td>
                       <td>{member.email}</td>
-                      <td>
-                        {member.role === 'owner' && (
-                          <GroupRoleBadge groupRole={member.role} />
-                        )}
-                        {member.role !== 'owner' && (
-                          <Dropdown>
-                            <Dropdown.Toggle variant="outline-secondary">
-                              {member.role}
-                            </Dropdown.Toggle>
-                            <Dropdown.Menu>
-                              <Dropdown.Item href="#/action-1">manager</Dropdown.Item>
-                              <Dropdown.Item href="#/action-2">member</Dropdown.Item>
-                            </Dropdown.Menu>
-                          </Dropdown>
-                        )}
-                      </td>
+                      <td><GroupRoleBadge groupRole={member.role} /></td>
                     </tr>
                   ))}
                 </tbody>

From d7f844f8f207294909cb38ec93b8af982d5dbdf2 Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Wed, 5 Aug 2020 15:44:06 -0400
Subject: [PATCH 30/62] #28 Change objectIDs to strings

---
 src/pages/api/document/[id].js  | 10 +++++-----
 src/pages/api/document/index.js |  2 +-
 src/pages/api/group/[id].js     | 34 +++++++++++++++++----------------
 src/pages/api/group/index.js    |  2 +-
 4 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/src/pages/api/document/[id].js b/src/pages/api/document/[id].js
index 6e5358a5..9f353b89 100644
--- a/src/pages/api/document/[id].js
+++ b/src/pages/api/document/[id].js
@@ -16,7 +16,7 @@ const handler = nc()
           .findOne(
             {
               _id: ObjectID(req.query.id),
-              $or: [{ 'groups.members.id': ObjectID(token.id) }, { owner: ObjectID(token.id) }],
+              $or: [{ 'groups.members.id': token.id }, { owner: token.id }],
             },
             (err, doc) => {
               if (doc) {
@@ -148,14 +148,14 @@ const handler = nc()
           ? { groups: req.body.addedGroup }
           : {};
         const groupToPull = req.body.removedGroupId
-          ? { 'groups.id': ObjectID(req.body.removedGroupId) }
+          ? { groups: { id: req.body.removedGroupId } }
           : {};
         let groupById = {};
         let groupFieldsToSet = {};
         let memberToPush = {};
         let memberToPull = {};
         if (req.body.updatedGroup) {
-          groupById = { 'groups.id': ObjectID(req.body.updatedGroup.id) };
+          groupById = { 'groups.id': req.body.updatedGroup.id };
           if (req.body.updatedGroup.name) {
             groupFieldsToSet = { 'groups.$.name': req.body.updatedGroup.name };
           }
@@ -163,7 +163,7 @@ const handler = nc()
             memberToPush = { 'groups.$.members': req.body.addedUser };
           }
           if (req.body.removedUserId) {
-            memberToPull = { 'groups.$.members.id': ObjectID(req.body.removedUserId) };
+            memberToPull = { 'groups.$.members.id': req.body.removedUserId };
           }
         }
         await req.db
@@ -171,7 +171,7 @@ const handler = nc()
           .findOneAndUpdate(
             {
               _id: ObjectID(req.query.id),
-              owner: ObjectID(token.id),
+              owner: token.id,
               ...groupById,
             },
             {
diff --git a/src/pages/api/document/index.js b/src/pages/api/document/index.js
index 30998fd6..7f135205 100644
--- a/src/pages/api/document/index.js
+++ b/src/pages/api/document/index.js
@@ -73,7 +73,7 @@ const handler = nc()
           .collection('documents')
           .insert(
             {
-              owner: ObjectID(token.id),
+              owner: token.id,
               createdAt: dateCreated,
               updatedAt: dateCreated,
               ...metadata,
diff --git a/src/pages/api/group/[id].js b/src/pages/api/group/[id].js
index dd030d1b..0d90f9fc 100644
--- a/src/pages/api/group/[id].js
+++ b/src/pages/api/group/[id].js
@@ -4,8 +4,7 @@ import jwt from 'next-auth/jwt';
 import middleware from '../../../middlewares/middleware';
 
 const secret = process.env.AUTH_SECRET;
-const fakeUserId = ObjectID('7b639ae33efb36eaf6447c55');
-
+const fakeUserId = '7b639ae33efb36eaf6447c55';
 const handler = nc()
   .use(middleware)
   .get(
@@ -17,7 +16,7 @@ const handler = nc()
           .findOne(
             {
               _id: ObjectID(req.query.id),
-              'members.id': ObjectID(token.id),
+              'members.id': token.id,
             },
             (err, doc) => {
               if (doc) {
@@ -49,15 +48,15 @@ const handler = nc()
       const token = await jwt.getToken({ req, secret });
       if (token && token.exp > 0) {
         const memberQuery = (process.env.NODE_ENV === 'development')
-          ? [{ 'members.id': ObjectID(token.id) }, { 'members.id': fakeUserId }]
-          : [{ 'members.id': ObjectID(token.id) }];
+          ? [{ 'members.id': token.id }, { 'members.id': fakeUserId }]
+          : [{ 'members.id': token.id }];
         const nameToUpdate = req.body.name
           ? { name: req.body.name }
           : {};
         let documentToUpdate = {};
         let documentById = {};
         if (req.body.updatedDocument) {
-          documentById = { 'documents.id': ObjectID(req.body.updatedDocument.id) };
+          documentById = { 'documents.id': req.body.updatedDocument.id };
           documentToUpdate = {
             'documents.$.slug': req.body.updatedDocument.slug,
             'documents.$.name': req.body.updatedDocument.name,
@@ -70,11 +69,21 @@ const handler = nc()
           ? { documents: req.body.addedDocument }
           : {};
         const memberToPull = req.body.removedUserId
-          ? { 'members.id': ObjectID(req.body.removedUserId) }
+          ? { members: { id: req.body.removedUserId } }
           : {};
         const documentToPull = req.body.removedDocumentId
-          ? { 'documents.id': ObjectID(req.body.removedDocumentId) }
+          ? { documents: { id: req.body.removedDocumentId } }
           : {};
+
+        const updateMethods = {};
+        const fieldsToSet = { ...nameToUpdate, ...documentToUpdate };
+        if (Object.keys(fieldsToSet).length !== 0) updateMethods.$set = fieldsToSet;
+        const fieldsToPush = { ...memberToPush, ...documentToPush };
+        if (Object.keys(fieldsToPush).length !== 0) updateMethods.$push = fieldsToPush;
+        const fieldsToPull = { ...memberToPull, ...documentToPull };
+        if (Object.keys(fieldsToPull).length !== 0) updateMethods.$pull = fieldsToPull;
+        updateMethods.$currentDate = { updatedAt: true };
+
         await req.db
           .collection('groups')
           .findOneAndUpdate(
@@ -83,14 +92,7 @@ const handler = nc()
               $or: memberQuery,
               ...documentById,
             },
-            {
-              $set: { ...nameToUpdate, ...documentToUpdate },
-              $push: { ...memberToPush, ...documentToPush },
-              $pull: { ...memberToPull, ...documentToPull },
-              $currentDate: {
-                updatedAt: true,
-              },
-            },
+            updateMethods,
             {
               returnOriginal: false,
             },
diff --git a/src/pages/api/group/index.js b/src/pages/api/group/index.js
index d4ea3340..622fcf3c 100644
--- a/src/pages/api/group/index.js
+++ b/src/pages/api/group/index.js
@@ -15,7 +15,7 @@ const handler = nc()
         const updatedAt = createdAt;
         const { name } = req.body;
         const members = [{
-          id: ObjectID(token.id),
+          id: token.id,
           name: token.name,
           email: token.email,
           role: 'owner',

From b1324c76f1b7633a5794ac1585340e9dd9955cf1 Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Wed, 5 Aug 2020 15:44:15 -0400
Subject: [PATCH 31/62] #28 add GET user by email route

---
 src/pages/api/user/email/[email].js | 35 +++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 src/pages/api/user/email/[email].js

diff --git a/src/pages/api/user/email/[email].js b/src/pages/api/user/email/[email].js
new file mode 100644
index 00000000..5a60ac74
--- /dev/null
+++ b/src/pages/api/user/email/[email].js
@@ -0,0 +1,35 @@
+import nc from 'next-connect';
+import jwt from 'next-auth/jwt';
+import middleware from '../../../../middlewares/middleware';
+
+const secret = process.env.AUTH_SECRET;
+
+const handler = nc()
+  .use(middleware)
+  .get(
+    async (req, res) => {
+      const token = await jwt.getToken({ req, secret });
+      if (token && token.exp > 0) {
+        await req.db
+          .collection('users')
+          .findOne(
+            { email: req.query.email },
+            (err, doc) => {
+              if (doc) {
+                // eslint-disable-next-line no-underscore-dangle
+                const id = doc._id;
+                const { name } = doc;
+                if (err) throw err;
+                res.status(200).json({
+                  id, name,
+                });
+              } else {
+                res.status(404).json({ error: '404 Not Found' });
+              }
+            },
+          );
+      } else res.status(403).json({ error: '403 Invalid or expired token' });
+    },
+  );
+
+export default handler;

From 704e3b0387c2bb0204c320fc97f8b3e415fca47a Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Wed, 5 Aug 2020 15:44:29 -0400
Subject: [PATCH 32/62] #28 add GET user by email function

---
 src/utils/userUtil.js | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 src/utils/userUtil.js

diff --git a/src/utils/userUtil.js b/src/utils/userUtil.js
new file mode 100644
index 00000000..5ec30c51
--- /dev/null
+++ b/src/utils/userUtil.js
@@ -0,0 +1,15 @@
+import fetch from 'unfetch';
+
+const GetUserByEmail = async (email) => {
+  const url = `/api/user/email/${email}`;
+  const res = await fetch(url, {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+  return Promise.resolve(res.json());
+};
+
+// eslint-disable-next-line import/prefer-default-export
+export { GetUserByEmail };

From 031171d0381d38a7f22f831b007c6fcb3e556394 Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Wed, 5 Aug 2020 15:45:14 -0400
Subject: [PATCH 33/62] #28 Make FullName non-default export from nameUtil

---
 src/pages/user/[slug]/editprofile.jsx | 4 ++--
 src/pages/user/newuser.jsx            | 4 ++--
 src/utils/nameUtil.js                 | 8 ++++++--
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/pages/user/[slug]/editprofile.jsx b/src/pages/user/[slug]/editprofile.jsx
index 7e168288..fd177e96 100644
--- a/src/pages/user/[slug]/editprofile.jsx
+++ b/src/pages/user/[slug]/editprofile.jsx
@@ -6,7 +6,7 @@ import {
   Button, Card, Col, Form, Row,
 } from 'react-bootstrap';
 import Router from 'next/router';
-import fullName from '../../../utils/nameUtil';
+import FullName from '../../../utils/nameUtil';
 import Layout from '../../../components/Layout';
 import LoadingSpinner from '../../../components/LoadingSpinner';
 
@@ -20,7 +20,7 @@ const EditProfile = ({ user }) => {
       email: values.email,
       firstName: values.firstName,
       lastName: values.lastName,
-      name: fullName(values.firstName, values.lastName),
+      name: FullName(values.firstName, values.lastName),
       affiliation: values.affiliation,
       slug: values.email.replace(/[*+~.()'"!:@]/g, '-'),
     };
diff --git a/src/pages/user/newuser.jsx b/src/pages/user/newuser.jsx
index 64f7337a..3b3985fc 100644
--- a/src/pages/user/newuser.jsx
+++ b/src/pages/user/newuser.jsx
@@ -9,7 +9,7 @@ import {
 import Feedback from 'react-bootstrap/Feedback';
 import Link from 'next/link';
 import Router from 'next/router';
-import fullName from '../../utils/nameUtil';
+import { FullName } from '../../utils/nameUtil';
 import Layout from '../../components/Layout';
 import LoadingSpinner from '../../components/LoadingSpinner';
 
@@ -23,7 +23,7 @@ const NewUser = () => {
       email: session.user.email,
       firstName: values.firstName,
       lastName: values.lastName,
-      name: fullName(values.firstName, values.lastName),
+      name: FullName(values.firstName, values.lastName),
       affiliation: values.affiliation,
       slug: session.user.email.replace(/[*+~.()'"!:@]/g, '-'),
     };
diff --git a/src/utils/nameUtil.js b/src/utils/nameUtil.js
index 12f56a3b..1d66a91b 100644
--- a/src/utils/nameUtil.js
+++ b/src/utils/nameUtil.js
@@ -1,3 +1,7 @@
-const fullName = (firstName, lastName) => `${firstName} ${lastName}`;
+const FullName = (firstName, lastName) => `${firstName} ${lastName}`;
+const FirstNameLastInitial = (fullName) => {
+  const splitted = fullName.split(' ');
+  return `${splitted[0]} ${splitted[1][0]}.`;
+};
 
-export default fullName;
+export { FullName, FirstNameLastInitial };

From 03d8e63c82992ce95a75d6207ac1828f59bb6a13 Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Wed, 5 Aug 2020 15:45:33 -0400
Subject: [PATCH 34/62] #28 Add some functions to groupUtil

---
 src/utils/groupUtil.js | 81 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 81 insertions(+)
 create mode 100644 src/utils/groupUtil.js

diff --git a/src/utils/groupUtil.js b/src/utils/groupUtil.js
new file mode 100644
index 00000000..d39976b6
--- /dev/null
+++ b/src/utils/groupUtil.js
@@ -0,0 +1,81 @@
+import fetch from 'unfetch';
+import Router from 'next/router';
+import { GetUserByEmail } from './userUtil';
+
+const AddGroupToUser = async (group, user) => {
+  const url = `/api/user/${user.id}`;
+  const { role } = user;
+  const {
+    id,
+    name,
+    ownerName,
+    memberCount,
+  } = group;
+  const body = {
+    addedGroup: {
+      id,
+      name,
+      ownerName,
+      memberCount,
+      role,
+    },
+  };
+  const res = await fetch(url, {
+    method: 'PATCH',
+    body: JSON.stringify(body),
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+  if (res.status === 200) {
+    const result = await res.json();
+    if (role === 'owner') {
+      Router.push({
+        pathname: `/groups/${group.id}`,
+      });
+    } else {
+      Router.push({
+        pathname: `/groups/${group.id}/edit`,
+      });
+    }
+    return Promise.resolve(result);
+  }
+  return Promise.reject(Error(`Unable to add group to user: error ${res.status} received from server`));
+};
+
+const AddUserToGroup = async (group, email) => {
+  const user = await GetUserByEmail(email);
+  if (!user.error) {
+    const url = `/api/group/${group.id}`;
+    const {
+      id, name,
+    } = user;
+    const role = 'member';
+    const body = {
+      addedUser: {
+        id, name, email, role,
+      },
+    };
+    const res = await fetch(url, {
+      method: 'PATCH',
+      body: JSON.stringify(body),
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+    if (res.status === 200) {
+      const result = await res.json();
+      const memberCount = result.value.members.length;
+      const ownerName = result.value.members.filter((member) => member.role === 'owner')[0].name;
+      const groupToAdd = {
+        id: group.id,
+        name: result.name,
+        memberCount,
+        ownerName,
+      };
+      return AddGroupToUser(groupToAdd, user);
+    } return Promise.reject(Error(`Unable to add user to group: error ${res.status} received from server`));
+  } return Promise.reject(Error(`Could not add user with email ${email}: error ${user.error}.`));
+};
+
+export { AddGroupToUser, AddUserToGroup };

From 8ba1c26334bc7c9c330f34f748f07d1a2268cbf3 Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Wed, 5 Aug 2020 15:45:55 -0400
Subject: [PATCH 35/62] #28 Use groupUtil function for AddGroupToUser

---
 src/pages/groups/new.jsx | 44 ++++++++++------------------------------
 1 file changed, 11 insertions(+), 33 deletions(-)

diff --git a/src/pages/groups/new.jsx b/src/pages/groups/new.jsx
index d6f88581..ca66898c 100644
--- a/src/pages/groups/new.jsx
+++ b/src/pages/groups/new.jsx
@@ -1,45 +1,18 @@
 import fetch from 'unfetch';
 import { Formik } from 'formik';
-import { useSession, getSession } from 'next-auth/client';
+import { useSession } from 'next-auth/client';
 import {
   Button, Card, Col, Form, Row,
 } from 'react-bootstrap';
-import Router from 'next/router';
 import * as yup from 'yup';
+import { AddGroupToUser } from '../../utils/groupUtil';
 import Layout from '../../components/Layout';
 import LoadingSpinner from '../../components/LoadingSpinner';
 
 const NewGroup = () => {
   const [session] = useSession();
 
-  const updateOwnerWithGroup = async ({ id, name, user }) => {
-    const url = `/api/user/${user}`;
-    const body = {
-      addedGroup: {
-        id,
-        name,
-        role: 'owner',
-      },
-    };
-    const res = await fetch(url, {
-      method: 'PATCH',
-      body: JSON.stringify(body),
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    });
-    if (res.status === 200) {
-      const result = await res.json();
-      getSession();
-      Router.push({
-        pathname: '/groups',
-      });
-      return Promise.resolve(result);
-    }
-    return Promise.reject(Error(`Unable to add group to user: error ${res.status} received from server`));
-  };
-
-  const submitHandler = async (values) => {
+  const createGroup = async (values) => {
     const url = '/api/group';
     const { name } = values;
     const res = await fetch(url, {
@@ -54,9 +27,14 @@ const NewGroup = () => {
       const group = {
         id: result.insertedId,
         name,
-        user: result.ops[0].members[0].id,
+        ownerName: result.ops[0].members[0].name,
+        memberCount: 1,
+      };
+      const user = {
+        userId: result.ops[0].members[0].id,
+        role: 'owner',
       };
-      return updateOwnerWithGroup(group);
+      return AddGroupToUser(group, user);
     }
     return Promise.reject(Error(`Unable to create group: error ${res.status} received from server`));
   };
@@ -79,7 +57,7 @@ const NewGroup = () => {
               <Formik
                 onSubmit={(values, actions) => {
                   setTimeout(() => {
-                    submitHandler(values);
+                    createGroup(values);
                     actions.setSubmitting(false);
                   }, 1000);
                 }}

From f60a4df8ac93f7d143775b457e478f2d23c94f35 Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Wed, 5 Aug 2020 15:46:47 -0400
Subject: [PATCH 36/62] #28 Update group views with new metadata

---
 src/pages/groups/[id]/index.jsx | 2 +-
 src/pages/groups/index.jsx      | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/pages/groups/[id]/index.jsx b/src/pages/groups/[id]/index.jsx
index c5056454..11f57d16 100644
--- a/src/pages/groups/[id]/index.jsx
+++ b/src/pages/groups/[id]/index.jsx
@@ -49,7 +49,7 @@ const ViewGroup = ({ group }) => {
                 <ButtonGroup>
                   <Button variant="outline-primary" href={`${group.id}/edit`}>
                     <PencilSquare className="align-text-bottom mr-1" />
-                    Edit this group
+                    Manage this group
                   </Button>
                   {roleInGroup(session) === 'owner' && (
                     <Button variant="outline-danger">
diff --git a/src/pages/groups/index.jsx b/src/pages/groups/index.jsx
index 92054859..d83c3d58 100644
--- a/src/pages/groups/index.jsx
+++ b/src/pages/groups/index.jsx
@@ -10,6 +10,7 @@ import Layout from '../../components/Layout';
 import LoadingSpinner from '../../components/LoadingSpinner';
 import GroupRoleSummaries from '../../components/GroupRoleSummaries';
 import GroupRoleBadge from '../../components/GroupRoleBadge';
+import { FirstNameLastInitial } from '../../utils/nameUtil';
 
 const GroupList = () => {
   const [session, loading] = useSession();
@@ -35,6 +36,8 @@ const GroupList = () => {
                   <tr>
                     <th>Name</th>
                     <th>Role</th>
+                    <th>Owner</th>
+                    <th>Members</th>
                     <th>Actions</th>
                   </tr>
                 </thead>
@@ -47,12 +50,14 @@ const GroupList = () => {
                         </Link>
                       </td>
                       <td><GroupRoleBadge groupRole={value.role} /></td>
+                      <td>{FirstNameLastInitial(value.ownerName)}</td>
+                      <td>{value.memberCount}</td>
                       <td>
                         {(value.role === 'owner' || value.role === 'manager') && (
                         <ButtonGroup>
                           <Button variant="outline-primary" href={`/groups/${value.id}/edit`}>
                             <PencilSquare className="align-text-bottom mr-1" />
-                            Edit
+                            Manage
                           </Button>
                           {value.role === 'owner' && (
                             <Button variant="outline-danger">

From 500ffc059fa170b0fdbb6626a10999603094e859 Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Wed, 5 Aug 2020 15:47:25 -0400
Subject: [PATCH 37/62] #28 Add Formik form to group Edit view

---
 src/pages/groups/[id]/edit.jsx | 77 ++++++++++++++++++++++++++--------
 1 file changed, 59 insertions(+), 18 deletions(-)

diff --git a/src/pages/groups/[id]/edit.jsx b/src/pages/groups/[id]/edit.jsx
index 245ff2ba..adecb308 100644
--- a/src/pages/groups/[id]/edit.jsx
+++ b/src/pages/groups/[id]/edit.jsx
@@ -1,12 +1,16 @@
 import { useSession } from 'next-auth/client';
 import {
-  Button, Card, Col, Dropdown, FormControl, InputGroup, Row, Table,
+  Button, Card, Col, Dropdown, FormControl, InputGroup, Row, Table, Form,
 } from 'react-bootstrap';
 import { TrashFill } from 'react-bootstrap-icons';
+import * as yup from 'yup';
+import { Formik } from 'formik';
 import Layout from '../../../components/Layout';
 import LoadingSpinner from '../../../components/LoadingSpinner';
 import GroupRoleSummaries from '../../../components/GroupRoleSummaries';
 import GroupRoleBadge from '../../../components/GroupRoleBadge';
+import { AddUserToGroup } from '../../../utils/groupUtil';
+
 
 const EditGroup = ({ group }) => {
   const [session, loading] = useSession();
@@ -22,14 +26,14 @@ const EditGroup = ({ group }) => {
         {session && !loading && (roleInGroup(session) === 'owner' || roleInGroup(session) === 'manager') && (
           <>
             <Card.Header>
-              Editing Group:
+              Manage Group:
               {' '}
               {group.name}
             </Card.Header>
             <Card.Body>
-              <Row>
-                <Col sm={6}>
-                  <Table striped bordered hover variant="light">
+              <Row fluid>
+                <Col lg={7}>
+                  <Table striped bordered hover variant="light" size="sm">
                     <thead>
                       <tr>
                         <th>Member</th>
@@ -49,7 +53,7 @@ const EditGroup = ({ group }) => {
                             )}
                             {member.role !== 'owner' && (
                             <Dropdown>
-                              <Dropdown.Toggle variant="outline-secondary">
+                              <Dropdown.Toggle variant="outline-secondary" className="btn-sm">
                                 {member.role}
                               </Dropdown.Toggle>
                               <Dropdown.Menu>
@@ -61,8 +65,7 @@ const EditGroup = ({ group }) => {
                           </td>
                           <td>
                             {member.role !== 'owner' && (
-                              <Button variant="outline-danger">
-                                <TrashFill className="align-text-bottom mr-1" />
+                              <Button variant="outline-danger" className="btn-sm">
                                 Remove
                               </Button>
                             )}
@@ -86,16 +89,54 @@ const EditGroup = ({ group }) => {
                       Automatically add a registered user to this group by entering
                       their email here.
                     </p>
-                    <InputGroup>
-                      <FormControl
-                        aria-describedby="basic-addon1"
-                        placeholder="User's email"
-                        aria-label="User's email"
-                      />
-                      <InputGroup.Append>
-                        <Button variant="outline-secondary">Add</Button>
-                      </InputGroup.Append>
-                    </InputGroup>
+                    <Formik
+                      validationSchema={yup.object({
+                        email: yup.string().required().email(),
+                      })}
+                      onSubmit={(values, actions) => {
+                        setTimeout(() => {
+                          AddUserToGroup(group, values.email);
+                          actions.setSubmitting(false);
+                        }, 1000);
+                      }}
+                      initialValues={{
+                        email: '',
+                      }}
+                    >
+                      {(props) => (
+                        <Form noValidate onSubmit={props.handleSubmit}>
+                          <Form.Group controlId="formPlaintextEmail">
+                            <InputGroup>
+                              <FormControl
+                                placeholder="User's email"
+                                aria-label="User's email"
+                                name="email"
+                                value={props.values.email}
+                                onChange={props.handleChange}
+                                onBlur={props.handleBlur}
+                                isValid={props.touched.email && !props.errors.email}
+                                isInvalid={!!props.errors.email}
+                              />
+                              <InputGroup.Append>
+                                <Button
+                                  variant="outline-secondary"
+                                  type="submit"
+                                  className="rounded-right"
+                                  disabled={props.isSubmitting || props.errors.email || props.values.email === ''}
+                                  data-testid="newgroup-submit-button"
+                                >
+                                  Add
+                                </Button>
+                              </InputGroup.Append>
+                              <Form.Control.Feedback type="invalid" className="w-100">
+                                {props.errors.email}
+                              </Form.Control.Feedback>
+                            </InputGroup>
+                          </Form.Group>
+                        </Form>
+                      )}
+                    </Formik>
+
                   </Row>
                 </Col>
                 <Col>

From 017838204b88b110395ab87597e490ce7524a61c Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Wed, 5 Aug 2020 16:18:02 -0400
Subject: [PATCH 38/62] #28 Add RemoveUserFromGroup method

---
 src/pages/api/user/[id].js     | 16 ++++++++------
 src/pages/groups/[id]/edit.jsx |  9 ++++++--
 src/utils/groupUtil.js         | 39 ++++++++++++++++++++++++++++++++--
 3 files changed, 54 insertions(+), 10 deletions(-)

diff --git a/src/pages/api/user/[id].js b/src/pages/api/user/[id].js
index 1a8d5382..40ad6e5a 100644
--- a/src/pages/api/user/[id].js
+++ b/src/pages/api/user/[id].js
@@ -37,16 +37,20 @@ const handler = nc()
         const groupToPush = req.body.addedGroup
           ? { groups: req.body.addedGroup }
           : {};
+        const groupToPull = req.body.removedGroupId
+          ? { groups: { id: req.body.removedGroupId } }
+          : {};
+        const updateMethods = {};
+        const fieldsToPush = { ...groupToPush };
+        if (Object.keys(fieldsToPush).length !== 0) updateMethods.$push = fieldsToPush;
+        const fieldsToPull = { ...groupToPull };
+        if (Object.keys(fieldsToPull).length !== 0) updateMethods.$pull = fieldsToPull;
+        updateMethods.$currentDate = { updatedAt: true };
         await req.db
           .collection('users')
           .findOneAndUpdate(
             { _id: ObjectID(req.query.id) },
-            {
-              $push: { ...groupToPush },
-              $currentDate: {
-                updatedAt: true,
-              },
-            },
+            updateMethods,
             {
               returnOriginal: false,
             },
diff --git a/src/pages/groups/[id]/edit.jsx b/src/pages/groups/[id]/edit.jsx
index adecb308..b8a31eb0 100644
--- a/src/pages/groups/[id]/edit.jsx
+++ b/src/pages/groups/[id]/edit.jsx
@@ -9,7 +9,7 @@ import Layout from '../../../components/Layout';
 import LoadingSpinner from '../../../components/LoadingSpinner';
 import GroupRoleSummaries from '../../../components/GroupRoleSummaries';
 import GroupRoleBadge from '../../../components/GroupRoleBadge';
-import { AddUserToGroup } from '../../../utils/groupUtil';
+import { AddUserToGroup, RemoveUserFromGroup } from '../../../utils/groupUtil';
 
 
 const EditGroup = ({ group }) => {
@@ -65,7 +65,12 @@ const EditGroup = ({ group }) => {
                           </td>
                           <td>
                             {member.role !== 'owner' && (
-                              <Button variant="outline-danger" className="btn-sm">
+                              <Button
+                                variant="outline-danger"
+                                className="btn-sm"
+                                type="button"
+                                onClick={() => RemoveUserFromGroup(group, member)}
+                              >
                                 Remove
                               </Button>
                             )}
diff --git a/src/utils/groupUtil.js b/src/utils/groupUtil.js
index d39976b6..54608cd6 100644
--- a/src/utils/groupUtil.js
+++ b/src/utils/groupUtil.js
@@ -75,7 +75,42 @@ const AddUserToGroup = async (group, email) => {
       };
       return AddGroupToUser(groupToAdd, user);
     } return Promise.reject(Error(`Unable to add user to group: error ${res.status} received from server`));
-  } return Promise.reject(Error(`Could not add user with email ${email}: error ${user.error}.`));
+  } return Promise.reject(Error(`Unable to add user with email ${email}: error ${user.error}.`));
 };
 
-export { AddGroupToUser, AddUserToGroup };
+const RemoveGroupFromUser = async (group, user) => {
+  const removedGroupId = group.id;
+  const url = `/api/user/${user.id}`;
+  const body = { removedGroupId };
+  const res = await fetch(url, {
+    method: 'PATCH',
+    body: JSON.stringify(body),
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+  if (res.status === 200) {
+    Router.push({
+      pathname: `/groups/${group.id}/edit`,
+    });
+    return Promise.resolve(res.json());
+  } return Promise.reject(Error(`Unable to remove group from user: error ${res.status} received from server`));
+};
+
+const RemoveUserFromGroup = async (group, user) => {
+  const removedUserId = user.id;
+  const url = `/api/group/${group.id}`;
+  const body = { removedUserId };
+  const res = await fetch(url, {
+    method: 'PATCH',
+    body: JSON.stringify(body),
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+  if (res.status === 200) {
+    return RemoveGroupFromUser(group, user);
+  } return Promise.reject(Error(`Unable to remove user from group: error ${res.status} received from server`));
+};
+
+export { AddGroupToUser, AddUserToGroup, RemoveUserFromGroup };

From 0d3afc89e80312b20f03a872d770f42c23fe3fc0 Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Wed, 5 Aug 2020 18:39:19 -0400
Subject: [PATCH 39/62] #28 Update member counts on add/remove member

---
 src/pages/api/user/[id].js     | 18 ++++++++++++++++-
 src/pages/groups/[id]/edit.jsx |  4 ++--
 src/utils/groupUtil.js         | 35 ++++++++++++++++++++++++++++++----
 3 files changed, 50 insertions(+), 7 deletions(-)

diff --git a/src/pages/api/user/[id].js b/src/pages/api/user/[id].js
index 40ad6e5a..6a6e1b6d 100644
--- a/src/pages/api/user/[id].js
+++ b/src/pages/api/user/[id].js
@@ -40,22 +40,38 @@ const handler = nc()
         const groupToPull = req.body.removedGroupId
           ? { groups: { id: req.body.removedGroupId } }
           : {};
+        let groupById;
+        let groupToUpdate;
+        if (req.body.updatedGroupId) {
+          groupById = { 'groups.id': req.body.updatedGroupId };
+          if (req.body.memberCount) {
+            groupToUpdate = {
+              'groups.$.memberCount': req.body.memberCount,
+            };
+          }
+        }
         const updateMethods = {};
         const fieldsToPush = { ...groupToPush };
         if (Object.keys(fieldsToPush).length !== 0) updateMethods.$push = fieldsToPush;
         const fieldsToPull = { ...groupToPull };
         if (Object.keys(fieldsToPull).length !== 0) updateMethods.$pull = fieldsToPull;
+        const fieldsToSet = { ...groupToUpdate };
+        if (Object.keys(fieldsToSet).length !== 0) updateMethods.$set = fieldsToSet;
         updateMethods.$currentDate = { updatedAt: true };
         await req.db
           .collection('users')
           .findOneAndUpdate(
-            { _id: ObjectID(req.query.id) },
+            {
+              _id: ObjectID(req.query.id),
+              ...groupById,
+            },
             updateMethods,
             {
               returnOriginal: false,
             },
             (err, doc) => {
               if (err) throw err;
+              // console.log(doc);
               res.status(200).json(doc);
             },
           );
diff --git a/src/pages/groups/[id]/edit.jsx b/src/pages/groups/[id]/edit.jsx
index b8a31eb0..d4d57f10 100644
--- a/src/pages/groups/[id]/edit.jsx
+++ b/src/pages/groups/[id]/edit.jsx
@@ -57,8 +57,8 @@ const EditGroup = ({ group }) => {
                                 {member.role}
                               </Dropdown.Toggle>
                               <Dropdown.Menu>
-                                <Dropdown.Item href="#/action-1">manager</Dropdown.Item>
-                                <Dropdown.Item href="#/action-2">member</Dropdown.Item>
+                                <Dropdown.Item disabled={member.role === 'member'} href="#/action-1">member</Dropdown.Item>
+                                <Dropdown.Item disabled={member.role === 'manager'} href="#/action-2">manager</Dropdown.Item>
                               </Dropdown.Menu>
                             </Dropdown>
                             )}
diff --git a/src/utils/groupUtil.js b/src/utils/groupUtil.js
index 54608cd6..246a1cc2 100644
--- a/src/utils/groupUtil.js
+++ b/src/utils/groupUtil.js
@@ -2,14 +2,39 @@ import fetch from 'unfetch';
 import Router from 'next/router';
 import { GetUserByEmail } from './userUtil';
 
+const UpdateMemberCounts = async (group) => {
+  const { members } = group;
+  // eslint-disable-next-line no-underscore-dangle
+  const updatedGroupId = group._id;
+  const memberCount = members.length;
+  return Promise.all(
+    members.map(async (member) => {
+      const url = `/api/user/${member.id}`;
+      const body = {
+        updatedGroupId,
+        memberCount,
+      };
+      const res = await fetch(url, {
+        method: 'PATCH',
+        body: JSON.stringify(body),
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+      if (res.status !== 200) { return Promise.reject(Error(`Unable to update member counts: error ${res.status} received from server`)); }
+      return Promise.resolve(res.json());
+    }),
+  );
+};
+
 const AddGroupToUser = async (group, user) => {
   const url = `/api/user/${user.id}`;
-  const { role } = user;
   const {
     id,
     name,
     ownerName,
     memberCount,
+    role,
   } = group;
   const body = {
     addedGroup: {
@@ -69,11 +94,12 @@ const AddUserToGroup = async (group, email) => {
       const ownerName = result.value.members.filter((member) => member.role === 'owner')[0].name;
       const groupToAdd = {
         id: group.id,
-        name: result.name,
+        name: result.value.name,
         memberCount,
         ownerName,
+        role: 'member',
       };
-      return AddGroupToUser(groupToAdd, user);
+      return AddGroupToUser(groupToAdd, user).then(UpdateMemberCounts(result.value));
     } return Promise.reject(Error(`Unable to add user to group: error ${res.status} received from server`));
   } return Promise.reject(Error(`Unable to add user with email ${email}: error ${user.error}.`));
 };
@@ -109,7 +135,8 @@ const RemoveUserFromGroup = async (group, user) => {
     },
   });
   if (res.status === 200) {
-    return RemoveGroupFromUser(group, user);
+    const result = await res.json();
+    return RemoveGroupFromUser(group, user).then(UpdateMemberCounts(result.value));
   } return Promise.reject(Error(`Unable to remove user from group: error ${res.status} received from server`));
 };
 

From 1e818b0ea84096f1a281196523f0df115007e330 Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Thu, 20 Aug 2020 12:20:30 -0600
Subject: [PATCH 40/62] #28 add DELETE method to group API route

---
 src/pages/api/group/[id].js | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/src/pages/api/group/[id].js b/src/pages/api/group/[id].js
index 0d90f9fc..4c1b47fd 100644
--- a/src/pages/api/group/[id].js
+++ b/src/pages/api/group/[id].js
@@ -103,6 +103,25 @@ const handler = nc()
           );
       } else res.status(403).json({ error: '403 Invalid or expired token' });
     },
+  )
+  .delete(
+    async (req, res) => {
+      const token = await jwt.getToken({ req, secret });
+      if (token && token.exp > 0) {
+        await req.db
+          .collection('groups')
+          .findOneAndDelete(
+            {
+              _id: ObjectID(req.query.id),
+              members: { $elemMatch: { id: token.id, role: 'owner' } },
+            },
+            (err, doc) => {
+              if (err) throw err;
+              res.status(200).json(doc);
+            },
+          );
+      } else res.status(403).json({ error: '403 Invalid or expired token' });
+    },
   );
 
 export default handler;

From 52d82ff2b06a86e69e0e64f2d6a5146a24b09149 Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Thu, 20 Aug 2020 13:09:42 -0600
Subject: [PATCH 41/62] #28 Fix error when creating new group

---
 src/pages/api/user/[id].js | 1 -
 src/pages/groups/new.jsx   | 4 ++--
 src/utils/groupUtil.js     | 4 ++--
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/pages/api/user/[id].js b/src/pages/api/user/[id].js
index 6a6e1b6d..75194ba3 100644
--- a/src/pages/api/user/[id].js
+++ b/src/pages/api/user/[id].js
@@ -71,7 +71,6 @@ const handler = nc()
             },
             (err, doc) => {
               if (err) throw err;
-              // console.log(doc);
               res.status(200).json(doc);
             },
           );
diff --git a/src/pages/groups/new.jsx b/src/pages/groups/new.jsx
index ca66898c..7565ab58 100644
--- a/src/pages/groups/new.jsx
+++ b/src/pages/groups/new.jsx
@@ -29,10 +29,10 @@ const NewGroup = () => {
         name,
         ownerName: result.ops[0].members[0].name,
         memberCount: 1,
+        role: 'owner',
       };
       const user = {
-        userId: result.ops[0].members[0].id,
-        role: 'owner',
+        id: result.ops[0].members[0].id,
       };
       return AddGroupToUser(group, user);
     }
diff --git a/src/utils/groupUtil.js b/src/utils/groupUtil.js
index 246a1cc2..526630d5 100644
--- a/src/utils/groupUtil.js
+++ b/src/utils/groupUtil.js
@@ -56,11 +56,11 @@ const AddGroupToUser = async (group, user) => {
     const result = await res.json();
     if (role === 'owner') {
       Router.push({
-        pathname: `/groups/${group.id}`,
+        pathname: `/groups/${group.id}/edit`,
       });
     } else {
       Router.push({
-        pathname: `/groups/${group.id}/edit`,
+        pathname: `/groups/${group.id}`,
       });
     }
     return Promise.resolve(result);

From d04ab94fba7883e4586c1223eece8ef1a2e38bd3 Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Thu, 20 Aug 2020 18:21:02 -0600
Subject: [PATCH 42/62] #28 Update next-auth to 3.1.0

---
 package-lock.json | 70 ++++++++---------------------------------------
 package.json      |  2 +-
 2 files changed, 12 insertions(+), 60 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 834fe06f..7dfccfad 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4471,11 +4471,6 @@
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.3.1.tgz",
       "integrity": "sha512-mLQ4i2QO1ytvGWFWmcngKO//JXAQueZvwEKtjgQFM4jIK0kU+ytMfplL8j+n5mspOfjHwoAg+9yhb7BwAHm36g=="
     },
-    "base64url": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/base64url/-/base64url-3.0.1.tgz",
-      "integrity": "sha512-ir1UPr3dkwexU7FdV8qBBbNDRUhMmIekYMFZfi+C/sLNnRESKPl23nB9b2pltqfOQNnGzsDdId90AEtG5tCx4A=="
-    },
     "bcrypt-pbkdf": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
@@ -6114,11 +6109,6 @@
         "es6-symbol": "^3.1.1"
       }
     },
-    "es6-promise": {
-      "version": "4.2.8",
-      "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz",
-      "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w=="
-    },
     "es6-symbol": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.3.tgz",
@@ -9368,9 +9358,9 @@
       }
     },
     "jose": {
-      "version": "1.27.2",
-      "resolved": "https://registry.npmjs.org/jose/-/jose-1.27.2.tgz",
-      "integrity": "sha512-zLIwnMa8dh5A2jFo56KvhiXCaW0hFjdNvG0I5GScL8Wro+/r/SnyIYTbnX3fYztPNSfgQp56sDMHUuS9c3e6bw==",
+      "version": "1.28.0",
+      "resolved": "https://registry.npmjs.org/jose/-/jose-1.28.0.tgz",
+      "integrity": "sha512-JmfDRzt/HSj8ipd9TsDtEHoLUnLYavG+7e8F6s1mx2jfVSfXOTaFQsJUydbjJpTnTDHP1+yKL9Ke7ktS/a0Eiw==",
       "requires": {
         "@panva/asn1.js": "^1.0.0"
       }
@@ -10257,16 +10247,15 @@
       }
     },
     "next-auth": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/next-auth/-/next-auth-3.0.1.tgz",
-      "integrity": "sha512-3e/b0yA4KG2UOWXLpud+Q8KNmYyRZFAMpbZ3yq7A2pNUm60NuG9XhGeX+nfa0ZENBfoH+8PRifPrqdMYg7K0LQ==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/next-auth/-/next-auth-3.1.0.tgz",
+      "integrity": "sha512-e+s6hjPZpqbnjla9WOi0VuLkDlLMU3cJmS0jTBBvsvSGsOPvMbaCCAMBEoNV3nWSgPrq6zLG2dixmCCxzG7fXA==",
       "requires": {
         "crypto-js": "^4.0.0",
         "futoin-hkdf": "^1.3.2",
         "jose": "^1.27.2",
         "jsonwebtoken": "^8.5.1",
         "jwt-decode": "^2.2.0",
-        "node-jose": "^1.1.4",
         "nodemailer": "^6.4.6",
         "oauth": "^0.9.15",
         "preact": "^10.4.1",
@@ -10307,11 +10296,6 @@
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.0.tgz",
       "integrity": "sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA=="
     },
-    "node-forge": {
-      "version": "0.8.5",
-      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.8.5.tgz",
-      "integrity": "sha512-vFMQIWt+J/7FLNyKouZ9TazT74PRV3wgv9UT4cRjC8BffxFbKXkgIWR42URCPSnHm/QDz6BOlb2Q0U4+VQT67Q=="
-    },
     "node-html-parser": {
       "version": "1.2.20",
       "resolved": "https://registry.npmjs.org/node-html-parser/-/node-html-parser-1.2.20.tgz",
@@ -10326,34 +10310,6 @@
       "integrity": "sha1-h6kGXNs1XTGC2PlM4RGIuCXGijs=",
       "dev": true
     },
-    "node-jose": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/node-jose/-/node-jose-1.1.4.tgz",
-      "integrity": "sha512-L31IFwL3pWWcMHxxidCY51ezqrDXMkvlT/5pLTfNw5sXmmOLJuN6ug7txzF/iuZN55cRpyOmoJrotwBQIoo5Lw==",
-      "requires": {
-        "base64url": "^3.0.1",
-        "browserify-zlib": "^0.2.0",
-        "buffer": "^5.5.0",
-        "es6-promise": "^4.2.8",
-        "lodash": "^4.17.15",
-        "long": "^4.0.0",
-        "node-forge": "^0.8.5",
-        "process": "^0.11.10",
-        "react-zlib-js": "^1.0.4",
-        "uuid": "^3.3.3"
-      },
-      "dependencies": {
-        "buffer": {
-          "version": "5.6.0",
-          "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.6.0.tgz",
-          "integrity": "sha512-/gDYp/UtU0eA1ys8bOs9J6a+E/KWIY+DZ+Q2WESNUA0jFRsJOc0SNUO6xJ5SGA1xueg3NL65W6s+NY5l9cunuw==",
-          "requires": {
-            "base64-js": "^1.0.2",
-            "ieee754": "^1.1.4"
-          }
-        }
-      }
-    },
     "node-libs-browser": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/node-libs-browser/-/node-libs-browser-2.2.1.tgz",
@@ -11471,9 +11427,9 @@
       "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ=="
     },
     "preact": {
-      "version": "10.4.6",
-      "resolved": "https://registry.npmjs.org/preact/-/preact-10.4.6.tgz",
-      "integrity": "sha512-80WJfXH53yyINig5Wza/8MD9n4lMg9G6aN00ws0ptsAaY/Fu/M7xW4zICf7OLfocVltxS30wvNQ8oIbUyZS1tw=="
+      "version": "10.4.7",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.4.7.tgz",
+      "integrity": "sha512-DtnnPbOm7oxW7Sxf5Co+KSIOxo7bGm0vLfJN/wGey7G2sAGKnGP5+bFyE2YIgutMISQl6xFVTsOd6l/Au88VVw=="
     },
     "preact-render-to-string": {
       "version": "5.1.10",
@@ -11829,11 +11785,6 @@
         "prop-types": "^15.6.2"
       }
     },
-    "react-zlib-js": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/react-zlib-js/-/react-zlib-js-1.0.4.tgz",
-      "integrity": "sha512-ynXD9DFxpE7vtGoa3ZwBtPmZrkZYw2plzHGbanUjBOSN4RtuXdektSfABykHtTiWEHMh7WdYj45LHtp228ZF1A=="
-    },
     "read-pkg": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
@@ -14122,7 +14073,8 @@
     "uuid": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
-      "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A=="
+      "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
+      "dev": true
     },
     "v8-compile-cache": {
       "version": "2.1.1",
diff --git a/package.json b/package.json
index 1ce7385a..75fd4810 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
     "mongo-seeding-cli": "^3.4.1",
     "mongodb": "^3.5.9",
     "next": "^9.5.1",
-    "next-auth": "^3.0.1",
+    "next-auth": "^3.1.0",
     "next-connect": "^0.8.1",
     "nodemailer": "^6.4.10",
     "popper.js": "^1.16.1",

From 18a2a7cd4c180b27cfd36436df034aaa42aef74e Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Thu, 20 Aug 2020 18:26:44 -0600
Subject: [PATCH 43/62] #28 WIP DeleteGroup function

---
 src/components/Alerts/Alerts.js |  4 +++
 src/pages/groups/[id]/edit.jsx  | 15 +++++---
 src/pages/groups/[id]/index.jsx | 15 ++++++--
 src/pages/groups/index.jsx      | 18 +++++++---
 src/utils/groupUtil.js          | 64 +++++++++++++++++++++++++--------
 5 files changed, 91 insertions(+), 25 deletions(-)

diff --git a/src/components/Alerts/Alerts.js b/src/components/Alerts/Alerts.js
index 2dbe61da..2a194974 100644
--- a/src/components/Alerts/Alerts.js
+++ b/src/components/Alerts/Alerts.js
@@ -12,6 +12,10 @@ function getData(alertName) {
       text: 'Profile updated.',
       variant: 'success',
     },
+    deletedGroup: {
+      text: 'You have successfully deleted the group.',
+      variant: 'success',
+    },
   };
   return alerts[alertName];
 }
diff --git a/src/pages/groups/[id]/edit.jsx b/src/pages/groups/[id]/edit.jsx
index d4d57f10..70d68fd6 100644
--- a/src/pages/groups/[id]/edit.jsx
+++ b/src/pages/groups/[id]/edit.jsx
@@ -9,7 +9,7 @@ import Layout from '../../../components/Layout';
 import LoadingSpinner from '../../../components/LoadingSpinner';
 import GroupRoleSummaries from '../../../components/GroupRoleSummaries';
 import GroupRoleBadge from '../../../components/GroupRoleBadge';
-import { AddUserToGroup, RemoveUserFromGroup } from '../../../utils/groupUtil';
+import { AddUserToGroup, DeleteGroup, RemoveUserFromGroup } from '../../../utils/groupUtil';
 
 
 const EditGroup = ({ group }) => {
@@ -31,7 +31,7 @@ const EditGroup = ({ group }) => {
               {group.name}
             </Card.Header>
             <Card.Body>
-              <Row fluid>
+              <Row fluid="true">
                 <Col lg={7}>
                   <Table striped bordered hover variant="light" size="sm">
                     <thead>
@@ -44,7 +44,7 @@ const EditGroup = ({ group }) => {
                     </thead>
                     <tbody>
                       {group.members.map((member) => (
-                        <tr>
+                        <tr key={member.email}>
                           <td>{member.name}</td>
                           <td>{member.email}</td>
                           <td>
@@ -154,7 +154,14 @@ const EditGroup = ({ group }) => {
                     become inaccessible to group members.
                   </p>
                   {roleInGroup(session) === 'owner' && (
-                    <Button variant="outline-danger">
+                    <Button
+                      variant="outline-danger"
+                      type="button"
+                      onClick={() => {
+                        // Put modal here for confirmation
+                        DeleteGroup(group);
+                      }}
+                    >
                       <TrashFill className="align-text-bottom mr-1" />
                       Delete this group
                     </Button>
diff --git a/src/pages/groups/[id]/index.jsx b/src/pages/groups/[id]/index.jsx
index 11f57d16..db35938d 100644
--- a/src/pages/groups/[id]/index.jsx
+++ b/src/pages/groups/[id]/index.jsx
@@ -1,4 +1,4 @@
-import { useSession } from 'next-auth/client';
+import { useSession, getSession } from 'next-auth/client';
 import {
   Button, ButtonGroup, Card, Table,
 } from 'react-bootstrap';
@@ -9,6 +9,7 @@ import Layout from '../../../components/Layout';
 import LoadingSpinner from '../../../components/LoadingSpinner';
 import GroupRoleSummaries from '../../../components/GroupRoleSummaries';
 import GroupRoleBadge from '../../../components/GroupRoleBadge';
+import { DeleteGroup } from '../../../utils/groupUtil';
 
 const ViewGroup = ({ group }) => {
   const [session, loading] = useSession();
@@ -37,7 +38,7 @@ const ViewGroup = ({ group }) => {
                 </thead>
                 <tbody>
                   {group.members.map((member) => (
-                    <tr>
+                    <tr key={member.email}>
                       <td>{member.name}</td>
                       <td>{member.email}</td>
                       <td><GroupRoleBadge groupRole={member.role} /></td>
@@ -52,7 +53,15 @@ const ViewGroup = ({ group }) => {
                     Manage this group
                   </Button>
                   {roleInGroup(session) === 'owner' && (
-                    <Button variant="outline-danger">
+                    <Button
+                      variant="outline-danger"
+                      type="button"
+                      onClick={() => {
+                        // Modal to confrim delete
+                        DeleteGroup(group).then(async () => getSession());
+                        // State update
+                      }}
+                    >
                       <TrashFill className="align-text-bottom mr-1" />
                       Delete this group
                     </Button>
diff --git a/src/pages/groups/index.jsx b/src/pages/groups/index.jsx
index d83c3d58..e94b1a97 100644
--- a/src/pages/groups/index.jsx
+++ b/src/pages/groups/index.jsx
@@ -1,4 +1,5 @@
-import { useSession } from 'next-auth/client';
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import { useSession, getSession } from 'next-auth/client';
 import Link from 'next/link';
 import {
   Button, ButtonGroup, Card, Table,
@@ -11,6 +12,7 @@ import LoadingSpinner from '../../components/LoadingSpinner';
 import GroupRoleSummaries from '../../components/GroupRoleSummaries';
 import GroupRoleBadge from '../../components/GroupRoleBadge';
 import { FirstNameLastInitial } from '../../utils/nameUtil';
+import { DeleteGroupFromId } from '../../utils/groupUtil';
 
 const GroupList = () => {
   const [session, loading] = useSession();
@@ -43,10 +45,10 @@ const GroupList = () => {
                 </thead>
                 <tbody>
                   {session.user.groups.map((value) => (
-                    <tr>
+                    <tr key={value.id}>
                       <td>
                         <Link href={`/groups/${value.id}`}>
-                          {value.name}
+                          <a title={value.name}>{value.name}</a>
                         </Link>
                       </td>
                       <td><GroupRoleBadge groupRole={value.role} /></td>
@@ -60,7 +62,15 @@ const GroupList = () => {
                             Manage
                           </Button>
                           {value.role === 'owner' && (
-                            <Button variant="outline-danger">
+                            <Button
+                              variant="outline-danger"
+                              type="button"
+                              onClick={() => {
+                                // Modal to confrim delete
+                                DeleteGroupFromId(value.id).then(async () => getSession());
+                                // State update
+                              }}
+                            >
                               <TrashFill className="align-text-bottom mr-1" />
                               Delete
                             </Button>
diff --git a/src/utils/groupUtil.js b/src/utils/groupUtil.js
index 526630d5..7a81f5e4 100644
--- a/src/utils/groupUtil.js
+++ b/src/utils/groupUtil.js
@@ -54,15 +54,9 @@ const AddGroupToUser = async (group, user) => {
   });
   if (res.status === 200) {
     const result = await res.json();
-    if (role === 'owner') {
-      Router.push({
-        pathname: `/groups/${group.id}/edit`,
-      });
-    } else {
-      Router.push({
-        pathname: `/groups/${group.id}`,
-      });
-    }
+    Router.push({
+      pathname: `/groups/${group.id}/edit`,
+    });
     return Promise.resolve(result);
   }
   return Promise.reject(Error(`Unable to add group to user: error ${res.status} received from server`));
@@ -104,7 +98,7 @@ const AddUserToGroup = async (group, email) => {
   } return Promise.reject(Error(`Unable to add user with email ${email}: error ${user.error}.`));
 };
 
-const RemoveGroupFromUser = async (group, user) => {
+const RemoveGroupFromUser = async (group, user, groupDeletion) => {
   const removedGroupId = group.id;
   const url = `/api/user/${user.id}`;
   const body = { removedGroupId };
@@ -116,9 +110,11 @@ const RemoveGroupFromUser = async (group, user) => {
     },
   });
   if (res.status === 200) {
-    Router.push({
-      pathname: `/groups/${group.id}/edit`,
-    });
+    if (!groupDeletion) {
+      Router.push({
+        pathname: `/groups/${group.id}/edit`,
+      });
+    }
     return Promise.resolve(res.json());
   } return Promise.reject(Error(`Unable to remove group from user: error ${res.status} received from server`));
 };
@@ -140,4 +136,44 @@ const RemoveUserFromGroup = async (group, user) => {
   } return Promise.reject(Error(`Unable to remove user from group: error ${res.status} received from server`));
 };
 
-export { AddGroupToUser, AddUserToGroup, RemoveUserFromGroup };
+const DeleteGroup = async (group) => {
+  const { members } = group;
+  const url = `/api/group/${group.id}`;
+  const res = await fetch(url, {
+    method: 'DELETE',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+  if (res.status === 200) {
+    Router.push({
+      pathname: '/groups',
+      query: {
+        alert: 'deletedGroup',
+      },
+    }, '/groups');
+    return Promise.all(
+      members.map(async (member) => RemoveGroupFromUser(group, member, true)),
+    );
+  } return Promise.reject(Error(`Unable to delete group: error ${res.status} received from server`));
+};
+
+const DeleteGroupFromId = async (id) => {
+  const url = `/api/group/${id}`;
+  const res = await fetch(url, {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+  if (res.status === 200) {
+    const result = await res.json();
+    const group = { id, name: result.name, members: result.members };
+    return DeleteGroup(group);
+  } return Promise.reject(Error(`Unable to find group by ID: error ${res.status} received from server`));
+};
+
+
+export {
+  AddGroupToUser, AddUserToGroup, DeleteGroup, DeleteGroupFromId, RemoveUserFromGroup,
+};

From 2c682b9f6aa2501c52a4d68da94e92f8bed26b47 Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Thu, 20 Aug 2020 18:41:08 -0600
Subject: [PATCH 44/62] #28 Alert on new group creation

---
 src/components/Alerts/Alerts.js | 4 ++++
 src/pages/groups/new.jsx        | 2 +-
 src/utils/groupUtil.js          | 5 ++++-
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/Alerts/Alerts.js b/src/components/Alerts/Alerts.js
index 2a194974..dc3eb8e4 100644
--- a/src/components/Alerts/Alerts.js
+++ b/src/components/Alerts/Alerts.js
@@ -12,6 +12,10 @@ function getData(alertName) {
       text: 'Profile updated.',
       variant: 'success',
     },
+    newGroup: {
+      text: 'Group created successfully.',
+      variant: 'success',
+    },
     deletedGroup: {
       text: 'You have successfully deleted the group.',
       variant: 'success',
diff --git a/src/pages/groups/new.jsx b/src/pages/groups/new.jsx
index 7565ab58..ade88742 100644
--- a/src/pages/groups/new.jsx
+++ b/src/pages/groups/new.jsx
@@ -34,7 +34,7 @@ const NewGroup = () => {
       const user = {
         id: result.ops[0].members[0].id,
       };
-      return AddGroupToUser(group, user);
+      return AddGroupToUser(group, user, true);
     }
     return Promise.reject(Error(`Unable to create group: error ${res.status} received from server`));
   };
diff --git a/src/utils/groupUtil.js b/src/utils/groupUtil.js
index 7a81f5e4..90ce4ae3 100644
--- a/src/utils/groupUtil.js
+++ b/src/utils/groupUtil.js
@@ -27,7 +27,7 @@ const UpdateMemberCounts = async (group) => {
   );
 };
 
-const AddGroupToUser = async (group, user) => {
+const AddGroupToUser = async (group, user, isNewGroup) => {
   const url = `/api/user/${user.id}`;
   const {
     id,
@@ -54,8 +54,11 @@ const AddGroupToUser = async (group, user) => {
   });
   if (res.status === 200) {
     const result = await res.json();
+    let query = {};
+    if (isNewGroup) query = { alert: 'newGroup' };
     Router.push({
       pathname: `/groups/${group.id}/edit`,
+      query,
     });
     return Promise.resolve(result);
   }

From a45916f2f47e4312ddaeee28a1bf9b7df8b8493a Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Thu, 20 Aug 2020 18:58:35 -0600
Subject: [PATCH 45/62] #28 WIP change user role

---
 src/pages/api/group/[id].js    | 11 ++++++++++-
 src/pages/groups/[id]/edit.jsx | 18 +++++++++++++++---
 src/utils/groupUtil.js         | 23 ++++++++++++++++++++++-
 3 files changed, 47 insertions(+), 5 deletions(-)

diff --git a/src/pages/api/group/[id].js b/src/pages/api/group/[id].js
index 4c1b47fd..73dae62a 100644
--- a/src/pages/api/group/[id].js
+++ b/src/pages/api/group/[id].js
@@ -62,6 +62,14 @@ const handler = nc()
             'documents.$.name': req.body.updatedDocument.name,
           };
         }
+        let memberToChangeRole = {};
+        let memberById = {};
+        if (req.body.memberToChangeRoleId) {
+          memberById = { 'members.id': req.body.memberToChangeRoleId };
+          memberToChangeRole = {
+            'members.$.role': req.body.role,
+          };
+        }
         const memberToPush = req.body.addedUser
           ? { members: req.body.addedUser }
           : {};
@@ -76,7 +84,7 @@ const handler = nc()
           : {};
 
         const updateMethods = {};
-        const fieldsToSet = { ...nameToUpdate, ...documentToUpdate };
+        const fieldsToSet = { ...nameToUpdate, ...documentToUpdate, ...memberToChangeRole };
         if (Object.keys(fieldsToSet).length !== 0) updateMethods.$set = fieldsToSet;
         const fieldsToPush = { ...memberToPush, ...documentToPush };
         if (Object.keys(fieldsToPush).length !== 0) updateMethods.$push = fieldsToPush;
@@ -91,6 +99,7 @@ const handler = nc()
               _id: ObjectID(req.query.id),
               $or: memberQuery,
               ...documentById,
+              ...memberById,
             },
             updateMethods,
             {
diff --git a/src/pages/groups/[id]/edit.jsx b/src/pages/groups/[id]/edit.jsx
index 70d68fd6..8e4b4372 100644
--- a/src/pages/groups/[id]/edit.jsx
+++ b/src/pages/groups/[id]/edit.jsx
@@ -9,7 +9,9 @@ import Layout from '../../../components/Layout';
 import LoadingSpinner from '../../../components/LoadingSpinner';
 import GroupRoleSummaries from '../../../components/GroupRoleSummaries';
 import GroupRoleBadge from '../../../components/GroupRoleBadge';
-import { AddUserToGroup, DeleteGroup, RemoveUserFromGroup } from '../../../utils/groupUtil';
+import {
+  AddUserToGroup, ChangeUserRole, DeleteGroup, RemoveUserFromGroup,
+} from '../../../utils/groupUtil';
 
 
 const EditGroup = ({ group }) => {
@@ -57,8 +59,18 @@ const EditGroup = ({ group }) => {
                                 {member.role}
                               </Dropdown.Toggle>
                               <Dropdown.Menu>
-                                <Dropdown.Item disabled={member.role === 'member'} href="#/action-1">member</Dropdown.Item>
-                                <Dropdown.Item disabled={member.role === 'manager'} href="#/action-2">manager</Dropdown.Item>
+                                <Dropdown.Item
+                                  disabled={member.role === 'member'}
+                                  onClick={() => { ChangeUserRole(group, member, 'member'); }}
+                                >
+                                  member
+                                </Dropdown.Item>
+                                <Dropdown.Item
+                                  disabled={member.role === 'manager'}
+                                  onClick={() => { ChangeUserRole(group, member, 'manager'); }}
+                                >
+                                  manager
+                                </Dropdown.Item>
                               </Dropdown.Menu>
                             </Dropdown>
                             )}
diff --git a/src/utils/groupUtil.js b/src/utils/groupUtil.js
index 90ce4ae3..1ea1fa58 100644
--- a/src/utils/groupUtil.js
+++ b/src/utils/groupUtil.js
@@ -176,7 +176,28 @@ const DeleteGroupFromId = async (id) => {
   } return Promise.reject(Error(`Unable to find group by ID: error ${res.status} received from server`));
 };
 
+const ChangeUserRole = async (group, member, role) => {
+  // 1. Change user's role in group
+  const url = `/api/group/${group.id}`;
+  const body = { memberToChangeRoleId: member.id, role };
+  const res = await fetch(url, {
+    method: 'PATCH',
+    body: JSON.stringify(body),
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+  if (res.status === 200) {
+    console.log(res);
+  }
+  // 2. Update user's role in user's group object
+};
 
 export {
-  AddGroupToUser, AddUserToGroup, DeleteGroup, DeleteGroupFromId, RemoveUserFromGroup,
+  AddGroupToUser,
+  AddUserToGroup,
+  ChangeUserRole,
+  DeleteGroup,
+  DeleteGroupFromId,
+  RemoveUserFromGroup,
 };

From 2669247f95ab319aaf55cce3416ab3e11d142e90 Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Wed, 26 Aug 2020 12:54:22 -0600
Subject: [PATCH 46/62] #28 Completed ChangeUserRole method

---
 src/components/Alerts/Alerts.js |  4 ++++
 src/pages/api/user/[id].js      |  9 +++++++--
 src/pages/seed.jsx              | 16 ----------------
 src/utils/groupUtil.js          | 23 +++++++++++++++++++----
 4 files changed, 30 insertions(+), 22 deletions(-)
 delete mode 100644 src/pages/seed.jsx

diff --git a/src/components/Alerts/Alerts.js b/src/components/Alerts/Alerts.js
index dc3eb8e4..68f23ba0 100644
--- a/src/components/Alerts/Alerts.js
+++ b/src/components/Alerts/Alerts.js
@@ -20,6 +20,10 @@ function getData(alertName) {
       text: 'You have successfully deleted the group.',
       variant: 'success',
     },
+    changeUserRole: {
+      text: 'User\'s role changed successfully.',
+      variant: 'success',
+    },
   };
   return alerts[alertName];
 }
diff --git a/src/pages/api/user/[id].js b/src/pages/api/user/[id].js
index 75194ba3..9692e6b7 100644
--- a/src/pages/api/user/[id].js
+++ b/src/pages/api/user/[id].js
@@ -40,8 +40,8 @@ const handler = nc()
         const groupToPull = req.body.removedGroupId
           ? { groups: { id: req.body.removedGroupId } }
           : {};
-        let groupById;
-        let groupToUpdate;
+        let groupById = {};
+        let groupToUpdate = {};
         if (req.body.updatedGroupId) {
           groupById = { 'groups.id': req.body.updatedGroupId };
           if (req.body.memberCount) {
@@ -49,6 +49,11 @@ const handler = nc()
               'groups.$.memberCount': req.body.memberCount,
             };
           }
+          if (req.body.role) {
+            groupToUpdate = {
+              'groups.$.role': req.body.role,
+            };
+          }
         }
         const updateMethods = {};
         const fieldsToPush = { ...groupToPush };
diff --git a/src/pages/seed.jsx b/src/pages/seed.jsx
deleted file mode 100644
index e8040de7..00000000
--- a/src/pages/seed.jsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import Layout from '../components/Layout';
-import seedDb from '../utils/seedUtil';
-
-export default function Seed() {
-  return (
-    <Layout>
-      Welcome to Annotation Studio.
-    </Layout>
-  );
-}
-
-export async function getServerSideProps(context) {
-  return {
-    props: { query: context.query }, // will be passed to the page component as props
-  };
-}
diff --git a/src/utils/groupUtil.js b/src/utils/groupUtil.js
index 1ea1fa58..9eaedb68 100644
--- a/src/utils/groupUtil.js
+++ b/src/utils/groupUtil.js
@@ -177,7 +177,6 @@ const DeleteGroupFromId = async (id) => {
 };
 
 const ChangeUserRole = async (group, member, role) => {
-  // 1. Change user's role in group
   const url = `/api/group/${group.id}`;
   const body = { memberToChangeRoleId: member.id, role };
   const res = await fetch(url, {
@@ -188,9 +187,25 @@ const ChangeUserRole = async (group, member, role) => {
     },
   });
   if (res.status === 200) {
-    console.log(res);
-  }
-  // 2. Update user's role in user's group object
+    const memberUrl = `/api/user/${member.id}`;
+    const memberBody = { updatedGroupId: group.id, role };
+    const memberRes = await fetch(memberUrl, {
+      method: 'PATCH',
+      body: JSON.stringify(memberBody),
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+    if (memberRes.status === 200) {
+      const response = memberRes.json();
+      const query = { alert: 'changeUserRole' };
+      Router.push({
+        pathname: `/groups/${group.id}/edit`,
+        query,
+      });
+      return Promise.resolve(response);
+    } return Promise.reject(Error(`Unable to update user: error ${memberRes.status} received from server`));
+  } return Promise.reject(Error(`Unable to change user's role: error ${res.status} received from server`));
 };
 
 export {

From 02f2e05b093112a9adaed3a3026d78f6dbf4ca0a Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Wed, 26 Aug 2020 13:10:57 -0600
Subject: [PATCH 47/62] #28 improved success alerts

---
 src/components/Alerts/Alerts.js | 8 ++++++++
 src/utils/groupUtil.js          | 5 ++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/Alerts/Alerts.js b/src/components/Alerts/Alerts.js
index 68f23ba0..4e7e909d 100644
--- a/src/components/Alerts/Alerts.js
+++ b/src/components/Alerts/Alerts.js
@@ -24,6 +24,14 @@ function getData(alertName) {
       text: 'User\'s role changed successfully.',
       variant: 'success',
     },
+    removeUser: {
+      text: 'User successfully removed from group.',
+      variant: 'success',
+    },
+    addUser: {
+      text: 'User successfully added to group.',
+      variant: 'success',
+    },
   };
   return alerts[alertName];
 }
diff --git a/src/utils/groupUtil.js b/src/utils/groupUtil.js
index 9eaedb68..fc8b4ce4 100644
--- a/src/utils/groupUtil.js
+++ b/src/utils/groupUtil.js
@@ -54,7 +54,7 @@ const AddGroupToUser = async (group, user, isNewGroup) => {
   });
   if (res.status === 200) {
     const result = await res.json();
-    let query = {};
+    let query = { alert: 'addUser' };
     if (isNewGroup) query = { alert: 'newGroup' };
     Router.push({
       pathname: `/groups/${group.id}/edit`,
@@ -116,6 +116,9 @@ const RemoveGroupFromUser = async (group, user, groupDeletion) => {
     if (!groupDeletion) {
       Router.push({
         pathname: `/groups/${group.id}/edit`,
+        query: {
+          alert: 'removeUser',
+        },
       });
     }
     return Promise.resolve(res.json());

From d2ffad33ce85938098c40ce2e607c9bfeafee0cb Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Wed, 26 Aug 2020 13:40:34 -0600
Subject: [PATCH 48/62] #28 Update UI on group deletion

---
 src/pages/groups/index.jsx | 83 +++++++++++++++++++++-----------------
 src/utils/groupUtil.js     |  1 +
 2 files changed, 47 insertions(+), 37 deletions(-)

diff --git a/src/pages/groups/index.jsx b/src/pages/groups/index.jsx
index e94b1a97..c21c5afe 100644
--- a/src/pages/groups/index.jsx
+++ b/src/pages/groups/index.jsx
@@ -14,7 +14,7 @@ import GroupRoleBadge from '../../components/GroupRoleBadge';
 import { FirstNameLastInitial } from '../../utils/nameUtil';
 import { DeleteGroupFromId } from '../../utils/groupUtil';
 
-const GroupList = () => {
+const GroupList = ({ query }) => {
   const [session, loading] = useSession();
 
   return (
@@ -44,42 +44,45 @@ const GroupList = () => {
                   </tr>
                 </thead>
                 <tbody>
-                  {session.user.groups.map((value) => (
-                    <tr key={value.id}>
-                      <td>
-                        <Link href={`/groups/${value.id}`}>
-                          <a title={value.name}>{value.name}</a>
-                        </Link>
-                      </td>
-                      <td><GroupRoleBadge groupRole={value.role} /></td>
-                      <td>{FirstNameLastInitial(value.ownerName)}</td>
-                      <td>{value.memberCount}</td>
-                      <td>
-                        {(value.role === 'owner' || value.role === 'manager') && (
-                        <ButtonGroup>
-                          <Button variant="outline-primary" href={`/groups/${value.id}/edit`}>
-                            <PencilSquare className="align-text-bottom mr-1" />
-                            Manage
-                          </Button>
-                          {value.role === 'owner' && (
-                            <Button
-                              variant="outline-danger"
-                              type="button"
-                              onClick={() => {
-                                // Modal to confrim delete
-                                DeleteGroupFromId(value.id).then(async () => getSession());
-                                // State update
-                              }}
-                            >
-                              <TrashFill className="align-text-bottom mr-1" />
-                              Delete
-                            </Button>
-                          )}
-                        </ButtonGroup>
-                        )}
-                      </td>
-                    </tr>
-                  ))}
+                  {session.user.groups.map((value) => {
+                    if (value.id !== query.deletedGroupId) {
+                      return (
+                        <tr key={value.id}>
+                          <td>
+                            <Link href={`/groups/${value.id}`}>
+                              <a title={value.name}>{value.name}</a>
+                            </Link>
+                          </td>
+                          <td><GroupRoleBadge groupRole={value.role} /></td>
+                          <td>{FirstNameLastInitial(value.ownerName)}</td>
+                          <td>{value.memberCount}</td>
+                          <td>
+                            {(value.role === 'owner' || value.role === 'manager') && (
+                            <ButtonGroup>
+                              <Button variant="outline-primary" href={`/groups/${value.id}/edit`}>
+                                <PencilSquare className="align-text-bottom mr-1" />
+                                Manage
+                              </Button>
+                              {value.role === 'owner' && (
+                                <Button
+                                  variant="outline-danger"
+                                  type="button"
+                                  onClick={() => {
+                                    // Modal to confrim delete
+                                    DeleteGroupFromId(value.id).then(async () => getSession());
+                                  }}
+                                >
+                                  <TrashFill className="align-text-bottom mr-1" />
+                                  Delete
+                                </Button>
+                              )}
+                            </ButtonGroup>
+                            )}
+                          </td>
+                        </tr>
+                      );
+                    } return null;
+                  })}
                 </tbody>
               </Table>
               )}
@@ -98,4 +101,10 @@ const GroupList = () => {
   );
 };
 
+export async function getServerSideProps(context) {
+  return {
+    props: { query: context.query }, // will be passed to the page component as props
+  };
+}
+
 export default GroupList;
diff --git a/src/utils/groupUtil.js b/src/utils/groupUtil.js
index fc8b4ce4..80072517 100644
--- a/src/utils/groupUtil.js
+++ b/src/utils/groupUtil.js
@@ -156,6 +156,7 @@ const DeleteGroup = async (group) => {
       pathname: '/groups',
       query: {
         alert: 'deletedGroup',
+        deletedGroupId: group.id,
       },
     }, '/groups');
     return Promise.all(

From 3c347c7ecf6a954204a9193cc9d028f85a04d15e Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Wed, 26 Aug 2020 16:02:14 -0600
Subject: [PATCH 49/62] #28 Add confirmation dialog on delete

---
 .../ConfirmationDialog/ConfirmationDialog.js  | 49 +++++++++++++++++++
 src/components/ConfirmationDialog/index.js    |  3 ++
 src/pages/groups/[id]/edit.jsx                | 38 +++++++++-----
 src/pages/groups/[id]/index.jsx               | 41 +++++++++++-----
 src/pages/groups/index.jsx                    | 43 +++++++++++-----
 5 files changed, 138 insertions(+), 36 deletions(-)
 create mode 100644 src/components/ConfirmationDialog/ConfirmationDialog.js
 create mode 100644 src/components/ConfirmationDialog/index.js

diff --git a/src/components/ConfirmationDialog/ConfirmationDialog.js b/src/components/ConfirmationDialog/ConfirmationDialog.js
new file mode 100644
index 00000000..4f9d26dc
--- /dev/null
+++ b/src/components/ConfirmationDialog/ConfirmationDialog.js
@@ -0,0 +1,49 @@
+import {
+  Button, Modal,
+} from 'react-bootstrap';
+
+// Only for group deletion now; extend to support multiple types
+const ConfirmationDialog = ({
+  // type,
+  show,
+  value,
+  onClick,
+  handleCloseModal,
+}) => (
+  <Modal
+    show={show}
+    onHide={handleCloseModal}
+  >
+    <Modal.Header closeButton>
+      <Modal.Title>
+        Delete Group:
+        {' '}
+        {(value.name)}
+      </Modal.Title>
+    </Modal.Header>
+    <Modal.Body>
+      <p>
+        <strong>
+          Are you sure you want to
+          delete this group permanently?
+        </strong>
+        This action cannot be undone.
+      </p>
+      Documents assigned to this group will not be deleted,
+      but may become inaccessible to group members.
+    </Modal.Body>
+    <Modal.Footer>
+      <Button variant="outline-secondary" onClick={handleCloseModal}>
+        Cancel
+      </Button>
+      <Button
+        variant="danger"
+        onClick={onClick}
+      >
+        Yes, delete this group
+      </Button>
+    </Modal.Footer>
+  </Modal>
+);
+
+export default ConfirmationDialog;
diff --git a/src/components/ConfirmationDialog/index.js b/src/components/ConfirmationDialog/index.js
new file mode 100644
index 00000000..482b6a10
--- /dev/null
+++ b/src/components/ConfirmationDialog/index.js
@@ -0,0 +1,3 @@
+import ConfirmationDialog from './ConfirmationDialog';
+
+export default ConfirmationDialog;
diff --git a/src/pages/groups/[id]/edit.jsx b/src/pages/groups/[id]/edit.jsx
index 8e4b4372..60217497 100644
--- a/src/pages/groups/[id]/edit.jsx
+++ b/src/pages/groups/[id]/edit.jsx
@@ -1,4 +1,5 @@
 import { useSession } from 'next-auth/client';
+import { useState } from 'react';
 import {
   Button, Card, Col, Dropdown, FormControl, InputGroup, Row, Table, Form,
 } from 'react-bootstrap';
@@ -7,6 +8,7 @@ import * as yup from 'yup';
 import { Formik } from 'formik';
 import Layout from '../../../components/Layout';
 import LoadingSpinner from '../../../components/LoadingSpinner';
+import ConfirmationDialog from '../../../components/ConfirmationDialog';
 import GroupRoleSummaries from '../../../components/GroupRoleSummaries';
 import GroupRoleBadge from '../../../components/GroupRoleBadge';
 import {
@@ -17,6 +19,10 @@ import {
 const EditGroup = ({ group }) => {
   const [session, loading] = useSession();
 
+  const [showModal, setShowModal] = useState(false);
+  const handleCloseModal = () => setShowModal(false);
+  const handleShowModal = () => setShowModal(true);
+
   const roleInGroup = (currentSession) => currentSession.user.groups.find((o) => Object.entries(o).some(([k, value]) => k === 'id' && value === group.id)).role;
 
   return (
@@ -166,17 +172,27 @@ const EditGroup = ({ group }) => {
                     become inaccessible to group members.
                   </p>
                   {roleInGroup(session) === 'owner' && (
-                    <Button
-                      variant="outline-danger"
-                      type="button"
-                      onClick={() => {
-                        // Put modal here for confirmation
-                        DeleteGroup(group);
-                      }}
-                    >
-                      <TrashFill className="align-text-bottom mr-1" />
-                      Delete this group
-                    </Button>
+                    <>
+                      <Button
+                        variant="outline-danger"
+                        type="button"
+                        onClick={handleShowModal}
+                      >
+                        <TrashFill className="align-text-bottom mr-1" />
+                        Delete this group
+                      </Button>
+                      <ConfirmationDialog
+                        value={group}
+                        type="deleteGroup"
+                        handleCloseModal={handleCloseModal}
+                        show={showModal}
+                        onClick={(event) => {
+                          event.target.setAttribute('disabled', 'true');
+                          DeleteGroup(group);
+                          handleCloseModal();
+                        }}
+                      />
+                    </>
                   )}
                 </Col>
               </Row>
diff --git a/src/pages/groups/[id]/index.jsx b/src/pages/groups/[id]/index.jsx
index db35938d..21b01c9d 100644
--- a/src/pages/groups/[id]/index.jsx
+++ b/src/pages/groups/[id]/index.jsx
@@ -1,4 +1,5 @@
-import { useSession, getSession } from 'next-auth/client';
+import { useSession } from 'next-auth/client';
+import { useState } from 'react';
 import {
   Button, ButtonGroup, Card, Table,
 } from 'react-bootstrap';
@@ -7,6 +8,7 @@ import {
 } from 'react-bootstrap-icons';
 import Layout from '../../../components/Layout';
 import LoadingSpinner from '../../../components/LoadingSpinner';
+import ConfirmationDialog from '../../../components/ConfirmationDialog';
 import GroupRoleSummaries from '../../../components/GroupRoleSummaries';
 import GroupRoleBadge from '../../../components/GroupRoleBadge';
 import { DeleteGroup } from '../../../utils/groupUtil';
@@ -14,6 +16,10 @@ import { DeleteGroup } from '../../../utils/groupUtil';
 const ViewGroup = ({ group }) => {
   const [session, loading] = useSession();
 
+  const [showModal, setShowModal] = useState(false);
+  const handleCloseModal = () => setShowModal(false);
+  const handleShowModal = () => setShowModal(true);
+
   const roleInGroup = (currentSession) => currentSession.user.groups.find((o) => Object.entries(o).some(([k, value]) => k === 'id' && value === group.id)).role;
 
   return (
@@ -53,18 +59,27 @@ const ViewGroup = ({ group }) => {
                     Manage this group
                   </Button>
                   {roleInGroup(session) === 'owner' && (
-                    <Button
-                      variant="outline-danger"
-                      type="button"
-                      onClick={() => {
-                        // Modal to confrim delete
-                        DeleteGroup(group).then(async () => getSession());
-                        // State update
-                      }}
-                    >
-                      <TrashFill className="align-text-bottom mr-1" />
-                      Delete this group
-                    </Button>
+                    <>
+                      <Button
+                        variant="outline-danger"
+                        type="button"
+                        onClick={handleShowModal}
+                      >
+                        <TrashFill className="align-text-bottom mr-1" />
+                        Delete this group
+                      </Button>
+                      <ConfirmationDialog
+                        value={group}
+                        type="deleteGroup"
+                        handleCloseModal={handleCloseModal}
+                        show={showModal}
+                        onClick={(event) => {
+                          event.target.setAttribute('disabled', 'true');
+                          DeleteGroup(group);
+                          handleCloseModal();
+                        }}
+                      />
+                    </>
                   )}
                 </ButtonGroup>
               )}
diff --git a/src/pages/groups/index.jsx b/src/pages/groups/index.jsx
index c21c5afe..85f82734 100644
--- a/src/pages/groups/index.jsx
+++ b/src/pages/groups/index.jsx
@@ -1,5 +1,6 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
-import { useSession, getSession } from 'next-auth/client';
+import { useSession } from 'next-auth/client';
+import { useState } from 'react';
 import Link from 'next/link';
 import {
   Button, ButtonGroup, Card, Table,
@@ -9,6 +10,7 @@ import {
 } from 'react-bootstrap-icons';
 import Layout from '../../components/Layout';
 import LoadingSpinner from '../../components/LoadingSpinner';
+import ConfirmationDialog from '../../components/ConfirmationDialog';
 import GroupRoleSummaries from '../../components/GroupRoleSummaries';
 import GroupRoleBadge from '../../components/GroupRoleBadge';
 import { FirstNameLastInitial } from '../../utils/nameUtil';
@@ -17,6 +19,12 @@ import { DeleteGroupFromId } from '../../utils/groupUtil';
 const GroupList = ({ query }) => {
   const [session, loading] = useSession();
 
+  const [showModal, setShowModal] = useState('');
+  const handleCloseModal = () => setShowModal('');
+  const handleShowModal = (event) => {
+    setShowModal(event.target.getAttribute('data-key'));
+  };
+
   return (
     <Layout>
       <Card>
@@ -64,17 +72,28 @@ const GroupList = ({ query }) => {
                                 Manage
                               </Button>
                               {value.role === 'owner' && (
-                                <Button
-                                  variant="outline-danger"
-                                  type="button"
-                                  onClick={() => {
-                                    // Modal to confrim delete
-                                    DeleteGroupFromId(value.id).then(async () => getSession());
-                                  }}
-                                >
-                                  <TrashFill className="align-text-bottom mr-1" />
-                                  Delete
-                                </Button>
+                                <>
+                                  <Button
+                                    variant="outline-danger"
+                                    type="button"
+                                    onClick={handleShowModal}
+                                    data-key={value.id}
+                                  >
+                                    <TrashFill className="align-text-bottom mr-1" />
+                                    Delete
+                                  </Button>
+                                  <ConfirmationDialog
+                                    value={value}
+                                    type="deleteGroup"
+                                    handleCloseModal={handleCloseModal}
+                                    show={showModal === value.id}
+                                    onClick={(event) => {
+                                      event.target.setAttribute('disabled', 'true');
+                                      DeleteGroupFromId(value.id);
+                                      handleCloseModal();
+                                    }}
+                                  />
+                                </>
                               )}
                             </ButtonGroup>
                             )}

From e0a5812b950eee5363b69e3d381cfc59a89c095c Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Wed, 26 Aug 2020 16:08:39 -0600
Subject: [PATCH 50/62] #28 Add test for ConfirmationDialog component

---
 .../ConfirmationDialog/ConfirmationDialog.js     |  3 +--
 .../ConfirmationDialog.test.js                   | 16 ++++++++++++++++
 2 files changed, 17 insertions(+), 2 deletions(-)
 create mode 100644 src/components/ConfirmationDialog/ConfirmationDialog.test.js

diff --git a/src/components/ConfirmationDialog/ConfirmationDialog.js b/src/components/ConfirmationDialog/ConfirmationDialog.js
index 4f9d26dc..0537cb07 100644
--- a/src/components/ConfirmationDialog/ConfirmationDialog.js
+++ b/src/components/ConfirmationDialog/ConfirmationDialog.js
@@ -24,8 +24,7 @@ const ConfirmationDialog = ({
     <Modal.Body>
       <p>
         <strong>
-          Are you sure you want to
-          delete this group permanently?
+          Are you sure you want to delete this group permanently?
         </strong>
         This action cannot be undone.
       </p>
diff --git a/src/components/ConfirmationDialog/ConfirmationDialog.test.js b/src/components/ConfirmationDialog/ConfirmationDialog.test.js
new file mode 100644
index 00000000..4847ec22
--- /dev/null
+++ b/src/components/ConfirmationDialog/ConfirmationDialog.test.js
@@ -0,0 +1,16 @@
+import { render } from '@testing-library/react';
+import ConfirmationDialog from './ConfirmationDialog';
+
+describe('confirmation dialog', () => {
+  test('renders with type = deleteGroup', async () => {
+    const { findByText } = render(<ConfirmationDialog
+      type="deleteGroup"
+      show
+      value={{ name: 'fake group' }}
+      onClick={jest.fn()}
+      handleCloseModal={jest.fn()}
+    />);
+    const question = await findByText(/Are you sure you want to delete this group permanently\?/);
+    expect(question).toBeInTheDocument();
+  });
+});

From c8dd1b52bca4984f12e1315b6e8b7d76e0fb9426 Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Wed, 26 Aug 2020 17:40:43 -0600
Subject: [PATCH 51/62] #28 Add RenameGroup logic

---
 src/components/Alerts/Alerts.js |   4 ++
 src/pages/api/user/[id].js      |   5 ++
 src/pages/groups/[id]/edit.jsx  | 101 ++++++++++++++++++++++++++++----
 src/utils/groupUtil.js          |  40 +++++++++++++
 4 files changed, 140 insertions(+), 10 deletions(-)

diff --git a/src/components/Alerts/Alerts.js b/src/components/Alerts/Alerts.js
index 4e7e909d..b4ccc955 100644
--- a/src/components/Alerts/Alerts.js
+++ b/src/components/Alerts/Alerts.js
@@ -32,6 +32,10 @@ function getData(alertName) {
       text: 'User successfully added to group.',
       variant: 'success',
     },
+    renameGroup: {
+      text: 'Group successfully renamed.',
+      variant: 'success',
+    },
   };
   return alerts[alertName];
 }
diff --git a/src/pages/api/user/[id].js b/src/pages/api/user/[id].js
index 9692e6b7..b70be9f9 100644
--- a/src/pages/api/user/[id].js
+++ b/src/pages/api/user/[id].js
@@ -54,6 +54,11 @@ const handler = nc()
               'groups.$.role': req.body.role,
             };
           }
+          if (req.body.groupName) {
+            groupToUpdate = {
+              'groups.$.name': req.body.groupName,
+            };
+          }
         }
         const updateMethods = {};
         const fieldsToPush = { ...groupToPush };
diff --git a/src/pages/groups/[id]/edit.jsx b/src/pages/groups/[id]/edit.jsx
index 60217497..1d1618ac 100644
--- a/src/pages/groups/[id]/edit.jsx
+++ b/src/pages/groups/[id]/edit.jsx
@@ -1,9 +1,18 @@
 import { useSession } from 'next-auth/client';
+import { Pencil, TrashFill } from 'react-bootstrap-icons';
 import { useState } from 'react';
 import {
-  Button, Card, Col, Dropdown, FormControl, InputGroup, Row, Table, Form,
+  Button,
+  Card,
+  Col,
+  Dropdown,
+  FormControl,
+  InputGroup,
+  Row,
+  Table,
+  Form,
 } from 'react-bootstrap';
-import { TrashFill } from 'react-bootstrap-icons';
+
 import * as yup from 'yup';
 import { Formik } from 'formik';
 import Layout from '../../../components/Layout';
@@ -12,16 +21,21 @@ import ConfirmationDialog from '../../../components/ConfirmationDialog';
 import GroupRoleSummaries from '../../../components/GroupRoleSummaries';
 import GroupRoleBadge from '../../../components/GroupRoleBadge';
 import {
-  AddUserToGroup, ChangeUserRole, DeleteGroup, RemoveUserFromGroup,
+  AddUserToGroup,
+  ChangeUserRole,
+  DeleteGroup,
+  RemoveUserFromGroup,
+  RenameGroup,
 } from '../../../utils/groupUtil';
 
 
 const EditGroup = ({ group }) => {
   const [session, loading] = useSession();
 
-  const [showModal, setShowModal] = useState(false);
-  const handleCloseModal = () => setShowModal(false);
-  const handleShowModal = () => setShowModal(true);
+  const [state, setState] = useState({ showModal: false, editingGroupName: false });
+  const handleCloseModal = () => setState({ ...state, showModal: false });
+  const handleShowModal = () => setState({ ...state, showModal: true });
+  const editGroupName = () => setState({ ...state, editingGroupName: true });
 
   const roleInGroup = (currentSession) => currentSession.user.groups.find((o) => Object.entries(o).some(([k, value]) => k === 'id' && value === group.id)).role;
 
@@ -34,9 +48,75 @@ const EditGroup = ({ group }) => {
         {session && !loading && (roleInGroup(session) === 'owner' || roleInGroup(session) === 'manager') && (
           <>
             <Card.Header>
-              Manage Group:
-              {' '}
-              {group.name}
+              {!state.editingGroupName && (
+                <>
+                  Manage Group:
+                  {' '}
+                  {group.name}
+                  <Button
+                    type="button"
+                    variant="link"
+                    className="mb-1"
+                    title="Edit name"
+                    size="sm"
+                    onClick={editGroupName}
+                  >
+                    <Pencil />
+                  </Button>
+                </>
+              )}
+              {state.editingGroupName && (
+                <Formik
+                  key="groupNameEditor"
+                  validationSchema={yup.object({
+                    groupName: yup.string().required('Group must have a name'),
+                  })}
+                  onSubmit={(values, actions) => {
+                    setTimeout(() => {
+                      RenameGroup(group, values.groupName);
+                      actions.setSubmitting(false);
+                    }, 1000);
+                  }}
+                  initialValues={{
+                    groupName: group.name,
+                  }}
+                >
+                  {(props) => (
+                    <Form noValidate onSubmit={props.handleSubmit}>
+                      <Form.Group controlId="formeditGroupName">
+                        <InputGroup
+                          className="mb-n3"
+                        >
+                          <FormControl
+                            placeholder="Edit group name"
+                            aria-label="Edit group name"
+                            name="groupName"
+                            value={props.values.groupName}
+                            onChange={props.handleChange}
+                            onBlur={props.handleBlur}
+                            isValid={props.touched.groupName && !props.errors.groupName}
+                            isInvalid={!!props.errors.groupName}
+                          />
+                          <InputGroup.Append>
+                            <Button
+                              variant="outline-primary"
+                              type="submit"
+                              className="rounded-right"
+                              disabled={props.isSubmitting || props.errors.groupName || props.values.groupName === ''}
+                              data-testid="newgroup-submit-button"
+                            >
+                              Save
+                            </Button>
+                          </InputGroup.Append>
+                          <Form.Control.Feedback type="invalid" className="w-100">
+                            {props.errors.groupName}
+                          </Form.Control.Feedback>
+                        </InputGroup>
+                      </Form.Group>
+                    </Form>
+                  )}
+                </Formik>
+              )}
             </Card.Header>
             <Card.Body>
               <Row fluid="true">
@@ -113,6 +193,7 @@ const EditGroup = ({ group }) => {
                       their email here.
                     </p>
                     <Formik
+                      key="addByEmail"
                       validationSchema={yup.object({
                         email: yup.string().required().email(),
                       })}
@@ -185,7 +266,7 @@ const EditGroup = ({ group }) => {
                         value={group}
                         type="deleteGroup"
                         handleCloseModal={handleCloseModal}
-                        show={showModal}
+                        show={state.showModal}
                         onClick={(event) => {
                           event.target.setAttribute('disabled', 'true');
                           DeleteGroup(group);
diff --git a/src/utils/groupUtil.js b/src/utils/groupUtil.js
index 80072517..f22a1fb2 100644
--- a/src/utils/groupUtil.js
+++ b/src/utils/groupUtil.js
@@ -212,6 +212,45 @@ const ChangeUserRole = async (group, member, role) => {
   } return Promise.reject(Error(`Unable to change user's role: error ${res.status} received from server`));
 };
 
+const RenameGroupInMember = async (group, member, newName) => {
+  const url = `/api/user/${member.id}`;
+  const body = { updatedGroupId: group.id, groupName: newName };
+  const res = await fetch(url, {
+    method: 'PATCH',
+    body: JSON.stringify(body),
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+  if (res.status === 200) {
+    const response = res.json();
+    return Promise.resolve(response);
+  } return Promise.reject(Error(`Unable to update user: error ${res.status} received from server`));
+};
+
+const RenameGroup = async (group, newName) => {
+  const { members } = group;
+  const url = `/api/group/${group.id}`;
+  const body = { name: newName };
+  const res = await fetch(url, {
+    method: 'PATCH',
+    body: JSON.stringify(body),
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+  if (res.status === 200) {
+    const query = { alert: 'renameGroup' };
+    Router.push({
+      pathname: `/groups/${group.id}/edit`,
+      query,
+    });
+    return Promise.all(
+      members.map(async (member) => RenameGroupInMember(group, member, newName)),
+    );
+  } return Promise.reject(Error(`Unable to update user: error ${res.status} received from server`));
+};
+
 export {
   AddGroupToUser,
   AddUserToGroup,
@@ -219,4 +258,5 @@ export {
   DeleteGroup,
   DeleteGroupFromId,
   RemoveUserFromGroup,
+  RenameGroup,
 };

From 0f76c792ee3168daa68b7cddf64b0b4d91891fb6 Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Thu, 27 Aug 2020 17:28:41 -0600
Subject: [PATCH 52/62] #28 Group invites WIP

---
 package-lock.json                   | 15 +++++++++++++
 package.json                        |  1 +
 src/components/Header/Header.js     |  4 ++--
 src/components/Layout/Layout.js     |  4 ++--
 src/pages/api/auth/[...nextauth].js |  1 +
 src/pages/api/group/[id].js         |  6 +-----
 src/pages/api/group/index.js        |  1 -
 src/pages/api/invite/[token].js     | 29 +++++++++++++++++++++++++
 src/pages/api/invite/index.js       | 33 +++++++++++++++++++++++++++++
 src/pages/auth/email-signin.js      | 33 +++++++++++++++++++++++++++++
 10 files changed, 117 insertions(+), 10 deletions(-)
 create mode 100644 src/pages/api/invite/[token].js
 create mode 100644 src/pages/api/invite/index.js
 create mode 100644 src/pages/auth/email-signin.js

diff --git a/package-lock.json b/package-lock.json
index 7dfccfad..d445ae4f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5375,6 +5375,21 @@
       "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.0.0.tgz",
       "integrity": "sha512-bzHZN8Pn+gS7DQA6n+iUmBfl0hO5DJq++QP3U6uTucDtk/0iGpXd/Gg7CGR0p8tJhofJyaKoWBuJI4eAO00BBg=="
     },
+    "crypto-random-string": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-3.2.0.tgz",
+      "integrity": "sha512-8vPu5bsKaq2uKRy3OL7h1Oo7RayAWB8sYexLKAqvCXVib8SxgbmoF1IN4QMKjBv8uI8mp5gPPMbiRah25GMrVQ==",
+      "requires": {
+        "type-fest": "^0.8.1"
+      },
+      "dependencies": {
+        "type-fest": {
+          "version": "0.8.1",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
+          "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA=="
+        }
+      }
+    },
     "css": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/css/-/css-2.2.4.tgz",
diff --git a/package.json b/package.json
index 75fd4810..daa16ba5 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
   },
   "dependencies": {
     "bootstrap": "^4.5.0",
+    "crypto-random-string": "^3.2.0",
     "eslint": "^6.8.0",
     "eslint-config-airbnb-base": "^14.2.0",
     "formik": "^2.1.4",
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
index 9896cb6e..d81d2fc8 100644
--- a/src/components/Header/Header.js
+++ b/src/components/Header/Header.js
@@ -12,7 +12,7 @@ function getEditProfileUrl(email) {
   return editUrl;
 }
 
-function Header() {
+function Header({ type }) {
   const [session] = useSession();
   const router = useRouter();
   return (
@@ -31,7 +31,7 @@ function Header() {
                 <BoxArrowUpRight className="align-text-bottom ml-1" />
               </Nav.Link>
               {!session && (
-                <Nav.Link href="/api/auth/signin" data-testid="nav-login-link">
+                <Nav.Link href="/api/auth/signin" data-testid="nav-login-link" disabled={type === 'signin'}>
                   Log In
                   <BoxArrowInRight className="align-text-bottom ml-1" />
                 </Nav.Link>
diff --git a/src/components/Layout/Layout.js b/src/components/Layout/Layout.js
index 7b6ea665..d6a89740 100644
--- a/src/components/Layout/Layout.js
+++ b/src/components/Layout/Layout.js
@@ -4,14 +4,14 @@ import Header from '../Header';
 import Footer from '../Footer';
 import Alerts from '../Alerts';
 
-function Layout({ children }) {
+function Layout({ children, type }) {
   return (
     <>
       <Head>
         <title>Annotation Studio</title>
         <link rel="icon" href="/favicon-32x32.png" />
       </Head>
-      <Header />
+      <Header type={type || 'normal'} />
       <main role="main" className="flex-shrink-0 p-3">
         <Container>
           <Alerts />
diff --git a/src/pages/api/auth/[...nextauth].js b/src/pages/api/auth/[...nextauth].js
index dfe51666..391987b7 100644
--- a/src/pages/api/auth/[...nextauth].js
+++ b/src/pages/api/auth/[...nextauth].js
@@ -51,6 +51,7 @@ const options = {
 
   pages: {
     newUser: '/user/newuser',
+    signIn: '/auth/email-signin',
   },
 
   callbacks: {
diff --git a/src/pages/api/group/[id].js b/src/pages/api/group/[id].js
index 73dae62a..33469a27 100644
--- a/src/pages/api/group/[id].js
+++ b/src/pages/api/group/[id].js
@@ -4,7 +4,7 @@ import jwt from 'next-auth/jwt';
 import middleware from '../../../middlewares/middleware';
 
 const secret = process.env.AUTH_SECRET;
-const fakeUserId = '7b639ae33efb36eaf6447c55';
+
 const handler = nc()
   .use(middleware)
   .get(
@@ -47,9 +47,6 @@ const handler = nc()
     async (req, res) => {
       const token = await jwt.getToken({ req, secret });
       if (token && token.exp > 0) {
-        const memberQuery = (process.env.NODE_ENV === 'development')
-          ? [{ 'members.id': token.id }, { 'members.id': fakeUserId }]
-          : [{ 'members.id': token.id }];
         const nameToUpdate = req.body.name
           ? { name: req.body.name }
           : {};
@@ -97,7 +94,6 @@ const handler = nc()
           .findOneAndUpdate(
             {
               _id: ObjectID(req.query.id),
-              $or: memberQuery,
               ...documentById,
               ...memberById,
             },
diff --git a/src/pages/api/group/index.js b/src/pages/api/group/index.js
index 622fcf3c..4d0964b4 100644
--- a/src/pages/api/group/index.js
+++ b/src/pages/api/group/index.js
@@ -1,5 +1,4 @@
 import nc from 'next-connect';
-import { ObjectID } from 'mongodb';
 import jwt from 'next-auth/jwt';
 import middleware from '../../../middlewares/middleware';
 
diff --git a/src/pages/api/invite/[token].js b/src/pages/api/invite/[token].js
new file mode 100644
index 00000000..6cf2bafa
--- /dev/null
+++ b/src/pages/api/invite/[token].js
@@ -0,0 +1,29 @@
+import nc from 'next-connect';
+import jwt from 'next-auth/jwt';
+import middleware from '../../../middlewares/middleware';
+
+const secret = process.env.AUTH_SECRET;
+
+const handler = nc()
+  .use(middleware)
+  .get(
+    async (req, res) => {
+      const jwtTok = await jwt.getToken({ req, secret });
+      if (jwtTok && jwtTok.exp > 0) {
+        const { token } = req.query;
+        await req.db
+          .collection('inviteTokens')
+          .findOne(
+            {
+              token,
+            },
+            (err, doc) => {
+              if (err) throw err;
+              res.status(200).json(doc);
+            },
+          );
+      } else res.status(403).json({ error: '403 Invalid or expired token' });
+    },
+  );
+
+export default handler;
diff --git a/src/pages/api/invite/index.js b/src/pages/api/invite/index.js
new file mode 100644
index 00000000..41a4c508
--- /dev/null
+++ b/src/pages/api/invite/index.js
@@ -0,0 +1,33 @@
+import nc from 'next-connect';
+import jwt from 'next-auth/jwt';
+import cryptoRandomString from 'crypto-random-string';
+import middleware from '../../../middlewares/middleware';
+
+const secret = process.env.AUTH_SECRET;
+
+const handler = nc()
+  .use(middleware)
+  .post(
+    async (req, res) => {
+      const jwtTok = await jwt.getToken({ req, secret });
+      if (jwtTok && jwtTok.exp > 0) {
+        const createdAt = new Date(Date.now());
+        const updatedAt = createdAt;
+        const token = cryptoRandomString({ length: 32, type: 'url-safe' });
+        const { group } = req.body;
+        await req.db
+          .collection('inviteTokens')
+          .insertOne(
+            {
+              token, group, createdAt, updatedAt,
+            },
+            (err, doc) => {
+              if (err) throw err;
+              res.status(200).json(doc);
+            },
+          );
+      } else res.status(403).json({ error: '403 Invalid or expired token' });
+    },
+  );
+
+export default handler;
diff --git a/src/pages/auth/email-signin.js b/src/pages/auth/email-signin.js
new file mode 100644
index 00000000..3f0550b2
--- /dev/null
+++ b/src/pages/auth/email-signin.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import { csrfToken } from 'next-auth/client';
+import { Button, Card, Form } from 'react-bootstrap';
+import Layout from '../../components/Layout';
+
+// eslint-disable-next-line no-shadow
+const SignIn = ({ csrfToken, groupToken }) => (
+  <Layout
+    type="signin"
+  >
+    <Card style={{ width: '33%', 'margin-left': '33%' }} className="text-center">
+      <Card.Header>Log In / Sign Up</Card.Header>
+      <Card.Body>
+        <Form method="post" action="/api/auth/signin/email">
+          <input name="csrfToken" type="hidden" defaultValue={csrfToken} />
+          <input name="groupToken" type="hidden" defaultValue={groupToken} />
+          <Form.Label>Email address</Form.Label>
+          <Form.Control name="email" type="email" placeholder="Email address" />
+          <Button variant="outline-secondary" type="submit" className="mt-3">
+            Submit
+          </Button>
+        </Form>
+      </Card.Body>
+    </Card>
+  </Layout>
+);
+
+SignIn.getInitialProps = async (context) => ({
+  csrfToken: await csrfToken(context),
+  groupToken: await context.query.groupToken,
+});
+
+export default SignIn;

From 5acac0c4ce37a411e8c141fedca5913ae4856d68 Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Mon, 31 Aug 2020 18:31:33 -0600
Subject: [PATCH 53/62] #28 Create preliminary Group Invites system

---
 package-lock.json                     |  37 ++++++--
 package.json                          |   6 +-
 src/components/Alerts/Alerts.js       |   8 ++
 src/pages/api/group/[id].js           |  13 ++-
 src/pages/api/invite/[token].js       |  30 +++----
 src/pages/api/invite/index.js         |   2 +-
 src/pages/auth/email-signin.js        | 125 ++++++++++++++++++++------
 src/pages/groups/[id]/edit.jsx        |  91 +++++++++++++++++--
 src/pages/groups/new.jsx              |   2 +-
 src/pages/index.jsx                   |  65 +++++++++++++-
 src/pages/user/[slug]/editprofile.jsx |   2 +-
 src/pages/user/newuser.jsx            |  52 +++++++++--
 src/utils/groupUtil.js                |  54 +++++++++--
 13 files changed, 405 insertions(+), 82 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d445ae4f..2ed83a48 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4500,9 +4500,9 @@
       }
     },
     "bl": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/bl/-/bl-2.2.0.tgz",
-      "integrity": "sha512-wbgvOpqopSr7uq6fJrLH8EsvYMJf9gzfo2jCsL2eTy75qXPukA4pCgHamOQkZtY5vmfVtjB+P3LNlMHW5CEZXA==",
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-2.2.1.tgz",
+      "integrity": "sha512-6Pesp1w0DEX1N550i/uGV/TqucVL4AM/pgThFSN/Qq9si1/DF9aIHs1BxD8V/QU0HoeHO6cQRTAuYnLPKq1e4g==",
       "requires": {
         "readable-stream": "^2.3.5",
         "safe-buffer": "^5.1.1"
@@ -5223,6 +5223,11 @@
         "safe-buffer": "~5.1.1"
       }
     },
+    "cookie": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.1.tgz",
+      "integrity": "sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA=="
+    },
     "copy-concurrently": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/copy-concurrently/-/copy-concurrently-1.0.5.tgz",
@@ -10105,9 +10110,9 @@
       }
     },
     "mongodb": {
-      "version": "3.5.9",
-      "resolved": "https://registry.npmjs.org/mongodb/-/mongodb-3.5.9.tgz",
-      "integrity": "sha512-vXHBY1CsGYcEPoVWhwgxIBeWqP3dSu9RuRDsoLRPTITrcrgm1f0Ubu1xqF9ozMwv53agmEiZm0YGo+7WL3Nbug==",
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/mongodb/-/mongodb-3.6.0.tgz",
+      "integrity": "sha512-/XWWub1mHZVoqEsUppE0GV7u9kanLvHxho6EvBxQbShXTKYF9trhZC2NzbulRGeG7xMJHD8IOWRcdKx5LPjAjQ==",
       "requires": {
         "bl": "^2.2.0",
         "bson": "^1.1.4",
@@ -10118,9 +10123,9 @@
       },
       "dependencies": {
         "bson": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/bson/-/bson-1.1.4.tgz",
-          "integrity": "sha512-S/yKGU1syOMzO86+dGpg2qGoDL0zvzcb262G+gqEy6TgP6rt6z6qxSFX/8X6vLC91P7G7C3nLs0+bvDzmvBA3Q=="
+          "version": "1.1.5",
+          "resolved": "https://registry.npmjs.org/bson/-/bson-1.1.5.tgz",
+          "integrity": "sha512-kDuEzldR21lHciPQAIulLs1LZlCXdLziXI6Mb/TDkwXhb//UORJNPXgcRs2CuO4H0DcMkpfT3/ySsP3unoZjBg=="
         }
       }
     },
@@ -10444,6 +10449,15 @@
       "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-6.4.10.tgz",
       "integrity": "sha512-j+pS9CURhPgk6r0ENr7dji+As2xZiHSvZeVnzKniLOw1eRAyM/7flP0u65tCnsapV8JFu+t0l/5VeHsCZEeh9g=="
     },
+    "nookies": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/nookies/-/nookies-2.4.0.tgz",
+      "integrity": "sha512-QC1+Ih9/BedZOIUVXneHBQgp8n9NzvsqyfmzAoUTrwOdwJOjB+phWzeLXuLqcxgxztTq3t3PeHtuosFKclL+Hw==",
+      "requires": {
+        "cookie": "^0.4.0",
+        "set-cookie-parser": "^2.4.3"
+      }
+    },
     "normalize-html-whitespace": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/normalize-html-whitespace/-/normalize-html-whitespace-1.0.0.tgz",
@@ -12476,6 +12490,11 @@
       "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
       "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc="
     },
+    "set-cookie-parser": {
+      "version": "2.4.6",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.4.6.tgz",
+      "integrity": "sha512-mNCnTUF0OYPwYzSHbdRdCfNNHqrne+HS5tS5xNb6yJbdP9wInV0q5xPLE0EyfV/Q3tImo3y/OXpD8Jn0Jtnjrg=="
+    },
     "set-value": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz",
diff --git a/package.json b/package.json
index daa16ba5..c8f28365 100644
--- a/package.json
+++ b/package.json
@@ -28,11 +28,12 @@
     "moment": "^2.27.0",
     "mongo-seeding": "^3.4.1",
     "mongo-seeding-cli": "^3.4.1",
-    "mongodb": "^3.5.9",
+    "mongodb": "^3.6.0",
     "next": "^9.5.1",
     "next-auth": "^3.1.0",
     "next-connect": "^0.8.1",
     "nodemailer": "^6.4.10",
+    "nookies": "^2.4.0",
     "popper.js": "^1.16.1",
     "react": "^16.13.1",
     "react-bootstrap": "^1.0.1",
@@ -62,5 +63,8 @@
     "jest": "^25.1.0",
     "jest-fetch-mock": "^3.0.3",
     "react-test-renderer": "^16.12.0"
+  },
+  "peerOptionalDependencies": {
+    "mongodb": "^3.6.0"
   }
 }
diff --git a/src/components/Alerts/Alerts.js b/src/components/Alerts/Alerts.js
index b4ccc955..a0f1cdf5 100644
--- a/src/components/Alerts/Alerts.js
+++ b/src/components/Alerts/Alerts.js
@@ -36,6 +36,14 @@ function getData(alertName) {
       text: 'Group successfully renamed.',
       variant: 'success',
     },
+    joinedGroup: {
+      text: 'Group successfully joined.',
+      variant: 'success',
+    },
+    createdToken: {
+      text: 'Group invite token created successfully.',
+      variant: 'success',
+    },
   };
   return alerts[alertName];
 }
diff --git a/src/pages/api/group/[id].js b/src/pages/api/group/[id].js
index 33469a27..a1fdca27 100644
--- a/src/pages/api/group/[id].js
+++ b/src/pages/api/group/[id].js
@@ -24,6 +24,7 @@ const handler = nc()
                   name,
                   members,
                   documents,
+                  inviteToken,
                   createdAt,
                   updatedAt,
                 } = doc;
@@ -32,6 +33,7 @@ const handler = nc()
                   name,
                   members,
                   documents,
+                  inviteToken,
                   createdAt,
                   updatedAt,
                 });
@@ -80,8 +82,17 @@ const handler = nc()
           ? { documents: { id: req.body.removedDocumentId } }
           : {};
 
+        const inviteTokenToUpdate = req.body.inviteToken
+          ? { inviteToken: req.body.inviteToken }
+          : {};
+
         const updateMethods = {};
-        const fieldsToSet = { ...nameToUpdate, ...documentToUpdate, ...memberToChangeRole };
+        const fieldsToSet = {
+          ...nameToUpdate,
+          ...documentToUpdate,
+          ...memberToChangeRole,
+          ...inviteTokenToUpdate,
+        };
         if (Object.keys(fieldsToSet).length !== 0) updateMethods.$set = fieldsToSet;
         const fieldsToPush = { ...memberToPush, ...documentToPush };
         if (Object.keys(fieldsToPush).length !== 0) updateMethods.$push = fieldsToPush;
diff --git a/src/pages/api/invite/[token].js b/src/pages/api/invite/[token].js
index 6cf2bafa..17d07415 100644
--- a/src/pages/api/invite/[token].js
+++ b/src/pages/api/invite/[token].js
@@ -1,28 +1,22 @@
 import nc from 'next-connect';
-import jwt from 'next-auth/jwt';
 import middleware from '../../../middlewares/middleware';
 
-const secret = process.env.AUTH_SECRET;
-
 const handler = nc()
   .use(middleware)
   .get(
     async (req, res) => {
-      const jwtTok = await jwt.getToken({ req, secret });
-      if (jwtTok && jwtTok.exp > 0) {
-        const { token } = req.query;
-        await req.db
-          .collection('inviteTokens')
-          .findOne(
-            {
-              token,
-            },
-            (err, doc) => {
-              if (err) throw err;
-              res.status(200).json(doc);
-            },
-          );
-      } else res.status(403).json({ error: '403 Invalid or expired token' });
+      const { token } = req.query;
+      await req.db
+        .collection('inviteTokens')
+        .findOne(
+          {
+            token,
+          },
+          (err, doc) => {
+            if (err) throw err;
+            res.status(200).json(doc);
+          },
+        );
     },
   );
 
diff --git a/src/pages/api/invite/index.js b/src/pages/api/invite/index.js
index 41a4c508..5d688b99 100644
--- a/src/pages/api/invite/index.js
+++ b/src/pages/api/invite/index.js
@@ -13,7 +13,7 @@ const handler = nc()
       if (jwtTok && jwtTok.exp > 0) {
         const createdAt = new Date(Date.now());
         const updatedAt = createdAt;
-        const token = cryptoRandomString({ length: 32, type: 'url-safe' });
+        const token = cryptoRandomString({ length: 32, type: 'base64' });
         const { group } = req.body;
         await req.db
           .collection('inviteTokens')
diff --git a/src/pages/auth/email-signin.js b/src/pages/auth/email-signin.js
index 3f0550b2..c166e95d 100644
--- a/src/pages/auth/email-signin.js
+++ b/src/pages/auth/email-signin.js
@@ -1,33 +1,106 @@
+import { setCookie } from 'nookies';
 import React from 'react';
-import { csrfToken } from 'next-auth/client';
+import fetch from 'isomorphic-unfetch';
+import { csrfToken, useSession } from 'next-auth/client';
 import { Button, Card, Form } from 'react-bootstrap';
+import Router from 'next/router';
 import Layout from '../../components/Layout';
+import LoadingSpinner from '../../components/LoadingSpinner';
+import { AddUserToGroup } from '../../utils/groupUtil';
 
-// eslint-disable-next-line no-shadow
-const SignIn = ({ csrfToken, groupToken }) => (
-  <Layout
-    type="signin"
-  >
-    <Card style={{ width: '33%', 'margin-left': '33%' }} className="text-center">
-      <Card.Header>Log In / Sign Up</Card.Header>
-      <Card.Body>
-        <Form method="post" action="/api/auth/signin/email">
-          <input name="csrfToken" type="hidden" defaultValue={csrfToken} />
-          <input name="groupToken" type="hidden" defaultValue={groupToken} />
-          <Form.Label>Email address</Form.Label>
-          <Form.Control name="email" type="email" placeholder="Email address" />
-          <Button variant="outline-secondary" type="submit" className="mt-3">
-            Submit
-          </Button>
-        </Form>
-      </Card.Body>
-    </Card>
-  </Layout>
-);
+const SignIn = ({ props }) => {
+  const [session, loading] = useSession();
 
-SignIn.getInitialProps = async (context) => ({
-  csrfToken: await csrfToken(context),
-  groupToken: await context.query.groupToken,
-});
+  const { csrfToken, groupId } = props; // eslint-disable-line no-shadow
+  return (
+    <Layout
+      type="signin"
+    >
+      {!session && loading && (
+        <LoadingSpinner />
+      )}
+      {!session && !loading && (
+        <Card style={{ width: '33%', marginLeft: '33%' }} className="text-center">
+          <Card.Header>Log In / Sign Up</Card.Header>
+          <Card.Body>
+            <Form method="post" action="/api/auth/signin/email">
+              <input name="csrfToken" type="hidden" defaultValue={csrfToken} />
+              <Form.Label>Email address</Form.Label>
+              <Form.Control name="email" type="email" placeholder="Email address" />
+              <Button variant="outline-secondary" type="submit" className="mt-3">
+                Submit
+              </Button>
+            </Form>
+          </Card.Body>
+        </Card>
+      )}
+      {session && groupId !== '' && (
+        <Card style={{ width: '33%', marginLeft: '33%' }} className="text-center">
+          <Card.Header>Join Group</Card.Header>
+          <Card.Body>
+            Click below to join the group:
+            <br />
+            <Button
+              className="mt-3"
+              onClick={() => {
+                AddUserToGroup({ id: groupId }, session.user.email, false).then(() => {
+                  Router.push({
+                    pathname: '/',
+                    query: { alert: 'joinedGroup' },
+                  });
+                });
+              }}
+            >
+              Join Group
+            </Button>
+          </Card.Body>
+        </Card>
+      )}
+      {session && groupId === '' && (
+        <Card style={{ width: '33%', marginLeft: '33%' }} className="text-center">
+          <Card.Header>Log In / Sign Up</Card.Header>
+          <Card.Body>
+            You are already logged in.
+            <br />
+            <Button
+              className="mt-3"
+              href="/"
+            >
+              Go to Dashboard
+            </Button>
+          </Card.Body>
+        </Card>
+      )}
+    </Layout>
+  );
+};
+
+SignIn.getInitialProps = async (context) => {
+  const { groupToken } = await context.query;
+  let groupId = '';
+  if (groupToken) {
+    setCookie(context, 'ans_grouptoken', groupToken, {
+      maxAge: 30 * 24 * 60 * 60,
+      path: '/',
+    });
+    const url = `${process.env.SITE}/api/invite/${groupToken}`;
+    const res = await fetch(url, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+    if (res.status === 200) {
+      const result = await res.json();
+      groupId = result.group;
+    }
+  }
+  return {
+    props: {
+      csrfToken: await csrfToken(context),
+      groupId,
+    },
+  };
+};
 
 export default SignIn;
diff --git a/src/pages/groups/[id]/edit.jsx b/src/pages/groups/[id]/edit.jsx
index 1d1618ac..87d558b8 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 } from 'react';
+import { useState, useRef } from 'react';
 import {
   Button,
   Card,
@@ -8,8 +8,10 @@ import {
   Dropdown,
   FormControl,
   InputGroup,
+  Overlay,
   Row,
   Table,
+  Tooltip,
   Form,
 } from 'react-bootstrap';
 
@@ -26,16 +28,32 @@ import {
   DeleteGroup,
   RemoveUserFromGroup,
   RenameGroup,
+  GenerateInviteToken,
 } from '../../../utils/groupUtil';
 
 
 const EditGroup = ({ group }) => {
   const [session, loading] = useSession();
 
-  const [state, setState] = useState({ showModal: false, editingGroupName: false });
+  const target = useRef(null);
+  const [state, setState] = useState(
+    { showModal: false, editingGroupName: false, showTooltip: false },
+  );
   const handleCloseModal = () => setState({ ...state, showModal: false });
   const handleShowModal = () => setState({ ...state, showModal: true });
   const editGroupName = () => setState({ ...state, editingGroupName: true });
+  const handleShowTooltip = () => setState({ ...state, showTooltip: true });
+  const handleHideTooltip = () => setState({ ...state, showTooltip: false });
+
+  const copyInviteUrl = () => {
+    if (typeof navigator !== 'undefined') {
+      // eslint-disable-next-line no-undef
+      navigator.clipboard.writeText(group.inviteUrl);
+      handleShowTooltip();
+      target.current.focus();
+      target.current.select();
+    }
+  };
 
   const roleInGroup = (currentSession) => currentSession.user.groups.find((o) => Object.entries(o).some(([k, value]) => k === 'id' && value === group.id)).role;
 
@@ -181,10 +199,65 @@ const EditGroup = ({ group }) => {
                 <Col>
                   <Row>
                     <h6>Invite link</h6>
-                    <p>Generate an invite link to send to registered or new users.</p>
-                    <Button variant="outline-secondary">
-                      Generate
-                    </Button>
+                    {group.inviteUrl === '' && (
+                      <>
+                        <p>Generate an invite link to send to registered or new users.</p>
+                        <Button
+                          variant="outline-secondary"
+                          onClick={(event) => {
+                            event.target.setAttribute('disabled', 'true');
+                            GenerateInviteToken(group);
+                          }}
+                        >
+                          Generate
+                        </Button>
+                      </>
+                    )}
+                    {group.inviteUrl !== '' && (
+                      <>
+                        <p>
+                          Send this invite link to registered or
+                          new users to add them to the group.
+                        </p>
+                        <InputGroup>
+                          <FormControl
+                            placeholder="Group invite link"
+                            aria-label="Group invite link"
+                            type="text"
+                            name="inviteUrl"
+                            ref={target}
+                            value={group.inviteUrl}
+                            onClick={copyInviteUrl}
+                            readOnly
+                          />
+                          <InputGroup.Append>
+                            <Button
+                              variant="outline-secondary"
+                              type="button"
+                              className="rounded-right"
+                              onClick={copyInviteUrl}
+                            >
+                              Copy
+                            </Button>
+                            <Overlay
+                              target={target.current}
+                              show={state.showTooltip}
+                              placement="top"
+                              rootClose
+                              onHide={handleHideTooltip}
+                              rootCloseEvent="click"
+                            >
+                              {(props) => (
+                                // eslint-disable-next-line react/jsx-props-no-spreading
+                                <Tooltip id="overlay-example" {...props}>
+                                  Copied!
+                                </Tooltip>
+                              )}
+                            </Overlay>
+                          </InputGroup.Append>
+                        </InputGroup>
+                      </>
+                    )}
                   </Row>
                   <Row>
                     <h6 className="mt-3">Add registered user</h6>
@@ -199,7 +272,7 @@ const EditGroup = ({ group }) => {
                       })}
                       onSubmit={(values, actions) => {
                         setTimeout(() => {
-                          AddUserToGroup(group, values.email);
+                          AddUserToGroup(group, values.email, true);
                           actions.setSubmitting(false);
                         }, 1000);
                       }}
@@ -300,6 +373,7 @@ export async function getServerSideProps(context) {
   });
   if (res.status === 200) {
     const foundGroup = await res.json();
+    console.log(foundGroup);
     const {
       name,
       members,
@@ -309,6 +383,9 @@ export async function getServerSideProps(context) {
       name,
       members,
     };
+    group.inviteUrl = foundGroup.inviteToken
+      ? `${process.env.SITE}/auth/email-signin?callbackUrl=${process.env.SITE}&groupToken=${foundGroup.inviteToken}`
+      : '';
     return {
       props: { group },
     };
diff --git a/src/pages/groups/new.jsx b/src/pages/groups/new.jsx
index ade88742..691e6d2a 100644
--- a/src/pages/groups/new.jsx
+++ b/src/pages/groups/new.jsx
@@ -34,7 +34,7 @@ const NewGroup = () => {
       const user = {
         id: result.ops[0].members[0].id,
       };
-      return AddGroupToUser(group, user, true);
+      return AddGroupToUser(group, user, true, false);
     }
     return Promise.reject(Error(`Unable to create group: error ${res.status} received from server`));
   };
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index e76ad208..7f095c93 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -1,15 +1,72 @@
+import { parseCookies, destroyCookie } from 'nookies';
+import { Button, Card } from 'react-bootstrap';
+import Router from 'next/router';
+import fetch from 'isomorphic-unfetch';
+import { useSession } from 'next-auth/client';
 import Layout from '../components/Layout';
+import { AddUserToGroup } from '../utils/groupUtil';
 
-export default function Home() {
+export default function Home({ props }) {
+  const [session, loading] = useSession();
+  const { groupId } = props;
   return (
     <Layout>
+      {session && !loading && groupId !== '' && (
+        <Card style={{ width: '33%', marginLeft: '33%' }} className="text-center">
+          <Card.Header>Join Group</Card.Header>
+          <Card.Body>
+            You have been invited to join a group.
+            <br />
+            <Button
+              className="mt-3"
+              onClick={() => {
+                AddUserToGroup({ id: groupId }, session.user.email, false).then(() => {
+                  destroyCookie(null, 'ans_grouptoken', {
+                    path: '/',
+                  });
+                  Router.push({
+                    pathname: '/',
+                    query: { alert: 'joinedGroup' },
+                  });
+                });
+              }}
+            >
+              Join Group
+            </Button>
+          </Card.Body>
+        </Card>
+      )}
+      {' '}
       Welcome to Annotation Studio.
     </Layout>
   );
 }
 
-export async function getServerSideProps(context) {
+Home.getInitialProps = async (context) => {
+  const { query } = context;
+  const cookies = parseCookies(context);
+  let groupId = '';
+  if (query.alert === 'completeRegistration') {
+    destroyCookie(context, 'ans_grouptoken', {
+      path: '/',
+    });
+  } else if (cookies.ans_grouptoken) {
+    const url = `${process.env.SITE}/api/invite/${cookies.ans_grouptoken}`;
+    const res = await fetch(url, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+    if (res.status === 200) {
+      const result = await res.json();
+      groupId = result.group;
+    }
+  }
   return {
-    props: { query: context.query }, // will be passed to the page component as props
+    props: {
+      query,
+      groupId,
+    },
   };
-}
+};
diff --git a/src/pages/user/[slug]/editprofile.jsx b/src/pages/user/[slug]/editprofile.jsx
index fd177e96..d1b4a90f 100644
--- a/src/pages/user/[slug]/editprofile.jsx
+++ b/src/pages/user/[slug]/editprofile.jsx
@@ -6,7 +6,7 @@ import {
   Button, Card, Col, Form, Row,
 } from 'react-bootstrap';
 import Router from 'next/router';
-import FullName from '../../../utils/nameUtil';
+import { FullName } from '../../../utils/nameUtil';
 import Layout from '../../../components/Layout';
 import LoadingSpinner from '../../../components/LoadingSpinner';
 
diff --git a/src/pages/user/newuser.jsx b/src/pages/user/newuser.jsx
index 3b3985fc..1b9d5f53 100644
--- a/src/pages/user/newuser.jsx
+++ b/src/pages/user/newuser.jsx
@@ -1,6 +1,8 @@
+/* eslint-disable camelcase */
+import { parseCookies, destroyCookie } from 'nookies';
 import { useState } from 'react';
 import { useSession, getSession } from 'next-auth/client';
-import fetch from 'unfetch';
+import fetch from 'isomorphic-unfetch';
 import { Formik } from 'formik';
 import * as yup from 'yup';
 import {
@@ -12,12 +14,20 @@ import Router from 'next/router';
 import { FullName } from '../../utils/nameUtil';
 import Layout from '../../components/Layout';
 import LoadingSpinner from '../../components/LoadingSpinner';
+import { AddUserToGroup } from '../../utils/groupUtil';
 
-const NewUser = () => {
+const NewUser = ({ groupId }) => {
   const [session] = useSession();
 
   const [errorMsg, setErrorMsg] = useState('');
 
+  const pushToHome = () => {
+    Router.push({
+      pathname: '/',
+      query: { alert: 'completeRegistration' },
+    });
+  };
+
   const submitHandler = async (values) => {
     const body = {
       email: session.user.email,
@@ -36,10 +46,14 @@ const NewUser = () => {
     if (res.status === 200) {
       await res.json();
       getSession();
-      Router.push({
-        pathname: '/',
-        query: { alert: 'completeRegistration' },
-      });
+      if (groupId !== '') {
+        destroyCookie(null, 'ans_grouptoken', {
+          path: '/',
+        });
+        AddUserToGroup({ id: groupId }, session.user.email, false).then(() => {
+          pushToHome();
+        });
+      } else pushToHome();
     } else {
       setErrorMsg(await res.text());
     }
@@ -66,6 +80,12 @@ const NewUser = () => {
               <Card.Title>Welcome to Annotation Studio</Card.Title>
               <Card.Text>
                 Please fill out the following form to complete your registration.
+                {groupId && groupId !== '' && (
+                  <>
+                    {' '}
+                    On submit, you will be automatically added to the group that invited you.
+                  </>
+                )}
               </Card.Text>
 
               <Formik
@@ -200,4 +220,24 @@ const NewUser = () => {
   );
 };
 
+NewUser.getInitialProps = async (context) => {
+  const cookies = parseCookies(context);
+  const { ans_grouptoken } = cookies;
+  let groupId = '';
+  if (ans_grouptoken) {
+    const url = `${process.env.SITE}/api/invite/${ans_grouptoken}`;
+    const res = await fetch(url, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+    if (res.status === 200) {
+      const result = await res.json();
+      groupId = result.group;
+    }
+  }
+  return { groupId };
+};
+
 export default NewUser;
diff --git a/src/utils/groupUtil.js b/src/utils/groupUtil.js
index f22a1fb2..9a1c091e 100644
--- a/src/utils/groupUtil.js
+++ b/src/utils/groupUtil.js
@@ -27,7 +27,7 @@ const UpdateMemberCounts = async (group) => {
   );
 };
 
-const AddGroupToUser = async (group, user, isNewGroup) => {
+const AddGroupToUser = async (group, user, isNewGroup, existingUser) => {
   const url = `/api/user/${user.id}`;
   const {
     id,
@@ -56,16 +56,18 @@ const AddGroupToUser = async (group, user, isNewGroup) => {
     const result = await res.json();
     let query = { alert: 'addUser' };
     if (isNewGroup) query = { alert: 'newGroup' };
-    Router.push({
-      pathname: `/groups/${group.id}/edit`,
-      query,
-    });
+    if (isNewGroup || existingUser) {
+      Router.push({
+        pathname: `/groups/${group.id}/edit`,
+        query,
+      });
+    }
     return Promise.resolve(result);
   }
   return Promise.reject(Error(`Unable to add group to user: error ${res.status} received from server`));
 };
 
-const AddUserToGroup = async (group, email) => {
+const AddUserToGroup = async (group, email, fromGroupEditPage) => {
   const user = await GetUserByEmail(email);
   if (!user.error) {
     const url = `/api/group/${group.id}`;
@@ -96,7 +98,8 @@ const AddUserToGroup = async (group, email) => {
         ownerName,
         role: 'member',
       };
-      return AddGroupToUser(groupToAdd, user).then(UpdateMemberCounts(result.value));
+      return AddGroupToUser(groupToAdd, user, false, fromGroupEditPage)
+        .then(UpdateMemberCounts(result.value));
     } return Promise.reject(Error(`Unable to add user to group: error ${res.status} received from server`));
   } return Promise.reject(Error(`Unable to add user with email ${email}: error ${user.error}.`));
 };
@@ -251,12 +254,49 @@ const RenameGroup = async (group, newName) => {
   } return Promise.reject(Error(`Unable to update user: error ${res.status} received from server`));
 };
 
+const GenerateInviteToken = async (group) => {
+  const { id } = group;
+  const url = '/api/invite';
+  const body = { group: id };
+  const res = await fetch(url, {
+    method: 'POST',
+    body: JSON.stringify(body),
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+  if (res.status === 200) {
+    const response = await res.json();
+    if (!response.ops[0].token) {
+      return Promise.reject(Error(`Unable to add token to group: ${JSON.stringify(response)}`));
+    }
+    const groupUrl = `/api/group/${id}`;
+    const groupBody = { inviteToken: response.ops[0].token };
+    const groupRes = await fetch(groupUrl, {
+      method: 'PATCH',
+      body: JSON.stringify(groupBody),
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+    if (groupRes.status === 200) {
+      const query = { alert: 'createdToken' };
+      Router.push({
+        pathname: `/groups/${id}/edit`,
+        query,
+      });
+      return Promise.resolve(response);
+    } return Promise.reject(Error(`Unable to add token to group: error ${res.status} received from server`));
+  } return Promise.reject(Error(`Unable to generate token: error ${res.status} received from server`));
+};
+
 export {
   AddGroupToUser,
   AddUserToGroup,
   ChangeUserRole,
   DeleteGroup,
   DeleteGroupFromId,
+  GenerateInviteToken,
   RemoveUserFromGroup,
   RenameGroup,
 };

From 548a4251d7853eb83b145a03f983a76dd5e0f3b9 Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Tue, 1 Sep 2020 12:57:45 -0600
Subject: [PATCH 54/62] #28 Create + handle err when user already in group

---
 src/components/Alerts/Alerts.js     | 12 ++++++++++--
 src/pages/api/user/email/[email].js |  4 ++--
 src/pages/groups/[id]/edit.jsx      | 15 ++++++++++++---
 src/utils/groupUtil.js              |  5 ++++-
 src/utils/stringUtil.js             |  4 ++++
 5 files changed, 32 insertions(+), 8 deletions(-)
 create mode 100644 src/utils/stringUtil.js

diff --git a/src/components/Alerts/Alerts.js b/src/components/Alerts/Alerts.js
index a0f1cdf5..f2c3127a 100644
--- a/src/components/Alerts/Alerts.js
+++ b/src/components/Alerts/Alerts.js
@@ -48,13 +48,21 @@ function getData(alertName) {
   return alerts[alertName];
 }
 
+function getError(error) {
+  return {
+    text: error,
+    variant: 'danger',
+  };
+}
+
 function Alerts() {
   const [show, setShow] = useState(true);
   const router = useRouter();
   let alertData;
   if (router && router.query) {
-    const { alert } = router.query;
-    alertData = getData(alert);
+    const { alert, error } = router.query;
+    if (alert) alertData = getData(alert);
+    if (error) alertData = getError(error);
   }
   return (
     <>
diff --git a/src/pages/api/user/email/[email].js b/src/pages/api/user/email/[email].js
index 5a60ac74..0dc3a06f 100644
--- a/src/pages/api/user/email/[email].js
+++ b/src/pages/api/user/email/[email].js
@@ -18,10 +18,10 @@ const handler = nc()
               if (doc) {
                 // eslint-disable-next-line no-underscore-dangle
                 const id = doc._id;
-                const { name } = doc;
+                const { name, groups } = doc;
                 if (err) throw err;
                 res.status(200).json({
-                  id, name,
+                  id, name, groups,
                 });
               } else {
                 res.status(404).json({ error: '404 Not Found' });
diff --git a/src/pages/groups/[id]/edit.jsx b/src/pages/groups/[id]/edit.jsx
index 87d558b8..fcd9950d 100644
--- a/src/pages/groups/[id]/edit.jsx
+++ b/src/pages/groups/[id]/edit.jsx
@@ -14,14 +14,15 @@ import {
   Tooltip,
   Form,
 } from 'react-bootstrap';
-
 import * as yup from 'yup';
+import { useRouter } from 'next/router';
 import { Formik } from 'formik';
 import Layout from '../../../components/Layout';
 import LoadingSpinner from '../../../components/LoadingSpinner';
 import ConfirmationDialog from '../../../components/ConfirmationDialog';
 import GroupRoleSummaries from '../../../components/GroupRoleSummaries';
 import GroupRoleBadge from '../../../components/GroupRoleBadge';
+import { StripQuery } from '../../../utils/stringUtil';
 import {
   AddUserToGroup,
   ChangeUserRole,
@@ -35,6 +36,8 @@ import {
 const EditGroup = ({ group }) => {
   const [session, loading] = useSession();
 
+  const router = useRouter();
+
   const target = useRef(null);
   const [state, setState] = useState(
     { showModal: false, editingGroupName: false, showTooltip: false },
@@ -272,7 +275,14 @@ const EditGroup = ({ group }) => {
                       })}
                       onSubmit={(values, actions) => {
                         setTimeout(() => {
-                          AddUserToGroup(group, values.email, true);
+                          AddUserToGroup(group, values.email, true).catch((err) => {
+                            router.push(
+                              {
+                                pathname: StripQuery(router.asPath),
+                                query: { error: err.message },
+                              },
+                            );
+                          });
                           actions.setSubmitting(false);
                         }, 1000);
                       }}
@@ -373,7 +383,6 @@ export async function getServerSideProps(context) {
   });
   if (res.status === 200) {
     const foundGroup = await res.json();
-    console.log(foundGroup);
     const {
       name,
       members,
diff --git a/src/utils/groupUtil.js b/src/utils/groupUtil.js
index 9a1c091e..f150ab00 100644
--- a/src/utils/groupUtil.js
+++ b/src/utils/groupUtil.js
@@ -69,6 +69,9 @@ const AddGroupToUser = async (group, user, isNewGroup, existingUser) => {
 
 const AddUserToGroup = async (group, email, fromGroupEditPage) => {
   const user = await GetUserByEmail(email);
+  let alreadyInGroup = false;
+  alreadyInGroup = user.groups.some((userGroup) => (userGroup.id === group.id));
+  user.error = (alreadyInGroup === true) ? 'User is already in group' : undefined;
   if (!user.error) {
     const url = `/api/group/${group.id}`;
     const {
@@ -101,7 +104,7 @@ const AddUserToGroup = async (group, email, fromGroupEditPage) => {
       return AddGroupToUser(groupToAdd, user, false, fromGroupEditPage)
         .then(UpdateMemberCounts(result.value));
     } return Promise.reject(Error(`Unable to add user to group: error ${res.status} received from server`));
-  } return Promise.reject(Error(`Unable to add user with email ${email}: error ${user.error}.`));
+  } return Promise.reject(Error(`Unable to add user with email ${email}: ${user.error}.`));
 };
 
 const RemoveGroupFromUser = async (group, user, groupDeletion) => {
diff --git a/src/utils/stringUtil.js b/src/utils/stringUtil.js
new file mode 100644
index 00000000..0a8f9034
--- /dev/null
+++ b/src/utils/stringUtil.js
@@ -0,0 +1,4 @@
+const StripQuery = (uri) => uri.substring(0, uri.lastIndexOf('?'));
+
+// eslint-disable-next-line import/prefer-default-export
+export { StripQuery };

From 4580bb57bcdd553dbddd956e202f3d5a073b82c4 Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Tue, 1 Sep 2020 13:17:04 -0600
Subject: [PATCH 55/62] #28 Error handling for AddUserToGroup calls

---
 src/pages/auth/email-signin.js |  8 ++++++++
 src/pages/index.jsx            | 14 +++++++++++---
 src/pages/user/newuser.jsx     |  8 ++++++++
 3 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/pages/auth/email-signin.js b/src/pages/auth/email-signin.js
index c166e95d..b2585e56 100644
--- a/src/pages/auth/email-signin.js
+++ b/src/pages/auth/email-signin.js
@@ -7,6 +7,7 @@ import Router from 'next/router';
 import Layout from '../../components/Layout';
 import LoadingSpinner from '../../components/LoadingSpinner';
 import { AddUserToGroup } from '../../utils/groupUtil';
+import { StripQuery } from '../../utils/stringUtil';
 
 const SignIn = ({ props }) => {
   const [session, loading] = useSession();
@@ -48,6 +49,13 @@ const SignIn = ({ props }) => {
                     pathname: '/',
                     query: { alert: 'joinedGroup' },
                   });
+                }).catch((err) => {
+                  Router.push(
+                    {
+                      pathname: StripQuery(Router.asPath),
+                      query: { error: err.message },
+                    },
+                  );
                 });
               }}
             >
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 7f095c93..a3572616 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -5,6 +5,7 @@ import fetch from 'isomorphic-unfetch';
 import { useSession } from 'next-auth/client';
 import Layout from '../components/Layout';
 import { AddUserToGroup } from '../utils/groupUtil';
+import { StripQuery } from '../utils/stringUtil';
 
 export default function Home({ props }) {
   const [session, loading] = useSession();
@@ -20,14 +21,21 @@ export default function Home({ props }) {
             <Button
               className="mt-3"
               onClick={() => {
+                destroyCookie(null, 'ans_grouptoken', {
+                  path: '/',
+                });
                 AddUserToGroup({ id: groupId }, session.user.email, false).then(() => {
-                  destroyCookie(null, 'ans_grouptoken', {
-                    path: '/',
-                  });
                   Router.push({
                     pathname: '/',
                     query: { alert: 'joinedGroup' },
                   });
+                }).catch((err) => {
+                  Router.push(
+                    {
+                      pathname: StripQuery(Router.asPath),
+                      query: { error: err.message },
+                    },
+                  );
                 });
               }}
             >
diff --git a/src/pages/user/newuser.jsx b/src/pages/user/newuser.jsx
index 1b9d5f53..c50b7a96 100644
--- a/src/pages/user/newuser.jsx
+++ b/src/pages/user/newuser.jsx
@@ -15,6 +15,7 @@ import { FullName } from '../../utils/nameUtil';
 import Layout from '../../components/Layout';
 import LoadingSpinner from '../../components/LoadingSpinner';
 import { AddUserToGroup } from '../../utils/groupUtil';
+import { StripQuery } from '../../utils/stringUtil';
 
 const NewUser = ({ groupId }) => {
   const [session] = useSession();
@@ -52,6 +53,13 @@ const NewUser = ({ groupId }) => {
         });
         AddUserToGroup({ id: groupId }, session.user.email, false).then(() => {
           pushToHome();
+        }).catch((err) => {
+          Router.push(
+            {
+              pathname: StripQuery(Router.asPath),
+              query: { error: err.message },
+            },
+          );
         });
       } else pushToHome();
     } else {

From 951716e2d7bab118fc3d5d226c61f460dc620328 Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Tue, 1 Sep 2020 13:56:16 -0600
Subject: [PATCH 56/62] #28 Fix error in stringUtil and handle # symbol

---
 src/utils/stringUtil.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/utils/stringUtil.js b/src/utils/stringUtil.js
index 0a8f9034..6215dc3c 100644
--- a/src/utils/stringUtil.js
+++ b/src/utils/stringUtil.js
@@ -1,4 +1,7 @@
-const StripQuery = (uri) => uri.substring(0, uri.lastIndexOf('?'));
+const StripQuery = (uri) => {
+  const stripped = (uri.lastIndexOf('?') !== -1) ? uri.substring(0, uri.lastIndexOf('?')) : uri;
+  return (stripped.lastIndexOf('#') !== -1) ? stripped.substring(0, stripped.lastIndexOf('#')) : stripped;
+};
 
 // eslint-disable-next-line import/prefer-default-export
 export { StripQuery };

From 00b2b72f5a6976104e3f3d4358f684d55f7562cd Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Tue, 1 Sep 2020 14:33:43 -0600
Subject: [PATCH 57/62] #28 Add DeleteInviteToken method

---
 src/components/Alerts/Alerts.js |  4 ++++
 src/pages/api/group/[id].js     |  8 ++++++++
 src/pages/api/invite/[token].js | 21 ++++++++++++++++++++
 src/pages/api/invite/index.js   |  2 +-
 src/pages/groups/[id]/edit.jsx  | 35 ++++++++++++++++++++++++++++++---
 src/utils/groupUtil.js          | 23 ++++++++++++++++++++++
 6 files changed, 89 insertions(+), 4 deletions(-)

diff --git a/src/components/Alerts/Alerts.js b/src/components/Alerts/Alerts.js
index f2c3127a..8e5d7fcb 100644
--- a/src/components/Alerts/Alerts.js
+++ b/src/components/Alerts/Alerts.js
@@ -44,6 +44,10 @@ function getData(alertName) {
       text: 'Group invite token created successfully.',
       variant: 'success',
     },
+    deletedToken: {
+      text: 'Group invite token deleted successfully.',
+      variant: 'warning',
+    },
   };
   return alerts[alertName];
 }
diff --git a/src/pages/api/group/[id].js b/src/pages/api/group/[id].js
index a1fdca27..e4b6738c 100644
--- a/src/pages/api/group/[id].js
+++ b/src/pages/api/group/[id].js
@@ -86,6 +86,10 @@ const handler = nc()
           ? { inviteToken: req.body.inviteToken }
           : {};
 
+        const inviteTokenToUnset = req.body.tokenToRemove
+          ? { inviteToken: req.body.tokenToRemove }
+          : {};
+
         const updateMethods = {};
         const fieldsToSet = {
           ...nameToUpdate,
@@ -94,6 +98,10 @@ const handler = nc()
           ...inviteTokenToUpdate,
         };
         if (Object.keys(fieldsToSet).length !== 0) updateMethods.$set = fieldsToSet;
+        const fieldsToUnset = {
+          ...inviteTokenToUnset,
+        };
+        if (Object.keys(fieldsToUnset).length !== 0) updateMethods.$unset = fieldsToUnset;
         const fieldsToPush = { ...memberToPush, ...documentToPush };
         if (Object.keys(fieldsToPush).length !== 0) updateMethods.$push = fieldsToPush;
         const fieldsToPull = { ...memberToPull, ...documentToPull };
diff --git a/src/pages/api/invite/[token].js b/src/pages/api/invite/[token].js
index 17d07415..5fa6c5a1 100644
--- a/src/pages/api/invite/[token].js
+++ b/src/pages/api/invite/[token].js
@@ -1,6 +1,9 @@
 import nc from 'next-connect';
+import jwt from 'next-auth/jwt';
 import middleware from '../../../middlewares/middleware';
 
+const secret = process.env.AUTH_SECRET;
+
 const handler = nc()
   .use(middleware)
   .get(
@@ -18,6 +21,24 @@ const handler = nc()
           },
         );
     },
+  ).delete(
+    async (req, res) => {
+      const jwtTok = await jwt.getToken({ req, secret });
+      if (jwtTok && jwtTok.exp > 0) {
+        const { token } = req.query;
+        await req.db
+          .collection('inviteTokens')
+          .findOneAndDelete(
+            {
+              token,
+            },
+            (err, doc) => {
+              if (err) throw err;
+              res.status(200).json(doc);
+            },
+          );
+      } else res.status(403).json({ error: '403 Invalid or expired token' });
+    },
   );
 
 export default handler;
diff --git a/src/pages/api/invite/index.js b/src/pages/api/invite/index.js
index 5d688b99..67f10f8a 100644
--- a/src/pages/api/invite/index.js
+++ b/src/pages/api/invite/index.js
@@ -13,7 +13,7 @@ const handler = nc()
       if (jwtTok && jwtTok.exp > 0) {
         const createdAt = new Date(Date.now());
         const updatedAt = createdAt;
-        const token = cryptoRandomString({ length: 32, type: 'base64' });
+        const token = cryptoRandomString({ length: 32, type: 'hex' });
         const { group } = req.body;
         await req.db
           .collection('inviteTokens')
diff --git a/src/pages/groups/[id]/edit.jsx b/src/pages/groups/[id]/edit.jsx
index fcd9950d..078b3b7d 100644
--- a/src/pages/groups/[id]/edit.jsx
+++ b/src/pages/groups/[id]/edit.jsx
@@ -30,6 +30,7 @@ import {
   RemoveUserFromGroup,
   RenameGroup,
   GenerateInviteToken,
+  DeleteInviteToken,
 } from '../../../utils/groupUtil';
 
 
@@ -220,7 +221,33 @@ const EditGroup = ({ group }) => {
                       <>
                         <p>
                           Send this invite link to registered or
-                          new users to add them to the group.
+                          new users to add them to the group.  (If the link is not working,
+                          you can
+                          {' '}
+                          <button
+                            type="button"
+                            onClick={() => {
+                              DeleteInviteToken(group).then(() => {
+                                router.push(
+                                  {
+                                    pathname: StripQuery(router.asPath),
+                                    query: { alert: 'deletedToken' },
+                                  },
+                                );
+                              }).catch((err) => {
+                                router.push(
+                                  {
+                                    pathname: StripQuery(router.asPath),
+                                    query: { error: err.message },
+                                  },
+                                );
+                              });
+                            }}
+                          >
+                            click here to remove it
+                          </button>
+                          , then generate a new one.
+                          The old link will no longer work.)
                         </p>
                         <InputGroup>
                           <FormControl
@@ -386,14 +413,16 @@ export async function getServerSideProps(context) {
     const {
       name,
       members,
+      inviteToken,
     } = foundGroup;
     const group = {
       id: context.params.id,
       name,
       members,
     };
-    group.inviteUrl = foundGroup.inviteToken
-      ? `${process.env.SITE}/auth/email-signin?callbackUrl=${process.env.SITE}&groupToken=${foundGroup.inviteToken}`
+    group.inviteToken = inviteToken || null;
+    group.inviteUrl = inviteToken
+      ? `${process.env.SITE}/auth/email-signin?callbackUrl=${process.env.SITE}&groupToken=${inviteToken}`
       : '';
     return {
       props: { group },
diff --git a/src/utils/groupUtil.js b/src/utils/groupUtil.js
index f150ab00..80b8a985 100644
--- a/src/utils/groupUtil.js
+++ b/src/utils/groupUtil.js
@@ -293,12 +293,35 @@ const GenerateInviteToken = async (group) => {
   } return Promise.reject(Error(`Unable to generate token: error ${res.status} received from server`));
 };
 
+const DeleteInviteToken = async (group) => {
+  const { inviteToken } = group;
+  const url = `/api/invite/${inviteToken}`;
+  const res = await fetch(url, {
+    method: 'DELETE',
+  });
+  if (res.status === 200) {
+    const groupUrl = `/api/group/${group.id}`;
+    const body = { tokenToRemove: inviteToken };
+    const groupRes = await fetch(groupUrl, {
+      method: 'PATCH',
+      body: JSON.stringify(body),
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+    if (groupRes.status === 200) {
+      return Promise.resolve(groupRes.json());
+    } return Promise.reject(Error(`Unable to remove token from group: error ${groupRes.status} received from server`));
+  } return Promise.reject(Error(`Unable to delete token: error ${res.status} received from server`));
+};
+
 export {
   AddGroupToUser,
   AddUserToGroup,
   ChangeUserRole,
   DeleteGroup,
   DeleteGroupFromId,
+  DeleteInviteToken,
   GenerateInviteToken,
   RemoveUserFromGroup,
   RenameGroup,

From 551b1f25fb6e0e6ef57573006374b52b42328bca Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Tue, 1 Sep 2020 15:13:05 -0600
Subject: [PATCH 58/62] #28 Improve styling for delete invite token button

---
 src/pages/groups/[id]/edit.jsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/pages/groups/[id]/edit.jsx b/src/pages/groups/[id]/edit.jsx
index 078b3b7d..3705c044 100644
--- a/src/pages/groups/[id]/edit.jsx
+++ b/src/pages/groups/[id]/edit.jsx
@@ -226,6 +226,9 @@ const EditGroup = ({ group }) => {
                           {' '}
                           <button
                             type="button"
+                            className="btn btn-link"
+                            size="sm"
+                            style={{ padding: 0 }}
                             onClick={() => {
                               DeleteInviteToken(group).then(() => {
                                 router.push(

From d7f774c64dd08dff983fa13c30d6c1cbcbbdcc53 Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Tue, 1 Sep 2020 16:01:44 -0600
Subject: [PATCH 59/62] #28 Allow member/manager to leave group - Also change
 some alerts to warning style

---
 src/components/Alerts/Alerts.js |  8 ++-
 src/pages/groups/[id]/edit.jsx  | 16 +++++-
 src/pages/groups/[id]/index.jsx | 86 ++++++++++++++++++++++-----------
 src/pages/groups/index.jsx      | 45 ++++++++++++++---
 src/utils/groupUtil.js          | 10 +---
 5 files changed, 116 insertions(+), 49 deletions(-)

diff --git a/src/components/Alerts/Alerts.js b/src/components/Alerts/Alerts.js
index 8e5d7fcb..7eed4f1b 100644
--- a/src/components/Alerts/Alerts.js
+++ b/src/components/Alerts/Alerts.js
@@ -18,7 +18,7 @@ function getData(alertName) {
     },
     deletedGroup: {
       text: 'You have successfully deleted the group.',
-      variant: 'success',
+      variant: 'warning',
     },
     changeUserRole: {
       text: 'User\'s role changed successfully.',
@@ -26,7 +26,7 @@ function getData(alertName) {
     },
     removeUser: {
       text: 'User successfully removed from group.',
-      variant: 'success',
+      variant: 'warning',
     },
     addUser: {
       text: 'User successfully added to group.',
@@ -40,6 +40,10 @@ function getData(alertName) {
       text: 'Group successfully joined.',
       variant: 'success',
     },
+    leftGroup: {
+      text: 'You have successfully left the group.',
+      variant: 'warning',
+    },
     createdToken: {
       text: 'Group invite token created successfully.',
       variant: 'success',
diff --git a/src/pages/groups/[id]/edit.jsx b/src/pages/groups/[id]/edit.jsx
index 3705c044..1c115b9c 100644
--- a/src/pages/groups/[id]/edit.jsx
+++ b/src/pages/groups/[id]/edit.jsx
@@ -189,7 +189,21 @@ const EditGroup = ({ group }) => {
                                 variant="outline-danger"
                                 className="btn-sm"
                                 type="button"
-                                onClick={() => RemoveUserFromGroup(group, member)}
+                                onClick={() => RemoveUserFromGroup(group, member).then(() => {
+                                  router.push({
+                                    pathname: `/groups/${group.id}/edit`,
+                                    query: {
+                                      alert: 'removeUser',
+                                    },
+                                  });
+                                }).catch((err) => {
+                                  router.push({
+                                    pathname: `/groups/${group.id}/edit`,
+                                    query: {
+                                      error: err.message,
+                                    },
+                                  });
+                                })}
                               >
                                 Remove
                               </Button>
diff --git a/src/pages/groups/[id]/index.jsx b/src/pages/groups/[id]/index.jsx
index 21b01c9d..ffde5aa2 100644
--- a/src/pages/groups/[id]/index.jsx
+++ b/src/pages/groups/[id]/index.jsx
@@ -1,17 +1,19 @@
 import { useSession } from 'next-auth/client';
 import { useState } from 'react';
+import Router from 'next/router';
 import {
   Button, ButtonGroup, Card, Table,
 } from 'react-bootstrap';
 import {
-  PencilSquare, TrashFill,
+  PencilSquare, TrashFill, BoxArrowRight,
 } from 'react-bootstrap-icons';
 import Layout from '../../../components/Layout';
 import LoadingSpinner from '../../../components/LoadingSpinner';
 import ConfirmationDialog from '../../../components/ConfirmationDialog';
 import GroupRoleSummaries from '../../../components/GroupRoleSummaries';
 import GroupRoleBadge from '../../../components/GroupRoleBadge';
-import { DeleteGroup } from '../../../utils/groupUtil';
+import { DeleteGroup, RemoveUserFromGroup } from '../../../utils/groupUtil';
+import { GetUserByEmail } from '../../../utils/userUtil';
 
 const ViewGroup = ({ group }) => {
   const [session, loading] = useSession();
@@ -52,37 +54,63 @@ const ViewGroup = ({ group }) => {
                   ))}
                 </tbody>
               </Table>
-              {(roleInGroup(session) === 'owner' || roleInGroup(session) === 'manager') && (
-                <ButtonGroup>
+              <ButtonGroup>
+                {(roleInGroup(session) === 'owner' || roleInGroup(session) === 'manager') && (
                   <Button variant="outline-primary" href={`${group.id}/edit`}>
                     <PencilSquare className="align-text-bottom mr-1" />
                     Manage this group
                   </Button>
-                  {roleInGroup(session) === 'owner' && (
-                    <>
-                      <Button
-                        variant="outline-danger"
-                        type="button"
-                        onClick={handleShowModal}
-                      >
-                        <TrashFill className="align-text-bottom mr-1" />
-                        Delete this group
-                      </Button>
-                      <ConfirmationDialog
-                        value={group}
-                        type="deleteGroup"
-                        handleCloseModal={handleCloseModal}
-                        show={showModal}
-                        onClick={(event) => {
-                          event.target.setAttribute('disabled', 'true');
-                          DeleteGroup(group);
-                          handleCloseModal();
-                        }}
-                      />
-                    </>
-                  )}
-                </ButtonGroup>
-              )}
+                )}
+                {(roleInGroup(session) === 'member' || roleInGroup(session) === 'manager') && (
+                  <Button
+                    variant="outline-danger"
+                    onClick={async () => {
+                      const user = await GetUserByEmail(session.user.email);
+                      RemoveUserFromGroup(group, user).then(() => {
+                        Router.push({
+                          pathname: '/groups',
+                          query: {
+                            alert: 'leftGroup',
+                          },
+                        });
+                      }).catch((err) => {
+                        Router.push({
+                          pathname: `/groups/${group.id}`,
+                          query: {
+                            error: err.message,
+                          },
+                        });
+                      });
+                    }}
+                  >
+                    <BoxArrowRight className="align-text-bottom mr-1" />
+                    Leave this group
+                  </Button>
+                )}
+                {roleInGroup(session) === 'owner' && (
+                <>
+                  <Button
+                    variant="outline-danger"
+                    type="button"
+                    onClick={handleShowModal}
+                  >
+                    <TrashFill className="align-text-bottom mr-1" />
+                    Delete this group
+                  </Button>
+                  <ConfirmationDialog
+                    value={group}
+                    type="deleteGroup"
+                    handleCloseModal={handleCloseModal}
+                    show={showModal}
+                    onClick={(event) => {
+                      event.target.setAttribute('disabled', 'true');
+                      DeleteGroup(group);
+                      handleCloseModal();
+                    }}
+                  />
+                </>
+                )}
+              </ButtonGroup>
             </Card.Body>
           </>
         )}
diff --git a/src/pages/groups/index.jsx b/src/pages/groups/index.jsx
index 85f82734..9f3b98ef 100644
--- a/src/pages/groups/index.jsx
+++ b/src/pages/groups/index.jsx
@@ -6,15 +6,17 @@ import {
   Button, ButtonGroup, Card, Table,
 } from 'react-bootstrap';
 import {
-  PencilSquare, TrashFill, Plus,
+  PencilSquare, TrashFill, Plus, BoxArrowRight,
 } from 'react-bootstrap-icons';
+import Router from 'next/router';
 import Layout from '../../components/Layout';
 import LoadingSpinner from '../../components/LoadingSpinner';
 import ConfirmationDialog from '../../components/ConfirmationDialog';
 import GroupRoleSummaries from '../../components/GroupRoleSummaries';
 import GroupRoleBadge from '../../components/GroupRoleBadge';
 import { FirstNameLastInitial } from '../../utils/nameUtil';
-import { DeleteGroupFromId } from '../../utils/groupUtil';
+import { DeleteGroupFromId, RemoveUserFromGroup } from '../../utils/groupUtil';
+import { GetUserByEmail } from '../../utils/userUtil';
 
 const GroupList = ({ query }) => {
   const [session, loading] = useSession();
@@ -65,12 +67,40 @@ const GroupList = ({ query }) => {
                           <td>{FirstNameLastInitial(value.ownerName)}</td>
                           <td>{value.memberCount}</td>
                           <td>
-                            {(value.role === 'owner' || value.role === 'manager') && (
                             <ButtonGroup>
-                              <Button variant="outline-primary" href={`/groups/${value.id}/edit`}>
-                                <PencilSquare className="align-text-bottom mr-1" />
-                                Manage
-                              </Button>
+                              {(value.role === 'owner' || value.role === 'manager') && (
+                                <Button variant="outline-primary" href={`/groups/${value.id}/edit`}>
+                                  <PencilSquare className="align-text-bottom mr-1" />
+                                  Manage
+                                </Button>
+                              )}
+                              {(value.role === 'member' || value.role === 'manager') && (
+                                <Button
+                                  variant="outline-danger"
+                                  onClick={async () => {
+                                    const user = await GetUserByEmail(session.user.email);
+                                    RemoveUserFromGroup(value, user).then(() => {
+                                      Router.push({
+                                        pathname: '/groups',
+                                        query: {
+                                          alert: 'leftGroup',
+                                          deletedGroupId: value.id,
+                                        },
+                                      });
+                                    }).catch((err) => {
+                                      Router.push({
+                                        pathname: '/groups',
+                                        query: {
+                                          error: err.message,
+                                        },
+                                      });
+                                    });
+                                  }}
+                                >
+                                  <BoxArrowRight className="align-text-bottom mr-1" />
+                                  Leave
+                                </Button>
+                              )}
                               {value.role === 'owner' && (
                                 <>
                                   <Button
@@ -96,7 +126,6 @@ const GroupList = ({ query }) => {
                                 </>
                               )}
                             </ButtonGroup>
-                            )}
                           </td>
                         </tr>
                       );
diff --git a/src/utils/groupUtil.js b/src/utils/groupUtil.js
index 80b8a985..16b0d5df 100644
--- a/src/utils/groupUtil.js
+++ b/src/utils/groupUtil.js
@@ -107,7 +107,7 @@ const AddUserToGroup = async (group, email, fromGroupEditPage) => {
   } return Promise.reject(Error(`Unable to add user with email ${email}: ${user.error}.`));
 };
 
-const RemoveGroupFromUser = async (group, user, groupDeletion) => {
+const RemoveGroupFromUser = async (group, user) => {
   const removedGroupId = group.id;
   const url = `/api/user/${user.id}`;
   const body = { removedGroupId };
@@ -119,14 +119,6 @@ const RemoveGroupFromUser = async (group, user, groupDeletion) => {
     },
   });
   if (res.status === 200) {
-    if (!groupDeletion) {
-      Router.push({
-        pathname: `/groups/${group.id}/edit`,
-        query: {
-          alert: 'removeUser',
-        },
-      });
-    }
     return Promise.resolve(res.json());
   } return Promise.reject(Error(`Unable to remove group from user: error ${res.status} received from server`));
 };

From 252d92af352211edb7405c394fd5825fd8308ade Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Tue, 1 Sep 2020 17:03:32 -0600
Subject: [PATCH 60/62] #28 Move routing + error handling out of groupUtil

---
 src/pages/auth/email-signin.js  |  2 +-
 src/pages/groups/[id]/edit.jsx  | 78 ++++++++++++++++++++++++++++++---
 src/pages/groups/[id]/index.jsx | 21 +++++++--
 src/pages/groups/index.jsx      | 21 +++++++--
 src/pages/groups/new.jsx        | 15 ++++++-
 src/pages/index.jsx             |  2 +-
 src/pages/user/newuser.jsx      |  2 +-
 src/utils/groupUtil.js          | 74 ++++++++++---------------------
 8 files changed, 147 insertions(+), 68 deletions(-)

diff --git a/src/pages/auth/email-signin.js b/src/pages/auth/email-signin.js
index b2585e56..c5e96bfa 100644
--- a/src/pages/auth/email-signin.js
+++ b/src/pages/auth/email-signin.js
@@ -44,7 +44,7 @@ const SignIn = ({ props }) => {
             <Button
               className="mt-3"
               onClick={() => {
-                AddUserToGroup({ id: groupId }, session.user.email, false).then(() => {
+                AddUserToGroup({ id: groupId }, session.user.email).then(() => {
                   Router.push({
                     pathname: '/',
                     query: { alert: 'joinedGroup' },
diff --git a/src/pages/groups/[id]/edit.jsx b/src/pages/groups/[id]/edit.jsx
index 1c115b9c..67c0d554 100644
--- a/src/pages/groups/[id]/edit.jsx
+++ b/src/pages/groups/[id]/edit.jsx
@@ -95,7 +95,17 @@ const EditGroup = ({ group }) => {
                   })}
                   onSubmit={(values, actions) => {
                     setTimeout(() => {
-                      RenameGroup(group, values.groupName);
+                      RenameGroup(group, values.groupName).then(() => {
+                        router.push({
+                          pathname: `/groups/${group.id}/edit`,
+                          query: { alert: 'renameGroup' },
+                        });
+                      }).catch((err) => {
+                        router.push({
+                          pathname: `/groups/${group.id}/edit`,
+                          query: { error: err.message },
+                        });
+                      });
                       actions.setSubmitting(false);
                     }, 1000);
                   }}
@@ -169,13 +179,37 @@ const EditGroup = ({ group }) => {
                               <Dropdown.Menu>
                                 <Dropdown.Item
                                   disabled={member.role === 'member'}
-                                  onClick={() => { ChangeUserRole(group, member, 'member'); }}
+                                  onClick={() => {
+                                    ChangeUserRole(group, member, 'member').then(() => {
+                                      router.push({
+                                        pathname: `/groups/${group.id}/edit`,
+                                        query: { alert: 'changeUserRole' },
+                                      });
+                                    }).catch((err) => {
+                                      router.push({
+                                        pathname: `/groups/${group.id}/edit`,
+                                        query: { error: err.message },
+                                      });
+                                    });
+                                  }}
                                 >
                                   member
                                 </Dropdown.Item>
                                 <Dropdown.Item
                                   disabled={member.role === 'manager'}
-                                  onClick={() => { ChangeUserRole(group, member, 'manager'); }}
+                                  onClick={() => {
+                                    ChangeUserRole(group, member, 'manager').then(() => {
+                                      router.push({
+                                        pathname: `/groups/${group.id}/edit`,
+                                        query: { alert: 'changeUserRole' },
+                                      });
+                                    }).catch((err) => {
+                                      router.push({
+                                        pathname: `/groups/${group.id}/edit`,
+                                        query: { error: err.message },
+                                      });
+                                    });
+                                  }}
                                 >
                                   manager
                                 </Dropdown.Item>
@@ -224,7 +258,17 @@ const EditGroup = ({ group }) => {
                           variant="outline-secondary"
                           onClick={(event) => {
                             event.target.setAttribute('disabled', 'true');
-                            GenerateInviteToken(group);
+                            GenerateInviteToken(group).then(() => {
+                              router.push({
+                                pathname: `/groups/${group.id}/edit`,
+                                query: { alert: 'createdToken' },
+                              });
+                            }).catch((err) => {
+                              router.push({
+                                pathname: `/groups/${group.id}/edit`,
+                                query: { error: err.message },
+                              });
+                            });
                           }}
                         >
                           Generate
@@ -319,10 +363,15 @@ const EditGroup = ({ group }) => {
                       })}
                       onSubmit={(values, actions) => {
                         setTimeout(() => {
-                          AddUserToGroup(group, values.email, true).catch((err) => {
+                          AddUserToGroup(group, values.email).then(() => {
+                            router.push({
+                              pathname: `/groups/${group.id}/edit`,
+                              query: { alert: 'addUser' },
+                            });
+                          }).catch((err) => {
                             router.push(
                               {
-                                pathname: StripQuery(router.asPath),
+                                pathname: `/groups/${group.id}/edit`,
                                 query: { error: err.message },
                               },
                             );
@@ -396,7 +445,22 @@ const EditGroup = ({ group }) => {
                         show={state.showModal}
                         onClick={(event) => {
                           event.target.setAttribute('disabled', 'true');
-                          DeleteGroup(group);
+                          DeleteGroup(group).then(() => {
+                            router.push({
+                              pathname: '/groups',
+                              query: {
+                                alert: 'deletedGroup',
+                                deletedGroupId: group.id,
+                              },
+                            }, '/groups');
+                          }).catch((err) => {
+                            router.push({
+                              pathname: '/groups',
+                              query: {
+                                error: err.message,
+                              },
+                            }, '/groups');
+                          });
                           handleCloseModal();
                         }}
                       />
diff --git a/src/pages/groups/[id]/index.jsx b/src/pages/groups/[id]/index.jsx
index ffde5aa2..25f6a976 100644
--- a/src/pages/groups/[id]/index.jsx
+++ b/src/pages/groups/[id]/index.jsx
@@ -72,14 +72,14 @@ const ViewGroup = ({ group }) => {
                           query: {
                             alert: 'leftGroup',
                           },
-                        });
+                        }, '/groups');
                       }).catch((err) => {
                         Router.push({
                           pathname: `/groups/${group.id}`,
                           query: {
                             error: err.message,
                           },
-                        });
+                        }, '/groups');
                       });
                     }}
                   >
@@ -104,7 +104,22 @@ const ViewGroup = ({ group }) => {
                     show={showModal}
                     onClick={(event) => {
                       event.target.setAttribute('disabled', 'true');
-                      DeleteGroup(group);
+                      DeleteGroup(group).then(() => {
+                        Router.push({
+                          pathname: '/groups',
+                          query: {
+                            alert: 'deletedGroup',
+                            deletedGroupId: group.id,
+                          },
+                        }, '/groups');
+                      }).catch((err) => {
+                        Router.push({
+                          pathname: '/groups',
+                          query: {
+                            error: err.message,
+                          },
+                        }, '/groups');
+                      });
                       handleCloseModal();
                     }}
                   />
diff --git a/src/pages/groups/index.jsx b/src/pages/groups/index.jsx
index 9f3b98ef..b0261935 100644
--- a/src/pages/groups/index.jsx
+++ b/src/pages/groups/index.jsx
@@ -86,14 +86,14 @@ const GroupList = ({ query }) => {
                                           alert: 'leftGroup',
                                           deletedGroupId: value.id,
                                         },
-                                      });
+                                      }, '/groups');
                                     }).catch((err) => {
                                       Router.push({
                                         pathname: '/groups',
                                         query: {
                                           error: err.message,
                                         },
-                                      });
+                                      }, '/groups');
                                     });
                                   }}
                                 >
@@ -119,7 +119,22 @@ const GroupList = ({ query }) => {
                                     show={showModal === value.id}
                                     onClick={(event) => {
                                       event.target.setAttribute('disabled', 'true');
-                                      DeleteGroupFromId(value.id);
+                                      DeleteGroupFromId(value.id).then(() => {
+                                        Router.push({
+                                          pathname: '/groups',
+                                          query: {
+                                            alert: 'deletedGroup',
+                                            deletedGroupId: value.id,
+                                          },
+                                        }, '/groups');
+                                      }).catch((err) => {
+                                        Router.push({
+                                          pathname: '/groups',
+                                          query: {
+                                            error: err.message,
+                                          },
+                                        }, '/groups');
+                                      });
                                       handleCloseModal();
                                     }}
                                   />
diff --git a/src/pages/groups/new.jsx b/src/pages/groups/new.jsx
index 691e6d2a..503d3f14 100644
--- a/src/pages/groups/new.jsx
+++ b/src/pages/groups/new.jsx
@@ -5,6 +5,7 @@ import {
   Button, Card, Col, Form, Row,
 } from 'react-bootstrap';
 import * as yup from 'yup';
+import Router from 'next/router';
 import { AddGroupToUser } from '../../utils/groupUtil';
 import Layout from '../../components/Layout';
 import LoadingSpinner from '../../components/LoadingSpinner';
@@ -34,7 +35,12 @@ const NewGroup = () => {
       const user = {
         id: result.ops[0].members[0].id,
       };
-      return AddGroupToUser(group, user, true, false);
+      return AddGroupToUser(group, user).then(() => {
+        Router.push({
+          pathname: `/groups/${group.id}/edit`,
+          query: { alert: 'newGroup' },
+        });
+      });
     }
     return Promise.reject(Error(`Unable to create group: error ${res.status} received from server`));
   };
@@ -57,7 +63,12 @@ const NewGroup = () => {
               <Formik
                 onSubmit={(values, actions) => {
                   setTimeout(() => {
-                    createGroup(values);
+                    createGroup(values).catch((err) => {
+                      Router.push({
+                        pathname: '/groups',
+                        query: { error: err.message },
+                      }, '/groups');
+                    });
                     actions.setSubmitting(false);
                   }, 1000);
                 }}
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index a3572616..442cbbed 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -24,7 +24,7 @@ export default function Home({ props }) {
                 destroyCookie(null, 'ans_grouptoken', {
                   path: '/',
                 });
-                AddUserToGroup({ id: groupId }, session.user.email, false).then(() => {
+                AddUserToGroup({ id: groupId }, session.user.email).then(() => {
                   Router.push({
                     pathname: '/',
                     query: { alert: 'joinedGroup' },
diff --git a/src/pages/user/newuser.jsx b/src/pages/user/newuser.jsx
index c50b7a96..c86d228f 100644
--- a/src/pages/user/newuser.jsx
+++ b/src/pages/user/newuser.jsx
@@ -51,7 +51,7 @@ const NewUser = ({ groupId }) => {
         destroyCookie(null, 'ans_grouptoken', {
           path: '/',
         });
-        AddUserToGroup({ id: groupId }, session.user.email, false).then(() => {
+        AddUserToGroup({ id: groupId }, session.user.email).then(() => {
           pushToHome();
         }).catch((err) => {
           Router.push(
diff --git a/src/utils/groupUtil.js b/src/utils/groupUtil.js
index 16b0d5df..cf2e873f 100644
--- a/src/utils/groupUtil.js
+++ b/src/utils/groupUtil.js
@@ -1,5 +1,4 @@
 import fetch from 'unfetch';
-import Router from 'next/router';
 import { GetUserByEmail } from './userUtil';
 
 const UpdateMemberCounts = async (group) => {
@@ -21,13 +20,15 @@ const UpdateMemberCounts = async (group) => {
           'Content-Type': 'application/json',
         },
       });
-      if (res.status !== 200) { return Promise.reject(Error(`Unable to update member counts: error ${res.status} received from server`)); }
-      return Promise.resolve(res.json());
+      if (res.status === 200) {
+        const response = res.json();
+        return Promise.resolve(response);
+      } return Promise.reject(Error(`Unable to update member counts: error ${res.status} received from server`));
     }),
   );
 };
 
-const AddGroupToUser = async (group, user, isNewGroup, existingUser) => {
+const AddGroupToUser = async (group, user) => {
   const url = `/api/user/${user.id}`;
   const {
     id,
@@ -53,21 +54,13 @@ const AddGroupToUser = async (group, user, isNewGroup, existingUser) => {
     },
   });
   if (res.status === 200) {
-    const result = await res.json();
-    let query = { alert: 'addUser' };
-    if (isNewGroup) query = { alert: 'newGroup' };
-    if (isNewGroup || existingUser) {
-      Router.push({
-        pathname: `/groups/${group.id}/edit`,
-        query,
-      });
-    }
-    return Promise.resolve(result);
+    const response = await res.json();
+    return Promise.resolve(response);
   }
   return Promise.reject(Error(`Unable to add group to user: error ${res.status} received from server`));
 };
 
-const AddUserToGroup = async (group, email, fromGroupEditPage) => {
+const AddUserToGroup = async (group, email) => {
   const user = await GetUserByEmail(email);
   let alreadyInGroup = false;
   alreadyInGroup = user.groups.some((userGroup) => (userGroup.id === group.id));
@@ -91,18 +84,18 @@ const AddUserToGroup = async (group, email, fromGroupEditPage) => {
       },
     });
     if (res.status === 200) {
-      const result = await res.json();
-      const memberCount = result.value.members.length;
-      const ownerName = result.value.members.filter((member) => member.role === 'owner')[0].name;
+      const response = await res.json();
+      const memberCount = response.value.members.length;
+      const ownerName = response.value.members.filter((member) => member.role === 'owner')[0].name;
       const groupToAdd = {
         id: group.id,
-        name: result.value.name,
+        name: response.value.name,
         memberCount,
         ownerName,
         role: 'member',
       };
-      return AddGroupToUser(groupToAdd, user, false, fromGroupEditPage)
-        .then(UpdateMemberCounts(result.value));
+      return AddGroupToUser(groupToAdd, user, false)
+        .then(UpdateMemberCounts(response.value));
     } return Promise.reject(Error(`Unable to add user to group: error ${res.status} received from server`));
   } return Promise.reject(Error(`Unable to add user with email ${email}: ${user.error}.`));
 };
@@ -119,7 +112,8 @@ const RemoveGroupFromUser = async (group, user) => {
     },
   });
   if (res.status === 200) {
-    return Promise.resolve(res.json());
+    const response = res.json();
+    return Promise.resolve(response);
   } return Promise.reject(Error(`Unable to remove group from user: error ${res.status} received from server`));
 };
 
@@ -135,8 +129,8 @@ const RemoveUserFromGroup = async (group, user) => {
     },
   });
   if (res.status === 200) {
-    const result = await res.json();
-    return RemoveGroupFromUser(group, user).then(UpdateMemberCounts(result.value));
+    const response = await res.json();
+    return RemoveGroupFromUser(group, user).then(UpdateMemberCounts(response.value));
   } return Promise.reject(Error(`Unable to remove user from group: error ${res.status} received from server`));
 };
 
@@ -150,13 +144,6 @@ const DeleteGroup = async (group) => {
     },
   });
   if (res.status === 200) {
-    Router.push({
-      pathname: '/groups',
-      query: {
-        alert: 'deletedGroup',
-        deletedGroupId: group.id,
-      },
-    }, '/groups');
     return Promise.all(
       members.map(async (member) => RemoveGroupFromUser(group, member, true)),
     );
@@ -172,8 +159,8 @@ const DeleteGroupFromId = async (id) => {
     },
   });
   if (res.status === 200) {
-    const result = await res.json();
-    const group = { id, name: result.name, members: result.members };
+    const response = await res.json();
+    const group = { id, name: response.name, members: response.members };
     return DeleteGroup(group);
   } return Promise.reject(Error(`Unable to find group by ID: error ${res.status} received from server`));
 };
@@ -200,11 +187,6 @@ const ChangeUserRole = async (group, member, role) => {
     });
     if (memberRes.status === 200) {
       const response = memberRes.json();
-      const query = { alert: 'changeUserRole' };
-      Router.push({
-        pathname: `/groups/${group.id}/edit`,
-        query,
-      });
       return Promise.resolve(response);
     } return Promise.reject(Error(`Unable to update user: error ${memberRes.status} received from server`));
   } return Promise.reject(Error(`Unable to change user's role: error ${res.status} received from server`));
@@ -238,11 +220,6 @@ const RenameGroup = async (group, newName) => {
     },
   });
   if (res.status === 200) {
-    const query = { alert: 'renameGroup' };
-    Router.push({
-      pathname: `/groups/${group.id}/edit`,
-      query,
-    });
     return Promise.all(
       members.map(async (member) => RenameGroupInMember(group, member, newName)),
     );
@@ -275,12 +252,8 @@ const GenerateInviteToken = async (group) => {
       },
     });
     if (groupRes.status === 200) {
-      const query = { alert: 'createdToken' };
-      Router.push({
-        pathname: `/groups/${id}/edit`,
-        query,
-      });
-      return Promise.resolve(response);
+      const groupResponse = groupRes.json();
+      return Promise.resolve(groupResponse);
     } return Promise.reject(Error(`Unable to add token to group: error ${res.status} received from server`));
   } return Promise.reject(Error(`Unable to generate token: error ${res.status} received from server`));
 };
@@ -302,7 +275,8 @@ const DeleteInviteToken = async (group) => {
       },
     });
     if (groupRes.status === 200) {
-      return Promise.resolve(groupRes.json());
+      const groupResponse = groupRes.json();
+      return Promise.resolve(groupResponse);
     } return Promise.reject(Error(`Unable to remove token from group: error ${groupRes.status} received from server`));
   } return Promise.reject(Error(`Unable to delete token: error ${res.status} received from server`));
 };

From 3e0da68de11320fa2db5c46277c2eae31f491042 Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Tue, 1 Sep 2020 17:10:11 -0600
Subject: [PATCH 61/62] #28 Fix broken test

---
 src/__tests__/index.test.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/__tests__/index.test.js b/src/__tests__/index.test.js
index 82b5e8e3..8ca39608 100644
--- a/src/__tests__/index.test.js
+++ b/src/__tests__/index.test.js
@@ -5,7 +5,7 @@ import Index from '../pages/index';
 test('renders header', async () => {
   let navElement;
   act(() => {
-    const { getAllByRole } = render(<Index />);
+    const { getAllByRole } = render(<Index props={{ groupId: '' }} />);
     [navElement] = getAllByRole('navigation');
   });
   await wait(() => {
@@ -16,7 +16,7 @@ test('renders header', async () => {
 test('renders footer', async () => {
   let footerElem;
   act(() => {
-    const { getByRole } = render(<Index />);
+    const { getByRole } = render(<Index props={{ groupId: '' }} />);
     footerElem = getByRole('contentinfo');
   });
   await wait(() => {

From 879e7fc3a9223945c33e7a911b8f893f16b6ec6b Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Tue, 1 Sep 2020 17:49:53 -0600
Subject: [PATCH 62/62] #28 Write tests for groups UI

---
 src/__mocks__/next-auth/client.js       |  6 ++--
 src/__tests__/groups/[id]/edit.test.js  | 40 +++++++++++++++++++++++++
 src/__tests__/groups/[id]/index.test.js | 39 ++++++++++++++++++++++++
 src/__tests__/groups/index.test.js      |  4 +--
 src/pages/groups/[id]/edit.jsx          |  5 ++--
 src/pages/groups/[id]/index.jsx         |  6 ++--
 6 files changed, 91 insertions(+), 9 deletions(-)
 create mode 100644 src/__tests__/groups/[id]/edit.test.js
 create mode 100644 src/__tests__/groups/[id]/index.test.js

diff --git a/src/__mocks__/next-auth/client.js b/src/__mocks__/next-auth/client.js
index 8afa03a2..02702eb5 100644
--- a/src/__mocks__/next-auth/client.js
+++ b/src/__mocks__/next-auth/client.js
@@ -6,9 +6,11 @@ function useSession() {
       user: {
         name: 'Test User',
         email: 'test@email.com',
-        groups: [],
+        groups: [{
+          id: 'abcd1234', name: 'Test Group', ownerName: 'Test User', memberCount: 2, role: 'owner',
+        }],
       },
-      expires: '2081-10-05T14:48:00.000',
+      expires: '2881-10-05T14:48:00.000',
     },
   ];
 }
diff --git a/src/__tests__/groups/[id]/edit.test.js b/src/__tests__/groups/[id]/edit.test.js
new file mode 100644
index 00000000..664b6499
--- /dev/null
+++ b/src/__tests__/groups/[id]/edit.test.js
@@ -0,0 +1,40 @@
+import { render, wait } from '@testing-library/react';
+import EditGroup from '../../../pages/groups/[id]/edit';
+
+describe('Group Edit Page', () => {
+  const group = {
+    id: 'abcd1234',
+    name: 'Test Group',
+    members: [{
+      id: '1',
+      email: 'test@email.com',
+      name: 'Test User',
+      role: 'owner',
+    }],
+    inviteUrl: '',
+  };
+
+  it('renders group card', async () => {
+    const { getByTestId } = render(<EditGroup group={group} />);
+    const cardBody = getByTestId('groupedit-card-body');
+    await wait(() => {
+      expect(cardBody).toBeInTheDocument();
+    });
+  });
+
+  it('renders members table', async () => {
+    const { getByTestId } = render(<EditGroup group={group} />);
+    const membersTable = getByTestId('groupedit-members-table');
+    await wait(() => {
+      expect(membersTable).toBeInTheDocument();
+    });
+  });
+
+  it('renders delete button', async () => {
+    const { getByTestId } = render(<EditGroup group={group} />);
+    const deleteButton = getByTestId('groupedit-delete-button');
+    await wait(() => {
+      expect(deleteButton).toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/__tests__/groups/[id]/index.test.js b/src/__tests__/groups/[id]/index.test.js
new file mode 100644
index 00000000..6b441ad1
--- /dev/null
+++ b/src/__tests__/groups/[id]/index.test.js
@@ -0,0 +1,39 @@
+import { render, wait } from '@testing-library/react';
+import ViewGroup from '../../../pages/groups/[id]/index';
+
+describe('Group View Page', () => {
+  const group = {
+    id: 'abcd1234',
+    name: 'Test Group',
+    members: [{
+      id: '1',
+      email: 'test@email.com',
+      name: 'Test User',
+      role: 'owner',
+    }],
+  };
+
+  it('renders group card', async () => {
+    const { getByTestId } = render(<ViewGroup group={group} />);
+    const cardBody = getByTestId('groupview-card-body');
+    await wait(() => {
+      expect(cardBody).toBeInTheDocument();
+    });
+  });
+
+  it('renders members table', async () => {
+    const { getByTestId } = render(<ViewGroup group={group} />);
+    const membersTable = getByTestId('groupview-members-table');
+    await wait(() => {
+      expect(membersTable).toBeInTheDocument();
+    });
+  });
+
+  it('renders button group', async () => {
+    const { getByTestId } = render(<ViewGroup group={group} />);
+    const buttonGroup = getByTestId('groupview-button-group');
+    await wait(() => {
+      expect(buttonGroup).toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/__tests__/groups/index.test.js b/src/__tests__/groups/index.test.js
index 362d2505..39c01cc1 100644
--- a/src/__tests__/groups/index.test.js
+++ b/src/__tests__/groups/index.test.js
@@ -2,7 +2,7 @@ import { render, wait } from '@testing-library/react';
 import GroupList from '../../pages/groups/index';
 
 test('renders group list card', async () => {
-  const { getByTestId } = render(<GroupList />);
+  const { getByTestId } = render(<GroupList query={{ deletedGroupId: '' }} />);
   const cardBody = getByTestId('grouplist-card-body');
   await wait(() => {
     expect(cardBody).toBeInTheDocument();
@@ -10,7 +10,7 @@ test('renders group list card', async () => {
 });
 
 test('renders new group create button', async () => {
-  const { getByTestId } = render(<GroupList />);
+  const { getByTestId } = render(<GroupList query={{ deletedGroupId: '' }} />);
   const createButton = getByTestId('grouplist-create-button');
   await wait(() => {
     expect(createButton).toBeInTheDocument();
diff --git a/src/pages/groups/[id]/edit.jsx b/src/pages/groups/[id]/edit.jsx
index 67c0d554..88d2e4e1 100644
--- a/src/pages/groups/[id]/edit.jsx
+++ b/src/pages/groups/[id]/edit.jsx
@@ -150,10 +150,10 @@ const EditGroup = ({ group }) => {
                 </Formik>
               )}
             </Card.Header>
-            <Card.Body>
+            <Card.Body data-testid="groupedit-card-body">
               <Row fluid="true">
                 <Col lg={7}>
-                  <Table striped bordered hover variant="light" size="sm">
+                  <Table striped bordered hover variant="light" size="sm" data-testid="groupedit-members-table">
                     <thead>
                       <tr>
                         <th>Member</th>
@@ -434,6 +434,7 @@ const EditGroup = ({ group }) => {
                         variant="outline-danger"
                         type="button"
                         onClick={handleShowModal}
+                        data-testid="groupedit-delete-button"
                       >
                         <TrashFill className="align-text-bottom mr-1" />
                         Delete this group
diff --git a/src/pages/groups/[id]/index.jsx b/src/pages/groups/[id]/index.jsx
index 25f6a976..c7017cff 100644
--- a/src/pages/groups/[id]/index.jsx
+++ b/src/pages/groups/[id]/index.jsx
@@ -35,8 +35,8 @@ const ViewGroup = ({ group }) => {
             <Card.Header>
               {group.name}
             </Card.Header>
-            <Card.Body>
-              <Table striped bordered hover variant="light">
+            <Card.Body data-testid="groupview-card-body">
+              <Table striped bordered hover variant="light" data-testid="groupview-members-table">
                 <thead>
                   <tr>
                     <th>Member</th>
@@ -54,7 +54,7 @@ const ViewGroup = ({ group }) => {
                   ))}
                 </tbody>
               </Table>
-              <ButtonGroup>
+              <ButtonGroup data-testid="groupview-button-group">
                 {(roleInGroup(session) === 'owner' || roleInGroup(session) === 'manager') && (
                   <Button variant="outline-primary" href={`${group.id}/edit`}>
                     <PencilSquare className="align-text-bottom mr-1" />