Refactor, add alphabetical sort
This commit is contained in:
parent
4cd482c80e
commit
70c93fcc86
|
@ -10,14 +10,19 @@ const NavItem = styled(NavLink)`
|
|||
text-transform: uppercase;
|
||||
color: ${props => props.theme.slate};
|
||||
letter-spacing: 0.04em;
|
||||
margin-right: 20px;
|
||||
margin-right: 24px;
|
||||
padding-bottom: 8px;
|
||||
|
||||
&:hover {
|
||||
color: ${props => props.theme.slateDark};
|
||||
}
|
||||
`;
|
||||
|
||||
function Tab(props: *) {
|
||||
const activeStyle = {
|
||||
paddingBottom: '5px',
|
||||
borderBottom: `3px solid ${props.theme.slateLight}`,
|
||||
color: props.theme.slate,
|
||||
};
|
||||
|
||||
return <NavItem {...props} activeStyle={activeStyle} />;
|
||||
|
|
|
@ -211,8 +211,34 @@ class CollectionScene extends React.Component<Props> {
|
|||
<Tab to={collectionUrl(collection.id, 'recent')} exact>
|
||||
Recently published
|
||||
</Tab>
|
||||
<Tab to={collectionUrl(collection.id, 'old')} exact>
|
||||
Least recently updated
|
||||
</Tab>
|
||||
<Tab to={collectionUrl(collection.id, 'alphabetical')} exact>
|
||||
A–Z
|
||||
</Tab>
|
||||
</Tabs>
|
||||
<Switch>
|
||||
<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>
|
||||
<Route path={collectionUrl(collection.id, 'recent')}>
|
||||
<PaginatedDocumentList
|
||||
key="recent"
|
||||
|
|
|
@ -55,13 +55,25 @@ export default class DocumentsStore extends BaseStore<Document> {
|
|||
);
|
||||
}
|
||||
|
||||
publishedInCollection(collectionId: string): Document[] {
|
||||
return filter(
|
||||
Array.from(this.data.values()),
|
||||
document =>
|
||||
document.collectionId === collectionId && !!document.publishedAt
|
||||
);
|
||||
}
|
||||
|
||||
leastRecentlyUpdatedInCollection(collectionId: string): Document[] {
|
||||
return orderBy(
|
||||
this.publishedInCollection(collectionId),
|
||||
'updatedAt',
|
||||
'asc'
|
||||
);
|
||||
}
|
||||
|
||||
recentlyUpdatedInCollection(collectionId: string): Document[] {
|
||||
return orderBy(
|
||||
filter(
|
||||
Array.from(this.data.values()),
|
||||
document =>
|
||||
document.collectionId === collectionId && !!document.publishedAt
|
||||
),
|
||||
this.publishedInCollection(collectionId),
|
||||
'updatedAt',
|
||||
'desc'
|
||||
);
|
||||
|
@ -69,16 +81,16 @@ export default class DocumentsStore extends BaseStore<Document> {
|
|||
|
||||
recentlyPublishedInCollection(collectionId: string): Document[] {
|
||||
return orderBy(
|
||||
filter(
|
||||
Array.from(this.data.values()),
|
||||
document =>
|
||||
document.collectionId === collectionId && !!document.publishedAt
|
||||
),
|
||||
this.publishedInCollection(collectionId),
|
||||
'publishedAt',
|
||||
'desc'
|
||||
);
|
||||
}
|
||||
|
||||
alphabeticalInCollection(collectionId: string): Document[] {
|
||||
return naturalSort(this.publishedInCollection(collectionId), 'title');
|
||||
}
|
||||
|
||||
@computed
|
||||
get starred(): Document[] {
|
||||
return filter(this.orderedData, d => d.starred);
|
||||
|
@ -138,6 +150,26 @@ export default class DocumentsStore extends BaseStore<Document> {
|
|||
return data;
|
||||
};
|
||||
|
||||
@action
|
||||
fetchAlphabetical = async (options: ?PaginationParams): Promise<*> => {
|
||||
return this.fetchNamedPage('list', {
|
||||
sort: 'title',
|
||||
direction: 'ASC',
|
||||
...options,
|
||||
});
|
||||
};
|
||||
|
||||
@action
|
||||
fetchLeastRecentlyUpdated = async (
|
||||
options: ?PaginationParams
|
||||
): Promise<*> => {
|
||||
return this.fetchNamedPage('list', {
|
||||
sort: 'updatedAt',
|
||||
direction: 'ASC',
|
||||
...options,
|
||||
});
|
||||
};
|
||||
|
||||
@action
|
||||
fetchRecentlyPublished = async (options: ?PaginationParams): Promise<*> => {
|
||||
return this.fetchNamedPage('list', {
|
||||
|
|
Reference in New Issue