chore: fix comma-dangle and react/jsx-sort-props

enable react/jsx-sort-props
enable camelcase on ui
enable semi global

.eslintrc

@@ -93,20 +93,28 @@
     "react/jsx-pascal-case": ["error"],
     "react/jsx-props-no-multi-spaces": ["error"],
     "react/jsx-sort-default-props": ["warn"],
-    "react/jsx-sort-props": ["warn"],
+    "react/jsx-sort-props": ["error"],
+    "react/no-string-refs": ["error"],
+    "react/no-danger-with-children": ["error"],
     "react/jsx-tag-spacing": ["error", {
       "closingSlash": "never",
       "beforeSelfClosing": "always",
       "afterOpening": "allow-multiline",
       "beforeClosing": "allow"
     }],
+    "react/prefer-es6-class": [
+      2,
+      "always"
+    ],
+    "semi": ["error"],
+    "comma-dangle": ["error"],
+    "camelcase": 0,
     "no-useless-escape": ["error"],
     "no-invalid-this": 0,
     "handle-callback-err": ["error"],
     "no-fallthrough": ["error"],
     "no-new-require": ["error"],
     "max-len": ["error", 160],
-    "camelcase": 0,
     "require-jsdoc": 0,
     "valid-jsdoc": 0,
     "prefer-spread": 1,

src/webui/.eslintrc

@@ -10,6 +10,7 @@
   },
   "rules": {
     "require-jsdoc": 0,
+    "camelcase": ["error"],
     "no-console": [
       1,
       {
@@ -24,14 +25,6 @@
         "vars": "all",
         "args": "all"
       }
-    ],
-    "comma-dangle": 0,
-    "semi": 1,
-    "react/no-danger-with-children": 1,
-    "react/no-string-refs": 1,
-    "react/prefer-es6-class": [
-      2,
-      "always"
     ]
   }
 }

src/webui/app.js

@@ -44,7 +44,7 @@ export default class App extends Component {
     loadLogo = async () => {
     const logoUrl = await logo();
     this.setState({
-      logoUrl
+      logoUrl,
     });
   }
 
@@ -57,7 +57,7 @@ export default class App extends Component {
     } else {
       this.setState({
         user: { username, token },
-        isUserLoggedIn: true
+        isUserLoggedIn: true,
       });
     }
   }
@@ -67,12 +67,12 @@ export default class App extends Component {
       this.req = await API.request('packages', 'GET');
       this.setState({
         packages: this.req,
-        isLoading: false
+        isLoading: false,
       });
     } catch (error) {
       this.handleShowAlertDialog({
         title: 'Warning',
-        message: `Unable to load package list: ${error.message}`
+        message: `Unable to load package list: ${error.message}`,
       });
       this.setLoading(false);
     }
