Add standardjs (#31)

Correct the projects issues raise by standard
Change the location of test files
Use babel eslint parser with standard

jest.config.js

@@ -1,22 +1,22 @@
 module.exports = {
   verbose: true,
   collectCoverage: true,
-  setupTestFrameworkScriptFile: "<rootDir>/src/tests/setupTests.js",
-  coverageReporters: ["text", "lcov"],
+  setupTestFrameworkScriptFile: '<rootDir>/src/tests/setupTests.js',
+  coverageReporters: ['text', 'lcov'],
   collectCoverageFrom: [
-    "**/*.{js,jsx}",
-    "!**/*.{config}.{js}",
-    "!**/node_modules/**",
-    "!**/dist/**",
-    "!**/vendor/**",
-    "!**/coverage/**",
-    "!**/src/assets/**",
-    "!**/semantic/**",
-    "!**/src/index.js"
+    '**/*.{js,jsx}',
+    '!**/*.{config}.{js}',
+    '!**/node_modules/**',
+    '!**/dist/**',
+    '!**/vendor/**',
+    '!**/coverage/**',
+    '!**/src/assets/**',
+    '!**/semantic/**',
+    '!**/src/index.js'
   ],
-  "transform": {
-    "^.+\\.js$": "babel-jest",
-    ".+\\.(css|styl|less|sass|scss)$": "jest-transform-css",
-    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/jest.fileTransformer.config.js"
+  'transform': {
+    '^.+\\.js$': 'babel-jest',
+    '.+\\.(css|styl|less|sass|scss)$': 'jest-transform-css',
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/jest.fileTransformer.config.js'
   }
-};
+}

jest.fileTransformer.config.js

@@ -1,7 +1,7 @@
-const path = require('path');
+const path = require('path')
 
 module.exports = {
-  process(src, filename, config, options) {
-    return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';';
-  },
-};
+  process (src, filename, config, options) {
+    return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';'
+  }
+}

package.json

@@ -9,11 +9,12 @@
   "scripts": {
     "start": "webpack-dev-server --mode development --open",
     "build": "webpack --mode production",
-    "test": "jest",
+    "test": "standard && jest",
     "coveralls": "cat ./coverage/lcov.info | coveralls"
   },
   "dependencies": {
     "axios": "^0.18.0",
+    "global": "^4.3.2",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
     "react-redux": "^6.0.0",
@@ -25,6 +26,7 @@
   },
   "devDependencies": {
     "babel-core": "^6.26.3",
+    "babel-eslint": "^10.0.1",
     "babel-jest": "^23.6.0",
     "babel-loader": "7",
     "babel-plugin-transform-class-properties": "^6.24.1",
@@ -45,10 +47,20 @@
     "redux-mock-store": "^1.5.3",
     "regenerator-runtime": "^0.13.1",
     "sass-loader": "^7.1.0",
+    "standard": "^12.0.1",
     "style-loader": "^0.23.1",
     "url-loader": "^1.1.2",
     "webpack": "^4.27.1",
     "webpack-cli": "^3.1.2",
     "webpack-dev-server": "^3.1.10"
+  },
+  "standard": {
+    "parser": "babel-eslint",
+    "ignore": [
+      "src/assets/*"
+    ],
+    "env": [
+      "jest"
+    ]
   }
 }

src/actions/getUsersAction.js

@@ -1,18 +1,19 @@
-import axios from "axios";
-import { GET_USERS } from "../types";
+import axios from 'axios'
+import { GET_USERS } from '../types'
 
-export let getUsers = users => ({ type: GET_USERS, payload: users });
+export let getUsers = users => ({ type: GET_USERS, payload: users })
 
 export let fetchUsers = () => dispatch => {
   return axios
-    .get("/api/v1/users")
+    .get('/api/v1/users')
     .then(response => {
-      let { users, gravatar_url, karma_total } = response.data;
+      /* eslint-disable-next-line */
+      let { users, gravatar_url, karma_total } = response.data
       users = users.map(user => {
-        user.gravatar_url = gravatar_url[user.id];
-        user.karma_total = karma_total[user.id];
-        return user;
-      });
-      dispatch(getUsers(users));
-    });
-};
+        user.gravatar_url = gravatar_url[user.id]
+        user.karma_total = karma_total[user.id]
+        return user
+      })
+      dispatch(getUsers(users))
+    })
+}

src/components/Paginate.js

@@ -1,22 +1,22 @@
-import React from "react";
-import { RingLoader } from "react-spinners";
+import React from 'react'
+import { RingLoader } from 'react-spinners'
 
 const Paginate = ({ items, Component }) => {
-  let itemsArray;
+  let itemsArray
   if (items.length) {
     itemsArray = items.map(item => (
       <Component key={item.id} item={item} />
-    ));
+    ))
   }
   return (
     itemsArray || (
       <RingLoader
-        sizeUnit={"px"}
+        sizeUnit={'px'}
         size={200}
-        color={"#34495E"}
+        color={'#34495E'}
       />
     )
-  );
-};
+  )
+}
 
