From 0def82e35053d8988e0c6e4e59064748fbc132cf Mon Sep 17 00:00:00 2001 From: Sabeur Thabti Date: Sun, 10 Jul 2016 11:06:37 +0100 Subject: [PATCH 1/7] #383 refactoring how redux actions and fixing ayah play (WIP) --- src/components/Ayah/index.js | 16 ++-- src/containers/Surah/connect.js | 4 +- src/containers/Surah/index.js | 153 ++++++++++++++++--------------- src/redux/modules/audioplayer.js | 29 ++++++ 4 files changed, 118 insertions(+), 84 deletions(-) diff --git a/src/components/Ayah/index.js b/src/components/Ayah/index.js index a7dcc67a9..1942c7135 100644 --- a/src/components/Ayah/index.js +++ b/src/components/Ayah/index.js @@ -27,7 +27,7 @@ export default class Ayah extends Component { static defaultProps = { currentWord: null, - isSearched: false, + isSearched: false }; shouldComponentUpdate(nextProps) { @@ -44,10 +44,14 @@ export default class Ayah extends Component { return conditions.some(condition => condition); } - handlePlay() { - this.setState({ - open: false - }); + handlePlay(ayah) { + + const{stop, setAyah, start} = this.props.actions; + + stop(); + setAyah(ayah); + start(); + } renderTranslations() { @@ -145,7 +149,7 @@ export default class Ayah extends Component { if (!isSearch) { return ( this.handlePlay(ayah.ayahNum)} + onClick={() => this.handlePlay(ayah.ayahKey)} className="text-muted" > Play diff --git a/src/containers/Surah/connect.js b/src/containers/Surah/connect.js index 965888db0..8ab71761b 100644 --- a/src/containers/Surah/connect.js +++ b/src/containers/Surah/connect.js @@ -4,7 +4,7 @@ import { clearCurrent, isLoaded, load as loadAyahs } from '../../redux/modules/a import debug from 'helpers/debug'; const ayahRangeSize = 30; - +console.log('hello') export const surahsConnect = ({ store: { getState, dispatch } }) => { debug('component:Surah:surahsConnect', 'Init'); @@ -22,7 +22,7 @@ export const ayahsConnect = ({ store: { dispatch, getState }, params }) => { const range = params.range; const surahId = parseInt(params.surahId, 10); - +debugger; let from; let to; diff --git a/src/containers/Surah/index.js b/src/containers/Surah/index.js index b600945ab..b31e79dcc 100644 --- a/src/containers/Surah/index.js +++ b/src/containers/Surah/index.js @@ -1,8 +1,12 @@ import React, { Component, PropTypes } from 'react'; import Link from 'react-router/lib/Link'; +// redux +import { bindActionCreators } from 'redux' import { connect } from 'react-redux'; import { asyncConnect } from 'redux-connect'; import { push } from 'react-router-redux'; + +// bootstrap import Row from 'react-bootstrap/lib/Row'; import Col from 'react-bootstrap/lib/Col'; import Helmet from 'react-helmet'; @@ -36,64 +40,20 @@ import debug from 'helpers/debug'; import descriptions from './descriptions'; -const style = require('./style.scss'); - - import { surahsConnect, ayahsConnect } from './connect'; -import { - load as loadAyahs, - setCurrentAyah, - clearCurrentWord -} from '../../redux/modules/ayahs'; -import { setCurrentWord } from '../../redux/modules/audioplayer'; +import * as AudioActions from '../../redux/modules/audioplayer'; +import * as AyahActions from '../../redux/modules/ayahs'; +import * as OptionsActions from '../../redux/modules/options'; -import { setOption, toggleReadingMode } from '../../redux/modules/options'; +const style = require('./style.scss'); let lastScroll = 0; -@asyncConnect([ - { - promise: surahsConnect, - }, - { - promise: ayahsConnect - } -]) -@connect( - (state, ownProps) => { - const surahId = parseInt(ownProps.params.surahId, 10); - const surah: Object = state.surahs.entities[surahId]; - const ayahs: Object = state.ayahs.entities[surahId]; - const ayahIds = new Set(Object.keys(ayahs).map(key => parseInt(key.split(':')[1], 10))); - - return { - surah, - ayahs, - ayahIds, - isStarted: state.audioplayer.isStarted, - currentWord: state.ayahs.currentWord, - isEndOfSurah: ayahIds.size === surah.ayat, - surahs: state.surahs.entities, - isLoading: state.ayahs.loading, - isLoaded: state.ayahs.loaded, - lines: state.lines.lines, - options: state.options, - }; - }, - { - loadAyahs, - setOption, - toggleReadingMode, - setCurrentAyah, - setCurrentWord, - clearCurrentWord, - push - } -) -export default class Surah extends Component { +class Surah extends Component { static propTypes = { surah: PropTypes.object.isRequired, + actions: PropTypes.object.isRequired, lines: PropTypes.object.isRequired, isEndOfSurah: PropTypes.bool.isRequired, ayahIds: PropTypes.any, @@ -102,15 +62,8 @@ export default class Surah extends Component { isLoading: PropTypes.bool.isRequired, isLoaded: PropTypes.bool.isRequired, options: PropTypes.object.isRequired, - push: PropTypes.func.isRequired, params: PropTypes.object.isRequired, ayahs: PropTypes.object.isRequired, - loadAyahs: PropTypes.func.isRequired, - setOption: PropTypes.func.isRequired, - toggleReadingMode: PropTypes.func.isRequired, - setCurrentAyah: PropTypes.func.isRequired, - setCurrentWord: PropTypes.func.isRequired, - clearCurrentWord: PropTypes.func.isRequired, isStarted: PropTypes.bool }; @@ -119,13 +72,13 @@ export default class Surah extends Component { }; componentWillMount() { - const { params, surah, push } = this.props; // eslint-disable-line no-shadow + const { params, surah, actions } = this.props; // eslint-disable-line no-shadow if (params.range && params.range.includes('-')) { const start = parseInt(params.range.split('-')[0], 10); if (start > surah.ayat || isNaN(start)) { - return push('/error/invalid-ayah-range'); + return actions.push.push('/error/invalid-ayah-range'); } return false; @@ -135,6 +88,7 @@ export default class Surah extends Component { } componentDidMount() { + console.log(this.props.actions); if (__CLIENT__) { window.removeEventListener('scroll', this.handleNavbar, true); window.addEventListener('scroll', this.handleNavbar, true); @@ -178,13 +132,13 @@ export default class Surah extends Component { } handleOptionChange = (payload) => { - const { setOption, loadAyahs, surah, options } = this.props; // eslint-disable-line no-shadow, max-len + const {surah, options, actions} = this.props; // eslint-disable-line no-shadow, max-len const from = this.getFirst(); const to = this.getLast(); - setOption(payload); + actions.options.setOption(payload); - return loadAyahs(surah.id, from, to, Object.assign({}, options, payload)); + return actions.ayah.load(surah.id, from, to, Object.assign({}, options, payload)); } handleNavbar = () => { @@ -201,9 +155,9 @@ export default class Surah extends Component { } handleVerseDropdownClick = (ayahNum) => { - const { ayahIds, push, surah, setCurrentAyah } = this.props; // eslint-disable-line no-shadow + const { ayahIds, surah, actions } = this.props; // eslint-disable-line no-shadow - setCurrentAyah(`${surah.id}:${ayahNum}`); + actions.ayah.setCurrentAyah(`${surah.id}:${ayahNum}`); if (ayahIds.has(ayahNum)) { return false; @@ -211,7 +165,7 @@ export default class Surah extends Component { if (ayahNum > (this.getLast() + 10) || ayahNum < this.getFirst()) { // This is beyond lazy loading next page. - return push(`/${surah.id}/${ayahNum}-${ayahNum + 10}`); + return actions.push.push(`/${surah.id}/${ayahNum}-${ayahNum + 10}`); } return this.handleLazyLoadAyahs(() => setTimeout(() => @@ -220,7 +174,7 @@ export default class Surah extends Component { } handleLazyLoadAyahs = (callback) => { - const { loadAyahs, ayahIds, surah, isEndOfSurah, options } = this.props; // eslint-disable-line no-shadow, max-len + const { loadAyahs, ayahIds, surah, isEndOfSurah, options, actions } = this.props; // eslint-disable-line no-shadow, max-len const range = [this.getFirst(), this.getLast()]; let size = 10; @@ -233,7 +187,7 @@ export default class Surah extends Component { const to = (from + size); if (!isEndOfSurah && !ayahIds.has(to)) { - loadAyahs(surah.id, from, to, options).then(() => { + actions.ayah.load(surah.id, from, to, options).then(() => { this.setState({lazyLoading: false}); if (callback) { callback(); @@ -327,13 +281,14 @@ export default class Surah extends Component { } renderAyahs() { - const { ayahs, setCurrentWord, options } = this.props; // eslint-disable-line no-shadow + const { ayahs, actions, options } = this.props; // eslint-disable-line no-shadow return Object.values(ayahs).map(ayah => ( )); @@ -361,10 +316,9 @@ export default class Surah extends Component { renderTopOptions() { const { - toggleReadingMode, // eslint-disable-line no-shadow options, surah, - setOption // eslint-disable-line no-shadow + actions // eslint-disable-line no-shadow } = this.props; return ( @@ -373,7 +327,7 @@ export default class Surah extends Component {