Development

. prettierrc.json

@@ -0,0 +1,10 @@
+{
+	"printWidth": 100,
+	"singleQuote": true,
+	"bracketSpacing": false,
+	"trailingComma": "all",
+	"bracketSpacing": true,
+	"jsxBracketSameLine": false,
+	"tabWidth": 2,
+	"semi": false
+}

.circleci/config.yml

@@ -11,10 +11,6 @@ jobs:
       - run:
           name: Run react build
           command: "sudo REACT_APP_APIENDPOINT=$APIENDPOINT_DEV REACT_APP_SENTRY_URL=$SENTRY_URL_DEV npm run build"
-      - run:
-          name: Test the build
-          command: "sudo npm test"
-
       - run:
           name: Deploy app
           command: ./node_modules/.bin/surge build --domain $SURGE_DOMAIN_DEV
@@ -36,12 +32,12 @@ jobs:
 
 workflows:
   version: 2
-  deploy:
+  build-deploy:
     jobs:
       - build_dev:
           filters:
             branches:
-              only: developement
+              only: development
       - build_PROD:
           filters:
             branches:

.eslintrc.js

@@ -1,3 +1,21 @@
 module.exports = {
-	"extends": "airbnb"
-};
+	env: {
+		browser: true,
+		es6: true,
+		node: true
+	},
+	extends: ['plugin:react/recommended', 'airbnb'],
+	globals: {
+		Atomics: 'readonly',
+		SharedArrayBuffer: 'readonly'
+	},
+	parserOptions: {
+		ecmaFeatures: {
+			jsx: true
+		},
+		ecmaVersion: 2018,
+		sourceType: 'module'
+	},
+	plugins: ['react'],
+	rules: {}
+}

.vscode/settings.json

@@ -0,0 +1,18 @@
+{
+	// other settings
+	// formatting using eslint
+	// let editor format using prettier for all other files
+	"editor.formatOnSave": true,
+	// disable editor formatting, so eslint can handle it
+	"[javascript]": {
+		"editor.formatOnSave": true
+	},
+	//"eslint.enable": true,
+	// available through eslint plugin in vscode
+	"eslint.autoFixOnSave": true,
+	"eslint.alwaysShowStatus": true,
+	"editor.tabSize": 2,
+	"editor.codeActionsOnSave": {
+		"source.fixAll.eslint": true
+	}
+}

package.json

@@ -3,31 +3,36 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@sentry/browser": "^4.3.0",
-    "@tinymce/tinymce-react": "^2.4.0",
-    "axios": "^0.18.0",
-    "bootstrap": "^4.1.3",
+    "@sentry/browser": "^4.6.6",
+    "@tinymce/tinymce-react": "^3.2.0",
+    "axios": "^0.19.0",
+    "bootstrap": "^4.3.1",
+    "classnames": "^2.2.6",
     "font-awesome": "^4.7.0",
     "joi": "^14.0.6",
     "jwt-decode": "^2.2.0",
-    "lodash": "^4.17.11",
-    "react": "^16.3.2",
-    "react-bootstrap": "^0.32.4",
-    "react-dom": "^16.3.2",
-    "react-image": "^1.5.1",
-    "react-redux": "^5.1.1",
-    "react-router-dom": "^4.3.1",
-    "react-scripts": "^2.0.4",
-    "react-table": "^6.8.6",
-    "react-toastify": "^4.4.3",
-    "reactstrap": "^6.5.0",
+    "lodash": ">4.17.13",
+    "moment": "^2.22.2",
+    "react": "^16.12.0",
+    "react-bootstrap": "^1.0.0-beta.9",
+    "react-dom": "^16.12.0",
+    "react-image": "^2.1.3",
+    "react-redux": "^7.1.0",
+    "react-router-bootstrap": "^0.25.0",
+    "react-router-dom": "^5.0.1",
+    "react-scripts": "^3.0.1",
+    "react-table": "^6.10.0",
+    "react-toastify": "^5.3.1",
+    "reactstrap": "^8.2.0",
     "redux": "^4.0.1",
