Basic search

src/scenes/Search/Search.js

@@ -1,22 +1,54 @@
 import React from 'react';
 import { observer } from 'mobx-react';
+import _debounce from 'lodash/debounce';
 
 import Flex from 'components/Flex';
 import Layout from 'components/Layout';
 import CenteredContent from 'components/CenteredContent';
+import SearchField from './components/SearchField';
+import DocumentPreview from 'components/DocumentPreview';
+import AtlasPreviewLoading from 'components/AtlasPreviewLoading';
+
+import styles from './Search.scss';
+
+import SearchStore from './SearchStore';
 
 @observer
 class Search extends React.Component {
+  static store;
+
+  constructor(props) {
+    super(props);
+    this.store = new SearchStore();
+  }
+
   render() {
+    const search = _debounce((searchTerm) => {
+      this.store.search(searchTerm);
+    }, 250);
+
     return (
       <Layout
         title="Search"
         titleText="Search"
         search={ false }
+        loading={ this.store.isFetching }
       >
         <CenteredContent>
           <Flex direction="column" flex={ true }>
-            TBA
+            <Flex flex={ true }>
+              <img
+                src={ require('assets/icons/search.svg') }
+                className={ styles.icon }
+              />
+              <SearchField
+                searchTerm={ this.store.searchTerm }
+                onChange={ search }
+              />
+            </Flex>
+            { this.store.documents && this.store.documents.map((document) => {
+             return  (<DocumentPreview key={ document.id } document={ document } />);
+            }) }
           </Flex>
         </CenteredContent>
       </Layout>

src/scenes/Search/Search.scss

@@ -0,0 +1,6 @@
+.icon {
+  width: 38px;
+  margin-bottom: -3px;
+  margin-right: 20px;
+  opacity: 0.15;
+}

src/scenes/Search/SearchStore.js

@@ -0,0 +1,39 @@
+import { observable, action, runInAction } from 'mobx';
+import { client } from 'utils/ApiClient';
+import { browserHistory } from 'react-router';
+
+class SearchStore {
+  @observable documents;
+  @observable pagination;
+  @observable selectedDocument;
+  @observable searchTerm;
+
+  @observable isFetching = false;
+
+  /* Actions */
+
+  @action search = async (query) => {
+    this.searchTerm = query;
+    this.isFetching = true;
+
+    if (query) {
+      try {
+        const res = await client.post('/documents.search', { query });
+        const { data, pagination } = res;
+        runInAction('search document', () => {
+          this.documents = data;
+          this.pagination = pagination;
+        });
+      } catch (e) {
+        console.error("Something went wrong");
+      }
+    } else {
+      this.documents = null;
+    }
+
+    this.isFetching = false;
+  }
+
+};
+
+export default SearchStore;

src/scenes/Search/components/SearchField/SearchField.js

@@ -0,0 +1,32 @@
+import React, { PropTypes } from 'react';
+import { observer } from 'mobx-react';
+
+import Flex from 'components/Flex';
+
+import styles from './SearchField.scss';
+
+@observer
+class SearchField extends React.Component {
+  static propTypes = {
+    onChange: PropTypes.func,
+  }
+
+  onChange = (event) => {
+    this.props.onChange(event.currentTarget.value);
+  }
+
+  render() {
+    return (
+      <div className={ styles.container }>
+        <input
+          onChange={ this.onChange }
+          className={ styles.field }
+          placeholder="Search"
+          autoFocus
+        />
+      </div>
+    );
+  }
+}
+
+export default SearchField;

src/scenes/Search/components/SearchField/SearchField.scss

@@ -0,0 +1,31 @@
+.container {
+  padding: 40px 0;
+}
+
+.field {
+  width: 100%;
+  padding: 10px;
+  font-size: 48px;
+  font-weight: 400;
+  outline: none;
+  border: 0;
+  // border-bottom: 1px solid #ccc;
+}
+
+:global {
+  ::-webkit-input-placeholder {
+     color: #ccc;
+  }
+
+  :-moz-placeholder {
+     color: #ccc;
+  }
+
+  ::-moz-placeholder {
+     color: #ccc;
+  }
+
+  :-ms-input-placeholder {
+     color: #ccc;
+  }
+}

src/scenes/Search/components/SearchField/index.js

@@ -0,0 +1,2 @@
+import SearchField from './SearchField';
+export default SearchField;