From a2b395b5d1982ea1eb9007566f42d94167f9a523 Mon Sep 17 00:00:00 2001 From: Mohamed El Mahallawy Date: Wed, 1 Feb 2017 15:51:58 -0800 Subject: [PATCH 1/5] changes --- .../Audioplayer/RepeatDropdown/index.js | 4 +- src/components/Audioplayer/index.js | 32 +++---- src/components/Home/LastVisit/index.js | 10 +- src/components/Home/SurahsList/index.js | 16 ++-- src/components/SearchAutocomplete/index.js | 30 +++--- src/components/SettingsModal/index.js | 2 +- src/components/Share/index.js | 2 +- src/components/SurahInfo/index.js | 2 +- src/components/SurahsDropdown/index.js | 4 +- src/components/VersesDropdown/index.js | 2 +- src/containers/App/index.js | 4 +- src/containers/Home/index.js | 16 ++-- src/containers/Surah/Header/index.js | 85 ---------------- src/containers/Surah/Header/style.scss | 15 --- src/containers/Surah/Title/index.js | 2 +- src/containers/Surah/Title/spec.js | 2 +- src/containers/Surah/connect.js | 2 +- src/containers/Surah/index.js | 96 +++++++++---------- src/redux/actions/{surahs.js => chapters.js} | 18 ++-- src/redux/actions/spec.js | 4 +- .../constants/{surahs.js => chapters.js} | 0 src/redux/modules/{surahs.js => chapters.js} | 6 +- src/redux/modules/lines.js | 2 +- src/redux/modules/reducer.js | 4 +- src/redux/schemas.js | 4 +- src/server/config/sitemap.js | 6 +- 26 files changed, 135 insertions(+), 235 deletions(-) delete mode 100644 src/containers/Surah/Header/index.js delete mode 100644 src/containers/Surah/Header/style.scss rename src/redux/actions/{surahs.js => chapters.js} (53%) rename src/redux/constants/{surahs.js => chapters.js} (100%) rename src/redux/modules/{surahs.js => chapters.js} (90%) diff --git a/src/components/Audioplayer/RepeatDropdown/index.js b/src/components/Audioplayer/RepeatDropdown/index.js index b5ff5d1db..956fddf43 100644 --- a/src/components/Audioplayer/RepeatDropdown/index.js +++ b/src/components/Audioplayer/RepeatDropdown/index.js @@ -58,7 +58,7 @@ class RepeatButton extends Component { renderRangeAyahs() { const { surah, repeat, setRepeat } = this.props; - const array = Array(surah.ayat).join().split(','); + const array = Array(surah.versesCount).join().split(','); return (
@@ -129,7 +129,7 @@ class RepeatButton extends Component { renderSingleAyah() { const { repeat, setRepeat, surah } = this.props; - const array = Array(surah.ayat).join().split(','); + const array = Array(surah.versesCount).join().split(','); return (
diff --git a/src/components/Audioplayer/index.js b/src/components/Audioplayer/index.js index 7f5f6354f..20e42d44e 100644 --- a/src/components/Audioplayer/index.js +++ b/src/components/Audioplayer/index.js @@ -25,7 +25,7 @@ const style = require('./style.scss'); export class Audioplayer extends Component { static propTypes = { className: PropTypes.string, - surah: surahType, + chapter: surahType, onLoadAyahs: PropTypes.func.isRequired, segments: PropTypes.objectOf(segmentType), // NOTE: should be PropTypes.instanceOf(Audio) but not on server. @@ -56,14 +56,14 @@ export class Audioplayer extends Component { }; componentDidMount() { - const { isLoadedOnClient, buildOnClient, surah, currentFile } = this.props; // eslint-disable-line no-shadow, max-len + const { isLoadedOnClient, buildOnClient, chapter, currentFile } = this.props; // eslint-disable-line no-shadow, max-len debug('component:Audioplayer', 'componentDidMount'); if (!isLoadedOnClient && __CLIENT__) { debug('component:Audioplayer', 'componentDidMount on client'); - return buildOnClient(surah.id); + return buildOnClient(chapter.chapterNumber); } if (currentFile) { @@ -79,7 +79,7 @@ export class Audioplayer extends Component { return false; } - // When you go directly to the surah page, /2, the files are not loaded yet + // When you go directly to the chapter page, /2, the files are not loaded yet if (this.props.isLoadedOnClient !== nextProps.isLoadedOnClient) { return this.handleAddFileListeners(nextProps.currentFile); } @@ -117,13 +117,13 @@ export class Audioplayer extends Component { } getNext() { - const { currentAyah, surah, files, onLoadAyahs } = this.props; + const { currentAyah, chapter, files, onLoadAyahs } = this.props; const ayahIds = Object.keys(files); const ayahNum = currentAyah.split(':')[1]; const index = ayahIds.findIndex(id => id === currentAyah); - if (surah.ayat === ayahNum + 1) { - // We are at the end of the surah! + if (chapter.versesCount === ayahNum + 1) { + // We are at the end of the chapter! return false; } @@ -192,7 +192,7 @@ export class Audioplayer extends Component { setRepeat, // eslint-disable-line no-shadow setAyah // eslint-disable-line no-shadow } = this.props; - const [surah, ayah] = currentAyah.split(':').map(val => parseInt(val, 10)); + const [chapter, ayah] = currentAyah.split(':').map(val => parseInt(val, 10)); file.pause(); @@ -235,7 +235,7 @@ export class Audioplayer extends Component { } setRepeat({ ...repeat, times: repeat.times - 1 }); - setAyah(`${surah}:${repeat.from}`); + setAyah(`${chapter}:${repeat.from}`); return this.play(); } @@ -369,9 +369,9 @@ export class Audioplayer extends Component { } renderNextButton() { - const { surah, currentAyah } = this.props; - if (!surah) return false; - const isEnd = surah.ayat === parseInt(currentAyah.split(':')[1], 10); + const { chapter, currentAyah } = this.props; + if (!chapter) return false; + const isEnd = chapter.versesCount === parseInt(currentAyah.split(':')[1], 10); return (
  • @@ -469,8 +469,8 @@ export class Audioplayer extends Component { } const mapStateToProps = (state, ownProps) => ({ - files: state.audioplayer.files[ownProps.surah.id], - segments: state.audioplayer.segments[ownProps.surah.id], + files: state.audioplayer.files[ownProps.chapter.chapterNumber], + segments: state.audioplayer.segments[ownProps.chapter.chapterNumber], currentFile: state.audioplayer.currentFile, currentAyah: state.audioplayer.currentAyah, surahId: state.audioplayer.surahId, diff --git a/src/components/Home/LastVisit/index.js b/src/components/Home/LastVisit/index.js index 3ebb76210..bb7f3428c 100644 --- a/src/components/Home/LastVisit/index.js +++ b/src/components/Home/LastVisit/index.js @@ -8,15 +8,15 @@ const styles = require('containers/Home/style.scss'); const LastVisit = (props) => { debug('component:Index', 'LastVisit'); - if (!props.surah) return false; + if (!props.chapter) return false; return (

    - {' '} - + {' '} + - {props.surah.name.simple} ({props.surah.id}:{props.ayah}) + {props.chapter.nameSimple} ({props.chapter.chapterNumber}:{props.ayah})

    @@ -25,7 +25,7 @@ const LastVisit = (props) => { }; LastVisit.propTypes = { - surah: surahType.isRequired, + chapter: surahType.isRequired, ayah: PropTypes.number.isRequired }; diff --git a/src/components/Home/SurahsList/index.js b/src/components/Home/SurahsList/index.js index e98281d1d..c84a5e030 100644 --- a/src/components/Home/SurahsList/index.js +++ b/src/components/Home/SurahsList/index.js @@ -11,19 +11,19 @@ const SurahsList = (props) => { return (
      - {props.surahs.map(surah => ( -
    • - + {props.chapters.map(chapter => ( +
    • +
      - {surah.id} + {chapter.chapterNumber}
      - {surah.name.simple} + {chapter.nameSimple}
      - {surah.name.english} + {chapter.translatedNames.name}
      - {surah.name.arabic} + {chapter.nameArabic}
      • @@ -32,7 +32,7 @@ const SurahsList = (props) => { }; SurahsList.propTypes = { - surahs: PropTypes.arrayOf(surahType).isRequired + chapters: PropTypes.arrayOf(surahType).isRequired }; export default SurahsList; diff --git a/src/components/SearchAutocomplete/index.js b/src/components/SearchAutocomplete/index.js index 7f34aa059..ca9f65ed1 100644 --- a/src/components/SearchAutocomplete/index.js +++ b/src/components/SearchAutocomplete/index.js @@ -12,7 +12,7 @@ const ayahRegex = /^(\d+)(?::(\d+))?$/; class SearchAutocomplete extends Component { static propTypes = { - surahs: PropTypes.objectOf(surahType).isRequired, + chapters: PropTypes.objectOf(surahType).isRequired, value: PropTypes.string, // TODO: This should not be doing html stuff. Should use react onKeydown. input: PropTypes.any, // eslint-disable-line @@ -68,19 +68,19 @@ class SearchAutocomplete extends Component { if (isAyahKeySearch) { const captures = value.match(ayahRegex); - const surahId = captures[1]; + const chapterId = captures[1]; const ayahNum = captures[2]; - const surah = this.props.surahs[surahId]; - matches.push([surah.name.simple, surah.id + (ayahNum ? `/${ayahNum}` : '')]); + const chapter = this.props.chapters[chapterId]; + matches.push([chapter.name.simple, chapter.chapterNumber + (ayahNum ? `/${ayahNum}` : '')]); } else if (value.length >= 2) { const escaped = value.replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&'); - Object.keys(this.props.surahs).forEach((surahId) => { - const surah = this.props.surahs[surahId]; - if (RegExp(escaped, 'i').test(surah.name.simple.replace(/['-]/g, ''))) { - matches.push([surah.name.simple, surah.id]); - } else if (RegExp(escaped, 'i').test(surah.name.arabic)) { - matches.push([surah.name.arabic, surah.id]); + Object.keys(this.props.chapters).forEach((chapterId) => { + const chapter = this.props.chapters[chapterId]; + if (RegExp(escaped, 'i').test(chapter.name.simple.replace(/['-]/g, ''))) { + matches.push([chapter.nameSimple, chapter.chapterNumber]); + } else if (RegExp(escaped, 'i').test(chapter.nameArabic)) { + matches.push([chapter.nameArabic, chapter.chapterNumber]); } }); } @@ -195,13 +195,13 @@ class SearchAutocomplete extends Component { } function mapStateToProps(state, ownProps) { - const surahs = state.surahs.entities; - const surahId = state.surahs.current; + const chapters = state.chapters.entities; + const chapterId = state.chapters.current; const suggestions = state.suggestResults.results[ownProps.value]; let lang = 'en'; - if (state.ayahs && state.ayahs.entities && state.ayahs.entities[surahId]) { - const ayahs = state.ayahs.entities[surahId]; + if (state.ayahs && state.ayahs.entities && state.ayahs.entities[chapterId]) { + const ayahs = state.ayahs.entities[chapterId]; const ayahKey = Object.keys(ayahs)[0]; if (ayahKey) { @@ -214,7 +214,7 @@ function mapStateToProps(state, ownProps) { } return { - surahs, + chapters, suggestions, lang }; diff --git a/src/components/SettingsModal/index.js b/src/components/SettingsModal/index.js index 2c46faca4..64884d18d 100644 --- a/src/components/SettingsModal/index.js +++ b/src/components/SettingsModal/index.js @@ -30,7 +30,7 @@ const SettingsModal = ({ if (surah) { const first = [...ayahIds][0]; const last = [...ayahIds][[...ayahIds].length - 1]; - load(surah.id, first, last, { ...options, ...payload }); + load(chapter.chapterNumber, first, last, { ...options, ...payload }); } }; diff --git a/src/components/Share/index.js b/src/components/Share/index.js index a00e8ed6d..91863ee1c 100644 --- a/src/components/Share/index.js +++ b/src/components/Share/index.js @@ -10,7 +10,7 @@ const TwitterIcon = generateShareIcon('twitter'); const Share = ({ surah, ayahKey }) => { // Fallback to Surah Id - const path = ayahKey ? ayahKey.replace(':', '/') : surah.id; + const path = ayahKey ? ayahKey.replace(':', '/') : chapter.chapterNumber; const shareUrl = `https://quran.com/${path}`; const title = ayahKey ? `Surah ${surah.name.simple} [${ayahKey}]` : `Surah ${surah.name.simple}`; const iconProps = ayahKey ? { iconBgStyle: { fill: '#d1d0d0' } } : {}; diff --git a/src/components/SurahInfo/index.js b/src/components/SurahInfo/index.js index 944f58574..9d2d617d0 100644 --- a/src/components/SurahInfo/index.js +++ b/src/components/SurahInfo/index.js @@ -26,7 +26,7 @@ const SurahInfo = ({ surah, isShowingSurahInfo, onClose }) => {
      VERSES
      -
      {surah.ayat}
      +
      {surah.versesCount}
      PAGES
      {surah.page.join('-')}
      diff --git a/src/components/SurahsDropdown/index.js b/src/components/SurahsDropdown/index.js index ea095af91..22fe9318f 100644 --- a/src/components/SurahsDropdown/index.js +++ b/src/components/SurahsDropdown/index.js @@ -23,12 +23,12 @@ export default class SurahsDropdown extends Component { const { surahs } = this.props; return Object.values(surahs).map((surah, index) => ( - +
      - {surah.id} + {chapter.chapterNumber}
      diff --git a/src/components/VersesDropdown/index.js b/src/components/VersesDropdown/index.js index 4f77bc5b2..6feaa52f7 100644 --- a/src/components/VersesDropdown/index.js +++ b/src/components/VersesDropdown/index.js @@ -31,7 +31,7 @@ export default class VersesDropdown extends Component {
    • onClick(ayahNum)} - to={`ayah:${surah.id}:${ayahNum}`} + to={`ayah:${chapter.chapterNumber}:${ayahNum}`} smooth spy offset={-120} diff --git a/src/containers/App/index.js b/src/containers/App/index.js index 3a988423e..ac293a85b 100644 --- a/src/containers/App/index.js +++ b/src/containers/App/index.js @@ -74,12 +74,12 @@ class App extends Component {
      • { - React.cloneElement( + /* React.cloneElement( nav || , { handleSidebarToggle: () => this.setState({ sidebarOpen: !this.state.sidebarOpen }) } - ) + ) */ } { React.cloneElement( diff --git a/src/containers/Home/index.js b/src/containers/Home/index.js index e64a55d02..52a851d82 100644 --- a/src/containers/Home/index.js +++ b/src/containers/Home/index.js @@ -5,7 +5,7 @@ import cookie from 'react-cookie'; import { asyncConnect } from 'redux-connect'; import { connect } from 'react-redux'; import debug from 'helpers/debug'; -import { isAllLoaded, loadAll } from 'redux/actions/surahs.js'; +import { isAllLoaded, loadAll } from 'redux/actions/chapters.js'; import LastVisit from 'components/Home/LastVisit'; import SurahsList from 'components/Home/SurahsList'; @@ -29,16 +29,16 @@ const Home = (props) => {
      { lastVisit && - + }

      - +

      - - - + + +
      @@ -48,7 +48,7 @@ const Home = (props) => { }; Home.propTypes = { - surahs: PropTypes.objectOf(surahType).isRequired + chapters: PropTypes.objectOf(surahType).isRequired }; const AsyncHome = asyncConnect([{ @@ -61,4 +61,4 @@ const AsyncHome = asyncConnect([{ } }])(Home); -export default connect(state => ({ surahs: state.surahs.entities }))(AsyncHome); +export default connect(state => ({ chapters: state.chapters.entities }))(AsyncHome); diff --git a/src/containers/Surah/Header/index.js b/src/containers/Surah/Header/index.js deleted file mode 100644 index ce5ebfac8..000000000 --- a/src/containers/Surah/Header/index.js +++ /dev/null @@ -1,85 +0,0 @@ -import React, { PropTypes } from 'react'; -import { Link } from 'react-router'; -import Navbar from 'react-bootstrap/lib/Navbar'; - -import LocaleFormattedMessage from 'components/LocaleFormattedMessage'; - -import debug from 'helpers/debug'; -import surahType from 'types/surahType'; - -const Header = Navbar.Header; - -const styles = require('./style.scss'); - -const SurahHeader = ({ surah, handleToggleSidebar }) => { - debug('component:SurahHeader', 'Render'); - - return ( - -
      -
      -
      - -
      -
      -
        -
      • - { - surah.id > 1 && - - - - - - - } -
        • -
      • - { - surah && -

        - {surah.name.simple} ({surah.name.english}) - سورة {surah.name.arabic} -

        - } -
        • -
      • - { - surah.id < 114 && - - - - - - - } -
        • -
      -
      -
      -
      -       - ); -}; - -SurahHeader.propTypes = { - surah: surahType.isRequired, - handleToggleSidebar: PropTypes.func.isRequired -}; - -export default SurahHeader; diff --git a/src/containers/Surah/Header/style.scss b/src/containers/Surah/Header/style.scss deleted file mode 100644 index 32726d33e..000000000 --- a/src/containers/Surah/Header/style.scss +++ /dev/null @@ -1,15 +0,0 @@ -@import '../../../styles/variables.scss'; - -.container{ - margin: 0px; - width: 100%; - margin-left: 15px; - display: inline-block; -} -.verticalAlign{ - vertical-align: middle; -} -.ornament{ - height: $navbar-height; - opacity: 0.15; -} diff --git a/src/containers/Surah/Title/index.js b/src/containers/Surah/Title/index.js index 5bb040429..9eb2a5cf5 100644 --- a/src/containers/Surah/Title/index.js +++ b/src/containers/Surah/Title/index.js @@ -11,7 +11,7 @@ const zeroPad = (num, places) => { }; const Title = ({ surah }) => { - const title = require(`../../../../static/images/titles/${zeroPad(surah.id, 3)}.svg`); // eslint-disable-line + const title = require(`../../../../static/images/titles/${zeroPad(chapter.chapterNumber, 3)}.svg`); // eslint-disable-line if (!surah) return