84 lines
2.2 KiB
TypeScript
84 lines
2.2 KiB
TypeScript
import { observer } from "mobx-react";
|
|
import * as React from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useHistory, useRouteMatch } from "react-router-dom";
|
|
import styled from "styled-components";
|
|
import { RevisionHelper } from "@shared/utils/RevisionHelper";
|
|
import Event from "~/models/Event";
|
|
import Empty from "~/components/Empty";
|
|
import PaginatedEventList from "~/components/PaginatedEventList";
|
|
import useKeyDown from "~/hooks/useKeyDown";
|
|
import useStores from "~/hooks/useStores";
|
|
import { documentPath } from "~/utils/routeHelpers";
|
|
import Sidebar from "./SidebarLayout";
|
|
|
|
const EMPTY_ARRAY: Event[] = [];
|
|
|
|
function History() {
|
|
const { events, documents } = useStores();
|
|
const { t } = useTranslation();
|
|
const match = useRouteMatch<{ documentSlug: string }>();
|
|
const history = useHistory();
|
|
const document = documents.getByUrl(match.params.documentSlug);
|
|
|
|
const eventsInDocument = document
|
|
? events.inDocument(document.id)
|
|
: EMPTY_ARRAY;
|
|
|
|
const onCloseHistory = () => {
|
|
if (document) {
|
|
history.push(documentPath(document));
|
|
} else {
|
|
history.goBack();
|
|
}
|
|
};
|
|
|
|
const items = React.useMemo(() => {
|
|
if (
|
|
eventsInDocument[0] &&
|
|
document &&
|
|
eventsInDocument[0].createdAt !== document.updatedAt
|
|
) {
|
|
eventsInDocument.unshift(
|
|
new Event(
|
|
{
|
|
id: RevisionHelper.latestId(document.id),
|
|
name: "revisions.create",
|
|
documentId: document.id,
|
|
createdAt: document.updatedAt,
|
|
actor: document.updatedBy,
|
|
},
|
|
events
|
|
)
|
|
);
|
|
}
|
|
|
|
return eventsInDocument;
|
|
}, [eventsInDocument, events, document]);
|
|
|
|
useKeyDown("Escape", onCloseHistory);
|
|
|
|
return (
|
|
<Sidebar title={t("History")} onClose={onCloseHistory}>
|
|
{document ? (
|
|
<PaginatedEventList
|
|
aria-label={t("History")}
|
|
fetch={events.fetchPage}
|
|
events={items}
|
|
options={{
|
|
documentId: document.id,
|
|
}}
|
|
document={document}
|
|
empty={<EmptyHistory>{t("No history yet")}</EmptyHistory>}
|
|
/>
|
|
) : null}
|
|
</Sidebar>
|
|
);
|
|
}
|
|
|
|
const EmptyHistory = styled(Empty)`
|
|
padding: 0 12px;
|
|
`;
|
|
|
|
export default observer(History);
|