-export default Paginate;
+export default Paginate

src/components/PaginationLinks.js

@@ -1,5 +1,5 @@
-import React from "react";
-import "../assets/PaginationLinks.css";
+import React from 'react'
+import '../assets/PaginationLinks.css'
 
 const PaginationLinks = ({
   pageCount,
@@ -8,28 +8,28 @@ const PaginationLinks = ({
   firstPage,
   lastPage
 }) => {
-  const pageItems = [];
+  const pageItems = []
   for (let i = 1; i <= pageCount; i++) {
     pageItems.push(
       <span
         onClick={handlePageSelect(i)}
-        className={selectedPage === i ? "active" : undefined}
+        className={selectedPage === i ? 'active' : undefined}
         key={i}
       >
         {i}
       </span>
-    );
+    )
   }
 
   return (
-    <div className="center">
-      <div className="pagination">
-        <span onClick={handlePageSelect(selectedPage - 1)} className={firstPage ? "hide-button" : undefined} >previous</span>
+    <div className='center'>
+      <div className='pagination'>
+        <span onClick={handlePageSelect(selectedPage - 1)} className={firstPage ? 'hide-button' : undefined} >previous</span>
         {pageItems}
-        <span onClick={handlePageSelect(selectedPage + 1)} className={lastPage ? "hide-button" : undefined} >next</span>
+        <span onClick={handlePageSelect(selectedPage + 1)} className={lastPage ? 'hide-button' : undefined} >next</span>
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default PaginationLinks;
+export default PaginationLinks

src/components/User.js

@@ -1,44 +1,44 @@
-import React from "react";
-import { Card, Image, Icon } from "semantic-ui-react";
-import { Link } from "react-router-dom";
-import "../assets/User.css";
+import React from 'react'
+import { Card, Image, Icon } from 'semantic-ui-react'
+import { Link } from 'react-router-dom'
+import '../assets/User.css'
 
 const User = ({ item: user }) => {
   return (
-    <Card className="user-card" raised={true}>
+    <Card className='user-card' raised>
       <Card.Content>
         <Link to={`/users/${user.id}`}>
           <Image
             src={`${user.gravatar_url}`}
-            floated="left"
-            rounded={true}
-            size="tiny"
+            floated='left'
+            rounded
+            size='tiny'
           />
-          <big className="card-header">
+          <big className='card-header'>
             <Card.Header>
               {user.first_name
                 ? fullName(user).length >= 12
-                  ? fullName(user).substring(0, 10) + "..."
+                  ? fullName(user).substring(0, 10) + '...'
                   : fullName(user)
                 : user.slug.substring(0, 15)}
             </Card.Header>
           </big>
         </Link>
-        <p>
+        <Card.Description>
           {user.title_list.length
-            ? user.title_list.map(title => title + " ")
+            ? user.title_list.map(title => title + ' ')
             : null}
-        </p>
-        <p className="card-footer">
-          <Icon name="fire" /> {}
+        </Card.Description>
+        <p className='card-footer'>
+          <Icon name='fire' /> {}
           {user.karma_total}
         </p>
       </Card.Content>
     </Card>
-  );
-};
+  )
+}
 
 const fullName = user => {
-  return user.first_name + " " + user.last_name;
-};
-export default User;
+  return user.first_name + ' ' + user.last_name
+}
+export default User

src/components/homepage/Homepage.js

@@ -1,32 +1,31 @@
-import React, { Component, Fragment } from "react";
-import { Grid } from "semantic-ui-react";
+import React, { Component, Fragment } from 'react'
+import { Grid } from 'semantic-ui-react'
 import HomepageModal from './HomepageModal'
-import "./Homepage.css";
-import modals from "./modals";
+import './Homepage.css'
+import modals from './modals'
 
 export class Homepage extends Component {
-
-  renderModals() {
+  renderModals () {
     return modals.map((modal, id) => {
       return (
         <HomepageModal key={id} modal={modal} />
-      );
-    });
+      )
+    })
   };
 
-  render() {
+  render () {
     return (
       <Fragment>
-        <Grid columns={16} stretched className="landing-page-background">
+        <Grid columns={16} stretched className='landing-page-background'>
           <Grid.Row style={{ height: '500px' }}>
           </Grid.Row>
           {this.renderModals()}
           <Grid.Row style={{ height: '320px' }}>
           </Grid.Row>
         </Grid>
       </Fragment>
-    );
+    )
   }
 }
 
-export default Homepage;
+export default Homepage