Use prop-types for PropTypes

package.json

@@ -116,6 +116,7 @@
     "precss": "1.4.0",
     "pretty-error": "2.0.0",
     "promise": "7.1.1",
+    "prop-types": "^15.6.0",
     "proxy-middleware": "0.14.0",
     "qs": "6.2.1",
     "quran-components": "^0.0.80",

src/components/Audioplayer/RepeatDropdown/index.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import * as customPropTypes from 'customPropTypes';
 import styled, { css } from 'styled-components';
 import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';

src/components/Audioplayer/ScrollButton/index.js

@@ -1,15 +1,20 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
 import Tooltip from 'react-bootstrap/lib/Tooltip';
 import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 
+// eslint-disable-next-line no-confusing-arrow
+const scrollColor = props =>
+  props.active ? props.theme.brandPrimary : props.theme.textColor;
+
 const ScrollLink = styled.a`
   width: 100%;
   display: inline-block;
   cursor: pointer;
   padding-right: 1.5%;
-  color: ${props => (props.active ? props.theme.brandPrimary : props.theme.textColor)};
+  color: ${scrollColor};
   outline: none;
   cursor: pointer;
   margin-bottom: 0;

src/components/Audioplayer/Segments/index.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import * as customPropTypes from 'customPropTypes';
 import Helmet from 'react-helmet';
 import debug from 'helpers/debug';
@@ -7,7 +8,7 @@ class Segments extends Component {
   shouldComponentUpdate(nextProps) {
     return [
       this.props.currentVerse !== nextProps.currentVerse,
-      this.props.currentTime !== nextProps.currentTime,
+      this.props.currentTime !== nextProps.currentTime
     ].some(test => test);
   }
 
@@ -39,11 +40,7 @@ class Segments extends Component {
       debug('component:Segments', 'render without currentWord');
     }
 
-    return (
-      <Helmet
-        style={style}
-      />
-    );
+    return <Helmet style={style} />;
   }
 }
 

src/components/Audioplayer/Track/index.js

@@ -1,5 +1,6 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
 const Container = styled.div`

src/components/Audioplayer/index.js

@@ -1,6 +1,7 @@
 /* global document */
 // TODO: This file is too too large.
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import styled, { css } from 'styled-components';
 import * as customPropTypes from 'customPropTypes';
 import { connect } from 'react-redux';

