rename classnames; function changes

.cache/325c8f456729b912b0d2134054eb7448-dfeeb2271cc2857eb0a45a5003c8bbee

@@ -1 +0,0 @@
-{"value":{"success":true,"data":{"latest":{"version":"4.0.0","info":{"plain":"- upgrade webpack & babel to latest\n- new addParameters and third argument to .add to pass data to addons\n- added the ability to theme storybook\n- improved ui for mobile devices\n- improved performance of addon-knobs"}}},"time":1541422002878},"type":"Object"}

.storybook/webpack.config.js

@@ -27,7 +27,7 @@ module.exports = {
                         loader: 'css-loader',
                         options: {
                             modules: true,
-                            localIdentName: '[path][name]_[local]_[hash:base64:5]',
+                            localIdentName: '[local]_[hash:base64:5]',
                             importLoaders: 2
                         }
                     },

src/routes/Settings/Settings.js

@@ -1,54 +1,64 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Icon from 'stremio-icons/dom';
+import classnames from 'classnames';
 import styles from './styles';
 
+const SETTINGS_MENUS = {
+    PLAYER_MENU: 1,
+    LANGUAGE_MENU: 2,
+    ACCOUNT_MENU: 3,
+    NOTIFICATIONS_MENU: 4,
+    DATA_MENU: 5
+};
+
 class Settings extends Component {
     constructor(props) {
         super(props);
 
         this.state = {
-            selectedMenu: 'player_preferences',
+            selectedMenu: SETTINGS_MENUS.PLAYER_MENU
-            selectedMenuId: 0
+        };
-        }
     }
 
