Custom prop types (#726)

* customPorpTypes.js file added that would hold all propType validations

* custom props added to all components

* Type folder removed

* wrong imports were fixed

src/components/Audioplayer/RepeatDropdown/index.js

@@ -1,30 +1,17 @@
 import React, { Component, PropTypes } from 'react';
+import * as customPropTypes from 'customPropTypes';
 import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
 import Popover from 'react-bootstrap/lib/Popover';
 import Nav from 'react-bootstrap/lib/Nav';
 import NavItem from 'react-bootstrap/lib/NavItem';
 import FormControl from 'react-bootstrap/lib/FormControl';
 import { intlShape, injectIntl } from 'react-intl';
-
 import SwitchToggle from 'components/SwitchToggle';
 import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 
-import surahType from 'types/surahType';
-
 const style = require('../style.scss');
 
 class RepeatButton extends Component {
-  static propTypes = {
-    chapter: surahType,
-    repeat: PropTypes.shape({
-      from: PropTypes.number,
-      to: PropTypes.number,
-      times: PropTypes.number
-    }).isRequired,
-    setRepeat: PropTypes.func.isRequired,
-    current: PropTypes.number.isRequired,
-    intl: intlShape.isRequired
-  };
 
   handleToggle = () => {
     const { repeat, setRepeat, current } = this.props;
@@ -37,7 +24,7 @@ class RepeatButton extends Component {
       from: current,
       to: current
     });
-  }
+  };
 
   handleNavChange = (nav) => {
     const { setRepeat, current } = this.props;
@@ -281,4 +268,12 @@ class RepeatButton extends Component {
   }
 }
 
+RepeatButton.propTypes = {
+  chapter: customPropTypes.surahType,
+  repeat: customPropTypes.timeInterval,
+  setRepeat: PropTypes.func.isRequired,
+  current: PropTypes.number.isRequired,
+  intl: intlShape.isRequired
+};
+
 export default injectIntl(RepeatButton);

src/components/Audioplayer/Segments/index.js

@@ -1,15 +1,9 @@
 import React, { Component, PropTypes } from 'react';
+import * as customPropTypes from 'customPropTypes';
 import Helmet from 'react-helmet';
-import { segmentType } from 'types';
-
 import debug from 'helpers/debug';
 
