From ef5bf029d36d2fb3c8763ae3cf909ef822c2873b Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Thu, 11 Oct 2018 14:50:10 +0300
Subject: [PATCH] rename properties, pass functions as parameters

---
 src/common/Addon/Addon.js                     | 12 ++---
 src/common/LibraryItemList/LibraryItemList.js | 50 +++++++++----------
 src/common/MetaItem/MetaItem.js               | 30 +++++------
 src/common/ShareAddon/ShareAddon.js           | 35 +++++++------
 src/common/ShareAddon/styles.less             |  4 +-
 src/common/Stream/Stream.js                   | 10 ++--
 src/common/UserPanel/UserPanel.js             | 30 +++++------
 src/common/UserPanel/styles.less              |  4 +-
 src/common/Video/Video.js                     |  2 +-
 9 files changed, 92 insertions(+), 85 deletions(-)

diff --git a/src/common/Addon/Addon.js b/src/common/Addon/Addon.js
index 22d81061b..4ce17c914 100644
--- a/src/common/Addon/Addon.js
+++ b/src/common/Addon/Addon.js
@@ -65,18 +65,18 @@ const renderUrls = (urls) => {
     );
 }
 
-const renderShareButton = (props) => {
+const renderShareButton = (shareAddon) => {
     return (
-        <div onClick={props.shareAddon} className={styles['share-container']}>
+        <div onClick={shareAddon} className={styles['share-container']}>
             <Icon className={styles['share-icon']} icon={'ic_share'} />
             <span className={styles['share-label']}>SHARE ADD-ON</span>
         </div>
     );
 }
 
-const renderState = (props, isInstalled) => {
+const renderState = (onToggleClicked, isInstalled) => {
     return (
-        <div onClick={props.onToggleClicked} className={styles[isInstalled ? 'install-label' : 'uninstall-label']}>{isInstalled ? 'Install' : 'Uninstall'}</div>
+        <div onClick={onToggleClicked} className={styles[isInstalled ? 'install-label' : 'uninstall-label']}>{isInstalled ? 'Install' : 'Uninstall'}</div>
     );
 }
 
@@ -90,8 +90,8 @@ const Addon = (props) => {
             {renderDescription(props.description)}
             {renderUrls(props.urls)}
             <div className={styles['buttons']}>
-                {renderShareButton(props)}
-                {renderState(props, props.isInstalled)}
+                {renderShareButton(props.shareAddon)}
+                {renderState(props.onToggleClicked, props.isInstalled)}
             </div>
         </div>
     );
diff --git a/src/common/LibraryItemList/LibraryItemList.js b/src/common/LibraryItemList/LibraryItemList.js
index 327831ec6..2a4e47a73 100644
--- a/src/common/LibraryItemList/LibraryItemList.js
+++ b/src/common/LibraryItemList/LibraryItemList.js
@@ -3,14 +3,14 @@ import PropTypes from 'prop-types';
 import Icon from 'stremio-icons/dom';
 import styles from './styles';
 
-const renderPoster = (props, poster) => {
+const renderPoster = (play, poster) => {
     if (poster.length === 0) {
         return null;
     }
 
     return (
         <div className={styles['poster']} style={{ backgroundImage: 'url(' + poster + ')' }}>
-            <div onClick={props.playButtonClicked} className={styles['play-container']}>
+            <div onClick={play} className={styles['play-container']}>
                 <Icon className={styles['play']} icon={'ic_play'} />
             </div>
         </div>
@@ -37,23 +37,23 @@ const renderType = (type) => {
     );
 }
 
-const renderYear = (year) => {
-    if (year.length === 0) {
+const renderReleasedInfo = (releaseInfo) => {
+    if (isNaN(releaseInfo.getTime())) {
         return null;
     }
 
     return (
-        <span className={styles['year']}>{year}</span>
+        <span className={styles['year']}>{releaseInfo.getFullYear()}</span>
     );
 }
 
-const renderDateAdded = (dateAdded) => {
-    if (isNaN(dateAdded.getTime())) {
+const renderReleasedDate = (released) => {
+    if (isNaN(released.getTime())) {
         return null;
     }
 
     return (
-        <span className={styles['date-added']}>{dateAdded.getDate() + '.' + (dateAdded.getMonth() === 0 ? dateAdded.getMonth() + 12 : dateAdded.getMonth()) + '.' + dateAdded.getFullYear()}</span>
+        <span className={styles['date-added']}>{released.getDate() + '.' + released.getMonth() + '.' + released.getFullYear()}</span>
     );
 }
 
@@ -63,22 +63,22 @@ const renderLastViewed = (lastViewed) => {
     }
 
     return (
-        <span className={styles['last-viewed']}>{lastViewed.getDate() + '.' + (lastViewed.getMonth() === 0 ? lastViewed.getMonth() + 12 : lastViewed.getMonth()) + '.' + lastViewed.getFullYear()}</span>
+        <span className={styles['last-viewed']}>{lastViewed.getDate() + '.' + lastViewed.getMonth() + '.' + lastViewed.getFullYear()}</span>
     );
 }
 
-const renderTrailerIcon = (props) => {
+const renderTrailerButton = (watchTrailer) => {
     return (
-        <div onClick={props.viewTrailer} className={styles['icon-container']}>
+        <div onClick={watchTrailer} className={styles['icon-container']}>
             <Icon className={styles['trailer-icon']} icon={'ic_movies'} />
             <div className={styles['trailer']}>Trailer</div>
         </div>
     );
 }
 
-const renderAddlibIcon = (props) => {
+const renderAddToLibraryButton = (addToLibrary) => {
     return (
-        <div onClick={props.addTolib} className={styles['icon-container']}>
+        <div onClick={addToLibrary} className={styles['icon-container']}>
             <Icon className={styles['addlib-icon']} icon={'ic_addlib'} />
             <div className={styles['addlib']}>Add to Library</div>
         </div>
@@ -88,16 +88,16 @@ const renderAddlibIcon = (props) => {
 const LibraryItemList = (props) => {
     return (
         <div className={styles['library-item']}>
-            {renderPoster(props, props.poster)}
+            {renderPoster(props.play, props.poster)}
             {renderTitle(props.title)}
             {renderType(props.type)}
-            {renderYear(props.year)}
-            {renderDateAdded(props.dateAdded)}
+            {renderReleasedInfo(props.releaseInfo)}
+            {renderReleasedDate(props.released)}
             <span className={styles['views']}>{props.views}</span>
             <span className={styles['hours']}>{props.hours}</span>
             {renderLastViewed(props.lastViewed)}
-            {renderTrailerIcon(props)}
-            {renderAddlibIcon(props)}
+            {renderTrailerButton(props.watchTrailer)}
+            {renderAddToLibraryButton(props.addToLibrary)}
         </div>
     );
 }
@@ -106,21 +106,21 @@ LibraryItemList.propTypes = {
     poster: PropTypes.string.isRequired,
     title: PropTypes.string.isRequired,
     type: PropTypes.string.isRequired,
-    year: PropTypes.string.isRequired,
-    dateAdded: PropTypes.instanceOf(Date).isRequired,
+    releaseInfo: PropTypes.instanceOf(Date).isRequired,
+    released: PropTypes.instanceOf(Date).isRequired,
     views: PropTypes.number.isRequired,
     hours: PropTypes.number.isRequired,
     lastViewed: PropTypes.instanceOf(Date).isRequired,
-    playButtonClicked: PropTypes.func,
-    viewTrailer: PropTypes.func,
-    addTolib: PropTypes.func
+    play: PropTypes.func,
+    watchTrailer: PropTypes.func,
+    addToLibrary: PropTypes.func
 };
 LibraryItemList.defaultProps = {
     poster: '',
     title: '',
     type: '',
-    year: '',
-    dateAdded: new Date(''), //Invalid Date
+    releaseInfo: new Date(''), 
+    released: new Date(''), //Invalid Date
     views: 0,
     hours: 0,
     lastViewed: new Date('')
diff --git a/src/common/MetaItem/MetaItem.js b/src/common/MetaItem/MetaItem.js
index cc969e217..36fa3bc11 100644
--- a/src/common/MetaItem/MetaItem.js
+++ b/src/common/MetaItem/MetaItem.js
@@ -55,9 +55,9 @@ const getPlaceholderIcon = (type) => {
     }
 }
 
-const renderPlay = (props, progress) => {
+const renderPlay = (play, progress) => {
     return (
-        <div onClick={props.playButtonClicked} style={progress ? { visibility: 'visible' } : null} className={styles['play-container']}>
+        <div onClick={play} style={progress ? { visibility: 'visible' } : null} className={styles['play-container']}>
             <Icon className={styles['play']} icon={'ic_play'} />
         </div>
     );
@@ -95,20 +95,20 @@ const renderTitle = (title) => {
     );
 }
 
-const renderYear = (year) => {
-    if (year.length === 0) {
+const renderReleaseInfo = (releaseInfo) => {
+    if (releaseInfo.length === 0) {
         return null;
     }
 
     return (
-        <div className={styles['year']}>{year}</div>
+        <div className={styles['year']}>{releaseInfo}</div>
     );
 }
 
-const renderIcon = (props, progress) => {
+const renderIcon = (showInfo, progress) => {
     if (progress > 0) {
         return (
-            <div onClick={props.showMore} className={styles['more-icon-container']}>
+            <div onClick={showInfo} className={styles['more-icon-container']}>
                 <Icon className={styles['more-icon']} icon={'ic_more'} />
             </div>
         );
@@ -120,7 +120,7 @@ const MetaItem = (props) => {
     const posterSize = getShapeSize(props.posterShape, props.progress);
     const contentContainerStyle = {
         width: posterSize.width,
-        height: props.episode.length === 0 && props.title.length === 0 && props.year.length === 0 && props.progress == 0? posterSize.height : posterSize.containerHeight
+        height: props.episode.length === 0 && props.title.length === 0 && props.releaseInfo.length === 0 && props.progress == 0? posterSize.height : posterSize.containerHeight
     };
     const placeholderIcon = getPlaceholderIcon(props.type);
     const placeholderIconUrl = iconDataUrl({ icon: placeholderIcon, fill: colors.accent, width: Math.round(RELATIVE_POSTER_SIZE / 2.2), height: Math.round(RELATIVE_POSTER_SIZE / 2.2) });
@@ -132,16 +132,16 @@ const MetaItem = (props) => {
     return (
         <div style={contentContainerStyle} className={styles['meta-item']}>
             <div style={imageStyle} className={styles['poster']}>
-                {renderPlay(props, props.progress)}
+                {renderPlay(props.play, props.progress)}
             </div>
             {renderProgress(props.progress)}
             <div className={styles['info-container']}>
                 <div className={styles['info']}>
                     {renderEpisode(props.episode)}
                     {renderTitle(props.title)}
-                    {renderYear(props.year)}
+                    {renderReleaseInfo(props.releaseInfo)}
                 </div>
-                {renderIcon(props, props.progress)}
+                {renderIcon(props.showInfo, props.progress)}
             </div>
         </div>
     );
@@ -154,9 +154,9 @@ MetaItem.propTypes = {
     progress: PropTypes.number.isRequired,
     episode: PropTypes.string.isRequired,
     title: PropTypes.string.isRequired,
-    year: PropTypes.string.isRequired,
-    playButtonClicked: PropTypes.func,
-    showMore: PropTypes.func
+    releaseInfo: PropTypes.string.isRequired,
+    play: PropTypes.func,
+    showInfo: PropTypes.func
 };
 MetaItem.defaultProps = {
     type: 'other',
@@ -165,7 +165,7 @@ MetaItem.defaultProps = {
     progress: 0,
     episode: '',
     title: '',
-    year: ''
+    releaseInfo: ''
 };
 
 export default MetaItem;
\ No newline at end of file
diff --git a/src/common/ShareAddon/ShareAddon.js b/src/common/ShareAddon/ShareAddon.js
index f9e14849e..e5c1f524c 100644
--- a/src/common/ShareAddon/ShareAddon.js
+++ b/src/common/ShareAddon/ShareAddon.js
@@ -1,33 +1,40 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Icon from 'stremio-icons/dom';
+import Icon, { dataUrl as iconDataUrl } from 'stremio-icons/dom';
+import colors from 'stremio-colors';
 import styles from './styles';
 
-const renderX = (props) => {
+const renderX = (closeModalDialog) => {
+    const placeholderIconUrl = iconDataUrl({ icon: 'ic_x', fill: colors.neutrallight });
+    const imageStyle = {
+        width: 10,
+        height: 10,
+        backgroundImage: `url('${placeholderIconUrl}')`
+    };
     return (
-        <div onClick={props.closeModalDialog} className={styles['x-container']}>
-            <Icon className={styles['x-icon']} icon={'ic_x'} />
+        <div className={styles['x-container']}>
+            <div onClick={closeModalDialog} style={imageStyle} className={styles['x-icon']} />
         </div>
     );
 }
 
-const renderButtons = (props) => {
+const renderButtons = (shareInFacebook, shareInTwitter, shareInGplus) => {
     return (
         <div className={styles['buttons']}>
-            <div onClick={props.shareInFacebook} className={styles['facebook-button']}>
+            <div onClick={shareInFacebook} className={styles['facebook-button']}>
                 <Icon className={styles['facebook-icon']} icon={'ic_facebook'} />FACEBOOK
             </div>
-            <div onClick={props.shareInTwitter} className={styles['twitter-button']}>
+            <div onClick={shareInTwitter} className={styles['twitter-button']}>
                 <Icon className={styles['twitter-icon']} icon={'ic_twitter'} />TWITTER
             </div>
-            <div onClick={props.shareInGplus} className={styles['gplus-button']}>
+            <div onClick={shareInGplus} className={styles['gplus-button']}>
                 <Icon className={styles['gplus-icon']} icon={'ic_gplus'} />GOOGLE+
             </div>
         </div>
     );
 }
 
-const renderUrl = (props, url) => {
+const renderUrl = (copyToClipboard, url) => {
     if (url.length === 0) {
         return null;
     }
@@ -35,7 +42,7 @@ const renderUrl = (props, url) => {
     return (
         <div className={styles['url-container']}>
             <input className={styles['url']} defaultValue={url} readOnly />
-            <span onClick={props.copyUrl} className={styles['copy-label']}>Copy</span>
+            <span onClick={copyToClipboard} className={styles['copy-label']}>Copy</span>
         </div>
     );
 }
@@ -43,11 +50,11 @@ const renderUrl = (props, url) => {
 const ShareAddon = (props) => {
     return (
         <div className={styles['share-addon']}>
-            {renderX(props)}
+            {renderX(props.closeModalDialog)}
             <div className={styles['info-container']}>
                 <span className={styles['share-label']}>Share Add-on</span>
-                {renderButtons(props)}
-                {renderUrl(props, props.url)}
+                {renderButtons(props.shareInFacebook, props.shareInTwitter, props.shareInGplus)}
+                {renderUrl(props.copyToClipboard, props.url)}
             </div>
         </div>
     );
@@ -59,7 +66,7 @@ ShareAddon.propTypes = {
     shareInFacebook: PropTypes.func,
     shareInTwitter: PropTypes.func,
     shareInGplus: PropTypes.func,
-    copyUrl: PropTypes.func
+    copyToClipboard: PropTypes.func
 };
 ShareAddon.defaultProps = {
     url: ''
diff --git a/src/common/ShareAddon/styles.less b/src/common/ShareAddon/styles.less
index ac239344f..c5d71c83f 100644
--- a/src/common/ShareAddon/styles.less
+++ b/src/common/ShareAddon/styles.less
@@ -9,9 +9,9 @@
         display: flex;
         justify-content: flex-end;
         .x-icon {
-            height: 10px;
             cursor: pointer;
-            fill: @colorneutrallight;
+            background-position: center;
+            background-repeat: no-repeat;
         }
     }
     .info-container {
diff --git a/src/common/Stream/Stream.js b/src/common/Stream/Stream.js
index 07bcce436..57e4be798 100644
--- a/src/common/Stream/Stream.js
+++ b/src/common/Stream/Stream.js
@@ -47,9 +47,9 @@ const renderSubtitle = (isFree, isSubscription, subtitle) => {
     return null;
 }
 
-const renderPlay = (props, progress) => {
+const renderPlay = (progress) => {
     return (
-        <div onClick={props.playButtonClicked} style={{ backgroundColor: progress ? colors.white : null }} className={styles['play-container']}>
+        <div style={{ backgroundColor: progress ? colors.white : null }} className={styles['play-container']}>
             <Icon style={{ fill: progress ? colors.medium : null }} className={styles['play']} icon={'ic_play'} />
         </div>
     );
@@ -69,7 +69,7 @@ const renderProgress = (progress) => {
 
 const Stream = (props) => {
     return (
-        <div style={{ backgroundColor: props.progress ? colors.black40 : null }} className={styles['stream']}>
+        <div onClick={props.play} style={{ backgroundColor: props.progress ? colors.black40 : null }} className={styles['stream']}>
             <div className={styles['stream-info-container']}>
                 <div className={styles['stream-info']}>
                     {renderLogo(props.logo, props.sourceName)}
@@ -80,7 +80,7 @@ const Stream = (props) => {
                 </div>
                 {renderProgress(props.progress)}
             </div>
-            {renderPlay(props, props.progress)}
+            {renderPlay(props.progress)}
         </div>
     );
 }
@@ -93,7 +93,7 @@ Stream.propTypes = {
     isFree: PropTypes.bool.isRequired,
     isSubscription: PropTypes.bool.isRequired,
     progress: PropTypes.number.isRequired,
-    playButtonClicked: PropTypes.func
+    play: PropTypes.func
 };
 
 Stream.defaultProps = {
diff --git a/src/common/UserPanel/UserPanel.js b/src/common/UserPanel/UserPanel.js
index 7a3f4e62e..503636880 100644
--- a/src/common/UserPanel/UserPanel.js
+++ b/src/common/UserPanel/UserPanel.js
@@ -25,41 +25,41 @@ const renderEmail = (email) => {
     );
 }
 
-const renderFullscreen = (props) => {
+const renderFullscreen = (onFullscreenMode) => {
     return (
-        <div onClick={props.onFullscreenMode} className={styles['fullscreen-option']}>
+        <div onClick={onFullscreenMode} className={styles['fullscreen-option']}>
             <Icon className={styles['fullscreen-icon']} icon={'ic_fullscreen'} />Fullscreen mode
         </div>
     );
 }
 
-const renderOptions = (props) => {
+const renderOptions = (showSettings, showAddons, playMagnetLink, importFromFB, showHelpCenter) => {
     return (
         <ul className={styles['options']}>
-            <li onClick={props.showSettings} className={styles['settings-option']}>
+            <li onClick={showSettings} className={styles['settings-option']}>
                 <Icon className={styles['settings-icon']} icon={'ic_settings'} />Settings
             </li>
-            <li onClick={props.showAddons} className={styles['addons-option']}>
+            <li onClick={showAddons} className={styles['addons-option']}>
                 <Icon className={styles['addons-icon']} icon={'ic_addons'} />Add-ons
             </li>
-            <li onClick={props.playMagnetLink} className={styles['magnet-option']}>
+            <li onClick={playMagnetLink} className={styles['magnet-option']}>
                 <Icon className={styles['magnet-icon']} icon={'ic_magnet'} />Play Magnet Link
             </li>
-            <li onClick={props.importFromFB} className={styles['facebook-option']}>
+            <li onClick={importFromFB} className={styles['facebook-option']}>
                 <Icon className={styles['facebook-icon']} icon={'ic_facebook'} />Import from Facebook
             </li>
-            <li onClick={props.showHelpCenter} className={styles['help-option']}>
+            <li onClick={showHelpCenter} className={styles['help-option']}>
                 <Icon className={styles['help-icon']} icon={'ic_help'} />Help & Feedback
             </li>
         </ul>
     );
 }
 
-const renderInfo = (props) => {
+const renderFooter = (showTermsOfService, showInfo) => {
     return (
-        <ul className={styles['info']}>
-            <li onClick={props.showTermsOfService} className={styles['terms-label']}>Terms of Service</li>
-            <li onClick={props.showInfo} className={styles['about-label']}>About Stremio</li>
+        <ul className={styles['footer']}>
+            <li onClick={showTermsOfService} className={styles['terms-label']}>Terms of Service</li>
+            <li onClick={showInfo} className={styles['about-label']}>About Stremio</li>
         </ul>
     );
 }
@@ -74,9 +74,9 @@ const UserPanel = (props) => {
                     <span onClick={props.logout} className={styles['log-out']}>Log out</span>
                 </div>
             </div>
-            {renderFullscreen(props)}
-            {renderOptions(props)}
-            {renderInfo(props)}
+            {renderFullscreen(props.onFullscreenMode)}
+            {renderOptions(props.showSettings, props.showAddons, props.playMagnetLink, props.importFromFB, props.showHelpCenter)}
+            {renderFooter(props.showTermsOfService, props.showInfo)}
         </div>
     );
 }
diff --git a/src/common/UserPanel/styles.less b/src/common/UserPanel/styles.less
index af740e3cf..a5998e88d 100644
--- a/src/common/UserPanel/styles.less
+++ b/src/common/UserPanel/styles.less
@@ -47,10 +47,10 @@
             background-color: @coloraccent20;
         }
     }
-    .options, .info {
+    .options, .footer {
         padding: 15px 0px;
     }
-    .info {
+    .footer {
         border-top: 1px solid @colorwhite20;
         .terms-label, .about-label {
             padding: 10px 20px;
diff --git a/src/common/Video/Video.js b/src/common/Video/Video.js
index 7d96386ef..f91254fc9 100644
--- a/src/common/Video/Video.js
+++ b/src/common/Video/Video.js
@@ -58,7 +58,7 @@ const renderReleasedDate = (released) => {
     }
 
     return (
-        <span className={styles['released-date']}>{released.getDate() + ' ' + months[released.getMonth() - 1]}</span>
+        <span className={styles['released-date']}>{released.getDate() + ' ' + months[released.getMonth()]}</span>
     );
 }