upgrade dependencies' version / add prettier and stylelint

.gitignore

@@ -57,3 +57,4 @@ typings/
 # dotenv environment variables file
 .env
 
+/.idea

app/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

app/package.json

@@ -1,39 +1,64 @@
 {
   "name": "bdb-dashboard",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": true,
   "dependencies": {
     "bigchaindb-driver": "4.1.0",
-    "react": "16.4.2",
-    "react-dom": "16.4.2",
-    "react-redux": "5.0.7",
-    "redux": "4.0.0",
-    "redux-devtools-extension": "2.13.5",
-    "redux-thunk": "2.3.0",
-    "semantic-ui-css": "2.3.3",
-    "semantic-ui-react": "0.82.1"
-  },
-  "devDependencies": {
-    "babel-preset-env": "1.7.0",
-    "react-scripts": "2.0.0-next.3e165448",
-    "redux-devtools": "3.4.1"
+    "node-gyp": "^6.0.0",
+    "react": "^16.11.0",
+    "react-dom": "^16.11.0",
+    "react-redux": "^5.0.7",
+    "react-scripts": "3.2.0",
+    "redux": "^4.0.0",
+    "redux-devtools-extension": "^2.13.5",
+    "redux-thunk": "^2.3.0",
+    "semantic-ui-css": "^2.3.3",
+    "semantic-ui-react": "^0.82.1"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "prettier": "prettier --find-config-path --write \"src/**/*.js\"",
+    "stylelint": "stylelint \"src/**/*.css\" --syntax css --fix"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
   },
   "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
     "development": [
       "last 2 chrome versions",
       "last 2 firefox versions",
-      "last 2 edge versions"
+      "last 2 safari versions"
+    ]
+  },
+  "devDependencies": {
+    "husky": "^3.0.5",
+    "lint-staged": "^9.2.5",
+    "prettier": "1.18.2",
+    "pretty-quick": "^1.11.1",
+    "stylelint": "^11.0.0",
+    "stylelint-order": "^3.1.0"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.js": [
+      "prettier --write",
+      "git add"
     ],
-    "production": [
-      ">0.25%",
-      "not op_mini all",
-      "ie 11"
+    "*.css": [
+      "stylelint --syntax=css --fix",
+      "git add"
     ]
   }
 }

app/prettier.config.js

@@ -0,0 +1,12 @@
+'use strict';
+
+module.exports = {
+  tabWidth: 2,
+  printWidth: 100,
+  singleQuote: true,
+  parser: 'flow',
+  bracketSpacing: true,
+  jsxBracketSameLine: true,
+  arrowParens: 'avoid',
+  trailingComma: 'es5',
+};

app/src/App.js

@@ -1,20 +1,19 @@
 import React, { Component } from 'react';
-import { Container } from 'semantic-ui-react'
-import AppHeader from './components/header/AppHeader'
-import Timeline from './containers/Timeline'
-import AppFooter from './components/footer/AppFooter'
+import { Container } from 'semantic-ui-react';
+import AppHeader from './components/header/AppHeader';
+import Timeline from './containers/Timeline';
+import AppFooter from './components/footer/AppFooter';
 import './App.css';
 
 class App extends Component {
-
   render() {
     return (
-      <Container fluid={true} className="App" >
-      <AppHeader/>
-      <Container fluid={true}>
-      <Timeline/>
-      </Container>
-      <AppFooter/>
+      <Container fluid={true} className="App">
+        <AppHeader />
+        <Container fluid={true}>
+          <Timeline />
+        </Container>
+        <AppFooter />
       </Container>
     );
   }

app/src/actions/ActionTypes.js

@@ -1,4 +1,4 @@
 export const MESSAGE_RECEIVED = 'VALID_TX_RECEIVED';
 export const SET_MODAL = 'SET_MODAL';
 export const UPDATE_STATS = 'UPDATE_STATS';
-export const CHECK_BLOCKS = 'CHECK_BLOCKS'
+export const CHECK_BLOCKS = 'CHECK_BLOCKS';

app/src/actions/actions.js

@@ -1,26 +1,26 @@
-import * as types from './ActionTypes'
+import * as types from './ActionTypes';
 
 export const validTransaction = (txId, blockId, raw) => ({
-    type: types.MESSAGE_RECEIVED,
-    txId,
-    blockId,
-    raw
+  type: types.MESSAGE_RECEIVED,
+  txId,
+  blockId,
+  raw,
 });
 
 export const setModal = (title, content, open) => ({
-    type: types.SET_MODAL,
-    title,
-    content,
-    open
-})
+  type: types.SET_MODAL,
+  title,
+  content,
+  open,
+});
 
 export const updateStats = (connected, blockHeight) => ({
-    type: types.UPDATE_STATS,
-    connected,
-    blockHeight
-})
+  type: types.UPDATE_STATS,
+  connected,
+  blockHeight,
+});
 
