Tidy up home component

app/components/header/Header.js

@@ -27,6 +27,7 @@ export default class Header extends Component<Props, State> {
   props: Props;
 
   state: State = {
+    collapsed: true,
     searchQuery: ''
   };
 
@@ -51,24 +52,32 @@ export default class Header extends Component<Props, State> {
     }
   };
 
+  setCollapse = () => {
+    this.setState(prevState => ({
+      collapsed: !prevState.collapsed
+    }));
+  };
+
   render(): Node {
     const { activeMode, setActiveMode } = this.props;
-    const { searchQuery } = this.state;
+    const { collapsed, searchQuery } = this.state;
 
     return (
-      <Navbar className="navbar navbar-expand-lg navbar-dark bg-dark col-sm-12 col-md-12">
+      <Navbar
+        className="navbar navbar-expand-lg navbar-dark bg-dark col-sm-12 col-md-12"
+        sticky="top"
+      >
         <NavbarToggler
           className="navbar-toggler"
           type="button"
-          data-toggle="collapse"
-          data-target="#navbarSupportedContent"
-          aria-controls="navbarSupportedContent"
-          aria-expanded="false"
+          aria-expanded={!collapsed}
           aria-label="Toggle navigation"
+          onClick={this.setCollapse}
         />
         <Collapse
           className="collapse navbar-collapse"
           id="navbarSupportedContent"
+          isOpen={!collapsed}
         >
           <Nav className="navbar-nav mr-auto">
             <NavItem

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

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))
   };
 }
 

app/package.json

@@ -2,7 +2,7 @@
   "name": "PopcornTime",
   "description": "An experimental PopcornTime client",
   "homepage": "https://github.com/amilajack/popcorn-time-desktop",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "main": "./main.prod.js",
   "author": {
     "name": "Amila Welihinda <[email protected]>",

app/styles/utilities/container.scss

@@ -1,19 +1,4 @@
-::-webkit-scrollbar-corner {
-  background-color: transparent;
-}
-
 .row-center {
   display: flex;
   align-items: center;
 }
-
-::-webkit-scrollbar {
-  z-index: 0;
-  width: 8px;
-  height: 8px;
-}
-
-::-webkit-scrollbar-thumb {
-  -webkit-border-radius: 2px;
-  background: rgba(150, 150, 150, 0.33);
-}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "popcorn-time-desktop",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "description": "An experimental Popcorn Time client",
   "scripts": {
     "bench-api": "cross-env NODE_ENV=test BABEL_DISABLE_CACHE=1 jest test/**/*.benchmark.js",