Updated styles in javascript to fulfill adidas rules

src/common/AsideMenu.js

@@ -4,11 +4,11 @@ import tagsIcon from '@fortawesome/fontawesome-free-solid/faTags';
 import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 import React from 'react';
 import { NavLink } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
 import DeleteServerButton from '../servers/DeleteServerButton';
 import './AsideMenu.scss';
-import PropTypes from 'prop-types';
 import { serverType } from '../servers/prop-types';
-import classnames from 'classnames';
 
 const defaultProps = {
   className: '',

src/common/Home.js

@@ -1,14 +1,20 @@
-import chevronIcon from '@fortawesome/fontawesome-free-solid/faChevronRight'
-import FontAwesomeIcon from '@fortawesome/react-fontawesome'
-import { isEmpty, pick, values } from 'ramda'
-import React from 'react'
-import { connect } from 'react-redux'
-import { Link } from 'react-router-dom'
-import { ListGroup, ListGroupItem } from 'reactstrap'
-import { resetSelectedServer } from '../servers/reducers/selectedServer'
-import './Home.scss'
+import chevronIcon from '@fortawesome/fontawesome-free-solid/faChevronRight';
+import FontAwesomeIcon from '@fortawesome/react-fontawesome';
+import { isEmpty, pick, values } from 'ramda';
+import React from 'react';
+import { connect } from 'react-redux';
+import { Link } from 'react-router-dom';
+import { ListGroup, ListGroupItem } from 'reactstrap';
+import PropTypes from 'prop-types';
+import { resetSelectedServer } from '../servers/reducers/selectedServer';
+import './Home.scss';
 
-export class Home extends React.Component {
+const propTypes = {
+  resetSelectedServer: PropTypes.func,
+  servers: PropTypes.object,
+};
+
+export class HomeComponent extends React.Component {
   componentDidMount() {
     this.props.resetSelectedServer();
   }
@@ -45,4 +51,8 @@ export class Home extends React.Component {
   }
 }
 
-export default connect(pick(['servers']), { resetSelectedServer })(Home);
+HomeComponent.propTypes = propTypes;
+
+const Home = connect(pick([ 'servers' ]), { resetSelectedServer })(HomeComponent);
+
+export default Home;

src/common/MainHeader.js

@@ -2,18 +2,23 @@ import plusIcon from '@fortawesome/fontawesome-free-solid/faPlus';
 import arrowIcon from '@fortawesome/fontawesome-free-solid/faChevronDown';
 import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 import React from 'react';
-import { Link, withRouter } from 'react-router-dom'
+import { Link, withRouter } from 'react-router-dom';
 import { Collapse, Nav, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } from 'reactstrap';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
 import ServersDropdown from '../servers/ServersDropdown';
 import './MainHeader.scss';
 import shlinkLogo from './shlink-logo-white.png';
-import classnames from 'classnames';
 
-export class MainHeader extends React.Component {
+const propTypes = {
+  location: PropTypes.object,
+};
+
+export class MainHeaderComponent extends React.Component {
   state = { isOpen: false };
-  toggle = () => {
+  handleToggle = () => {
     this.setState(({ isOpen }) => ({
-      isOpen: !isOpen
+      isOpen: !isOpen,
     }));
   };
 
@@ -33,10 +38,10 @@ export class MainHeader extends React.Component {
     return (
       <Navbar color="primary" dark fixed="top" className="main-header" expand="md">
         <NavbarBrand tag={Link} to="/">
-          <img src={shlinkLogo} alt="Shlink" className="main-header__brand-logo"/> Shlink
+          <img src={shlinkLogo} alt="Shlink" className="main-header__brand-logo" /> Shlink
         </NavbarBrand>
 
-        <NavbarToggler onClick={this.toggle}>
+        <NavbarToggler onClick={this.handleToggle}>
           <FontAwesomeIcon icon={arrowIcon} className={toggleClass} />
         </NavbarToggler>
 
@@ -48,7 +53,7 @@ export class MainHeader extends React.Component {
                 to={createServerPath}
                 active={location.pathname === createServerPath}
               >
-                <FontAwesomeIcon icon={plusIcon}/>&nbsp; Add server
+                <FontAwesomeIcon icon={plusIcon} />&nbsp; Add server
               </NavLink>
             </NavItem>
             <ServersDropdown />
@@ -59,4 +64,8 @@ export class MainHeader extends React.Component {
   }
 }
 
-export default withRouter(MainHeader);
+MainHeaderComponent.propTypes = propTypes;
+
+const MainHeader = withRouter(MainHeaderComponent);
+
+export default MainHeader;

src/common/MenuLayout.js

@@ -2,26 +2,38 @@ import React from 'react';
 import { Route, Switch, withRouter } from 'react-router-dom';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
-import { selectServer } from '../servers/reducers/selectedServer';
-import CreateShortUrl from '../short-urls/CreateShortUrl';
-import ShortUrls from '../short-urls/ShortUrls';
-import ShortUrlsVisits from '../short-urls/ShortUrlVisits';
-import AsideMenu from './AsideMenu';
 import { pick } from 'ramda';
 import Swipeable from 'react-swipeable';
 import burgerIcon from '@fortawesome/fontawesome-free-solid/faBars';
 import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 import classnames from 'classnames';
+import * as PropTypes from 'prop-types';
+import ShortUrlsVisits from '../short-urls/ShortUrlVisits';
+import { selectServer } from '../servers/reducers/selectedServer';
+import CreateShortUrl from '../short-urls/CreateShortUrl';
+import ShortUrls from '../short-urls/ShortUrls';
 import './MenuLayout.scss';
 import TagsList from '../tags/TagsList';
+import { serverType } from '../servers/prop-types';
+import AsideMenu from './AsideMenu';
 
-export class MenuLayout extends React.Component {
+const propTypes = {
+  match: PropTypes.object,
+  selectServer: PropTypes.func,
+  location: PropTypes.object,
+  selectedServer: serverType,
+};
+
+export class MenuLayoutComponent extends React.Component {
   state = { showSideBar: false };
 
   // FIXME Shouldn't use componentWillMount, but this code has to be run before children components are rendered
+  /* eslint react/no-deprecated: "off" */
   componentWillMount() {
-    const { serverId } = this.props.match.params;
-    this.props.selectServer(serverId);
+    const { match, selectServer } = this.props;
+    const { params: { serverId } } = match;
+
+    selectServer(serverId);
   }
 
   componentDidUpdate(prevProps) {
@@ -44,14 +56,14 @@ export class MenuLayout extends React.Component {
         <FontAwesomeIcon
           icon={burgerIcon}
           className={burgerClasses}
-          onClick={() => this.setState({ showSideBar: !this.state.showSideBar })}
+          onClick={() => this.setState(({ showSideBar }) => ({ showSideBar: !showSideBar }))}
         />
 
         <Swipeable
           delta={40}
+          className="menu-layout__swipeable"
           onSwipedLeft={() => this.setState({ showSideBar: false })}
           onSwipedRight={() => this.setState({ showSideBar: true })}
-          className="menu-layout__swipeable"
         >
           <div className="row menu-layout__swipeable-inner">
             <AsideMenu
@@ -93,7 +105,11 @@ export class MenuLayout extends React.Component {
   }
 }
 
-export default compose(
-  connect(pick(['selectedServer', 'shortUrlsListParams']), { selectServer }),
+MenuLayoutComponent.propTypes = propTypes;
+
+const MenuLayout = compose(
+  connect(pick([ 'selectedServer', 'shortUrlsListParams' ]), { selectServer }),
   withRouter
-)(MenuLayout);
+)(MenuLayoutComponent);
+
+export default MenuLayout;

src/common/ScrollToTop.js

@@ -1,12 +1,24 @@
 import React from 'react';
-import { withRouter } from 'react-router-dom'
+import { withRouter } from 'react-router-dom';
+import PropTypes from 'prop-types';
 
-export class ScrollToTop extends React.Component {
+const propTypes = {
+  location: PropTypes.object,
+  window: PropTypes.shape({
+    scrollTo: PropTypes.func,
+  }),
+  children: PropTypes.node,
+};
+const defaultProps = {
+  window,
+};
+
+export class ScrollToTopComponent extends React.Component {
   componentDidUpdate(prevProps) {
     const { location, window } = this.props;
 
     if (location !== prevProps.location) {
-      window.scrollTo(0, 0)
+      window.scrollTo(0, 0);
     }
   }
 
@@ -15,8 +27,9 @@ export class ScrollToTop extends React.Component {
   }
 }
 
-ScrollToTop.defaultProps = {
-  window
-};
+ScrollToTopComponent.defaultProps = defaultProps;
+ScrollToTopComponent.propTypes = propTypes;
 
-export default withRouter(ScrollToTop);
+const ScrollToTop = withRouter(ScrollToTopComponent);
+
+export default ScrollToTop;