Add a collections section.
parent
1b73899182
commit
96ae079145
@ -0,0 +1,83 @@
|
||||
// SPDX-FileCopyrightText: © 2017 EteSync Authors
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import * as React from "react";
|
||||
|
||||
import { Link, useHistory } from "react-router-dom";
|
||||
|
||||
import IconButton from "@material-ui/core/IconButton";
|
||||
import IconAdd from "@material-ui/icons/Add";
|
||||
import ContactsIcon from "@material-ui/icons/Contacts";
|
||||
import CalendarTodayIcon from "@material-ui/icons/CalendarToday";
|
||||
import FormatListBulletedIcon from "@material-ui/icons/FormatListBulleted";
|
||||
|
||||
import { List, ListItem } from "../widgets/List";
|
||||
|
||||
import AppBarOverride from "../widgets/AppBarOverride";
|
||||
import Container from "../widgets/Container";
|
||||
|
||||
import { routeResolver } from "../App";
|
||||
import { CachedCollection } from "../Pim/helpers";
|
||||
|
||||
interface PropsType {
|
||||
collections: CachedCollection[];
|
||||
}
|
||||
|
||||
export default function CollectionList(props: PropsType) {
|
||||
const history = useHistory();
|
||||
|
||||
const collectionMap = {
|
||||
"etebase.vcard": [],
|
||||
"etebase.vevent": [],
|
||||
"etebase.vtodo": [],
|
||||
};
|
||||
|
||||
function colClicked(colUid: string) {
|
||||
history.push(routeResolver.getRoute("collections._id", { colUid }));
|
||||
}
|
||||
|
||||
for (const col of props.collections) {
|
||||
if (collectionMap[col.metadata.type]) {
|
||||
const colorBox = undefined; // FIXME
|
||||
collectionMap[col.metadata.type].push((
|
||||
<ListItem key={col.collection.uid} rightIcon={colorBox} insetChildren
|
||||
onClick={() => colClicked(col.collection.uid)}>
|
||||
{col.metadata.name}
|
||||
</ListItem>
|
||||
));
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<AppBarOverride title="Collections">
|
||||
<IconButton
|
||||
component={Link}
|
||||
title="New"
|
||||
{...{ to: routeResolver.getRoute("collections.new") }}
|
||||
>
|
||||
<IconAdd />
|
||||
</IconButton>
|
||||
</AppBarOverride>
|
||||
<List>
|
||||
<ListItem
|
||||
primaryText="Address Books"
|
||||
leftIcon={<ContactsIcon />}
|
||||
nestedItems={collectionMap["etebase.vcard"]}
|
||||
/>
|
||||
|
||||
<ListItem
|
||||
primaryText="Calendars"
|
||||
leftIcon={<CalendarTodayIcon />}
|
||||
nestedItems={collectionMap["etebase.vevent"]}
|
||||
/>
|
||||
|
||||
<ListItem
|
||||
primaryText="Tasks"
|
||||
leftIcon={<FormatListBulletedIcon />}
|
||||
nestedItems={collectionMap["etebase.vtodo"]}
|
||||
/>
|
||||
</List>
|
||||
</Container>
|
||||
);
|
||||
}
|
@ -0,0 +1,53 @@
|
||||
// SPDX-FileCopyrightText: © 2020 EteSync Authors
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import * as React from "react";
|
||||
import { Switch, Route, useHistory } from "react-router";
|
||||
|
||||
import { useCredentials } from "../credentials";
|
||||
import { useCollections } from "../etebase-helpers";
|
||||
import { routeResolver } from "../App";
|
||||
import LoadingIndicator from "../widgets/LoadingIndicator";
|
||||
|
||||
import { CachedCollection, getDecryptCollectionsFunction, PimFab } from "../Pim/helpers";
|
||||
import CollectionList from "./CollectionList";
|
||||
|
||||
const decryptCollections = getDecryptCollectionsFunction();
|
||||
|
||||
export default function CollectionsMain() {
|
||||
const [cachedCollections, setCachedCollections] = React.useState<CachedCollection[]>();
|
||||
const history = useHistory();
|
||||
const etebase = useCredentials()!;
|
||||
const collections = useCollections(etebase);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (collections) {
|
||||
decryptCollections(collections)
|
||||
.then((entries) => setCachedCollections(entries));
|
||||
// FIXME: handle failure to decrypt collections
|
||||
}
|
||||
}, [collections]);
|
||||
|
||||
if (!cachedCollections) {
|
||||
return (
|
||||
<LoadingIndicator />
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Switch>
|
||||
<Route
|
||||
path={routeResolver.getRoute("collections")}
|
||||
exact
|
||||
>
|
||||
<CollectionList collections={cachedCollections} />
|
||||
<PimFab
|
||||
onClick={() => history.push(
|
||||
routeResolver.getRoute("collections.new")
|
||||
)}
|
||||
/>
|
||||
</Route>
|
||||
</Switch>
|
||||
);
|
||||
}
|
||||
|
Loading…
Reference in New Issue