feat: add filters to drafts (#1631)

* feat: add filters to drafts

Co-authored-by: Guilherme Diniz <guilhermedassumpcao@gmail.com>

app/scenes/Drafts.js

@@ -1,37 +1,107 @@
 // @flow
-import { observer, inject } from "mobx-react";
+import { observable } from "mobx";
+import { inject, observer } from "mobx-react";
+import queryString from "query-string";
 import * as React from "react";
-
+import { type RouterHistory } from "react-router-dom";
+import styled from "styled-components";
 import DocumentsStore from "stores/DocumentsStore";
+import CollectionFilter from "scenes/Search/components/CollectionFilter";
+import DateFilter from "scenes/Search/components/DateFilter";
+
 import Actions, { Action } from "components/Actions";
 import CenteredContent from "components/CenteredContent";
 import Empty from "components/Empty";
+import Flex from "components/Flex";
 import Heading from "components/Heading";
 import InputSearch from "components/InputSearch";
 import PageTitle from "components/PageTitle";
 import PaginatedDocumentList from "components/PaginatedDocumentList";
 import Subheading from "components/Subheading";
 import NewDocumentMenu from "menus/NewDocumentMenu";
+import { type LocationWithState } from "types";
 
-type Props = {
+type Props = {|
   documents: DocumentsStore,
-};
+  history: RouterHistory,
+  location: LocationWithState,
+|};
 
 @observer
 class Drafts extends React.Component<Props> {
+  @observable params: URLSearchParams = new URLSearchParams(
+    this.props.location.search
+  );
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.location.search !== this.props.location.search) {
+      this.handleQueryChange();
+    }
+  }
+
+  handleQueryChange = () => {
+    this.params = new URLSearchParams(this.props.location.search);
+  };
+
+  handleFilterChange = (search) => {
+    this.props.history.replace({
+      pathname: this.props.location.pathname,
+      search: queryString.stringify({
+        ...queryString.parse(this.props.location.search),
+        ...search,
+      }),
+    });
+  };
+
+  get collectionId() {
+    const id = this.params.get("collectionId");
+    return id ? id : undefined;
+  }
+
+  get dateFilter() {
+    const id = this.params.get("dateFilter");
+    return id ? id : undefined;
+  }
+
   render() {
-    const { fetchDrafts, drafts } = this.props.documents;
+    const { drafts, fetchDrafts } = this.props.documents;
+    const isFiltered = this.collectionId || this.dateFilter;
+    const options = {
+      dateFilter: this.dateFilter,
+      collectionId: this.collectionId,
+    };
 
     return (
       <CenteredContent column auto>
         <PageTitle title="Drafts" />
         <Heading>Drafts</Heading>
+        <Subheading>
+          Documents
+          <Filters>
+            <CollectionFilter
+              collectionId={this.collectionId}
+              onSelect={(collectionId) =>
+                this.handleFilterChange({ collectionId })
+              }
+            />
+            <DateFilter
+              dateFilter={this.dateFilter}
+              onSelect={(dateFilter) => this.handleFilterChange({ dateFilter })}
+            />
+          </Filters>
+        </Subheading>
+
         <PaginatedDocumentList
-          heading={<Subheading>Documents</Subheading>}
-          empty={<Empty>You’ve not got any drafts at the moment.</Empty>}
+          empty={
+            <Empty>
+              {isFiltered
+                ? "No documents found for your filters."
+                : "You’ve not got any drafts at the moment."}
+            </Empty>
+          }
           fetch={fetchDrafts}
-          documents={drafts}
-          showDraft={false}
+          documents={drafts(options)}
+          options={options}
           showCollection
         />
 
@@ -48,4 +118,17 @@ class Drafts extends React.Component<Props> {
   }
 }
 
+const Filters = styled(Flex)`
+  opacity: 0.85;
+  transition: opacity 100ms ease-in-out;
+  position: absolute;
+  right: -8px;
+  bottom: 0;
+  padding: 0 0 6px;
+
+  &:hover {
+    opacity: 1;
+  }
+`;
+
 export default inject("documents")(Drafts);