Support tag searching

package.json

@@ -111,6 +111,7 @@
     "react-css-modules": "^4.7.1",
     "react-document-title": "^2.0.3",
     "react-dom": "^16.4.1",
+    "react-event-listener": "^0.6.1",
     "react-ga": "^2.1.2",
     "react-image": "^1.0.1",
     "react-intl": "^2.4.0",

src/actions/gallery.js

@@ -9,10 +9,11 @@ export const types = namespacedTypes('gallery', [
   'SET_PAGE',
   'SET_FETCH_ERROR',
   'SET_FETCH_STATUS',
-  'SET_TAG',
+  'SET_WORD',
   'CLEAR_SOURCE',
   'SET_ERROR_TIMES',
-  'CLEAR_ERROR_TIMES'
+  'CLEAR_ERROR_TIMES',
+  'SET_FROM_ILLUST'
 ]);
 
 export function setItems(data) {
@@ -67,10 +68,10 @@ function fetchSource() {
   return (dispatch, getState) => {
     dispatch(setFetchError(false));
     dispatch(setFetchStatus(true));
-    if (getState().gallery.tag === 'ranking') {
+    if (getState().gallery.word === 'ranking') {
       return cachedFetch(`${config.apiBaseURL}${config.rankingURI}`, {
         mode: 'cors',
-        timeout: 10e3,
+        timeout: 30e3,
         data: {
           page: getState().gallery.page
         }
@@ -95,12 +96,11 @@ function fetchSource() {
           dispatch(setFetchError(true));
         });
     }
-    return cachedFetch(`${config.apiBaseURL}${config.galleryURI}`, {
+    return cachedFetch(`${config.apiBaseURL}${config.searchURI}`, {
       mode: 'cors',
-      timeout: 10e3,
-      expiryKey: 'expires_at',
+      timeout: 30e3,
       data: {
-        tag: getState().gallery.tag,
+        word: getState().gallery.word,
         page: getState().gallery.page
       }
     })
@@ -134,11 +134,11 @@ export function fetchSourceIfNeeded() {
   };
 }
 
-export function setTag(tag) {
+export function setWord(word) {
   return {
-    type: types.SET_TAG,
+    type: types.SET_WORD,
     payload: {
-      tag
+      word
     }
   };
 }
@@ -152,3 +152,10 @@ export function clearSource() {
     }
   };
 }
+
+export function setFromIllust(fromIllust) {
+  return {
+    type: types.SET_FROM_ILLUST,
+    payload: fromIllust
+  };
+}

src/components/InfiniteScroll.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import EventListener from 'react-event-listener';
 
 import ScrollContext from '@/components/ScrollContext';
 
@@ -15,14 +16,6 @@ export default class InfiniteScroll extends React.Component {
     super(props);
   }
 
-  componentDidMount() {
-    this.scrollingElement.addEventListener('scroll', this.onScroll);
-  }
-
-  componentWillUnmount() {
-    this.scrollingElement.removeEventListener('scroll', this.onScroll);
-  }
-
   @autobind
   onScroll(event) {
     if (this.props.isLoading) {
@@ -48,6 +41,16 @@ export default class InfiniteScroll extends React.Component {
   }
 
   render() {
-    return this.props.children;
+    return (
+      <React.Fragment>
+        {this.props.children}
+        {this.scrollingElement && (
+          <EventListener
+            target={this.scrollingElement}
+            onScroll={this.onScroll}
+          />
+        )}
+      </React.Fragment>
+    );
   }
 }

src/components/ScrollContext.js

@@ -2,6 +2,7 @@ import styles from '@/styles/Base.scss';
 
 import React from 'react';
 import { withRouter } from 'react-router-dom';
+import EventListener, { withOptions } from 'react-event-listener';
 
 @withRouter
 export default class ScrollContext extends React.Component {
@@ -16,10 +17,6 @@ export default class ScrollContext extends React.Component {
     super(props);
   }
 
-  componentDidMount() {
-    document.addEventListener('scroll', this.onScroll, true);
-  }
-
   componentDidUpdate(prevProps) {
     if (this.props.location === prevProps.location) {
       return;
@@ -30,10 +27,6 @@ export default class ScrollContext extends React.Component {
     }
   }
 
-  componentWillUnmount() {
-    document.removeEventListener('scroll', this.onScroll, true);
-  }
-
   @autobind
   onScroll(event) {
     if (event.target.className === ScrollContext.scrollingClassName) {
@@ -56,6 +49,12 @@ export default class ScrollContext extends React.Component {
         <div className={styles['scroll-context-inner-container']}>
           {this.props.children}
         </div>
+        <EventListener
+          target={document}
+          onScroll={withOptions(this.onScroll, {
+            capture: true
+          })}
+        />
       </div>
     );
   }

src/components/SearchInput.js

@@ -0,0 +1,46 @@
+import styles from '@/styles/Gallery.scss';
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import CSSModules from 'react-css-modules';
+import EventListener from 'react-event-listener';
+import SearchIcon from '@material-ui/icons/Search';
+
+@CSSModules(styles, { allowMultiple: true })
+export default class SearchInput extends React.Component {
+  static propTypes = {
+    onSearch: PropTypes.func
+  };
+
+  static defaultProps = {
+    onSearch() {}
+  };
+
+  constructor(props) {
+    super(props);
+  }
+
+  @autobind
+  onKeyDown(event) {
+    if (event.keyCode === 13 && document.activeElement === this.inputRef) {
+      this.inputRef.blur();
+      this.onSearch();
+    }
+  }
+
+  onSearch() {
+    this.props.onSearch(this.inputRef.value);
+  }
+
+  render() {
+    return (
+      <div styleName="search-root">
+        <div styleName="search">
+          <SearchIcon />
+        </div>
+        <input ref={ref => (this.inputRef = ref)} styleName="search-input" />
+        <EventListener target="window" onKeyDown={this.onKeyDown} />
+      </div>
+    );
+  }
+}

src/config/index.js

@@ -2,6 +2,7 @@ export default {
   apiBaseURL: 'https://api.pixiv.moe/v1',
   galleryURI: '/gallery',
   rankingURI: '/ranking',
+  searchURI: '/search',
   illustURI: '/illust',
   commentsURI: '/illust/comments',
   authURI: '/user/auth',