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

* refactor: corrects eslint and variable namespacing

* chore: fixes git conflict

* chore: fixes eslint

Author: ayusharma

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) => {
-    const {
-        latest: {
-            bugs: {
-              url: issue,
-            } = {},
-            homepage,
-            dist: {
-              tarball,
-            } = {},
-        } = {},
-    } = packageMeta;
+  renderActionBarListItems = packageMeta => {
+    const { 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 = (
-          <Fab size={'small'}>
-            {ACTIONS[value]['icon']}
-          </Fab>
-        );
+        const 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'}>
-          {renderList}
-        </ActionListItem>
+        <ActionListItem alignItems={'flex-start'}>{renderList}</ActionListItem>
       </>
     );
   };
 
   renderActionBar = ({ packageMeta = {} }) => {
-    return (
-      <List>
-        {this.renderActionBarListItems(packageMeta)}
-      </List>
-    );
+    return <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 &&
-            <Fab onClick={this.handleLoadMore} size={'small'}><Add /></Fab>
-          }
+          {visibleDevs < developers.length && (
+            <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 { 
-        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 { name: packageName, version } = packageMeta.latest;
 
+    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, DownloadButton } from './styles';
+import { Heading, DistListItem, DistChips } 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,50 +1,51 @@
-/* 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';
 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;
     }
 
     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]
-      if (heading){
+      const heading = engineDict[text];
+      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 (
-      <Grid container={true}>
-        {items}
-      </Grid>
-    );
-  }
+    return <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;