-    changeSettings = (selectedMenu, id) => {
+    changeSelectedMenu = (selectedMenu) => {
-        this.setState({ selectedMenu, selectedMenuId: id });
+        this.setState({ selectedMenu });
     }
 
-    renderPlayerPreferences = () => {
+    shouldComponentUpdate(nextState) {
-        const preferences = ["Hardware-accelerated decoding", "Auto-play next episode", "Data saver"];
+        return nextState.selectedMenu != this.state.selectedMenu;
+    }
+
+    renderPlayerSettings = () => {
+        const preferences = ['Hardware-accelerated decoding', 'Auto-play next episode', 'Data saver'];
 
         return (
             <div className={styles['player-preferences-menu']}>
-                {preferences.map((item, key) => {
+                {preferences.map((item, key) =>
-                    return (
+                    <label key={key} className={styles['preferences-section']}>
-                        <label key={key} className={styles['preference-container']}>
+                        <input type='checkbox' className={styles['default-checkbox']} />
-                            <input type='checkbox' className={styles['default-checkbox']} />
+                        <span className={styles['preference']}>{item}</span>
-                            <span className={styles['preference']}>{item}</span>
+                        <p className={styles['checkbox']}>
-                            <p className={styles['checkbox']}>
+                            <Icon className={styles['checkmark']} icon={'ic_check'} />
-                                <Icon className={styles['checkmark']} icon={'ic_check'} />
+                        </p>
-                            </p>
+                    </label>
-                        </label>
+                )}
-                    );
-                })}
             </div>
         );
     }
 
-    renderLanguage = () => {
+    renderLanguageSettings = () => {
         return (
             <div className={styles['language-menu']}>
-                <div className={styles['interface-language']}>
+                <div className={styles['language-section']}>
                     <span className={styles['headline']}>INTERFACE LANGUAGE</span>
-                    <div className={styles['name']}>English
+                    <div className={styles['selected-language']}>English
                         <Icon className={styles['arrow-down']} icon={'ic_arrow_down'} />
                     </div>
                 </div>
-                <div className={styles['default-subtitles-language']}>
+                <div className={styles['language-section']}>
                     <span className={styles['headline']}>DEFAULT SUBTITLES LANGUAGE</span>
-                    <div className={styles['name']}>Portugese - BR
+                    <div className={styles['selected-language']}>Portugese - BR
                         <Icon className={styles['arrow-down']} icon={'ic_arrow_down'} />
                     </div>
                 </div>
@@ -57,30 +67,22 @@ class Settings extends Component {
     }
 
     renderSelectedMenu = () => {
-        const { selectedMenuId } = this.state;
+        switch (this.state.selectedMenu) {
-
+            case SETTINGS_MENUS.PLAYER_MENU:
-        if (selectedMenuId == 0) {
+                return this.renderPlayerSettings();
-            this.selectedMenu = 'player-preferences';
+            case SETTINGS_MENUS.LANGUAGE_MENU:
-            return (
+                return this.renderLanguageSettings();
-                <div> {this.renderPlayerPreferences()} </div>
+            default:
-            );
+                return null;
-        } else if (selectedMenuId == 1) {
-            this.selectedMenu = 'language';
-            return (
-                <div>{this.renderLanguage()} </div>
-            );
         }
     }
 
     render() {
-        const { selectedMenu } = this.state;
-        const options = ["Player Preferences", "Language", "Account Settings", "Notifications", "Data Caching"];
-
         return (
             <div className={styles['settings']}>
-                <div className={styles['options']}>
+                <div className={styles['side-menu']}>
-                    {options.map((key, index) =>
+                    {Object.keys(SETTINGS_MENUS).map((menu) =>
-                        <div key={key} className={styles[index === this.state.selectedMenuId ? 'selected-menu' : 'option']} onClick={() => this.changeSettings(selectedMenu, index)}>{options[index]}</div>
+                        <div key={menu} className={classnames(styles['menu-option'], this.state.selectedMenu === SETTINGS_MENUS[menu] ? styles['menu-option-selected'] : null)} onClick={() => this.changeSelectedMenu(SETTINGS_MENUS[menu])}>{menu}</div>
                     )}
                 </div>
                 {this.renderSelectedMenu()}

src/routes/Settings/styles.less

@@ -4,14 +4,14 @@
     display: flex;
     color: @colorwhite60;
     font-family: LatoLight;
-    .options {
+    .side-menu {
         width: 240px;
         padding: 20px;
         display: flex;
         font-size: 14px;
         flex-direction: column;
         background: @colordarkest;
-        .option {
+        .menu-option {
             padding: 14px;
             font-weight: 600;
             &:hover {
@@ -19,28 +19,21 @@
                 color: @colorwhite;
                 background: @colorglass;
             }
-        }
+            &.menu-option-selected {
-        .selected-menu {
+                cursor: pointer;
-            padding: 14px;
+                color: @colorwhite;
-            font-weight: 600;
+                background: @colorglass;
-            cursor: pointer;
+            }
-            color: @colorwhite;
-            background: @colorglass;
-        }
-        .selected {
-            cursor: pointer;
-            color: @colorwhite;
-            background: @colorglass;
         }
     }
     .player-preferences-menu {
-        height: 150px;
+        height: 145px;
-        margin: 60px 50px;
+        margin: 40px 50px;
         border-bottom: 1px solid @colormedium;
-        .preference-container {
+        .preferences-section {
             display: flex;
             cursor: pointer;
-            margin: 30px 0px;
+            margin-bottom: 30px;
             align-items: center;
             .preference {
                 width: 280px;
@@ -74,18 +67,15 @@
     }
     .language-menu {
         margin: 40px 50px;
-        .interface-language {
+        .language-section {
-            margin-bottom: 30px;
-        }
-        .interface-language, .default-subtitles-language {
             border-bottom: 1px solid @colormedium;
             .headline {
                 font-weight: 600;
                 color: @colorwhite40;
             }
-            .name {
+            .selected-language {
                 height: 40px;
-                width: 250px;
+                width: 280px;
                 padding: 20px;
                 display: flex;
                 margin: 30px 0px;
@@ -105,6 +95,10 @@
                     border: 1px solid @colormedium;
                 }
             }
+            &:not(:last-child) {
+                margin-bottom: 30px;
+
+            }
         }
     }
 }

stories/index.stories.js

@@ -5,26 +5,7 @@ import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { linkTo } from '@storybook/addon-links';
 
-import { Button, Welcome } from '@storybook/react/demo';
+import { Addon, LibraryItemList, MetaItem, ShareAddon, Stream, UserPanel, Video } from 'stremio-common';
-import { Addon } from 'stremio-common';
-import { LibraryItemList } from 'stremio-common';
-import { MetaItem } from 'stremio-common';
-import { ShareAddon } from 'stremio-common';
-import { Stream } from 'stremio-common';
-import { UserPanel } from 'stremio-common';
-import { Video } from 'stremio-common';
-
-storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
-
-storiesOf('Button', module)
-  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
-  .add('with some emoji', () => (
-    <Button onClick={action('clicked')}>
-      <span role="img" aria-label="so cool">
-        😀 😎 👍 💯
-      </span>
-    </Button>
-  ));
 
 storiesOf('Addon', module)
   .add('addon', () => (

webpack.config.js

@@ -33,7 +33,7 @@ module.exports = {
                         loader: 'css-loader',
                         options: {
                             modules: true,
-                            localIdentName: '[hash:base64:5]',
+                            localIdentName: '[local]_[hash:base64:5]',
                             importLoaders: 2
                         }
                     },