diff --git a/src/fragmentarium/ui/info/Record.tsx b/src/fragmentarium/ui/info/Record.tsx index 2d073ea26..25eacff65 100644 --- a/src/fragmentarium/ui/info/Record.tsx +++ b/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 }): 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) => ( +
  • + +
  • + ))} +
  • + +
  • + + ) + return (

    Record

    - +
      {recordListWithButton}
    ) } diff --git a/src/fragmentarium/ui/info/RecordView.tsx b/src/fragmentarium/ui/info/RecordView.tsx new file mode 100644 index 000000000..061b6d54c --- /dev/null +++ b/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 +} + +const RecordView: React.FC = ({ record }) => { + return ( +
    +

    Full Record History

    + +
    + ) +} +export default RecordView diff --git a/src/router/fragmentariumRoutes.tsx b/src/router/fragmentariumRoutes.tsx index 9d65f8d97..ca75adf6f 100644 --- a/src/router/fragmentariumRoutes.tsx +++ b/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({ /> )} />, + } + />,