add button, full record page and routes

src/fragmentarium/ui/info/Record.tsx

@@ -5,6 +5,7 @@ import { DateTime, Interval } from 'luxon'
 import './Record.css'
 import { RecordEntry } from 'fragmentarium/domain/RecordEntry'
 import classnames from 'classnames'
+import { useHistory } from 'react-router-dom'
 
 type EntryProps = {
   entry: RecordEntry
@@ -62,10 +63,43 @@ function Record({
 }: {
   record: ReadonlyArray<RecordEntry>
 }): JSX.Element {
+  const history = useHistory()
+  const displayRecords =
+    record.length > 4 ? [record[0], ...record.slice(-3)] : record
+  const handleViewFullHistoryClick = () => {
+    history.push('/fragmentarium/:id/record')
+  }
+
+  const recordListWithButton = (
+    <>
+      {displayRecords.map((entry, index) => (
+        <li className="Record__entry" key={index}>
+          <Entry entry={entry} />
+        </li>
+      ))}
+      <li className="Record__entry">
+        <button
+          onClick={handleViewFullHistoryClick}
+          style={{
+            backgroundColor: '#CCCCCC',
+            color: '#0056B3',
+            padding: '2px 4px',
+            border: 'none',
+            borderRadius: '4px',
+            cursor: 'pointer',
+            fontSize: '9px',
+          }}
+        >
+          View Full Edit History
+        </button>
+      </li>
+    </>
+  )
+
   return (
     <section>
       <h3>Record</h3>
-      <RecordList record={record} />
+      <ol className="Record">{recordListWithButton}</ol>
     </section>
   )
 }

src/fragmentarium/ui/info/RecordView.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { RecordEntry } from 'fragmentarium/domain/RecordEntry'
+import { RecordList } from './Record'
+
+interface RecordViewProps {
+  record: ReadonlyArray<RecordEntry>
+}
+
+const RecordView: React.FC<RecordViewProps> = ({ record }) => {
+  return (
+    <div>
+      <h2>Full Record History</h2>
+      <RecordList record={record} className="" />
+    </div>
+  )
+}
+export default RecordView

src/router/fragmentariumRoutes.tsx

@@ -22,6 +22,7 @@ import { HeadTagsService } from 'router/head'
 import BibliographyService from 'bibliography/application/BibliographyService'
 import { FindspotService } from 'fragmentarium/application/FindspotService'
 import AfoRegisterService from 'afo-register/application/AfoRegisterService'
+import RecordView from 'fragmentarium/ui/info/RecordView'
 import NotFoundPage from 'NotFoundPage'
 function parseStringParam(location: Location, param: string): string | null {
   const value = parse(location.search)[param]
@@ -129,6 +130,12 @@ export default function FragmentariumRoutes({
         />
       )}
     />,
+    <Route
+      key="=RecordView"
+      exact
+      path="/fragmentarium/:id/record"
+      render={(match): ReactNode => <RecordView record={[]} />}
+    />,
     <Route
       key="FragmentView"
       path="/fragmentarium/:id"

src/router/router.tsx

@@ -21,7 +21,6 @@ import DictionaryRoutes from 'router/dictionaryRoutes'
 import SignRoutes from 'router/signRoutes'
 import AboutRoutes from 'router/aboutRoutes'
 import ToolsRoutes from 'router/toolsRoutes'
-
 import Sitemap, { sitemapDefaults, Slugs } from 'router/sitemap'
 import Header from 'Header'
 import NotFoundPage from 'NotFoundPage'