#383 Ayah Play Audio + Redux Refactoring (WIP)

src/components/Ayah/index.js

@@ -22,12 +22,13 @@ export default class Ayah extends Component {
     isSearch: PropTypes.bool,
     tooltip: PropTypes.string,
     currentWord: PropTypes.any, // gets passed in an integer, null by default
-    onWordClick: PropTypes.func.isRequired
+    onWordClick: PropTypes.func,
+    actions: PropTypes.object
   };
 
   static defaultProps = {
     currentWord: null,
-    isSearched: false,
+    isSearched: false
   };
 
   shouldComponentUpdate(nextProps) {
@@ -44,10 +45,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() {
@@ -140,12 +145,12 @@ export default class Ayah extends Component {
   }
 
   renderPlayLink() {
-    const { isSearch, ayah } = this.props;
+    const { isSearched, ayah } = this.props;
 
-    if (!isSearch) {
+    if (!isSearched) {
       return (
         <a
-          onClick={() => this.handlePlay(ayah.ayahNum)}
+          onClick={() => this.handlePlay(ayah.ayahKey)}
           className="text-muted"
         >
           <i className="ss-icon ss-play" /> Play

src/containers/App/index.js

@@ -18,12 +18,7 @@ import FontStyles from 'components/FontStyles';
 const styles = require('./style.scss');
 
 @metrics(metricsConfig)
-@connect(
-  state => ({
-    surahs: state.surahs.entities
-  })
-)
-export default class App extends Component {
+class App extends Component {
   static propTypes = {
     surahs: PropTypes.object,
     children: PropTypes.any
@@ -107,3 +102,5 @@ export default class App extends Component {
     );
   }
 }
+
+export default connect(state => ({surahs: state.surahs.entities }))(App)

src/containers/Home/index.js

@@ -11,18 +11,6 @@ import { isAllLoaded, loadAll } from '../../redux/modules/surahs';
 
 const styles = require('./style.scss');
 
-@asyncConnect([{
-  promise({ store: { getState, dispatch } }) {
-    if (!isAllLoaded(getState())) {
-      return dispatch(loadAll());
-    }
-
-    return true;
-  }
-}])
-@connect(
-  state => ({surahs: state.surahs.entities})
-)
 class Home extends Component {
   static propTypes = {
     lastVisit: PropTypes.any,
@@ -189,4 +177,16 @@ class Home extends Component {
   }
 }
 
-export default Home;
+const AsyncHome = asyncConnect([{
+  promise({ store: { getState, dispatch } }) {
+    if (!isAllLoaded(getState())) {
+      return dispatch(loadAll());
+    }
+
+    return true;
+  }
+}])(Home);
+
+
+export default connect(state => ({surahs: state.surahs.entities}))(AsyncHome);
+

src/containers/Search/index.js

@@ -1,5 +1,6 @@
 import React, { Component, PropTypes } from 'react';
 import { PropTypes as MetricsPropTypes } from 'react-metrics';
+
 import { asyncConnect } from 'redux-connect';
 import { connect } from 'react-redux';
 import { push } from 'react-router-redux';
@@ -19,28 +20,7 @@ import { search } from '../../redux/modules/searchResults';
 
 const style = require('./style.scss');
 
-@asyncConnect([{
-  promise({ store: { dispatch }, location: { query } }) {
-    return dispatch(search(query));
-  }
-}])
-@connect(
-  state => ({
-    isErrored: state.searchResults.errored,
-    isLoading: state.searchResults.loading,
-    total: state.searchResults.total,
-    page: state.searchResults.page,
-    size: state.searchResults.size,
-    from: state.searchResults.from,
-    took: state.searchResults.took,
-    query: state.searchResults.query,
-    results: state.searchResults.results,
-    ayahs: state.searchResults.entities,
-    options: state.options
-  }),
-  { push }
-)
-export default class Search extends Component {
+class Search extends Component {
   static propTypes = {
     isErrored: PropTypes.bool,
     isLoading: PropTypes.bool,
@@ -177,3 +157,27 @@ export default class Search extends Component {
     );
   }
 }
+
+const AsyncSearch = asyncConnect([{
+  promise({ store: { dispatch }, location: { query } }) {
+    return dispatch(search(query));
+  }
+}])(Search);
+
+function mapStateToProps(state) {
+  return {
+    isErrored: state.searchResults.errored,
+    isLoading: state.searchResults.loading,
+    total: state.searchResults.total,
+    page: state.searchResults.page,
+    size: state.searchResults.size,
+    from: state.searchResults.from,
+    took: state.searchResults.took,
+    query: state.searchResults.query,
+    results: state.searchResults.results,
+    ayahs: state.searchResults.entities,
+    options: state.options
+  };
+}
+
+export default connect(mapStateToProps, {push})(AsyncSearch);