FEATURE: Consult own documents as a list or a graph (closes #277).

Author: CocoChart

frontend/src/routes/Bookshelf.jsx

@@ -1,14 +1,20 @@
 import '../styles/Bookshelf.css';
 import { useState, useEffect } from 'react';
 import Container from 'react-bootstrap/Container';
+import ButtonGroup from 'react-bootstrap/ButtonGroup';
+import ToggleButton from 'react-bootstrap/ToggleButton';
 import FutureDocument from '../components/FutureDocument.jsx';
+import DocumentsCards from '../components/DocumentsCards.jsx';
 import Graph from '../components/Graph.jsx';
 import Col from 'react-bootstrap/Col';
 import Row from 'react-bootstrap/Row';
 
 function Bookshelf({ backend, user }) {
-  const [documents, setDocuments] = useState();
+  const [documents, setDocuments] = useState([]);
   const [lastUpdate, setLastUpdate] = useState();
+  const [displayMode, setDisplayMode] = useState(localStorage.getItem('displayMode') || 'graph');
+
+  const displayModesList = ['graph', 'list'];
 
   useEffect(() => {
     backend.getAllDocuments(user)
@@ -18,16 +24,49 @@ function Bookshelf({ backend, user }) {
     .map(({_id, dc_title, links}) => [_id, dc_title, links]);
   const displayedDocs = docs?.flatMap(d => d[0]);
 
+  function DisplayDocuments() {
+    switch (displayMode) {
+      case 'graph':
+        return (
+          <Row>
+            <Col className="col-10">
+              <Graph rawDocs={docs} {...{displayedDocs}} />
+            </Col>
+            <Col>
+              <FutureDocument relatedTo={[]} {...{setLastUpdate, backend, user}} />
+            </Col>
+          </Row>
+        );
+      case 'list':
+        return <DocumentsCards docs={documents} byRow={4} createOn={[]}
+          {...{setLastUpdate, backend, user}}
+        />;
+    }
+  }
+
   return (
     <Container className="screen bookshelf">
-      <Row>
-        <Col className="col-10">
-          <Graph rawDocs={docs} {...{displayedDocs}} />
-        </Col>
-        <Col>
-          <FutureDocument relatedTo={[]} {...{setLastUpdate, backend, user}} />
-        </Col>
-      </Row>
+      <h4>My documents</h4>
+      <ButtonGroup className="mb-2">
+        {displayModesList.map((display, idx) => (
+          <ToggleButton
+            key={idx}
+            id={`display-${display}`}
+            type="radio"
+            variant="outline-dark"
+            name="displayMode"
+            value={display}
+            checked={displayMode === display}
+            onChange={(e) => {
+              setDisplayMode(e.currentTarget.value);
+              localStorage.setItem('displayMode', e.currentTarget.value);
+            }}
+          >
+            As a {display}
+          </ToggleButton>
+        ))}
+      </ButtonGroup>
+      <DisplayDocuments />
     </Container>
   );
 }

frontend/src/styles/Bookshelf.css

@@ -1,3 +1,11 @@
 .bookshelf .card {
   background-color: ghostwhite;
 }
+.bookshelf .btn {
+  color: rgb(81, 81, 81);
+}
+.bookshelf .btn-check:checked + .btn {
+  color: black;
+  font-weight: bold;
+  background-color: #de940a;
+}