diff --git a/app/components/home/Home.js b/app/components/home/Home.js index ab3b2575..d24d8858 100644 --- 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 { 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 { 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,8 +117,8 @@ export default class Home extends Component { } })(); - actions.paginate(items); - actions.setLoading(false); + paginate(items); + setLoading(false); return items; } @@ -139,7 +126,7 @@ export default class Home extends Component { /** * If bottom of component is 2000px from viewport, query */ - initInfinitePagination() { + initInfinitePagination = () => { const { infinitePagination, activeMode, @@ -155,18 +142,12 @@ export default class Home extends Component { 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 { }); } - 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 { 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 { 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 { return ( -
+
{activeMode === 'home' ? ( home diff --git a/app/containers/HomePage.js b/app/containers/HomePage.js index 9150359d..397da655 100644 --- 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)) }; }