2017-05-26 19:56:10 +00:00
|
|
|
|
// @flow
|
2018-05-05 23:16:08 +00:00
|
|
|
|
import * as React from 'react';
|
2017-07-18 06:30:16 +00:00
|
|
|
|
import { observable } from 'mobx';
|
2017-05-26 19:56:10 +00:00
|
|
|
|
import { observer, inject } from 'mobx-react';
|
2019-01-19 08:23:39 +00:00
|
|
|
|
import { Redirect, Link, Switch, Route } from 'react-router-dom';
|
2019-01-08 07:14:43 +00:00
|
|
|
|
|
2017-07-18 06:30:16 +00:00
|
|
|
|
import styled from 'styled-components';
|
2019-01-05 21:37:33 +00:00
|
|
|
|
import {
|
|
|
|
|
CollectionIcon,
|
|
|
|
|
PrivateCollectionIcon,
|
|
|
|
|
NewDocumentIcon,
|
|
|
|
|
PinIcon,
|
|
|
|
|
} from 'outline-icons';
|
2018-11-18 09:13:28 +00:00
|
|
|
|
import RichMarkdownEditor from 'rich-markdown-editor';
|
2017-05-26 19:56:10 +00:00
|
|
|
|
|
2019-01-08 07:14:43 +00:00
|
|
|
|
import { newDocumentUrl, collectionUrl } from 'utils/routeHelpers';
|
2017-05-26 19:56:10 +00:00
|
|
|
|
import CollectionsStore from 'stores/CollectionsStore';
|
2017-11-20 05:32:18 +00:00
|
|
|
|
import DocumentsStore from 'stores/DocumentsStore';
|
2017-11-20 04:16:49 +00:00
|
|
|
|
import UiStore from 'stores/UiStore';
|
2017-07-24 01:07:11 +00:00
|
|
|
|
import Collection from 'models/Collection';
|
2017-05-26 19:56:10 +00:00
|
|
|
|
|
2017-11-20 04:16:49 +00:00
|
|
|
|
import Search from 'scenes/Search';
|
2017-11-20 07:39:56 +00:00
|
|
|
|
import CollectionMenu from 'menus/CollectionMenu';
|
|
|
|
|
import Actions, { Action, Separator } from 'components/Actions';
|
2018-08-07 06:22:20 +00:00
|
|
|
|
import Heading from 'components/Heading';
|
2017-05-26 19:56:10 +00:00
|
|
|
|
import CenteredContent from 'components/CenteredContent';
|
2017-11-20 05:50:42 +00:00
|
|
|
|
import { ListPlaceholder } from 'components/LoadingPlaceholder';
|
2019-01-05 21:37:33 +00:00
|
|
|
|
import Mask from 'components/Mask';
|
2017-07-18 06:30:16 +00:00
|
|
|
|
import Button from 'components/Button';
|
|
|
|
|
import HelpText from 'components/HelpText';
|
2017-11-20 05:32:18 +00:00
|
|
|
|
import DocumentList from 'components/DocumentList';
|
2017-11-20 04:16:49 +00:00
|
|
|
|
import Subheading from 'components/Subheading';
|
|
|
|
|
import PageTitle from 'components/PageTitle';
|
2017-10-31 07:03:17 +00:00
|
|
|
|
import Flex from 'shared/components/Flex';
|
2019-01-05 21:37:33 +00:00
|
|
|
|
import Modal from 'components/Modal';
|
|
|
|
|
import CollectionPermissions from 'scenes/CollectionPermissions';
|
2019-01-08 07:14:43 +00:00
|
|
|
|
import Tabs from 'components/Tabs';
|
|
|
|
|
import Tab from 'components/Tab';
|
|
|
|
|
import PaginatedDocumentList from 'components/PaginatedDocumentList';
|
2017-05-26 19:56:10 +00:00
|
|
|
|
|
|
|
|
|
type Props = {
|
2017-11-20 04:16:49 +00:00
|
|
|
|
ui: UiStore,
|
2017-11-20 05:32:18 +00:00
|
|
|
|
documents: DocumentsStore,
|
2017-05-26 19:56:10 +00:00
|
|
|
|
collections: CollectionsStore,
|
|
|
|
|
match: Object,
|
|
|
|
|
};
|
|
|
|
|
|
2017-11-10 22:14:30 +00:00
|
|
|
|
@observer
|
2018-05-05 23:16:08 +00:00
|
|
|
|
class CollectionScene extends React.Component<Props> {
|
2017-10-31 07:03:17 +00:00
|
|
|
|
@observable collection: ?Collection;
|
2017-11-20 04:16:49 +00:00
|
|
|
|
@observable isFetching: boolean = true;
|
2019-01-05 21:37:33 +00:00
|
|
|
|
@observable permissionsModalOpen: boolean = false;
|
2019-01-19 08:23:39 +00:00
|
|
|
|
@observable redirectTo: ?string;
|
2017-05-26 19:56:10 +00:00
|
|
|
|
|
2017-11-20 05:32:18 +00:00
|
|
|
|
componentDidMount() {
|
|
|
|
|
this.loadContent(this.props.match.params.id);
|
|
|
|
|
}
|
2017-07-18 06:30:16 +00:00
|
|
|
|
|
2017-09-18 06:45:40 +00:00
|
|
|
|
componentWillReceiveProps(nextProps) {
|
|
|
|
|
if (nextProps.match.params.id !== this.props.match.params.id) {
|
2017-11-20 05:32:18 +00:00
|
|
|
|
this.loadContent(nextProps.match.params.id);
|
2017-09-18 06:45:40 +00:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2017-12-05 08:15:34 +00:00
|
|
|
|
componentWillUnmount() {
|
|
|
|
|
this.props.ui.clearActiveCollection();
|
|
|
|
|
}
|
|
|
|
|
|
2017-11-20 05:32:18 +00:00
|
|
|
|
loadContent = async (id: string) => {
|
2018-12-05 06:24:30 +00:00
|
|
|
|
const collection = await this.props.collections.fetch(id);
|
2017-11-20 05:32:18 +00:00
|
|
|
|
|
2017-11-20 04:16:49 +00:00
|
|
|
|
if (collection) {
|
|
|
|
|
this.props.ui.setActiveCollection(collection);
|
|
|
|
|
this.collection = collection;
|
2018-03-01 07:28:36 +00:00
|
|
|
|
|
2019-01-08 07:14:43 +00:00
|
|
|
|
await this.props.documents.fetchPinned({
|
|
|
|
|
collection: id,
|
|
|
|
|
});
|
2017-07-18 06:30:16 +00:00
|
|
|
|
}
|
2017-11-20 04:16:49 +00:00
|
|
|
|
|
2017-07-18 06:30:16 +00:00
|
|
|
|
this.isFetching = false;
|
2017-05-26 19:56:10 +00:00
|
|
|
|
};
|
|
|
|
|
|
2018-05-05 23:16:08 +00:00
|
|
|
|
onNewDocument = (ev: SyntheticEvent<*>) => {
|
2017-11-20 07:39:56 +00:00
|
|
|
|
ev.preventDefault();
|
|
|
|
|
|
|
|
|
|
if (this.collection) {
|
2019-01-19 08:23:39 +00:00
|
|
|
|
this.redirectTo = `${this.collection.url}/new`;
|
2017-11-20 07:39:56 +00:00
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
2019-01-05 21:37:33 +00:00
|
|
|
|
onPermissions = (ev: SyntheticEvent<*>) => {
|
|
|
|
|
ev.preventDefault();
|
|
|
|
|
this.permissionsModalOpen = true;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
handlePermissionsModalClose = () => {
|
|
|
|
|
this.permissionsModalOpen = false;
|
|
|
|
|
};
|
|
|
|
|
|
2018-01-30 21:16:20 +00:00
|
|
|
|
renderActions() {
|
|
|
|
|
return (
|
|
|
|
|
<Actions align="center" justify="flex-end">
|
|
|
|
|
<Action>
|
2019-01-19 08:23:39 +00:00
|
|
|
|
<CollectionMenu collection={this.collection} />
|
2018-01-30 21:16:20 +00:00
|
|
|
|
</Action>
|
|
|
|
|
<Separator />
|
|
|
|
|
<Action>
|
|
|
|
|
<a onClick={this.onNewDocument}>
|
|
|
|
|
<NewDocumentIcon />
|
|
|
|
|
</a>
|
|
|
|
|
</Action>
|
|
|
|
|
</Actions>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
2017-05-26 19:56:10 +00:00
|
|
|
|
render() {
|
2019-01-08 07:14:43 +00:00
|
|
|
|
const { documents } = this.props;
|
|
|
|
|
|
2019-01-19 08:23:39 +00:00
|
|
|
|
if (this.redirectTo) return <Redirect to={this.redirectTo} />;
|
|
|
|
|
if (!this.isFetching && !this.collection) return <Search notFound />;
|
2017-10-31 07:03:17 +00:00
|
|
|
|
|
2018-03-01 07:28:36 +00:00
|
|
|
|
const pinnedDocuments = this.collection
|
2019-01-08 07:14:43 +00:00
|
|
|
|
? documents.pinnedInCollection(this.collection.id)
|
2018-03-01 07:28:36 +00:00
|
|
|
|
: [];
|
|
|
|
|
const hasPinnedDocuments = !!pinnedDocuments.length;
|
2019-01-05 21:37:33 +00:00
|
|
|
|
const collection = this.collection;
|
2018-03-01 07:28:36 +00:00
|
|
|
|
|
2017-07-18 06:30:16 +00:00
|
|
|
|
return (
|
|
|
|
|
<CenteredContent>
|
2019-01-05 21:37:33 +00:00
|
|
|
|
{collection ? (
|
2018-03-01 07:28:36 +00:00
|
|
|
|
<React.Fragment>
|
2019-01-05 21:37:33 +00:00
|
|
|
|
<PageTitle title={collection.name} />
|
|
|
|
|
{collection.isEmpty ? (
|
2019-01-06 02:23:57 +00:00
|
|
|
|
<Centered column>
|
2019-01-05 21:37:33 +00:00
|
|
|
|
<HelpText>
|
2019-01-06 02:23:57 +00:00
|
|
|
|
<strong>{collection.name}</strong> doesn’t contain any
|
|
|
|
|
documents yet.<br />Get started by creating a new one!
|
2019-01-05 21:37:33 +00:00
|
|
|
|
</HelpText>
|
|
|
|
|
<Wrapper>
|
|
|
|
|
<Link to={newDocumentUrl(collection)}>
|
2019-01-06 02:23:57 +00:00
|
|
|
|
<Button icon={<NewDocumentIcon color="#FFF" />}>
|
|
|
|
|
Create a document
|
|
|
|
|
</Button>
|
2019-01-05 21:37:33 +00:00
|
|
|
|
</Link>
|
|
|
|
|
{collection.private && (
|
|
|
|
|
<Button onClick={this.onPermissions} neutral>
|
|
|
|
|
Invite people
|
|
|
|
|
</Button>
|
|
|
|
|
)}
|
|
|
|
|
</Wrapper>
|
|
|
|
|
<Modal
|
|
|
|
|
title="Collection permissions"
|
|
|
|
|
onRequestClose={this.handlePermissionsModalClose}
|
|
|
|
|
isOpen={this.permissionsModalOpen}
|
|
|
|
|
>
|
|
|
|
|
<CollectionPermissions
|
|
|
|
|
collection={this.collection}
|
|
|
|
|
onSubmit={this.handlePermissionsModalClose}
|
|
|
|
|
/>
|
|
|
|
|
</Modal>
|
2019-01-06 02:23:57 +00:00
|
|
|
|
</Centered>
|
2019-01-05 21:37:33 +00:00
|
|
|
|
) : (
|
2018-03-01 07:28:36 +00:00
|
|
|
|
<React.Fragment>
|
2019-01-06 02:23:57 +00:00
|
|
|
|
<Heading>
|
|
|
|
|
{collection.private ? (
|
|
|
|
|
<PrivateCollectionIcon
|
|
|
|
|
color={collection.color}
|
|
|
|
|
size={40}
|
|
|
|
|
expanded
|
|
|
|
|
/>
|
|
|
|
|
) : (
|
|
|
|
|
<CollectionIcon
|
|
|
|
|
color={collection.color}
|
|
|
|
|
size={40}
|
|
|
|
|
expanded
|
|
|
|
|
/>
|
|
|
|
|
)}{' '}
|
|
|
|
|
{collection.name}
|
|
|
|
|
</Heading>
|
|
|
|
|
|
2019-01-05 21:37:33 +00:00
|
|
|
|
{collection.description && (
|
|
|
|
|
<RichMarkdownEditor
|
|
|
|
|
key={collection.description}
|
|
|
|
|
defaultValue={collection.description}
|
|
|
|
|
readOnly
|
|
|
|
|
/>
|
|
|
|
|
)}
|
|
|
|
|
|
|
|
|
|
{hasPinnedDocuments && (
|
|
|
|
|
<React.Fragment>
|
|
|
|
|
<Subheading>
|
|
|
|
|
<TinyPinIcon size={18} /> Pinned
|
|
|
|
|
</Subheading>
|
|
|
|
|
<DocumentList documents={pinnedDocuments} />
|
|
|
|
|
</React.Fragment>
|
|
|
|
|
)}
|
|
|
|
|
|
2019-01-08 07:14:43 +00:00
|
|
|
|
<Tabs>
|
|
|
|
|
<Tab to={collectionUrl(collection.id)} exact>
|
|
|
|
|
Recently updated
|
|
|
|
|
</Tab>
|
|
|
|
|
<Tab to={collectionUrl(collection.id, 'recent')} exact>
|
|
|
|
|
Recently published
|
|
|
|
|
</Tab>
|
2019-01-08 07:42:55 +00:00
|
|
|
|
<Tab to={collectionUrl(collection.id, 'old')} exact>
|
|
|
|
|
Least recently updated
|
|
|
|
|
</Tab>
|
|
|
|
|
<Tab to={collectionUrl(collection.id, 'alphabetical')} exact>
|
|
|
|
|
A–Z
|
|
|
|
|
</Tab>
|
2019-01-08 07:14:43 +00:00
|
|
|
|
</Tabs>
|
|
|
|
|
<Switch>
|
2019-01-08 07:42:55 +00:00
|
|
|
|
<Route path={collectionUrl(collection.id, 'alphabetical')}>
|
|
|
|
|
<PaginatedDocumentList
|
|
|
|
|
key="alphabetical"
|
|
|
|
|
documents={documents.alphabeticalInCollection(
|
|
|
|
|
collection.id
|
|
|
|
|
)}
|
|
|
|
|
fetch={documents.fetchAlphabetical}
|
|
|
|
|
options={{ collection: collection.id }}
|
|
|
|
|
/>
|
|
|
|
|
</Route>
|
|
|
|
|
<Route path={collectionUrl(collection.id, 'old')}>
|
|
|
|
|
<PaginatedDocumentList
|
|
|
|
|
key="old"
|
|
|
|
|
documents={documents.leastRecentlyUpdatedInCollection(
|
|
|
|
|
collection.id
|
|
|
|
|
)}
|
|
|
|
|
fetch={documents.fetchLeastRecentlyUpdated}
|
|
|
|
|
options={{ collection: collection.id }}
|
|
|
|
|
/>
|
|
|
|
|
</Route>
|
2019-01-08 07:14:43 +00:00
|
|
|
|
<Route path={collectionUrl(collection.id, 'recent')}>
|
|
|
|
|
<PaginatedDocumentList
|
|
|
|
|
key="recent"
|
|
|
|
|
documents={documents.recentlyPublishedInCollection(
|
|
|
|
|
collection.id
|
|
|
|
|
)}
|
|
|
|
|
fetch={documents.fetchRecentlyPublished}
|
|
|
|
|
options={{ collection: collection.id }}
|
|
|
|
|
showPublished
|
|
|
|
|
/>
|
|
|
|
|
</Route>
|
|
|
|
|
<Route path={collectionUrl(collection.id)}>
|
|
|
|
|
<PaginatedDocumentList
|
|
|
|
|
documents={documents.recentlyUpdatedInCollection(
|
|
|
|
|
collection.id
|
|
|
|
|
)}
|
|
|
|
|
fetch={documents.fetchRecentlyUpdated}
|
|
|
|
|
options={{ collection: collection.id }}
|
|
|
|
|
/>
|
|
|
|
|
</Route>
|
|
|
|
|
</Switch>
|
2018-03-01 07:28:36 +00:00
|
|
|
|
</React.Fragment>
|
|
|
|
|
)}
|
|
|
|
|
|
2018-01-30 21:16:20 +00:00
|
|
|
|
{this.renderActions()}
|
2018-03-01 07:28:36 +00:00
|
|
|
|
</React.Fragment>
|
2017-11-20 05:50:42 +00:00
|
|
|
|
) : (
|
2019-01-05 21:37:33 +00:00
|
|
|
|
<React.Fragment>
|
|
|
|
|
<Heading>
|
|
|
|
|
<Mask height={35} />
|
|
|
|
|
</Heading>
|
|
|
|
|
<ListPlaceholder count={5} />
|
|
|
|
|
</React.Fragment>
|
2017-11-20 05:50:42 +00:00
|
|
|
|
)}
|
2017-07-18 06:30:16 +00:00
|
|
|
|
</CenteredContent>
|
|
|
|
|
);
|
2017-05-26 19:56:10 +00:00
|
|
|
|
}
|
|
|
|
|
}
|
2017-07-18 06:30:16 +00:00
|
|
|
|
|
2019-01-06 02:23:57 +00:00
|
|
|
|
const Centered = styled(Flex)`
|
|
|
|
|
text-align: center;
|
|
|
|
|
margin: 40vh auto 0;
|
|
|
|
|
max-width: 380px;
|
|
|
|
|
transform: translateY(-50%);
|
|
|
|
|
`;
|
|
|
|
|
|
2018-03-01 07:28:36 +00:00
|
|
|
|
const TinyPinIcon = styled(PinIcon)`
|
|
|
|
|
position: relative;
|
|
|
|
|
top: 4px;
|
|
|
|
|
opacity: 0.8;
|
|
|
|
|
`;
|
|
|
|
|
|
2017-11-20 07:39:56 +00:00
|
|
|
|
const Wrapper = styled(Flex)`
|
2019-01-06 02:23:57 +00:00
|
|
|
|
justify-content: center;
|
2017-10-31 07:03:17 +00:00
|
|
|
|
margin: 10px 0;
|
2017-07-18 06:30:16 +00:00
|
|
|
|
`;
|
|
|
|
|
|
2019-01-19 08:23:39 +00:00
|
|
|
|
export default inject('collections', 'documents', 'ui')(CollectionScene);
|