From 437b4f261e70e23c87f5e664a5ebd8596c20e521 Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Tue, 17 Nov 2020 17:00:55 -0700
Subject: [PATCH] #56 Annotations list view

---
 .../DashboardAnnotationList.js                | 39 ++++++++++-----
 src/components/SecondNavbar/SecondNavbar.js   |  5 ++
 src/pages/annotations/index.jsx               | 50 +++++++++++++++++++
 src/pages/index.jsx                           |  1 +
 4 files changed, 82 insertions(+), 13 deletions(-)
 create mode 100644 src/pages/annotations/index.jsx

diff --git a/src/components/Dashboard/DashboardAnnotationList/DashboardAnnotationList.js b/src/components/Dashboard/DashboardAnnotationList/DashboardAnnotationList.js
index f001fdf9..a07adf4a 100644
--- a/src/components/Dashboard/DashboardAnnotationList/DashboardAnnotationList.js
+++ b/src/components/Dashboard/DashboardAnnotationList/DashboardAnnotationList.js
@@ -14,24 +14,27 @@ const DashboardAnnotationList = ({
   session,
   alerts,
   setAlerts,
+  tab,
+  mode,
 }) => {
   const [groupState, setGroupState] = useState({});
-  const [key, setKey] = useState('mine');
+  const [key, setKey] = useState(tab || 'mine');
   const [listLoading, setListLoading] = useState(true);
   const [annotations, setAnnotations] = useState([]);
+  const limit = mode === 'dashboard' ? 10 : undefined;
 
   useEffect(() => {
     async function fetchData() {
       if (session && (session.user.groups || session.user.id)) {
         if (key === 'shared') {
           setAnnotations(
-            await getSharedAnnotations(session.user.groups, 10)
+            await getSharedAnnotations(session.user.groups, limit)
               .then(setListLoading(false))
               .catch((err) => setAlerts([...alerts, { text: err.message, variant: 'danger' }])),
           );
         } else if (key === 'mine') {
           setAnnotations(
-            await getOwnAnnotations(session.user.id, 10)
+            await getOwnAnnotations(session.user.id, limit)
               .then(setListLoading(false))
               .catch((err) => setAlerts([...alerts, { text: err.message, variant: 'danger' }])),
           );
@@ -58,7 +61,14 @@ const DashboardAnnotationList = ({
   return (
     <Card>
       <Card.Header>
-        <Card.Title><Link href="/annotations">Annotations</Link></Card.Title>
+        <Card.Title>
+          {mode === 'dashboard' && (
+            <Link href="/annotations">Annotations</Link>
+          )}
+          {mode === 'list' && (
+            <>Annotations</>
+          )}
+        </Card.Title>
         <Tabs
           transition={false}
           style={{ justifyContent: 'flex-end', float: 'right', marginTop: '-2rem' }}
@@ -85,15 +95,6 @@ const DashboardAnnotationList = ({
                     </Link>
                   </Col>
                   <Col className="text-right" xl={4}>
-                    {annotation.permissions.groups && annotation.permissions.groups.length > 0 && (
-                    <Badge
-                      variant="info"
-                      key={annotation.permissions.groups.sort()[0]}
-                      className="mr-2"
-                    >
-                      {groupState[annotation.permissions.groups.sort()[0]]}
-                    </Badge>
-                    )}
                     <small style={{ whiteSpace: 'nowrap' }}>{format(new Date(annotation.created), 'Ppp')}</small>
                   </Col>
                 </Row>
@@ -109,6 +110,16 @@ const DashboardAnnotationList = ({
                       {' ('}
                       {FirstNameLastInitial(annotation.creator.name)}
                       )
+                      {annotation.permissions.groups
+                      && annotation.permissions.groups.length > 0 && (
+                      <Badge
+                        variant="info"
+                        key={annotation.permissions.groups.sort()[0]}
+                        className="mr-2"
+                      >
+                        {groupState[annotation.permissions.groups.sort()[0]]}
+                      </Badge>
+                      )}
                     </small>
                   </Col>
                 </Row>
@@ -116,11 +127,13 @@ const DashboardAnnotationList = ({
             ),
           )}
         </ListGroup>
+        {mode === 'dashboard' && (
         <Card.Footer style={{ fontWeight: 'bold', borderTop: 0 }} key="all-annotations">
           <Link href={`/annotations?tab=${key}`} disabled>
             {`See all ${key === 'shared' ? key : 'created'} annotations...`}
           </Link>
         </Card.Footer>
+        )}
       </>
       )}
       {!listLoading && (!annotations || annotations.length === 0) && (
diff --git a/src/components/SecondNavbar/SecondNavbar.js b/src/components/SecondNavbar/SecondNavbar.js
index e76a5d5e..c9677051 100644
--- a/src/components/SecondNavbar/SecondNavbar.js
+++ b/src/components/SecondNavbar/SecondNavbar.js
@@ -46,6 +46,11 @@ const SecondNavbar = ({
                     Registration
                   </Breadcrumb.Item>
                 )}
+                {type === 'annotations' && (
+                  <Breadcrumb.Item active>
+                    Annotations
+                  </Breadcrumb.Item>
+                )}
                 {title && (
                   <Breadcrumb.Item active>{title}</Breadcrumb.Item>
                 )}
diff --git a/src/pages/annotations/index.jsx b/src/pages/annotations/index.jsx
new file mode 100644
index 00000000..d39d3b7a
--- /dev/null
+++ b/src/pages/annotations/index.jsx
@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import { useSession } from 'next-auth/client';
+import { Card } from 'react-bootstrap';
+import Layout from '../../components/Layout';
+import LoadingSpinner from '../../components/LoadingSpinner';
+import DashboardAnnotationList from '../../components/Dashboard/DashboardAnnotationList';
+
+const AnnotationsListVIew = ({
+  props,
+}) => {
+  const { tab } = props;
+  const [session, loading] = useSession();
+  const [alerts, setAlerts] = useState([]);
+
+  return (
+    <Layout alerts={alerts} type="annotations">
+      {loading && (
+        <Card>
+          <Card.Body>
+            <LoadingSpinner />
+          </Card.Body>
+        </Card>
+      )}
+      {!session && !loading && (
+      <Card>
+        <Card.Header><Card.Title>Not authorized</Card.Title></Card.Header>
+        <Card.Body>Please log in to use the application.</Card.Body>
+      </Card>
+      )}
+      {session && !loading && (
+        <DashboardAnnotationList
+          session={session}
+          alerts={alerts}
+          setAlerts={setAlerts}
+          mode="list"
+          tab={tab}
+        />
+      )}
+    </Layout>
+  );
+};
+
+AnnotationsListVIew.getInitialProps = async (context) => {
+  const { tab } = context.query;
+  let props = {};
+  if (tab) props = { tab };
+  return { props };
+};
+
+export default AnnotationsListVIew;
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 2ec0759f..49ce3a41 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -54,6 +54,7 @@ export default function Home({
               session={session}
               alerts={alerts}
               setAlerts={setAlerts}
+              mode="dashboard"
             />
           </Col>
         </Row>