Tidy up home component (#571)

* v1.3.3 (#570) * bump to v1.3.3 * Sticky navbar (#569) * collapse toggler on click * sticky navbar * remove custom scrollbar styling to fix padding issues with container * Remove dead code * onChange is a class method * initInfinitePagination as arrow to avoid explicit binding * component is already aware of redux, no need to bindActionCreators * Only import what's needed
amilajack · Apr 21, 2019 · 782b49f · 782b49f
1 parent 1a97f1d
commit 782b49f
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 51 deletions.
diff --git a/app/components/home/Home.js b/app/components/home/Home.js
@@ -21,18 +21,16 @@ export type itemType = {
 };
 
 type Props = {
-  actions: {
-    setActiveMode: (
-      mode: string,
-      activeModeOptions?: activeModeOptionsType
-    ) => void,
-    paginate: (
-      activeMode: string,
-      activeModeOptions?: activeModeOptionsType
-    ) => void,
-    clearAllItems: () => void,
-    setLoading: (isLoading: boolean) => void
-  },
+  setActiveMode: (
+    mode: string,
+    activeModeOptions?: activeModeOptionsType
+  ) => void,
+  paginate: (
+    activeMode: string,
+    activeModeOptions?: activeModeOptionsType
+  ) => void,
+  clearAllItems: () => void,
+  setLoading: (isLoading: boolean) => void,
   activeMode: string,
   activeModeOptions: activeModeOptionsType,
   modes: {
@@ -69,21 +67,10 @@ export default class Home extends Component<Props, State> {
 
   butter: Butter;
 
-  didMount: boolean;
-
-  // onChange: () => void;
-
   constructor(props: Props) {
     super(props);
     this.butter = new Butter();
 
-    this.onChange = async (isVisible: boolean) => {
-      const { isLoading, activeMode, activeModeOptions } = this.props;
-      if (isVisible && !isLoading) {
-        await this.paginate(activeMode, activeModeOptions);
-      }
-    };
-
     // Temporary hack to preserve scroll position
     if (!global.pct) {
       global.pct = {
@@ -107,9 +94,9 @@ export default class Home extends Component<Props, State> {
     queryType: string,
     activeModeOptions: activeModeOptionsType = {}
   ) {
-    const { actions, modes } = this.props;
+    const { modes, paginate, setLoading } = this.props;
 
-    actions.setLoading(true);
+    setLoading(true);
 
     // HACK: This is a temporary solution.
     // Waiting on: https://github.com/yannickcr/eslint-plugin-react/issues/818
@@ -130,16 +117,16 @@ export default class Home extends Component<Props, State> {
       }
     })();
 
-    actions.paginate(items);
-    actions.setLoading(false);
+    paginate(items);
+    setLoading(false);
 
     return items;
   }
 
   /**
    * If bottom of component is 2000px from viewport, query
    */
-  initInfinitePagination() {
+  initInfinitePagination = () => {
     const {
       infinitePagination,
       activeMode,
@@ -155,18 +142,12 @@ export default class Home extends Component<Props, State> {
         this.paginate(activeMode, activeModeOptions);
       }
     }
-  }
-
-  setUserMeta(type: 'favorites' | 'watchList', item) {
-    this.setState({
-      [type]: this.butter[type]('set', item)
-    });
-  }
+  };
 
   async componentDidMount() {
     const { activeMode } = this.props;
-    this.didMount = true;
-    document.addEventListener('scroll', this.initInfinitePagination.bind(this));
+
+    document.addEventListener('scroll', this.initInfinitePagination);
     window.scrollTo(0, global.pct[`${activeMode}ScrollTop`]);
 
     const [favorites, watchList, recentlyWatched] = await Promise.all([
@@ -182,10 +163,8 @@ export default class Home extends Component<Props, State> {
     });
   }
 
-  componentWillMount() {}
-
   componentWillReceiveProps(nextProps: Props) {
-    const { activeMode, activeModeOptions, actions } = this.props;
+    const { activeMode, activeModeOptions, clearAllItems } = this.props;
     global.pct[`${activeMode}ScrollTop`] = document.body.scrollTop;
 
     if (activeMode !== nextProps.activeMode) {
@@ -197,7 +176,7 @@ export default class Home extends Component<Props, State> {
       JSON.stringify(activeModeOptions)
     ) {
       if (nextProps.activeMode === 'search') {
-        actions.clearAllItems();
+        clearAllItems();
       }
 
       this.paginate(nextProps.activeMode, nextProps.activeModeOptions);
@@ -221,15 +200,18 @@ export default class Home extends Component<Props, State> {
 
     global.pct[`${activeMode}ScrollTop`] = document.body.scrollTop;
 
-    this.didMount = false;
-    document.removeEventListener(
-      'scroll',
-      this.initInfinitePagination.bind(this)
-    );
+    document.removeEventListener('scroll', this.initInfinitePagination);
   }
 
+  onChange = async (isVisible: boolean) => {
+    const { isLoading, activeMode, activeModeOptions } = this.props;
+    if (isVisible && !isLoading) {
+      await this.paginate(activeMode, activeModeOptions);
+    }
+  };
+
   render() {
-    const { activeMode, actions, items, isLoading } = this.props;
+    const { activeMode, items, isLoading, setActiveMode } = this.props;
     const { favorites, watchList, recentlyWatched } = this.state;
 
     const home = (
@@ -254,7 +236,7 @@ export default class Home extends Component<Props, State> {
 
     return (
       <Row>
-        <Header activeMode={activeMode} setActiveMode={actions.setActiveMode} />
+        <Header activeMode={activeMode} setActiveMode={setActiveMode} />
         <Col sm="12">
           {activeMode === 'home' ? (
             home

diff --git a/app/containers/HomePage.js b/app/containers/HomePage.js
@@ -3,9 +3,13 @@
  * @flow
  * @TODO: Use waitForImages plugin to load background images and fade in on load
  */
-import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
-import * as HomeActions from '../actions/homePageActions';
+import {
+  clearAllItems,
+  paginate,
+  setActiveMode,
+  setLoading
+} from '../actions/homePageActions';
 import Home from '../components/home/Home';
 
 function mapStateToProps(state) {
@@ -21,7 +25,12 @@ function mapStateToProps(state) {
 
 function mapDispatchToProps(dispatch) {
   return {
-    actions: bindActionCreators(HomeActions, dispatch)
+    clearAllItems: () => dispatch(clearAllItems()),
+    paginate: (activeMode, activeModeOptions) =>
+      dispatch(paginate(activeMode, activeModeOptions)),
+    setActiveMode: (mode, activeModeOptions) =>
+      dispatch(setActiveMode(mode, activeModeOptions)),
+    setLoading: isLoading => dispatch(setLoading(isLoading))
   };
 }