#11 (WIP) Add 'All Pages' view

Still need to link to mentions and page select actions

package.json

@@ -20,6 +20,7 @@
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.1",
     "react-string-replace": "^0.4.4",
+    "react-table": "^7.6.3",
     "react-textarea-autosize": "^8.3.0",
     "redux": "^4.0.5",
     "textarea-caret": "^3.1.0",

src/features/all-pages/AllPages.js

@@ -0,0 +1,62 @@
+import React from 'react'
+import { useSelector } from 'react-redux'
+import dayjs from 'dayjs'
+import advancedFormat from 'dayjs/plugin/advancedFormat'
+
+import PagesTable from './PagesTable'
+import { DAILY_NOTE_DISPLAY_FORMAT } from '../block/blockModel'
+import PageLink from '../links/PageLink'
+
+dayjs.extend(advancedFormat)
+
+const getData = (blocks, linksToBlocks) => {
+  return Object.values(blocks)
+    .filter(block => !block.parentId)
+    .map(block => ({
+      text: block.text,
+      blockId: block.id,
+      created: block.created,
+      updated: block.updated,
+      mentions: linksToBlocks[block.id] || []
+    }))
+}
+
+
+const AllPages = props => {
+  const blocks = useSelector(state => state.blocks)
+  const linksToBlocks = useSelector(state => state.links.to)
+
+  const columns = React.useMemo(
+    () => [
+      {
+        Header: 'Title',
+        accessor: (row) => <PageLink key={row.blockId} pageBlockId={row.blockId}>{row.text}</PageLink>,
+        sortType: (rowA, rowB, id, desc) => rowA.original.text.localeCompare(rowB.original.text)
+      }, {
+        Header: 'Mentions',
+        accessor: 'mentions',
+        Cell: ({ value }) => value.length,
+        sortType: (rowA, rowB, id, desc) => rowA.original.mentions.length - rowB.original.mentions.length
+      }, {
+        Header: 'Updated',
+        accessor: 'updated',
+        Cell: ({ value }) => value ? dayjs(value).format(DAILY_NOTE_DISPLAY_FORMAT) : null
+      }, {
+        Header: 'Created',
+        accessor: 'created',
+        Cell: ({ value }) => value ? dayjs(value).format(DAILY_NOTE_DISPLAY_FORMAT) : null
+      }
+    ],
+    []
+  )
+
+  const data = React.useMemo(() => getData(blocks, linksToBlocks), [blocks, linksToBlocks])
+
+  return (
+    <div className="all-pages">
+      <PagesTable columns={columns} data={data} />
+    </div>
+  )
+}
+
+export default AllPages

src/features/all-pages/PagesTable.js

@@ -0,0 +1,63 @@
+import React from 'react'
+import { useTable, useSortBy } from 'react-table'
+import { ChevronDown, ChevronUp } from 'react-bootstrap-icons'
+
+const PagesTable = ({ columns, data }) => {
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    rows,
+    prepareRow,
+  } = useTable(
+    {
+      columns,
+      data,
+    },
+    useSortBy
+  )
+  return (
+    <>
+      <table className="table table-dark" {...getTableProps()}>
+        <thead className="thead-dark">
+          {headerGroups.map(headerGroup => (
+            <tr {...headerGroup.getHeaderGroupProps()}>
+              {headerGroup.headers.map(column => (
+                // Add the sorting props to control sorting. For this example
+                // we can add them into the header props
+                <th scope="col" {...column.getHeaderProps(column.getSortByToggleProps())}>
+                  {column.render('Header')}
+                  {/* Add a sort direction indicator */}
+                  <span>
+                    {column.isSorted
+                      ? column.isSortedDesc
+                        ? <ChevronDown color="white" />
+                        : <ChevronUp color="white" />
+                      : ''}
+                  </span>
+                </th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody {...getTableBodyProps()}>
+          {rows.map(
+            (row, i) => {
+              prepareRow(row)
+              return (
+                <tr {...row.getRowProps()}>
+                  {row.cells.map(cell => {
+                    return (
+                      <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
+                    )
+                  })}
+                </tr>
+              )}
+          )}
+        </tbody>
+      </table>
+    </>
+  )
+}
+
+export default PagesTable

src/features/block/blockSlice.js

@@ -15,7 +15,7 @@ const blocksSlice = createSlice({
     'uvwx': { id: 'uvwx', parentId: 'mnop', text: "I'm a third layer block", childrenIds: ['a2'] },
     'a1': { id: 'a1', parentId: 'mnop', text: "I'm another third layer block", childrenIds: [] },
     'a2': { id: 'a2', parentId: 'uvwx', text: "I'm a fourth layer block", childrenIds: [] },
-    'a3': BlockModel({ id: 'a3', text: 'February 17th, 2021', childrenIds: ['a4'], created: 1613538000, dailyNote: '2021-02-17' }),
+    'a3': BlockModel({ id: 'a3', text: 'February 17th, 2021', childrenIds: ['a4'], created: 1613546102000, dailyNote: '2021-02-17' }),
     'a4': { id: 'a4', parentId: 'a3', text: 'Click here to edit', childrenIds: [] }
   },
   reducers: {

src/features/file-pane/FilePane.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
-import { Calendar3 } from 'react-bootstrap-icons'
+import { Calendar3, Justify } from 'react-bootstrap-icons'
 
 import './file-pane.scss'
 
@@ -16,6 +16,9 @@ const FilePane = props => {
         <Link to="/daily-notes" className="list-group-item list-group-item-action bg-dark text-light">
           <Calendar3 color="white" /> Daily Notes
         </Link>
+        <Link to="/all-pages" className="list-group-item list-group-item-action bg-dark text-light">
+          <Justify color="white" /> All Pages
+        </Link>
       </div>
       <hr />
       <Shortcuts />

src/features/links/link.scss

@@ -1,5 +1,13 @@
 @import "../../index.scss";
 
+.block-link {
+    color: #95eb0c;
+
+    &:hover {
+        color: #95eb0c;
+    }
+}
+
 .block-link--no-styling {
     color: unset;
 

src/features/main/Main.js

@@ -6,6 +6,7 @@ import './main.scss'
 import Editor from '../editor/Editor'
 import Navbar from '../navbar/Navbar'
 import DailyNotes from '../daily-notes/DailyNotes'
+import AllPages from '../all-pages/AllPages'
 
 const Main = ({ blockId }) => {
   return (
@@ -31,6 +32,12 @@ const Main = ({ blockId }) => {
             <DailyNotes />
           )}
         />
+        <Route
+          path="/all-pages"
+          render={() => (
+            <AllPages />
+          )}
+        />
       </div>
     </div>
   )

src/features/main/main.scss

@@ -3,5 +3,11 @@
 }
 
 .stage {
-    padding: 50px 150px 120px;
+    > .editor {
+        padding: 50px 150px 120px;
+    }
+
+    > .all-pages {
+        padding: 50px 50px 120px;
+    }
 }