@@ -80,7 +80,7 @@ export default class App extends Component {
 
   setLoading = isLoading => (
     this.setState({
-      isLoading
+      isLoading,
     })
   )
 
@@ -91,7 +91,7 @@ export default class App extends Component {
   handleToggleLoginModal = () => {
     this.setState((prevState) => ({
       showLoginModal: !prevState.showLoginModal,
-      error: {}
+      error: {},
     }));
   }
 
@@ -114,7 +114,7 @@ export default class App extends Component {
     if (error) {
       this.setState({
         user: {},
-        error
+        error,
       });
     }
   }
@@ -126,7 +126,7 @@ export default class App extends Component {
         token,
       },
       isUserLoggedIn: true,  // close login modal after successful login
-      showLoginModal: false  // set isUserLoggedIn to true
+      showLoginModal: false,  // set isUserLoggedIn to true
     });
   }
   /**
@@ -138,7 +138,7 @@ export default class App extends Component {
     storage.removeItem('token');
     this.setState({
       user: {},
-      isUserLoggedIn: false
+      isUserLoggedIn: false,
     });
   }
 

src/webui/components/AutoComplete/index.js

@@ -19,7 +19,6 @@ const renderInputComponent = (inputProps): Node => {
   const { ref, startAdornment, disableUnderline, onKeyDown, ...others } = inputProps;
   return (
     <InputField
-      fullWidth={true}
       InputProps={{
         inputRef: node => {
           ref(node);
@@ -28,6 +27,7 @@ const renderInputComponent = (inputProps): Node => {
         disableUnderline,
         onKeyDown,
       }}
+      fullWidth={true}
       {...others}
     />
   );

src/webui/components/Login/index.js

@@ -19,14 +19,14 @@ export default class LoginModal extends Component {
     visibility: PropTypes.bool,
     error: PropTypes.object,
     onCancel: PropTypes.func,
-    onSubmit: PropTypes.func
+    onSubmit: PropTypes.func,
   };
 
   static defaultProps = {
     visibility: true,
     error: {},
     onCancel: () => {},
-    onSubmit: () => {}
+    onSubmit: () => {},
   }
 
   constructor(props) {
@@ -37,16 +37,16 @@ export default class LoginModal extends Component {
           required: true,
           pristine: true,
           helperText: 'Field required',
-          value: ''
+          value: '',
         },
         password:  {
           required: true,
           pristine: true,
           helperText: 'Field required',
-          value: ''
+          value: '',
         },
       },
-      error: props.error
+      error: props.error,
     };
   }
 
@@ -61,9 +61,9 @@ export default class LoginModal extends Component {
         [name]: {
           ...this.state.form[name],
           value: e.target.value,
-          pristine: false
-        }
-      }
+          pristine: false,
+        },
+      },
     });
   }
 
@@ -82,8 +82,8 @@ export default class LoginModal extends Component {
     this.setState({
       form: Object.keys(this.state.form).reduce((acc, key) => ({
         ...acc,
-        ...{ [key]: {...this.state.form[key], pristine: false } }
-      }), {})
+        ...{ [key]: {...this.state.form[key], pristine: false } },
+      }), {}),
     }, () => {
       if (!Object.keys(this.state.form).some(id => !this.state.form[id])) {
         this.submitCredentials();
@@ -99,8 +99,8 @@ export default class LoginModal extends Component {
     this.setState({
      form: Object.keys(this.state.form).reduce((acc, key) => ({
       ...acc,
-      ...{ [key]: {...this.state.form[key], value: "", pristine: true } }
-    }), {})
+      ...{ [key]: {...this.state.form[key], value: "", pristine: true } },
+    }), {}),
     });
   }
 

src/webui/components/PackageDetail/index.js

@@ -25,7 +25,7 @@ const PackageDetail = ({packageName, readMe}) => {
 
 PackageDetail.propTypes = {
   readMe: PropTypes.string,
-  packageName: PropTypes.string.isRequired
+  packageName: PropTypes.string.isRequired,
 };
 
 export default PackageDetail;

src/webui/components/PackageList/index.js

@@ -10,7 +10,7 @@ import classes from './packageList.scss';
 export default class PackageList extends React.Component {
   static propTypes = {
     packages: PropTypes.array,
-    help: PropTypes.bool
+    help: PropTypes.boolean,
   };
 
   renderPackages = () => {
@@ -30,9 +30,9 @@ export default class PackageList extends React.Component {
     return (
       packages.map((pkg, i) => {
         const { name, version, description, time, keywords } = pkg;
-        const author = formatAuthor(pkg.author);	
-        const license = formatLicense(pkg.license);	
-        return (	
+        const author = formatAuthor(pkg.author);
+        const license = formatLicense(pkg.license);
+        return (
           <Package key={i} {...{ name, version, author, description, license, time, keywords }} />
         );
       })

src/webui/components/PackageSidebar/modules/PeerDependencies/index.jsx

@@ -6,13 +6,13 @@ export const TITLE = 'Peer Dependencies';
 
 const PeerDependencies = ({dependencies = {}, title = TITLE}) => {
   return (
-    <Dependencies title={title} dependencies={dependencies} />
+    <Dependencies dependencies={dependencies} title={title} />
   );
 };
 
 PeerDependencies.propTypes = {
   dependencies: PropTypes.object,
-  title: PropTypes.string
+  title: PropTypes.string,
 };
 
 export default PeerDependencies;

src/webui/components/Search/index.js

@@ -138,19 +138,19 @@ class Search extends Component<IProps, IState> {
 
     return (
       <AutoComplete
-        suggestions={suggestions}
-        suggestionsLoaded={loaded}
-        suggestionsLoading={loading}
-        suggestionsError={error}
-        value={search}
-        placeholder={CONSTANTS.PLACEHOLDER_TEXT}
         color={colors.white}
-        startAdornment={this.renderAdorment()}
-        onSuggestionsFetch={this.handleFetchPackages}
+        onBlur={this.onBlur}
+        onChange={this.handleSearch}
         onCleanSuggestions={this.handlePackagesClearRequested}
         onClick={this.handleClickSearch}
-        onChange={this.handleSearch}
-        onBlur={this.onBlur}
+        onSuggestionsFetch={this.handleFetchPackages}
+        placeholder={CONSTANTS.PLACEHOLDER_TEXT}
+        startAdornment={this.renderAdorment()}
+        suggestions={suggestions}
+        suggestionsError={error}
+        suggestionsLoaded={loaded}
+        suggestionsLoading={loading}
+        value={search}
       />
     );
   }

src/webui/pages/detail/index.jsx

@@ -13,12 +13,12 @@ import PackageSidebar from '../../components/PackageSidebar/index';
 export default class Detail extends Component {
   static propTypes = {
     match: PropTypes.object,
-    isUserLoggedIn: PropTypes.bool
+    isUserLoggedIn: PropTypes.boolean,
   };
 
   state = {
     readMe: '',
-    notFound: false
+    notFound: false,
   };
 
   getPackageName(props = this.props) {
@@ -47,18 +47,18 @@ export default class Detail extends Component {
 
   async loadPackageInfo(packageName) {
     this.setState({
-      readMe: ''
+      readMe: '',
     });
 
     try {
       const resp = await API.request(`package/readme/${packageName}`, 'GET');
       this.setState({
         readMe: resp,
-        notFound: false
+        notFound: false,
       });
     } catch (err) {
       this.setState({
-        notFound: true
+        notFound: true,
       });
     }
   }
@@ -77,7 +77,7 @@ export default class Detail extends Component {
     }
     return (
       <div className={`container content ${classes.twoColumn}`}>
-        <PackageDetail readMe={readMe} packageName={this.packageName} />
+        <PackageDetail packageName={this.packageName} readMe={readMe} />
         <PackageSidebar packageName={this.packageName} />
       </div>
     );

src/webui/utils/api.js

@@ -42,7 +42,7 @@ class API {
         fetch(url, {
           method,
           credentials: 'same-origin',
-          ...options
+          ...options,
         })
         .then(handleResponseType)
         .then(([responseOk, body]) => {

src/webui/utils/login.js

@@ -10,10 +10,7 @@ export function isTokenExpire(token) {
         return true;
     }
 
-    let [
-        ,
-        payload
-    ] = token.split('.');
+    let [,payload] = token.split('.');
 
     if (!payload) {
         return true;
@@ -44,7 +41,7 @@ export async function makeLogin(username, password) {
         const error = {
             title: 'Unable to login',
             type: 'error',
-            description: 'Username or password can\'t be empty!'
+            description: 'Username or password can\'t be empty!',
         };
         return {error};
     }
@@ -54,19 +51,19 @@ export async function makeLogin(username, password) {
             body: JSON.stringify({username, password}),
             headers: {
                 Accept: HEADERS.JSON,
-                'Content-Type': HEADERS.JSON
-            }
+                'Content-Type': HEADERS.JSON,
+            },
         });
         const result = {
             username: response.username,
-            token: response.token
+            token: response.token,
         };
         return result;
     } catch (e) {
         const error = {
             title: 'Unable to login',
             type: 'error',
-            description: e.error
+            description: e.error,
         };
         return {error};
     }

src/webui/utils/package.js

@@ -47,13 +47,13 @@ export function formatAuthor(author) {
     let authorDetails = {
       name: DEFAULT_USER,
       email: '',
-      avatar: ''
+      avatar: '',
     };
 
     if (isString(author)) {
       authorDetails = {
         ...authorDetails,
-        name: author ? author : authorDetails.name
+        name: author ? author : authorDetails.name,
       };
     }
 
@@ -62,7 +62,7 @@ export function formatAuthor(author) {
         ...authorDetails,
         name: author.name ? author.name : authorDetails.name,
         email: author.email ? author.email : authorDetails.email,
-        avatar: author.avatar ? author.avatar : authorDetails.avatar
+        avatar: author.avatar ? author.avatar : authorDetails.avatar,
       };
     }
 
@@ -93,7 +93,7 @@ export function getLastUpdatedPackageTime(uplinks = {}) {
 export function getRecentReleases(time = {}) {
   const recent = Object.keys(time).map((version) => ({
     version,
-    time: formatDate(time[version])
+    time: formatDate(time[version]),
   }));
   return recent.slice(recent.length - 3, recent.length).reverse();
 }

src/webui/utils/styles/colors.js

@@ -27,8 +27,8 @@ const colors = {
     // -------------------------
 
     primary: '#4b5e40',
-    secondary: '#20232a'
-    
+    secondary: '#20232a',
+
 };
 
 export default colors;

src/webui/utils/styles/media.js

@@ -4,7 +4,7 @@ const breakpoints = {
   small: 576,
   medium: 768,
   large: 1024,
-  xlarge: 1275
+  xlarge: 1275,
 };
 
 const mq = Object.keys(breakpoints).reduce(

src/webui/utils/styles/sizes.js

@@ -5,19 +5,19 @@ export const fontSize = {
     lg: '21px',
     md: '18px',
     base: '16px',
-    sm: '14px'
+    sm: '14px',
 };
 
 export const lineHeight = {
     xl: '30px',
     sm: '18px',
     xs: '2',
-    xxs: '1.5'
+    xxs: '1.5',
 };
 
 export const fontWeight = {
   light: 300,
   regular: 400,
   semiBold: 500,
-  bold: 700
+  bold: 700,
 };

src/webui/utils/styles/spacings.js

@@ -2,5 +2,5 @@
 // -------------------------
 
 export const spacings = {
-    lg: '30px'
+    lg: '30px',
 };

tools/.eslintrc

@@ -1,5 +1,6 @@
 {
   "rules": {
+    "comma-dangle": 0,
     "no-console": [
       2,
       {