hedgedoc/src/components/history-page/history-page.tsx

/*
 SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)

 SPDX-License-Identifier: AGPL-3.0-only
 */

import React, { Fragment, useEffect, useMemo, useState } from 'react'
import { Row } from 'react-bootstrap'
import { Trans, useTranslation } from 'react-i18next'
import { useSelector } from 'react-redux'
import { ApplicationState } from '../../redux'
import { HistoryContent } from './history-content/history-content'
import { HistoryToolbar, HistoryToolbarState, initToolbarState } from './history-toolbar/history-toolbar'
import { sortAndFilterEntries } from './utils'
import { refreshHistoryState } from '../../redux/history/methods'
import { HistoryEntry } from '../../redux/history/types'
import { showErrorNotification } from '../../redux/ui-notifications/methods'

export const HistoryPage: React.FC = () => {
  const { t } = useTranslation()

  const allEntries = useSelector((state: ApplicationState) => state.history)
  const [toolbarState, setToolbarState] = useState<HistoryToolbarState>(initToolbarState)

  const entriesToShow = useMemo<HistoryEntry[]>(() =>
      sortAndFilterEntries(allEntries, toolbarState),
    [allEntries, toolbarState])

  useEffect(() => {
    refreshHistoryState().catch(
      showErrorNotification(t('landing.history.error.getHistory.text'))
    )
  }, [t])

  return (
    <Fragment>
      <h1 className="mb-4">
        <Trans i18nKey="landing.navigation.history"/>
      </h1>
      <Row className={ 'justify-content-center mt-5 mb-3' }>
        <HistoryToolbar
          onSettingsChange={ setToolbarState }
        />
      </Row>
      <HistoryContent
        viewState={ toolbarState.viewState }
        entries={ entriesToShow }
      />
    </Fragment>
  )
}