-export const checkBlocks = (blockId) => ({
-    type: types.CHECK_BLOCKS,
-    blockId
-})
+export const checkBlocks = blockId => ({
+  type: types.CHECK_BLOCKS,
+  blockId,
+});

app/src/components/block/Block.css

@@ -1,75 +1,75 @@
-.bgreen{
-    border:1px solid #00C8A8;
-    border-radius: 8px;
-    resize: both;
-    position: relative;
-    padding: 6px;
+.bgreen {
+  position: relative;
+  padding: 6px;
+  border: 1px solid #00C8A8;
+  border-radius: 8px;
+  resize: both;
 }
 
 .ui.grid {
-    margin-top: 0rem !important;
-    margin-bottom: 25rem !important;
-    margin-left: 0rem !important;
-    margin-right: -1rem !important;
+  margin: 0 -1rem 25rem 0 !important;
 }
 
-.blockTitle{
-    max-width: 290px;
-    text-align: center;
-    cursor: pointer;
-    margin-bottom: 10px;
+.blockTitle {
+  margin-bottom: 10px;
+  max-width: 290px;
+  text-align: center;
+  cursor: pointer;
 }
+
 .blockTitle #title {
-    color: #00C8A8;
+  color: #00C8A8;
 }
+
 .blockTitle .blockNo {
-    color: #fff;
+  color: #ffffff;
+}
+
+.box {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  margin: 10px;
 }
 
-.box{
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    margin: 10px;
+.box > .ui .card {
+  flex: 1 1 289px;
+  margin: 10px;
 }
-.box> .ui .card {
-    flex: 1 1 289px;
-    margin: 10px;
-  }
 
 .parent {
-    display: flex;
-    flex-direction: column;
+  display: flex;
+  flex-direction: column;
 }
 
 .ui.centered.card {
-    margin: 10px !important;
+  margin: 10px !important;
 }
 
 .dot {
-    height: 15px;
-    width: 15px;
-    background-color: rgba(187, 187, 187, 0.6);
-    border-radius: 50%;
-    display: inline-block;
-    position: absolute;
-    margin-top: 20px;
-  }
+  position: absolute;
+  display: inline-block;
+  margin-top: 20px;
+  width: 15px;
+  height: 15px;
+  background-color: rgba(187, 187, 187, 0.6);
+  border-radius: 50%;
+}
 
-  .front{
-    position: absolute;
-    left: -8px;
-  }
+.front {
+  position: absolute;
+  left: -8px;
+}
 
-  .back {
-    position: absolute;
-    right: -8px;
-  }
+.back {
+  position: absolute;
+  right: -8px;
+}
 
-  .line{
-    width: 34px;
-    height: 8px;
-    border-bottom: 2px solid rgba(187, 187, 187, 0.6);
-    position: absolute;
-    margin-left: 15px;
-    }
+.line {
+  position: absolute;
+  margin-left: 15px;
+  width: 34px;
+  height: 8px;
+  border-bottom: 2px solid rgba(187, 187, 187, 0.6);
+}