Refactor, add alphabetical sort

app/components/Tab.js

@@ -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} />;

app/scenes/Collection.js

@@ -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"

app/stores/DocumentsStore.js

@@ -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(
+      this.publishedInCollection(collectionId),
-        Array.from(this.data.values()),
-        document =>
-          document.collectionId === collectionId && !!document.publishedAt
-      ),
       'updatedAt',
       'desc'
     );
@@ -69,16 +81,16 @@ export default class DocumentsStore extends BaseStore<Document> {
 
   recentlyPublishedInCollection(collectionId: string): Document[] {
     return orderBy(
-      filter(
+      this.publishedInCollection(collectionId),
-        Array.from(this.data.values()),
-        document =>
-          document.collectionId === collectionId && !!document.publishedAt
-      ),
       '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', {