From 1f00fbe8cca05674f0d6ed27a2ee12f08fdebad1 Mon Sep 17 00:00:00 2001 From: Tom Hacohen Date: Fri, 4 Sep 2020 14:23:06 +0300 Subject: [PATCH] GenericChangeHistory: split the change history to its own component. --- src/Collections/CollectionChangeEntries.tsx | 86 ++------------- src/components/GenericChangeHistory.tsx | 112 ++++++++++++++++++++ 2 files changed, 118 insertions(+), 80 deletions(-) create mode 100644 src/components/GenericChangeHistory.tsx diff --git a/src/Collections/CollectionChangeEntries.tsx b/src/Collections/CollectionChangeEntries.tsx index d25c77e..6017416 100644 --- a/src/Collections/CollectionChangeEntries.tsx +++ b/src/Collections/CollectionChangeEntries.tsx @@ -3,27 +3,19 @@ import * as React from "react"; -import moment from "moment"; - import * as Etebase from "etebase"; -import { AutoSizer, List as VirtualizedList } from "react-virtualized"; - -import { List, ListItem } from "../widgets/List"; import Dialog from "@material-ui/core/Dialog"; import DialogTitle from "@material-ui/core/DialogTitle"; import DialogContent from "@material-ui/core/DialogContent"; import DialogActions from "@material-ui/core/DialogActions"; import Button from "@material-ui/core/Button"; -import IconEdit from "@material-ui/icons/Edit"; -import IconDelete from "@material-ui/icons/Delete"; -import IconError from "@material-ui/icons/Error"; import { useCredentials } from "../credentials"; import { useItems } from "../etebase-helpers"; -import { TaskType, EventType, ContactType, parseString } from "../pim-types"; import { CachedCollection } from "../Pim/helpers"; import LoadingIndicator from "../widgets/LoadingIndicator"; +import GenericChangeHistory from "../components/GenericChangeHistory"; export interface CachedItem { item: Etebase.Item; @@ -82,65 +74,8 @@ export default function CollectionChangeEntries(props: PropsType) { return a - b; }); - const rowRenderer = (params: { index: number, key: string, style: React.CSSProperties }) => { - const { key, index, style } = params; - const cacheItem = entriesList[entriesList.length - index - 1]!; - let comp; - try { - comp = parseString(cacheItem.content); - } catch (e) { - const icon = (); - return ( - setDialog(cacheItem)} - /> - ); - } - - let icon; - if (!cacheItem.item.isDeleted) { - icon = (); - } else { - icon = (); - } - - let name; - if (comp.name === "vcalendar") { - if (EventType.isEvent(comp)) { - const vevent = EventType.fromVCalendar(comp); - name = vevent.summary; - } else { - const vtodo = TaskType.fromVCalendar(comp); - name = vtodo.summary; - } - } else if (comp.name === "vcard") { - const vcard = new ContactType(comp); - name = vcard.fn; - } else { - name = "Error processing entry"; - } - - const mtime = (cacheItem.metadata.mtime) ? moment(cacheItem.metadata.mtime) : undefined; - - return ( - setDialog(cacheItem)} - /> - ); - }; - return ( -
+
setDialog(undefined)} @@ -163,19 +98,10 @@ export default function CollectionChangeEntries(props: PropsType) { - - - {({ height, width }) => ( - - )} - - +
); } diff --git a/src/components/GenericChangeHistory.tsx b/src/components/GenericChangeHistory.tsx new file mode 100644 index 0000000..a839997 --- /dev/null +++ b/src/components/GenericChangeHistory.tsx @@ -0,0 +1,112 @@ +// SPDX-FileCopyrightText: © 2017 EteSync Authors +// SPDX-License-Identifier: AGPL-3.0-only + +import * as React from "react"; + +import moment from "moment"; + +import * as Etebase from "etebase"; + +import { AutoSizer, List as VirtualizedList } from "react-virtualized"; + +import { List, ListItem } from "../widgets/List"; +import IconEdit from "@material-ui/icons/Edit"; +import IconDelete from "@material-ui/icons/Delete"; +import IconError from "@material-ui/icons/Error"; + +import { TaskType, EventType, ContactType, parseString } from "../pim-types"; + +export interface CachedItem { + item: Etebase.Item; + metadata: Etebase.ItemMetadata; + content: string; +} + +interface PropsType { + items: CachedItem[]; + onItemClick: (item: CachedItem) => void; + +} + +export default function GenericChangeHistory(props: PropsType) { + const entriesList = props.items.sort((a_, b_) => { + const a = a_.metadata.mtime ?? 0; + const b = b_.metadata.mtime ?? 0; + return a - b; + }); + + const onItemClick = props.onItemClick; + + const rowRenderer = (params: { index: number, key: string, style: React.CSSProperties }) => { + const { key, index, style } = params; + const cacheItem = entriesList[entriesList.length - index - 1]!; + let comp; + try { + comp = parseString(cacheItem.content); + } catch (e) { + const icon = (); + return ( + onItemClick(cacheItem)} + /> + ); + } + + let icon; + if (!cacheItem.item.isDeleted) { + icon = (); + } else { + icon = (); + } + + let name; + if (comp.name === "vcalendar") { + if (EventType.isEvent(comp)) { + const vevent = EventType.fromVCalendar(comp); + name = vevent.summary; + } else { + const vtodo = TaskType.fromVCalendar(comp); + name = vtodo.summary; + } + } else if (comp.name === "vcard") { + const vcard = new ContactType(comp); + name = vcard.fn; + } else { + name = "Error processing entry"; + } + + const mtime = (cacheItem.metadata.mtime) ? moment(cacheItem.metadata.mtime) : undefined; + + return ( + onItemClick(cacheItem)} + /> + ); + }; + + return ( + + + {({ height, width }) => ( + + )} + + + ); +}