From 787211dc8bff6c8dadbfa079e8d64fb03e1cc074 Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Mon, 16 Dec 2019 14:59:18 +0200
Subject: [PATCH] eslint react/prop-types enabled for all

---
 .eslintrc                                       | 17 -----------------
 src/common/Button/Button.js                     | 10 ++++++++++
 src/common/Checkbox/Checkbox.js                 |  7 +++++++
 src/common/ColorInput/ColorInput.js             |  9 +++++----
 src/common/Image/Image.js                       |  3 ++-
 src/common/MetaItem/MetaItem.js                 |  5 +++--
 src/common/MetaPreview/MetaPreview.js           |  4 ++--
 src/common/ModalDialog/ModalDialog.js           |  2 +-
 src/common/Multiselect/Multiselect.js           |  5 +++--
 src/common/PaginationInput/PaginationInput.js   |  1 +
 src/common/Popup/Popup.js                       |  2 +-
 src/common/TextInput/TextInput.js               |  8 ++++++++
 .../Intro/ConsentCheckbox/ConsentCheckbox.js    | 15 ++++++++++-----
 .../CredentialsTextInput.js                     |  5 +++++
 src/routes/Intro/Intro.js                       |  6 +++---
 .../VideosList/SeasonsBar/SeasonsBar.js         |  8 +++-----
 .../MetaDetails/VideosList/Video/Video.js       |  3 ++-
 17 files changed, 66 insertions(+), 44 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index a9ac04609..81b685301 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -81,23 +81,6 @@
         ]
     },
     "overrides": [
-        {
-            "files": [
-                "src/common/Button/Button.js",
-                "src/common/Checkbox/Checkbox.js",
-                "src/common/ColorInput/ColorInput.js",
-                "src/common/Image/Image.js",
-                "src/common/MetaItem/MetaItem.js",
-                "src/common/Multiselect/Multiselect.js",
-                "src/common/TextInput/TextInput.js",
-                "src/routes/Intro/CredentialsTextInput/CredentialsTextInput.js",
-                "src/routes/Intro/ConsentCheckbox/ConsentCheckbox.js",
-                "src/common/PaginationInput/PaginationInput.js"
-            ],
-            "rules": {
-                "react/prop-types": 0
-            }
-        },
         {
             "files": [
                 "src/routes/Intro/Intro.js",
diff --git a/src/common/Button/Button.js b/src/common/Button/Button.js
index 21512b041..89d7d342d 100644
--- a/src/common/Button/Button.js
+++ b/src/common/Button/Button.js
@@ -1,4 +1,5 @@
 const React = require('react');
+const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const styles = require('./styles');
 
@@ -41,4 +42,13 @@ const Button = React.forwardRef(({ className, href, disabled, children, ...props
 
 Button.displayName = 'Button';
 
+Button.propTypes = {
+    className: PropTypes.string,
+    href: PropTypes.string,
+    disabled: PropTypes.bool,
+    children: PropTypes.node,
+    onKeyDown: PropTypes.func,
+    onMouseDown: PropTypes.func
+};
+
 module.exports = Button;
diff --git a/src/common/Checkbox/Checkbox.js b/src/common/Checkbox/Checkbox.js
index 96c29f334..6fd3f3a72 100644
--- a/src/common/Checkbox/Checkbox.js
+++ b/src/common/Checkbox/Checkbox.js
@@ -1,4 +1,5 @@
 const React = require('react');
+const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const Icon = require('stremio-icons/dom');
 const Button = require('stremio/common/Button');
@@ -22,4 +23,10 @@ const Checkbox = React.forwardRef(({ className, checked, children, ...props }, r
 
 Checkbox.displayName = 'Checkbox';
 
+Checkbox.propTypes = {
+    className: PropTypes.string,
+    checked: PropTypes.bool,
+    children: PropTypes.node
+};
+
 module.exports = Checkbox;
diff --git a/src/common/ColorInput/ColorInput.js b/src/common/ColorInput/ColorInput.js
index f493a11f1..7e846a4a8 100644
--- a/src/common/ColorInput/ColorInput.js
+++ b/src/common/ColorInput/ColorInput.js
@@ -16,9 +16,8 @@ const ColorInput = ({ className, value, dataset, onChange, ...props }) => {
         return parseColor(value);
     });
     const labelButtonStyle = React.useMemo(() => ({
-        ...props.style,
         backgroundColor: value
-    }), [props.style, value]);
+    }), [value]);
     const labelButtonOnClick = React.useCallback((event) => {
         if (typeof props.onClick === 'function') {
             props.onClick(event);
@@ -76,9 +75,11 @@ const ColorInput = ({ className, value, dataset, onChange, ...props }) => {
 };
 
 ColorInput.propTypes = {
+    className: PropTypes.string,
     value: PropTypes.string,
-    dataset: PropTypes.objectOf(String),
-    onChange: PropTypes.func
+    dataset: PropTypes.objectOf(PropTypes.string),
+    onChange: PropTypes.func,
+    onClick: PropTypes.func
 };
 
 module.exports = ColorInput;
diff --git a/src/common/Image/Image.js b/src/common/Image/Image.js
index 520fade03..8091c2615 100644
--- a/src/common/Image/Image.js
+++ b/src/common/Image/Image.js
@@ -27,7 +27,8 @@ Image.propTypes = {
     src: PropTypes.string,
     alt: PropTypes.string,
     fallbackSrc: PropTypes.string,
-    renderFallback: PropTypes.func
+    renderFallback: PropTypes.func,
+    onError: PropTypes.func
 };
 
 module.exports = Image;
diff --git a/src/common/MetaItem/MetaItem.js b/src/common/MetaItem/MetaItem.js
index 5c130933a..4d4f6cb1f 100644
--- a/src/common/MetaItem/MetaItem.js
+++ b/src/common/MetaItem/MetaItem.js
@@ -121,8 +121,9 @@ MetaItem.propTypes = {
     playIcon: PropTypes.bool,
     progress: PropTypes.number,
     options: PropTypes.array,
-    dataset: PropTypes.objectOf(String),
-    optionOnSelect: PropTypes.func
+    dataset: PropTypes.objectOf(PropTypes.string),
+    optionOnSelect: PropTypes.func,
+    onClick: PropTypes.func
 };
 
 module.exports = MetaItem;
diff --git a/src/common/MetaPreview/MetaPreview.js b/src/common/MetaPreview/MetaPreview.js
index 9cd1b7d8e..0aca83e9a 100644
--- a/src/common/MetaPreview/MetaPreview.js
+++ b/src/common/MetaPreview/MetaPreview.js
@@ -179,7 +179,7 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele
                         null
                 }
                 {
-                    linksGroups.hasOwnProperty(IMDB_LINK_CATEGORY) ?
+                    typeof linksGroups[IMDB_LINK_CATEGORY] === 'object' ?
                         <ActionButton
                             {...linksGroups[IMDB_LINK_CATEGORY]}
                             className={styles['action-button']}
@@ -191,7 +191,7 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele
                         null
                 }
                 {
-                    !compact && linksGroups.hasOwnProperty(SHARE_LINK_CATEGORY) ?
+                    !compact && typeof linksGroups[SHARE_LINK_CATEGORY] === 'object' ?
                         <React.Fragment>
                             <ActionButton
                                 className={styles['action-button']}
diff --git a/src/common/ModalDialog/ModalDialog.js b/src/common/ModalDialog/ModalDialog.js
index b21a92ef1..abb594c09 100644
--- a/src/common/ModalDialog/ModalDialog.js
+++ b/src/common/ModalDialog/ModalDialog.js
@@ -112,7 +112,7 @@ ModalDialog.propTypes = {
         PropTypes.arrayOf(PropTypes.node),
         PropTypes.node
     ]),
-    dataset: PropTypes.objectOf(String),
+    dataset: PropTypes.objectOf(PropTypes.string),
     onCloseRequest: PropTypes.func
 };
 
diff --git a/src/common/Multiselect/Multiselect.js b/src/common/Multiselect/Multiselect.js
index 8ae0622e7..7df4b7aff 100644
--- a/src/common/Multiselect/Multiselect.js
+++ b/src/common/Multiselect/Multiselect.js
@@ -143,12 +143,13 @@ Multiselect.propTypes = {
     })),
     selected: PropTypes.arrayOf(PropTypes.string),
     disabled: PropTypes.bool,
-    dataset: PropTypes.objectOf(String),
+    dataset: PropTypes.objectOf(PropTypes.string),
     renderLabelContent: PropTypes.func,
     renderLabelText: PropTypes.func,
     onOpen: PropTypes.func,
     onClose: PropTypes.func,
-    onSelect: PropTypes.func
+    onSelect: PropTypes.func,
+    onClick: PropTypes.func
 };
 
 module.exports = Multiselect;
diff --git a/src/common/PaginationInput/PaginationInput.js b/src/common/PaginationInput/PaginationInput.js
index 77bb38f5c..7358c55c7 100644
--- a/src/common/PaginationInput/PaginationInput.js
+++ b/src/common/PaginationInput/PaginationInput.js
@@ -35,6 +35,7 @@ const PaginationInput = ({ className, label, dataset, onSelect, ...props }) => {
 PaginationInput.propTypes = {
     className: PropTypes.string,
     label: PropTypes.string,
+    dataset: PropTypes.objectOf(PropTypes.string),
     onSelect: PropTypes.func
 };
 
diff --git a/src/common/Popup/Popup.js b/src/common/Popup/Popup.js
index b956f764f..59b89f26e 100644
--- a/src/common/Popup/Popup.js
+++ b/src/common/Popup/Popup.js
@@ -103,7 +103,7 @@ Popup.propTypes = {
     direction: PropTypes.oneOf(['top-left', 'bottom-left', 'top-right', 'bottom-right']),
     renderLabel: PropTypes.func.isRequired,
     renderMenu: PropTypes.func.isRequired,
-    dataset: PropTypes.objectOf(String),
+    dataset: PropTypes.objectOf(PropTypes.string),
     onCloseRequest: PropTypes.func
 };
 
diff --git a/src/common/TextInput/TextInput.js b/src/common/TextInput/TextInput.js
index 4f7db50f1..8b9606d6f 100644
--- a/src/common/TextInput/TextInput.js
+++ b/src/common/TextInput/TextInput.js
@@ -1,4 +1,5 @@
 const React = require('react');
+const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const styles = require('./styles');
 
@@ -30,4 +31,11 @@ const TextInput = React.forwardRef((props, ref) => {
 
 TextInput.displayName = 'TextInput';
 
+TextInput.propTypes = {
+    className: PropTypes.string,
+    disabled: PropTypes.bool,
+    onKeyDown: PropTypes.func,
+    onSubmit: PropTypes.func
+};
+
 module.exports = TextInput;
diff --git a/src/routes/Intro/ConsentCheckbox/ConsentCheckbox.js b/src/routes/Intro/ConsentCheckbox/ConsentCheckbox.js
index fe1898b4e..df05b7e60 100644
--- a/src/routes/Intro/ConsentCheckbox/ConsentCheckbox.js
+++ b/src/routes/Intro/ConsentCheckbox/ConsentCheckbox.js
@@ -4,16 +4,20 @@ const classnames = require('classnames');
 const { Button, Checkbox } = require('stremio/common');
 const styles = require('./styles');
 
-const ConsentCheckbox = React.forwardRef(({ className, checked, label, link, href, toggle, ...props }, ref) => {
+const ConsentCheckbox = React.forwardRef(({ className, checked, label, link, href, onToggle, ...props }, ref) => {
     const checkboxOnClick = React.useCallback((event) => {
         if (typeof props.onClick === 'function') {
             props.onClick(event);
         }
 
-        if (!event.nativeEvent.togglePrevented && typeof toggle === 'function') {
-            toggle(event);
+        if (!event.nativeEvent.togglePrevented && typeof onToggle === 'function') {
+            onToggle({
+                type: 'toggle',
+                reactEvent: event,
+                nativeEvent: event.nativeEvent
+            });
         }
-    }, [toggle]);
+    }, [onToggle]);
     const linkOnClick = React.useCallback((event) => {
         event.nativeEvent.togglePrevented = true;
     }, []);
@@ -42,7 +46,8 @@ ConsentCheckbox.propTypes = {
     label: PropTypes.string,
     link: PropTypes.string,
     href: PropTypes.string,
-    toggle: PropTypes.func
+    onToggle: PropTypes.func,
+    onClick: PropTypes.func
 };
 
 module.exports = ConsentCheckbox;
diff --git a/src/routes/Intro/CredentialsTextInput/CredentialsTextInput.js b/src/routes/Intro/CredentialsTextInput/CredentialsTextInput.js
index d3c7696cf..43a2bb087 100644
--- a/src/routes/Intro/CredentialsTextInput/CredentialsTextInput.js
+++ b/src/routes/Intro/CredentialsTextInput/CredentialsTextInput.js
@@ -1,4 +1,5 @@
 const React = require('react');
+const PropTypes = require('prop-types');
 const { TextInput } = require('stremio/common');
 
 const CredentialsTextInput = React.forwardRef((props, ref) => {
@@ -23,4 +24,8 @@ const CredentialsTextInput = React.forwardRef((props, ref) => {
 
 CredentialsTextInput.displayName = 'CredentialsTextInput';
 
+CredentialsTextInput.propTypes = {
+    onKeyDown: PropTypes.func
+};
+
 module.exports = CredentialsTextInput;
diff --git a/src/routes/Intro/Intro.js b/src/routes/Intro/Intro.js
index 984b29369..dc26b97e7 100644
--- a/src/routes/Intro/Intro.js
+++ b/src/routes/Intro/Intro.js
@@ -296,7 +296,7 @@ const Intro = ({ queryParams }) => {
                                 link={'Terms and conditions'}
                                 href={'https://www.stremio.com/tos'}
                                 checked={state.termsAccepted}
-                                toggle={toggleTermsAccepted}
+                                onToggle={toggleTermsAccepted}
                             />
                             <ConsentCheckbox
                                 ref={privacyPolicyRef}
@@ -305,14 +305,14 @@ const Intro = ({ queryParams }) => {
                                 link={'Privacy Policy'}
                                 href={'https://www.stremio.com/privacy'}
                                 checked={state.privacyPolicyAccepted}
-                                toggle={togglePrivacyPolicyAccepted}
+                                onToggle={togglePrivacyPolicyAccepted}
                             />
                             <ConsentCheckbox
                                 ref={marketingRef}
                                 className={styles['consent-checkbox']}
                                 label={'I agree to receive marketing communications from Stremio'}
                                 checked={state.marketingAccepted}
-                                toggle={toggleMarketingAccepted}
+                                onToggle={toggleMarketingAccepted}
                             />
                         </React.Fragment>
                         :
diff --git a/src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBar.js b/src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBar.js
index cfe24abe3..d830d710d 100644
--- a/src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBar.js
+++ b/src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBar.js
@@ -16,11 +16,9 @@ const SeasonsBar = ({ className, seasons, season, onSelect }) => {
     const selected = React.useMemo(() => {
         return [String(season)];
     }, [season]);
-    const renderMultiselectLabelContent = React.useMemo(() => {
-        return () => (
-            <div className={styles['season-label']}>Season {season}</div>
-        );
-    }, [season]);
+    const renderMultiselectLabelContent = React.useMemo(() => () => (
+        <div className={styles['season-label']}>Season {season}</div>
+    ), [season]);
     const prevNextButtonOnClick = React.useCallback((event) => {
         if (typeof onSelect === 'function') {
             const seasonIndex = seasons.indexOf(season);
diff --git a/src/routes/MetaDetails/VideosList/Video/Video.js b/src/routes/MetaDetails/VideosList/Video/Video.js
index 2bcd22f27..4b13e30e6 100644
--- a/src/routes/MetaDetails/VideosList/Video/Video.js
+++ b/src/routes/MetaDetails/VideosList/Video/Video.js
@@ -6,7 +6,7 @@ const Icon = require('stremio-icons/dom');
 const VideoPlaceholder = require('./VideoPlaceholder');
 const styles = require('./styles');
 
-const Video = ({ className, title, thumbnail, episode, released, upcoming, watched, progress, ...props }) => {
+const Video = ({ className, id, title, thumbnail, episode, released, upcoming, watched, progress, ...props }) => {
     return (
         <Button {...props} className={classnames(className, styles['video-container'])} title={title}>
             {
@@ -76,6 +76,7 @@ Video.Placeholder = VideoPlaceholder;
 
 Video.propTypes = {
     className: PropTypes.string,
+    id: PropTypes.string,
     title: PropTypes.string,
     thumbnail: PropTypes.string,
     episode: PropTypes.number,