-export default class Segments extends Component {
-  static propTypes = {
-    segments: PropTypes.objectOf(segmentType).isRequired,
-    currentVerse: PropTypes.string,
-    currentTime: PropTypes.number
-  };
+class Segments extends Component {
 
   shouldComponentUpdate(nextProps) {
     return [
@@ -53,3 +47,11 @@ export default class Segments extends Component {
     );
   }
 }
+
+Segments.propTypes = {
+  segments: customPropTypes.segments.isRequired,
+  currentVerse: PropTypes.string,
+  currentTime: PropTypes.number
+};
+
+export default Segments;

src/components/Audioplayer/Track/index.js

@@ -18,7 +18,7 @@ export default class Track extends Component {
     );
 
     return onTrackChange(fraction);
-  }
+  };
 
   render() {
     const { progress } = this.props;

src/components/Audioplayer/index.js

@@ -1,18 +1,16 @@
 /* global document */
 // TODO: This file is too too large.
 import React, { Component, PropTypes } from 'react';
+import * as customPropTypes from 'customPropTypes';
 import { connect } from 'react-redux';
 import { camelize } from 'humps';
 import Loadable from 'react-loadable';
-
 import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 
 // Helpers
 import debug from 'helpers/debug';
 import scroller from 'utils/scroller';
 
-import { surahType, segmentType, verseType } from 'types';
-
 // Redux
 import * as AudioActions from 'redux/actions/audioplayer';
 
@@ -29,38 +27,6 @@ const RepeatDropdown = Loadable({
 });
 
 export class Audioplayer extends Component {
-  static propTypes = {
-    className: PropTypes.string,
-    chapter: surahType,
-    onLoadAyahs: PropTypes.func.isRequired,
-    segments: PropTypes.objectOf(segmentType),
-    // NOTE: should be PropTypes.instanceOf(Audio) but not on server.
-    files: PropTypes.object, // eslint-disable-line
-    currentVerse: PropTypes.string,
-    buildOnClient: PropTypes.func.isRequired,
-    isLoadedOnClient: PropTypes.bool.isRequired,
-    isLoading: PropTypes.bool.isRequired,
-    play: PropTypes.func.isRequired,
-    pause: PropTypes.func.isRequired,
-    next: PropTypes.func.isRequired, // eslint-disable-line
-    previous: PropTypes.func.isRequired, // eslint-disable-line
-    update: PropTypes.func.isRequired,
-    repeat: PropTypes.shape({
-      from: PropTypes.number,
-      to: PropTypes.number,
-      time: PropTypes.number,
-    }).isRequired,
-    shouldScroll: PropTypes.bool.isRequired,
-    setRepeat: PropTypes.func.isRequired,
-    setAyah: PropTypes.func.isRequired,
-    toggleScroll: PropTypes.func.isRequired,
-    isPlaying: PropTypes.bool,
-    currentTime: PropTypes.number,
-    duration: PropTypes.number,
-    // NOTE: should be PropTypes.instanceOf(Audio) but not on server.
-    currentFile: PropTypes.any, // eslint-disable-line
-    startVerse: verseType // eslint-disable-line
-  };
 
   componentDidMount() {
     const { isLoadedOnClient, buildOnClient, chapter, currentFile } = this.props; // eslint-disable-line no-shadow, max-len
@@ -510,4 +476,33 @@ const mapStateToProps = (state, ownProps) => {
   };
 };
 
+Audioplayer.propTypes = {
+  className: PropTypes.string,
+  chapter: customPropTypes.surahType,
+  onLoadAyahs: PropTypes.func.isRequired,
+  segments: customPropTypes.segments,
+  // NOTE: should be PropTypes.instanceOf(Audio) but not on server.
+  files: PropTypes.object, // eslint-disable-line
+  currentVerse: PropTypes.string,
+  buildOnClient: PropTypes.func.isRequired,
+  isLoadedOnClient: PropTypes.bool.isRequired,
+  isLoading: PropTypes.bool.isRequired,
+  play: PropTypes.func.isRequired,
+  pause: PropTypes.func.isRequired,
+  next: PropTypes.func.isRequired, // eslint-disable-line
+  previous: PropTypes.func.isRequired, // eslint-disable-line
+  update: PropTypes.func.isRequired,
+  repeat: customPropTypes.timeInterval.isRequired,
+  shouldScroll: PropTypes.bool.isRequired,
+  setRepeat: PropTypes.func.isRequired,
+  setAyah: PropTypes.func.isRequired,
+  toggleScroll: PropTypes.func.isRequired,
+  isPlaying: PropTypes.bool,
+  currentTime: PropTypes.number,
+  duration: PropTypes.number,
+  // NOTE: should be PropTypes.instanceOf(Audio) but not on server.
+  currentFile: PropTypes.any, // eslint-disable-line
+  startVerse: customPropTypes.verseType // eslint-disable-line
+};
+
 export default connect(mapStateToProps, AudioActions)(Audioplayer);

src/components/Bismillah/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { surahType } from 'types';
+import * as customPropTypes from 'customPropTypes';
 
 const Bismillah = ({ chapter }) => {
   if (chapter && chapter.bismillahPre) {
@@ -19,7 +19,7 @@ const Bismillah = ({ chapter }) => {
 };
 
 Bismillah.propTypes = {
-  chapter: surahType.isRequired
+  chapter: customPropTypes.surahType.isRequired
 };
 
 export default Bismillah;

src/components/ContentDropdown/index.js

@@ -1,8 +1,8 @@
 import React, { Component, PropTypes } from 'react';
+import * as customPropTypes from 'customPropTypes';
 import { connect } from 'react-redux';
 import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 import { loadTranslations } from 'redux/actions/options';
-import { contentType } from 'types';
 import Menu, { MenuItem } from 'quran-components/lib/Menu';
 import Checkbox from 'quran-components/lib/Checkbox';
 import Loader from 'quran-components/lib/Loader';
@@ -28,12 +28,6 @@ const compareAlphabetically = property =>
 
 
 class ContentDropdown extends Component {
-  static propTypes = {
-    onOptionChange: PropTypes.func.isRequired,
-    translations: PropTypes.arrayOf(PropTypes.number).isRequired,
-    translationOptions: PropTypes.arrayOf(contentType),
-    loadTranslations: PropTypes.func.isRequired
-  };
 
   componentDidMount() {
     if (!this.props.translationOptions.length) {
@@ -129,6 +123,13 @@ class ContentDropdown extends Component {
   }
 }
 
+ContentDropdown.propTypes = {
+  onOptionChange: PropTypes.func.isRequired,
+  translations: PropTypes.arrayOf(PropTypes.number).isRequired,
+  translationOptions: customPropTypes.translationOptions,
+  loadTranslations: PropTypes.func.isRequired
+};
+
 export default connect(state => ({
   translationOptions: state.options.options.translations,
   loadingTranslations: state.options.loadingTranslations,

src/components/Copy/index.js

@@ -2,11 +2,7 @@ import React, { Component, PropTypes } from 'react';
 import copyToClipboard from 'copy-to-clipboard';
 import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 
-export default class Copy extends Component {
-  static propTypes = {
-    text: PropTypes.string.isRequired,
-    verseKey: PropTypes.string.isRequired,
-  }
+class Copy extends Component {
 
   state = {
     isCopied: false
@@ -17,7 +13,7 @@ export default class Copy extends Component {
     this.setState({ isCopied: true });
 
     setTimeout(() => this.setState({ isCopied: false }), 1000);
-  }
+  };
 
   render() {
     const { isCopied } = this.state;
@@ -37,5 +33,11 @@ export default class Copy extends Component {
       </a>
     );
   }
-
 }
+
+Copy.propTypes = {
+  text: PropTypes.string.isRequired,
+  verseKey: PropTypes.string.isRequired,
+};
+
+export default Copy;

src/components/FontSizeDropdown/index.js

@@ -1,17 +1,10 @@
 import React, { Component, PropTypes } from 'react';
-
+import * as customPropTypes from 'customPropTypes';
 import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 
 const style = require('./style.scss');
 
-export default class FontSizeDropdown extends Component {
-  static propTypes = {
-    onOptionChange: PropTypes.func,
-    fontSize: PropTypes.shape({
-      arabic: PropTypes.number,
-      translation: PropTypes.number
-    }).isRequired
-  }
+class FontSizeDropdown extends Component {
 
   handleOptionSelected = (type, direction) => {
     const { onOptionChange, fontSize } = this.props;
@@ -90,3 +83,10 @@ export default class FontSizeDropdown extends Component {
     );
   }
 }
+
+FontSizeDropdown.propTypes = {
+  onOptionChange: PropTypes.func,
+  fontSize: customPropTypes.fontSize.isRequired
+};
+
+export default FontSizeDropdown;

src/components/FontStyles/index.js

@@ -12,11 +12,8 @@ import selector from './selector';
   }),
   { load }
 )
-export default class FontStyles extends Component {
-  static propTypes = {
-    fontFaces: PropTypes.objectOf(PropTypes.bool).isRequired,
-    load: PropTypes.func.isRequired
-  };
+
+class FontStyles extends Component {
 
   shouldComponentUpdate(nextProps) {
     return JSON.stringify(this.props.fontFaces) !== JSON.stringify(nextProps.fontFaces);
@@ -54,3 +51,10 @@ export default class FontStyles extends Component {
     );
   }
 }
+
+FontStyles.propTypes = {
+  fontFaces: PropTypes.objectOf(PropTypes.bool).isRequired,
+  load: PropTypes.func.isRequired
+};
+
+export default FontStyles;

src/components/GlobalNav/Surah/index.js

@@ -1,12 +1,10 @@
 import React, { PropTypes, Component } from 'react';
+import * as customPropTypes from 'customPropTypes';
+import * as OptionsActions from 'redux/actions/options.js';
 import { connect } from 'react-redux';
 import Link from 'react-router/lib/Link';
 import Drawer from 'quran-components/lib/Drawer';
 import Menu from 'quran-components/lib/Menu';
-
-import { surahType, optionsType } from 'types';
-import * as OptionsActions from 'redux/actions/options.js';
-
 import SearchInput from 'components/SearchInput';
 import SurahsDropdown from 'components/SurahsDropdown';
 import ReadingModeToggle from 'components/ReadingModeToggle';
@@ -26,14 +24,6 @@ import GlobalNav from '../index';
 const styles = require('../style.scss');
 
 class GlobalNavSurah extends Component {
-  static propTypes = {
-    chapter: surahType.isRequired,
-    chapters: PropTypes.objectOf(surahType).isRequired,
-    options: optionsType.isRequired,
-    setOption: PropTypes.func.isRequired,
-    versesIds: PropTypes.instanceOf(Set),
-    load: PropTypes.func.isRequired
-  };
 
   state = {
     drawerOpen: false
@@ -156,4 +146,13 @@ function mapStateToProps(state, ownProps) {
   };
 }
 
+GlobalNavSurah.propTypes = {
+  chapter: customPropTypes.surahType.isRequired,
+  chapters: customPropTypes.chapters.isRequired,
+  options: customPropTypes.optionsType.isRequired,
+  setOption: PropTypes.func.isRequired,
+  versesIds: PropTypes.instanceOf(Set),
+  load: PropTypes.func.isRequired
+};
+
 export default connect(mapStateToProps, { ...OptionsActions, load })(GlobalNavSurah);