modernize dependencies

UI/.env

@@ -1,4 +0,0 @@
-REACT_APP_DECORATORS=true
-REACT_APP_BABEL_STAGE_0=true
-REACT_APP_SASS=true
-REACT_APP_SASS_MODULES=true

UI/.eslintrc.js

@@ -1,8 +0,0 @@
-module.exports = {
-    "extends": ["standard", "plugin:react/recommended"],
-    "plugins": [ "react", "node", "promise", "import" ],
-    "parser": "babel-eslint",
-    "parserOptions": {
-        "jsx": true
-    }
-};

UI/.gitignore

@@ -1,7 +1,9 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
 /node_modules
+/.pnp
+.pnp.js
 
 # testing
 /coverage

UI/config-overrides.js

@@ -0,0 +1,4 @@
+const { override, addDecoratorsLegacy } = require('customize-cra')
+module.exports = override(
+  addDecoratorsLegacy()
+)

UI/package.json

@@ -1,56 +1,60 @@
 {
-  "name": "roleypoly",
+  "name": "crav2",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "color": "^2.0.1",
-    "custom-react-scripts": "0.2.1",
+    "color": "^3.1.0",
     "history": "^4.7.2",
     "immutable": "^3.8.2",
-    "moment": "^2.20.1",
-    "prop-types": "^15.6.0",
-    "react": "^16.2.0",
+    "moment": "^2.22.2",
+    "prop-types": "^15.6.2",
+    "react": "^16.6.0",
     "react-custom-scrollbars": "^4.2.1",
     "react-dnd": "^2.5.4",
     "react-dnd-html5-backend": "^2.5.4",
-    "react-dom": "^16.2.0",
+    "react-dom": "^16.6.0",
     "react-immutable-proptypes": "^2.1.0",
-    "react-redux": "^5.0.6",
-    "react-router": "^4.2.0",
-    "react-router-dom": "^4.2.2",
+    "react-redux": "^5.1.0",
+    "react-router": "^4.3.1",
+    "react-router-dom": "^4.3.1",
     "react-router-redux": "^5.0.0-alpha.8",
+    "react-scripts": "2.1.1",
     "react-typist": "^2.0.4",
     "react-typist-cycle": "^0.1.2",
-    "redux": "^3.7.2",
+    "redux": "^4.0.1",
     "redux-logger": "^3.0.6",
-    "redux-thunk": "^2.2.0",
-    "superagent": "^3.8.2",
-    "uuid": "^3.1.0"
+    "redux-thunk": "^2.3.0",
+    "superagent": "^4.0.0-beta.5",
+    "uuid": "^3.3.2"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
+    "start": "react-app-rewired start",
+    "build": "react-app-rewired build",
+    "test": "react-app-rewired test",
+    "eject": "react-app-rewired eject"
   },
-  "homepage": "https://rp.kat.cafe",
-  "proxy": {
-    "/api": {
-      "target": "http://localhost:6769"
-    },
-    "/api/socket.io": {
-      "target": "ws://localhost:6769/socket.io",
-      "ws": true
-    }
+  "eslintConfig": {
+    "extends": "react-app"
   },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ],
+  "proxy": "http://localhost:6769",
   "devDependencies": {
-    "eslint": "^4.14.0",
-    "eslint-config-standard": "^11.0.0-beta.0",
-    "eslint-plugin-import": "^2.8.0",
-    "eslint-plugin-node": "^5.2.1",
-    "eslint-plugin-promise": "^3.6.0",
-    "eslint-plugin-react": "^7.5.1",
-    "eslint-plugin-standard": "^3.0.1",
+    "@babel/plugin-proposal-decorators": "^7.1.2",
+    "customize-cra": "^0.2.1",
+    "eslint-config-standard": "^12.0.0",
+    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-node": "^8.0.0",
+    "eslint-plugin-promise": "^4.0.1",
+    "eslint-plugin-react": "^7.11.1",
+    "eslint-plugin-standard": "^4.0.0",
+    "node-sass-chokidar": "^1.3.4",
+    "react-app-rewire-scss": "^1.0.2",
+    "react-app-rewired": "^1.6.2",
     "redux-devtools": "^3.4.1",
     "redux-devtools-dock-monitor": "^1.1.3",
     "redux-devtools-log-monitor": "^1.4.0"

UI/public/manifest.json

@@ -1,15 +1,15 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "roleypoly",
+  "name": "roleypoly",
   "icons": [
     {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
+      "src": "favicon.png",
+      "sizes": "128x128 64x64 32x32 24x24 16x16",
+      "type": "image/png"
     }
   ],
   "start_url": "./index.html",
   "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
+  "theme_color": "#ab9b9a",
+  "background_color": "#453e3d"
 }

