From ad9490ed8c480c46248c49ee27e448c72f6e074f Mon Sep 17 00:00:00 2001
From: Jori Lallo <jtlallo@gmail.com>
Date: Tue, 19 Jul 2016 00:30:47 -0700
Subject: [PATCH] Basic search

---
 src/scenes/Search/Search.js                   | 34 +++++++++++++++-
 src/scenes/Search/Search.scss                 |  6 +++
 src/scenes/Search/SearchStore.js              | 39 +++++++++++++++++++
 .../components/SearchField/SearchField.js     | 32 +++++++++++++++
 .../components/SearchField/SearchField.scss   | 31 +++++++++++++++
 .../Search/components/SearchField/index.js    |  2 +
 6 files changed, 143 insertions(+), 1 deletion(-)
 create mode 100644 src/scenes/Search/SearchStore.js
 create mode 100644 src/scenes/Search/components/SearchField/SearchField.js
 create mode 100644 src/scenes/Search/components/SearchField/SearchField.scss
 create mode 100644 src/scenes/Search/components/SearchField/index.js

diff --git a/src/scenes/Search/Search.js b/src/scenes/Search/Search.js
index f9c64eaef..8862f2fd8 100644
--- a/src/scenes/Search/Search.js
+++ b/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>
diff --git a/src/scenes/Search/Search.scss b/src/scenes/Search/Search.scss
index e69de29bb..42c29b34b 100644
--- a/src/scenes/Search/Search.scss
+++ b/src/scenes/Search/Search.scss
@@ -0,0 +1,6 @@
+.icon {
+  width: 38px;
+  margin-bottom: -3px;
+  margin-right: 20px;
+  opacity: 0.15;
+}
diff --git a/src/scenes/Search/SearchStore.js b/src/scenes/Search/SearchStore.js
new file mode 100644
index 000000000..d03dee203
--- /dev/null
+++ b/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;
diff --git a/src/scenes/Search/components/SearchField/SearchField.js b/src/scenes/Search/components/SearchField/SearchField.js
new file mode 100644
index 000000000..cddb3543d
--- /dev/null
+++ b/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;
diff --git a/src/scenes/Search/components/SearchField/SearchField.scss b/src/scenes/Search/components/SearchField/SearchField.scss
new file mode 100644
index 000000000..d01933347
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/src/scenes/Search/components/SearchField/index.js b/src/scenes/Search/components/SearchField/index.js
new file mode 100644
index 000000000..9f46c79b7
--- /dev/null
+++ b/src/scenes/Search/components/SearchField/index.js
@@ -0,0 +1,2 @@
+import SearchField from './SearchField';
+export default SearchField;