feat: Add search input to collection and home (#1149)

* feat: Add search input to collection and home

* Tweak spacing

* Add input to drafts/starred too

app/scenes/Collection.js

@@ -29,6 +29,7 @@ import Heading from 'components/Heading';
 import Tooltip from 'components/Tooltip';
 import CenteredContent from 'components/CenteredContent';
 import { ListPlaceholder } from 'components/LoadingPlaceholder';
+import InputSearch from 'components/InputSearch';
 import Mask from 'components/Mask';
 import Button from 'components/Button';
 import HelpText from 'components/HelpText';
@@ -114,12 +115,19 @@ class CollectionScene extends React.Component<Props> {
   };
 
   renderActions() {
-    const can = this.props.policies.abilities(this.props.match.params.id);
+    const { match, policies } = this.props;
+    const can = policies.abilities(match.params.id);
 
     return (
       <Actions align="center" justify="flex-end">
         {can.update && (
           <React.Fragment>
+            <Action>
+              <InputSearch
+                placeholder="Search in collection…"
+                collectionId={match.params.id}
+              />
+            </Action>
             <Action>
               <Tooltip
                 tooltip="New document"

app/scenes/Dashboard.js

@@ -7,6 +7,7 @@ import DocumentsStore from 'stores/DocumentsStore';
 import AuthStore from 'stores/AuthStore';
 import NewDocumentMenu from 'menus/NewDocumentMenu';
 import Actions, { Action } from 'components/Actions';
+import InputSearch from 'components/InputSearch';
 import CenteredContent from 'components/CenteredContent';
 import PageTitle from 'components/PageTitle';
 import Tabs from 'components/Tabs';
@@ -65,6 +66,9 @@ class Dashboard extends React.Component<Props> {
           </Route>
         </Switch>
         <Actions align="center" justify="flex-end">
+          <Action>
+            <InputSearch />
+          </Action>
           <Action>
             <NewDocumentMenu />
           </Action>

app/scenes/Drafts.js

@@ -9,6 +9,7 @@ import Empty from 'components/Empty';
 import PageTitle from 'components/PageTitle';
 import DocumentList from 'components/DocumentList';
 import Subheading from 'components/Subheading';
+import InputSearch from 'components/InputSearch';
 import NewDocumentMenu from 'menus/NewDocumentMenu';
 import Actions, { Action } from 'components/Actions';
 import DocumentsStore from 'stores/DocumentsStore';
@@ -42,6 +43,9 @@ class Drafts extends React.Component<Props> {
           </React.Fragment>
         )}
         <Actions align="center" justify="flex-end">
+          <Action>
+            <InputSearch />
+          </Action>
           <Action>
             <NewDocumentMenu />
           </Action>

app/scenes/Search/Search.js

@@ -48,7 +48,8 @@ type Props = {
 class Search extends React.Component<Props> {
   firstDocument: ?DocumentPreview;
 
-  @observable query: string = '';
+  @observable
+  query: string = decodeURIComponent(this.props.match.params.term || '');
   @observable params: URLSearchParams = new URLSearchParams();
   @observable offset: number = 0;
   @observable allowLoadMore: boolean = true;

app/scenes/Search/components/SearchField.js

@@ -6,12 +6,21 @@ import Flex from 'shared/components/Flex';
 
 type Props = {
   onChange: string => void,
+  defaultValue?: string,
   theme: Object,
 };
 
 class SearchField extends React.Component<Props> {
   input: ?HTMLInputElement;
 
+  componentDidMount() {
+    if (this.props && this.input) {
+      // ensure that focus is placed at end of input
+      const len = (this.props.defaultValue || '').length;
+      this.input.setSelectionRange(len, len);
+    }
+  }
+
   handleChange = (ev: SyntheticEvent<HTMLInputElement>) => {
     this.props.onChange(ev.currentTarget.value ? ev.currentTarget.value : '');
   };
@@ -34,7 +43,7 @@ class SearchField extends React.Component<Props> {
           ref={ref => (this.input = ref)}
           onChange={this.handleChange}
           spellCheck="false"
-          placeholder="search…"
+          placeholder="Search…"
           type="search"
           autoFocus
         />

app/scenes/Starred.js

@@ -8,6 +8,7 @@ import Empty from 'components/Empty';
 import PageTitle from 'components/PageTitle';
 import Heading from 'components/Heading';
 import DocumentList from 'components/DocumentList';
+import InputSearch from 'components/InputSearch';
 import Tabs from 'components/Tabs';
 import Tab from 'components/Tab';
 import NewDocumentMenu from 'menus/NewDocumentMenu';
@@ -62,6 +63,9 @@ class Starred extends React.Component<Props> {
         )}
         {showLoading && <ListPlaceholder />}
         <Actions align="center" justify="flex-end">
+          <Action>
+            <InputSearch />
+          </Action>
           <Action>
             <NewDocumentMenu />
           </Action>