UI/src/components/oauth-callback/index.js

@@ -12,6 +12,12 @@ class OauthCallback extends Component {
     redirect: '/s'
   }
 
+  stopped = false
+
+  componentDidUnmount () {
+    this.stopped = true
+  }
+
   async componentDidMount () {
     // handle stuff in the url
     const sp = new URLSearchParams(this.props.location.search)
@@ -25,14 +31,15 @@ class OauthCallback extends Component {
     const stateToken = sp.get('state')
     const state = JSON.parse(window.sessionStorage.getItem('state') || 'null')
 
-    if (state !== null && state.state === stateToken && state.redirect != undefined) {
+    if (state !== null && state.state === stateToken && state.redirect != null) {
       this.setState({ redirect: state.redirect })
     }
 
     this.props.history.replace(this.props.location.pathname)
     
-    let counter = 0    
+    let counter = 0
     const retry = async () => {
+      if (this.stopped) return
       try {
         const rsp = await superagent.get('/api/auth/user')
         this.props.dispatch({
@@ -43,7 +50,7 @@ class OauthCallback extends Component {
         this.setState({ notReady: false })
       } catch (e) {
         counter++
-        if (counter > 100) {
+        if (counter > 10) {
           this.setState({ message: "i couldn't log you in. :c" })
         } else {
           setTimeout(() => { retry() }, 250) 

UI/src/components/role/draggable.js

@@ -3,16 +3,29 @@ import { DragSource } from 'react-dnd'
 
 import Role from './index'
 
-@DragSource(Symbol.for('dnd: role'), {
-  beginDrag ({ role, categoryId }) {
-    return { role, category: categoryId }
-  }
-},
-(connect, monitor) => ({
-  connectDragSource: connect.dragSource(),
-  isDragging: monitor.isDragging()
-}))
-export default class DraggableRole extends Component {
+// @DragSource(Symbol.for('dnd: role'), {
+//   beginDrag ({ role, categoryId }) {
+//     return { role, category: categoryId }
+//   }
+// },
+// (connect, monitor) => ({
+//   connectDragSource: connect.dragSource(),
+//   isDragging: monitor.isDragging()
+// }))
+export default 
+  @DragSource(
+    Symbol.for('dnd: role'), 
+    {
+      beginDrag ({ role, categoryId }) {
+        return { role, category: categoryId }
+      }
+    },
+    (connect, monitor) => ({
+      connectDragSource: connect.dragSource(),
+      isDragging: monitor.isDragging()
+    })
+  ) 
+class DraggableRole extends Component {
   render () {
     return <Role {...this.props} type='drag' />
   }

UI/src/router/index.js

@@ -12,9 +12,10 @@ import ServerLanding from '../components/servers/ServerLanding'
 
 const aaa = (props) => (<div>{ JSON.stringify(props) }</div>)
 
-@withRouter
-@connect(({ appState, user }) => ({ ready: appState.ready, user }))
-export default class AppRouter extends Component {
+export default 
+  @withRouter 
+  @connect(({ appState, user }) => ({ ready: appState.ready, user })) 
+class AppRouter extends Component {
   render () {
     const isLoggedIn = this.props.user.get('isLoggedIn')
 

UI/src/store/configureStore.dev.js

@@ -13,7 +13,7 @@ const configureStore = (preloadedState, history) => {
     preloadedState,
     compose(
       applyMiddleware(thunk, routerMiddleware(history), createLogger()),
-      DevTools.instrument()
+      // DevTools.instrument()
     )
   )