add search input for author of article

cofacts · Mar 29, 2018 · fdac732 · fdac732
1 parent 89e25c0
commit fdac732
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 15 deletions.
diff --git a/components/ListPage.js b/components/ListPage.js
@@ -36,6 +36,15 @@ export default class ListPage extends React.Component {
     });
   };
 
+  handleSearchByArticleIdChange = e => {
+    const { searchUserByArticleId = '' } = this.props.query;
+    const { value } = e.target;
+    if (searchUserByArticleId === value) return;
+    this.goToQuery({
+      searchUserByArticleId: value,
+    });
+  };
+
   handleKeywordChange = e => {
     const { q = '' } = this.props.query;
     const { value } = e.target;

diff --git a/ducks/articleList.js b/ducks/articleList.js
@@ -102,7 +102,9 @@ export const load = ({
       isInCooldown = true;
       setTimeout(resetCooldown, COSTY_FIELD_COOLDOWN);
     }
-    dispatch(createAction(LOAD)(resp.getIn(['data', 'ListArticles'], List())));
+    dispatch(
+      createAction(LOAD)(resp.getIn(['data', 'ListArticles']) || List())
+    );
     dispatch(setState({ key: 'isLoading', value: false }));
   });
 };

diff --git a/pages/index.js b/pages/index.js
@@ -1,7 +1,7 @@
 /* eslint-disable react/display-name */
 // https://github.com/yannickcr/eslint-plugin-react/issues/1200
 
-import React from 'react';
+import React, { Fragment } from 'react';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import Head from 'next/head';
@@ -80,17 +80,44 @@ class Index extends ListPage {
   };
 
   renderSearch = () => {
-    const { query: { q } } = this.props;
+    const { query: { q, searchUserByArticleId } } = this.props;
     return (
-      <label>
-        Search For:
-        <input
-          type="search"
-          onBlur={this.handleKeywordChange}
-          onKeyUp={this.handleKeywordKeyup}
-          defaultValue={q}
-        />
-      </label>
+      <Fragment>
+        <div>
+          <label className="label-search">Search For：</label>
+          <input
+            type="search"
+            onBlur={this.handleKeywordChange}
+            onKeyUp={this.handleKeywordKeyup}
+            defaultValue={q}
+          />
+        </div>
+        <div>
+          <label className="label-search label-article-id">
+            Author of article：
+          </label>
+          <input
+            type="search"
+            onBlur={this.handleSearchByArticleIdChange}
+            onKeyUp={this.handleKeywordKeyup}
+            defaultValue={searchUserByArticleId}
+            placeholder="Article ID"
+          />
+        </div>
+        <style jsx>{`
+          input::placeholder {
+            color: #b4b4b4;
+          }
+          .label-search {
+            display: inline-block;
+            width: 9em;
+            margin: 0 0 15px 0;
+          }
+          .label-article-id {
+            color: gray;
+          }
+        `}</style>
+      </Fragment>
     );
   };
 
@@ -101,7 +128,12 @@ class Index extends ListPage {
     );
     return (
       <span>
-        和<mark>{searchedArticle ? searchedArticle.get('text') : ''}</mark>{' '}
+        和{' '}
+        <mark>
+          {searchedArticle
+            ? searchedArticle.get('text')
+            : `Article ID: ${searchUserByArticleId}`}
+        </mark>{' '}
         此篇相同回報者的文章列表
         <style jsx>{`
           mark {
@@ -244,8 +276,7 @@ class Index extends ListPage {
         <h3>
           {searchUserByArticleId && this.renderDescriptionOfSearchedArticle()}
         </h3>
-        {!searchUserByArticleId && this.renderSearch()}
-        <br />
+        {this.renderSearch()}
         Order By:
         {this.renderOrderBy()}
         {this.renderFilter()}