+    "redux-persist": "^5.10.0",
     "redux-thunk": "^2.3.0"
   },
   "scripts": {
     "prestart": "npm run test",
     "start": "react-scripts start",
     "build": "react-scripts build",
+    "lint": "eslint src --fix",
     "test": "cross-env CI=true react-scripts test --env=jsdom",
     "test:watch": " react-scripts test --env=jsdom",
     "test:coverage": "cross-env CI=true react-scripts test --env=jsdom --coverage",
@@ -41,10 +46,19 @@
     "not op_mini all"
   ],
   "devDependencies": {
+    "babel-eslint": "^10.0.2",
     "cross-env": "^5.2.0",
-    "enzyme": "^3.7.0",
-    "enzyme-adapter-react-16": "^1.6.0",
-    "sinon": "^7.1.1",
-    "surge": "^0.20.1"
+    "enzyme": "^3.10.0",
+    "enzyme-adapter-react-16": "^1.14.0",
+    "eslint": "^6.8.0",
+    "eslint-config-airbnb": "^17.1.1",
+    "eslint-config-prettier": "^5.1.0",
+    "eslint-plugin-import": "^2.20.0",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-react": "^7.17.0",
+    "prettier": "^1.19.1",
+    "sinon": "^7.3.2",
+    "surge": "^0.21.3"
   }
 }

src/__tests__/App.test.js

@@ -1,21 +1,18 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { shallow } from 'enzyme';
 import App from '../components/App';
-import {shallow} from 'enzyme'
-import Dashboard from '../components/Dashboard'
-
-describe("App tests", () => {
+import Dashboard from '../components/Dashboard';
 
+describe('App tests', () => {
   let mountedapp;
 
-
-  beforeEach(() => {
-    mountedapp = shallow(<App/>);
-  })
 
-  it ("renders without crashing", () => {
-    shallow(<App />)
+  beforeEach(() => {
+    mountedapp = shallow(<App />);
+  });
 
-  })
-
-})
+  it('renders without crashing', () => {
+    shallow(<App />);
+  });
+});

src/__tests__/Dashboard.test.js

@@ -1,18 +1,16 @@
-import {shallow} from 'enzyme'
-import React from 'react'
-import Dashboard from '../components/Dashboard'
+import { shallow } from 'enzyme';
+import React from 'react';
+import Dashboard from '../components/Dashboard';
 
 
-describe("Dashboard tests", () => {
+describe('Dashboard tests', () => {
+  let dashBoardMountedPage;
+  beforeEach(() => {
+    dashBoardMountedPage = shallow(<Dashboard />);
+  });
 
-    let dashBoardMountedPage;
-    beforeEach(()=> {
-        dashBoardMountedPage = shallow(<Dashboard/>)
-    })
-
-    xit("should render a leaderboard", ()=> {
-        let leaderboard = dashBoardMountedPage.find("Leaderboard").length;
-        expect(leaderboard).toBe(1)
-    })
-
-})
+  xit('should render a leaderboard', () => {
+    const leaderboard = dashBoardMountedPage.find('Leaderboard').length;
+    expect(leaderboard).toBe(1);
+  });
+});

src/__tests__/Leaderboard.test.js

@@ -1,13 +1,12 @@
-import React from "react";
-import Leaderboard from "../components/Leaderboard";
-import { mount } from "enzyme";
+import React from 'react';
+import { mount } from 'enzyme';
+import Leaderboard from '../components/Leaderboard';
 
-describe("Leaderboard component structure", () => {
-	// let mountedLeaderboard;
-	// beforeEach(() => {
- //        mountedLeaderboard = mount(<Leaderboard />);
- //    })
+describe('Leaderboard component structure', () => {
+  // let mountedLeaderboard;
+  // beforeEach(() => {
+  //        mountedLeaderboard = mount(<Leaderboard />);
+  //    })
 
-    it("will be redone after redux edits", ()=>{console.log(test)})
-
-})
+  it('will be redone after redux edits', () => { console.log(test); });
+});