src/components/ComponentLoader/index.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 
 const ComponentLoader = ({ isLoading, error, pastDelay }) => {
   if (isLoading) {

src/components/Copy/index.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import copyToClipboard from 'copy-to-clipboard';
 import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 

src/components/FontStyles/index.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { fontFaceStyle, fontFaceStyleLoaded } from 'helpers/buildFontFaces';
 import load from 'redux/actions/fontFace.js';
@@ -32,16 +33,18 @@ class FontStyles extends Component {
 
     return (
       <div>
-        {Object.keys(fontFaces).map(className => (
+        {Object.keys(fontFaces).map(className =>
           <style
             key={className}
             dangerouslySetInnerHTML={{
               __html: fontFaces[className]
-                ? `${fontFaceStyle(className)} ${fontFaceStyleLoaded(className)}`
+                ? `${fontFaceStyle(className)} ${fontFaceStyleLoaded(
+                    className
+                  )}`
                 : fontFaceStyle(className)
             }}
           />
-        ))}
+        )}
       </div>
     );
   }

src/components/GlobalNav/Surah/index.js

@@ -1,4 +1,5 @@
-import React, { PropTypes, Component } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import * as customPropTypes from 'customPropTypes';
 import { connect } from 'react-redux';
 import { replace } from 'react-router-redux';

src/components/GlobalNav/index.js

@@ -1,5 +1,6 @@
 /* global window */
-import React, { PropTypes, Component } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import * as customPropTypes from 'customPropTypes';
 import { connect } from 'react-redux';
 import styled from 'styled-components';

src/components/GlobalSidebar/index.js

@@ -1,5 +1,6 @@
 /* global document */
-import React, { PropTypes, Component } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import Link from 'react-router/lib/Link';
 import Navbar from 'react-bootstrap/lib/Navbar';
 import LocaleFormattedMessage from 'components/LocaleFormattedMessage';

src/components/Home/LastVisit/index.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import * as customPropTypes from 'customPropTypes';
 import debug from 'helpers/debug';
 import Link from 'react-router/lib/Link';

src/components/IndexHeader/index.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import Link from 'react-router/lib/Link';
 import SearchInput from 'components/SearchInput';
 import Jumbotron from 'quran-components/lib/Jumbotron';

src/components/LazyLoad/index.js

@@ -1,5 +1,7 @@
 /* global window */
-import { Component, PropTypes } from 'react';
+// eslint-disable-next-line no-unused-vars
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 
 import debug from 'helpers/debug';

src/components/Line/index.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import * as customPropTypes from 'customPropTypes';
 import debug from 'helpers/debug';

src/components/LocaleFormattedMessage/index.js

@@ -1,11 +1,17 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { intlShape, injectIntl, FormattedMessage } from 'react-intl';
 
-const LocaleFormattedMessage = ({ id, defaultMessage, intl, values, className }) => (
+const LocaleFormattedMessage = ({
+  id,
+  defaultMessage,
+  intl,
+  values,
+  className
+}) =>
   <span className={`${intl.messages.local} ${className}`}>
     <FormattedMessage id={id} defaultMessage={defaultMessage} values={values} />
-  </span>
-);
+  </span>;
 
 LocaleFormattedMessage.propTypes = {
   id: PropTypes.string.isRequired,

src/components/LocaleSwitcher/index.js

@@ -1,5 +1,6 @@
 /* global window */
-import React, { PropTypes, Component } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import cookie from 'react-cookie';
 import NavDropdown from 'react-bootstrap/lib/NavDropdown';
 import Menu, { MenuItem } from 'quran-components/lib/Menu';

src/components/NoScript/index.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom/server';
 
 const NoScript = (props) => {

src/components/PageView/index.js

@@ -1,11 +1,20 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import * as customPropTypes from 'customPropTypes';
 import { connect } from 'react-redux';
 
 import Line from 'components/Line';
 import PageBreak from 'components/PageBreak';
 
-const PageView = ({ lines, keys, currentVerse, options, isPlaying, audioActions, userAgent }) => { // eslint-disable-line
+const PageView = ({
+  lines,
+  keys,
+  currentVerse,
+  options,
+  isPlaying,
+  audioActions
+}) => {
+  // eslint-disable-line
   const elements = keys.map((lineNum, index) => {
     const nextNum = keys[index + 1];
     const pageNum = lineNum.split('-')[0];
@@ -41,7 +50,9 @@ const PageView = ({ lines, keys, currentVerse, options, isPlaying, audioActions,
   });
 
   return (
-    <div>{elements}</div>
+    <div>
+      {elements}
+    </div>
   );
 };
 
@@ -52,8 +63,7 @@ PageView.propTypes = {
   currentVerse: PropTypes.string,
   bookmarks: PropTypes.object.isRequired, // eslint-disable-line
   options: PropTypes.object.isRequired, // eslint-disable-line
-  isPlaying: PropTypes.bool,
-  userAgent: PropTypes.func
+  isPlaying: PropTypes.bool
 };
 
 export default connect(state => ({

src/components/SearchAutocomplete/index.js

@@ -1,5 +1,6 @@
 // TODO: Should be handled by redux and not component states.
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import * as customPropTypes from 'customPropTypes';
 import { connect } from 'react-redux';

src/components/SearchInput/index.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { PropTypes as MetricsPropTypes } from 'react-metrics';
 import { push } from 'react-router-redux';
 import { connect } from 'react-redux';

src/components/Settings/ChapterInfoToggle/index.js

@@ -1,15 +1,15 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 import { MenuItem } from 'quran-components/lib/Menu';
 
-const InformationToggle = ({ isToggled, onToggle }) => (
+const InformationToggle = ({ isToggled, onToggle }) =>
   <MenuItem
     icon={<i className="ss-icon ss-info vertical-align-middle" />}
     onClick={() => onToggle({ isShowingSurahInfo: !isToggled })}
   >
     <LocaleFormattedMessage id="surah.info" defaultMessage="Surah Info" />
-  </MenuItem>
-);
+  </MenuItem>;
 
 InformationToggle.propTypes = {
   isToggled: PropTypes.bool.isRequired,

src/components/Settings/FontSizeOptions/index.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import * as customPropTypes from 'customPropTypes';
 import styled from 'styled-components';
 import LocaleFormattedMessage from 'components/LocaleFormattedMessage';

src/components/Settings/NightModeToggle/index.js

@@ -1,5 +1,6 @@
 /* global document */
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 import { MenuItem } from 'quran-components/lib/Menu';
 

src/components/Settings/ReadingModeToggle/index.js

@@ -1,8 +1,9 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 import { MenuItem } from 'quran-components/lib/Menu';
 
-const ReadingModeToggle = ({ onToggle, isToggled }) => (
+const ReadingModeToggle = ({ onToggle, isToggled }) =>
   <MenuItem
     icon={<i className="ss-icon ss-openbook vertical-align-middle" />}
     onClick={() => onToggle({ isReadingMode: !isToggled })}
@@ -11,8 +12,7 @@ const ReadingModeToggle = ({ onToggle, isToggled }) => (
       id="setting.reading"
       defaultMessage="Reading Mode"
     />
-  </MenuItem>
-);
+  </MenuItem>;
 
 ReadingModeToggle.propTypes = {
   onToggle: PropTypes.func.isRequired,

src/components/Settings/ReciterDropdown/index.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import * as customPropTypes from 'customPropTypes';
 import { connect } from 'react-redux';
 import Menu, { MenuItem } from 'quran-components/lib/Menu';

src/components/Settings/TooltipOptions/index.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import Menu, { MenuItem } from 'quran-components/lib/Menu';
 import Radio from 'quran-components/lib/Radio';
 import Icon from 'quran-components/lib/Icon';
@@ -10,7 +11,7 @@ const TooltipOptions = ({ tooltip, onOptionChange }) => {
       tooltip: type
     });
 
-  const list = ['translation', 'transliteration'].map(type => (
+  const list = ['translation', 'transliteration'].map(type =>
     <MenuItem key={type}>
       <Radio
         id={type}
@@ -24,7 +25,7 @@ const TooltipOptions = ({ tooltip, onOptionChange }) => {
         />
       </Radio>
     </MenuItem>
-  ));
+  );
 
   return (
     <MenuItem

src/components/Settings/TranslationsDropdown/index.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import * as customPropTypes from 'customPropTypes';
 import { connect } from 'react-redux';
 import LocaleFormattedMessage from 'components/LocaleFormattedMessage';

src/components/Settings/index.js

@@ -1,4 +1,5 @@
-import React, { PropTypes, Component } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import * as OptionsActions from 'redux/actions/options.js';
 import { connect } from 'react-redux';
 import Menu from 'quran-components/lib/Menu';