refactor: corrects eslint and variable name spacing (#31)

* refactor: corrects eslint and variable namespacing

* chore: fixes git conflict

* chore: fixes eslint

src/webui/components/ActionBar/index.js

@@ -1,18 +1,16 @@
-/* eslint-disable react/jsx-max-depth */
 /**
  * @prettier
  */
 
 import React, { Component } from 'react';
 
-import { DetailContextConsumer } from '../../pages/version/index';
-import List from '@material-ui/core/List/index';
-
-import DownloadIcon from '@material-ui/icons/CloudDownload';
 import BugReportIcon from '@material-ui/icons/BugReport';
+import DownloadIcon from '@material-ui/icons/CloudDownload';
 import HomeIcon from '@material-ui/icons/Home';
+import List from '@material-ui/core/List/index';
 import Tooltip from '@material-ui/core/Tooltip/index';
 
+import { DetailContextConsumer } from '../../pages/version/index';
 import { Fab, ActionListItem } from './styles';
 
 const ACTIONS = {
@@ -46,24 +44,14 @@ class ActionBar extends Component<any, any> {
       return null;
     }
     return (
-      <a href={link} target={"_blank"}>
+      <a href={link} target={'_blank'}>
         {component}
       </a>
     );
   }
 
-  renderActionBarListItems = (packageMeta) => {
+  renderActionBarListItems = packageMeta => {
-    const {
+    const { latest: { bugs: { url: issue } = {}, homepage, dist: { tarball } = {} } = {} } = packageMeta;
-        latest: {
-            bugs: {
-              url: issue,
-            } = {},
-            homepage,
-            dist: {
-              tarball,
-            } = {},
-        } = {},
-    } = packageMeta;
 
     const actionsMap = {
       homepage,
@@ -74,11 +62,7 @@ class ActionBar extends Component<any, any> {
     const renderList = Object.keys(actionsMap).reduce((component, value, key) => {
       const link = actionsMap[value];
       if (link) {
-        const fab = (
+        const fab = <Fab size={'small'}>{ACTIONS[value]['icon']}</Fab>;
-          <Fab size={'small'}>
-            {ACTIONS[value]['icon']}
-          </Fab>
-        );
         component.push(
           <Tooltip key={key} title={ACTIONS[value]['title']}>
             {this.renderIconsWithLink(link, fab)}
@@ -90,19 +74,13 @@ class ActionBar extends Component<any, any> {
 
     return (
       <>
-        <ActionListItem alignItems={'flex-start'}>
+        <ActionListItem alignItems={'flex-start'}>{renderList}</ActionListItem>
-          {renderList}
-        </ActionListItem>
       </>
     );
   };
 
   renderActionBar = ({ packageMeta = {} }) => {
-    return (
+    return <List>{this.renderActionBarListItems(packageMeta)}</List>;
-      <List>
-        {this.renderActionBarListItems(packageMeta)}
-      </List>
-    );
   };
 }
 

src/webui/components/CopyToClipBoard/index.js

@@ -4,15 +4,15 @@
  */
 
 import React from 'react';
+import type { Node } from 'react';
+
 import FileCopy from '@material-ui/icons/FileCopy';
 import Tooltip from '@material-ui/core/Tooltip/index';
 
-import type { Node } from 'react';
-import { IProps } from './types';
-
 import { ClipBoardCopy, ClipBoardCopyText, CopyIcon } from './styles';
 import { copyToClipBoardUtility } from '../../utils/cli-utils';
 import { TEXT } from '../../utils/constants';
+import { IProps } from './types';
 
 const CopyToClipBoard = ({ text, children }: IProps): Node => {
   const renderToolTipFileCopy = () => (

src/webui/components/Dependencies/index.js

@@ -3,8 +3,6 @@
  * @flow
  */
 
-/* eslint react/jsx-max-depth: 0 */
-
 import React, { Component, Fragment } from 'react';
 import { withRouter } from 'react-router-dom';
 import CardContent from '@material-ui/core/CardContent/index';
@@ -40,7 +38,7 @@ class DepDetail extends Component<any, any> {
   };
 }
 
-const WrappDepDetail = withRouter(DepDetail);
+const WrapperDependencyDetail = withRouter(DepDetail);
 
 class DependencyBlock extends Component<any, any> {
   render() {
@@ -68,7 +66,7 @@ class DependencyBlock extends Component<any, any> {
     deps.map(dep => {
       const [name, version] = dep;
 
-      return <WrappDepDetail key={name} name={name} onLoading={enableLoading} version={version} />;
+      return <WrapperDependencyDetail key={name} name={name} onLoading={enableLoading} version={version} />;
     });
 }
 

src/webui/components/DetailSidebar/index.js

@@ -4,7 +4,7 @@ import Card from '@material-ui/core/Card/index';
 import CardContent from '@material-ui/core/CardContent/index';
 import List from '@material-ui/core/List/index';
 
-import ActtionBar from '../ActionBar';
+import ActionBar from '../ActionBar';
 import Author from '../Author';
 import Developers from '../Developers';
 import Dist from '../Dist';
@@ -88,7 +88,7 @@ class DetailSidebar extends Component {
   }
 
   renderActionBar = () => {
-    return <ActtionBar />;
+    return <ActionBar />;
   }
 }
 

src/webui/components/Developers/index.js

@@ -1,15 +1,18 @@
-import React, {Component} from 'react';
+/**
+ * @prettier
+ */
+
+import React, { Component } from 'react';
 
 import Avatar from '@material-ui/core/Avatar';
-import Tooltip from '@material-ui/core/Tooltip';
 import Add from '@material-ui/icons/Add';
+import Tooltip from '@material-ui/core/Tooltip';
 
 import { DetailContextConsumer } from '../../pages/version';
-
 import { Details, Heading, Content, Fab } from './styles';
 
 interface Props {
-  type: 'contributors' | 'maintainers'
+  type: 'contributors' | 'maintainers';
 }
 
 class Developers extends Component<Props, any> {
@@ -28,11 +31,11 @@ class Developers extends Component<Props, any> {
         }}
       </DetailContextConsumer>
     );
-  };
+  }
 
   handleLoadMore = () => {
-    this.setState((prev) => ({ visibleDevs: prev.visibleDevs + 6 }));
+    this.setState(prev => ({ visibleDevs: prev.visibleDevs + 6 }));
-  }
+  };
 
   renderDevelopers = (developers, packageMeta) => {
     const { type } = this.props;
@@ -44,40 +47,33 @@ class Developers extends Component<Props, any> {
           {developers.slice(0, visibleDevs).map(developer => (
             <Details key={developer.email}>{this.renderDeveloperDetails(developer, packageMeta)}</Details>
           ))}
-          {visibleDevs < developers.length &&
+          {visibleDevs < developers.length && (
-            <Fab onClick={this.handleLoadMore} size={'small'}><Add /></Fab>
+            <Fab onClick={this.handleLoadMore} size={'small'}>
-          }
+              <Add />
+            </Fab>
+          )}
         </Content>
       </>
     );
-  }
+  };
 
   renderLinkForMail(email, avatarComponent, packageName, version) {
-    if(!email) {
+    if (!email) {
       return avatarComponent;
     }
     return (
-      <a href={`mailto:${email}?subject=${packageName}@${version}`} target={"_top"}>
+      <a href={`mailto:${email}?subject=${packageName}@${version}`} target={'_top'}>
         {avatarComponent}
       </a>
     );
   }
 
   renderDeveloperDetails = ({ name, avatar, email }, packageMeta) => {
-    const { 
+    const { name: packageName, version } = packageMeta.latest;
-        name: packageName,
-        version,
-      } = packageMeta.latest;
-  
-    const avatarComponent = <Avatar aria-label={name} src={avatar} />;
-    return (
-      <Tooltip title={name}>
-        {this.renderLinkForMail(email, avatarComponent, packageName, version)}
-      </Tooltip>
-    );
-  }
 
+    const avatarComponent = <Avatar aria-label={name} src={avatar} />;
+    return <Tooltip title={name}>{this.renderLinkForMail(email, avatarComponent, packageName, version)}</Tooltip>;
+  };
 }
 
-
 export default Developers;

src/webui/components/Dist/index.js

@@ -2,13 +2,12 @@
  * @prettier
  */
 
-/* eslint-disable */
 import React, { Component } from 'react';
+
 import List from '@material-ui/core/List/index';
 
 import { DetailContextConsumer } from '../../pages/version/index';
-
+import { Heading, DistListItem, DistChips } from './styles';
-import { Heading, DistListItem, DistChips, DownloadButton } from './styles';
 import fileSizeSI from '../../utils/file-size';
 
 class Dist extends Component<any, any> {
@@ -34,10 +33,11 @@ class Dist extends Component<any, any> {
       if (value) {
         const label = (
           <span>
-            <b>{title.split('-').join(' ')}</b>: {value}
+            {/* eslint-disable-next-line */}
+            <b>{title.split('-').join(' ')}</b>:{value}
           </span>
         );
-        componentList.push(<DistChips label={label} key={key} />);
+        componentList.push(<DistChips key={key} label={label} />);
       }
       return componentList;
     }, []);

src/webui/components/Engines/index.js

@@ -1,5 +1,8 @@
-/* eslint-disable */
+/**
-import React, {Component} from 'react';
+ * @prettier
+ */
+
+import React, { Component } from 'react';
 
 import Avatar from '@material-ui/core/Avatar/index';
 import Grid from '@material-ui/core/Grid/index';
@@ -7,29 +10,27 @@ import List from '@material-ui/core/List/index';
 import ListItemText from '@material-ui/core/ListItemText/index';
 
 import { DetailContextConsumer } from '../../pages/version/index';
-
 import { Heading, EngineListItem } from './styles';
 import node from './img/node.png';
-import npm from '../Install/img/npm.svg'
+import npm from '../Install/img/npm.svg';
-
 
 const ICONS = {
   'node-JS': <Avatar src={node} />,
   'NPM-version': <Avatar src={npm} />,
-}
+};
 
 class Engine extends Component {
   render() {
     return (
       <DetailContextConsumer>
-        {(context) => {
+        {context => {
           return this.renderEngine(context);
         }}
       </DetailContextConsumer>
     );
-  };
+  }
 
-  renderEngine = ({packageMeta}) => {
+  renderEngine = ({ packageMeta }) => {
     const { engines } = packageMeta.latest;
     if (!engines) {
       return null;
@@ -37,14 +38,14 @@ class Engine extends Component {
 
     const engineDict = {
       'node-JS': engines.node,
-      'NPM-version': engines.npm
+      'NPM-version': engines.npm,
-    }
+    };
 
     const items = Object.keys(engineDict).reduce((markup, text, key) => {
-      const heading = engineDict[text]
+      const heading = engineDict[text];
-      if (heading){
+      if (heading) {
         markup.push(
-          <Grid item={true} xs={6} key={key}>
+          <Grid item={true} key={key} xs={6}>
             {this.renderListItems(heading, text)}
           </Grid>
         );
@@ -56,23 +57,19 @@ class Engine extends Component {
       return null;
     }
 
-    return (
+    return <Grid container={true}>{items}</Grid>;
-      <Grid container={true}>
+  };
-        {items}
-      </Grid>
-    );
-  }
 
   renderListItems = (heading, text) => {
     return (
-      <List subheader={<Heading variant={"subheading"}>{text.split('-').join(' ')}</Heading>}>
+      <List subheader={<Heading variant={'subheading'}>{text.split('-').join(' ')}</Heading>}>
         <EngineListItem>
-          { ICONS[text] }
+          {ICONS[text]}
           <ListItemText primary={heading} />
         </EngineListItem>
       </List>
     );
-  }
+  };
 }
 
 export default Engine;

src/webui/components/Footer/styles.js

@@ -6,12 +6,13 @@
 import styled, { css } from 'react-emotion';
 import mq from '../../utils/styles/media';
 import Icon from '../Icon';
+import colors from '../../utils/styles/colors';
 
 export const Wrapper = styled.div`
   && {
-    background: #f9f9f9;
+    background: ${colors.snow};
-    border-top: 1px solid #e3e3e3;
+    border-top: 1px solid ${colors.greyGainsboro};
-    color: #999999;
+    color: ${colors.nobel01};
     font-size: 14px;
     padding: 20px;
   }
@@ -67,7 +68,7 @@ export const Earth = styled(Icon)`
 export const Flags = styled.span`
   && {
     position: absolute;
-    background: #d3dddd;
+    background: ${colors.greyAthens};
     padding: 1px 4px;
     border-radius: 3px;
     height: 20px;
@@ -82,7 +83,7 @@ export const Flags = styled.span`
       left: -4px;
       margin-left: -5px;
       border: 5px solid;
-      border-color: #d3dddd transparent transparent transparent;
+      border-color: ${colors.greyAthens} transparent transparent transparent;
       transform: rotate(90deg);
     }
     ${ToolTip}:hover & {
@@ -93,7 +94,7 @@ export const Flags = styled.span`
 
 export const Love = styled.span`
   && {
-    color: #e25555;
+    color: ${colors.love};
     padding: 0 5px;
   }
 `;

src/webui/utils/styles/colors.js

@@ -22,6 +22,7 @@ const colors = {
     paleNavy: '#e4e8f1',
     saltpan: '#f7f8f6',
     snow: '#f9f9f9',
+    love: '#e25555',
 
     nobel01: '#999999',
     nobel02: '#9f9f9f',

tools/verdaccio.js

@@ -1,3 +1,7 @@
+/**
+ * @prettier
+ */
+
 const fs = require('fs');
 const startServer = require('verdaccio').default;
 const yalm = require('js-yaml');
@@ -11,9 +15,9 @@ const handler = function(webServer, addr, pkgName, pkgVersion) {
 
   process.on('SIGTERM', () => {
     webServer.close(() => {
-      console.log('Process terminated')
+      console.log('Process terminated');
-    })
+    });
-  })
+  });
 };
 
 startServer(configJsonFormat, 8080, '', '1.0.0', 'verdaccio', handler);