chore: modernize deps

UI/package.json

@@ -3,35 +3,35 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "color": "^3.1.0",
-    "history": "^4.7.2",
+    "color": "^3.1.2",
+    "history": "^4.10.1",
     "immutable": "^3.8.2",
-    "moment": "^2.22.2",
-    "prop-types": "^15.6.2",
-    "react": "^16.6.3",
+    "moment": "^2.24.0",
+    "prop-types": "^15.7.2",
+    "react": "^16.12.0",
     "react-custom-scrollbars": "^4.2.1",
     "react-dnd": "^7.0.0",
     "react-dnd-html5-backend": "^7.0.0",
-    "react-dom": "^16.6.3",
+    "react-dom": "^16.12.0",
     "react-immutable-proptypes": "^2.1.0",
-    "react-redux": "^5.1.1",
+    "react-redux": "^7.1.3",
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
     "react-router-redux": "^5.0.0-alpha.8",
-    "react-scripts": "2.1.8",
-    "react-typist": "^2.0.4",
+    "react-scripts": "3.2.0",
+    "react-typist": "^2.0.5",
     "react-typist-cycle": "^0.1.2",
-    "redux": "^4.0.1",
+    "redux": "^4.0.4",
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.3.0",
-    "superagent": "^5.0.2",
-    "uuid": "^3.3.2"
+    "superagent": "^5.1.0",
+    "uuid": "^3.3.3"
   },
   "scripts": {
-    "start": "react-app-rewired start",
-    "build": "react-app-rewired build",
-    "test": "react-app-rewired test",
-    "eject": "react-app-rewired eject",
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
     "lint:prettier": "prettier -c '**/*.{ts,tsx,css,yml,yaml,md,json,js,jsx}'"
   },
   "eslintConfig": {
@@ -45,20 +45,14 @@
   ],
   "proxy": "http://localhost:6769",
   "devDependencies": {
-    "@babel/plugin-proposal-decorators": "^7.4.0",
-    "customize-cra": "^0.2.12",
-    "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",
-    "prettier": "^1.19.1",
-    "react-app-rewire-scss": "^1.0.2",
-    "react-app-rewired": "^2.1.1",
-    "redux-devtools": "^3.4.1",
-    "redux-devtools-dock-monitor": "^1.1.3",
-    "redux-devtools-log-monitor": "^1.4.0"
+    "@babel/plugin-proposal-decorators": "^7.7.0",
+    "eslint-config-standard": "^14.1.0",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-node": "^10.0.0",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-react": "^7.16.0",
+    "eslint-plugin-standard": "^4.0.1",
+    "node-sass-chokidar": "^1.4.0",
+    "prettier": "^1.19.1"
   }
 }

UI/src/App.js

@@ -17,8 +17,7 @@ const store = configureStore(undefined, history)
 
 window.__APP_STORE__ = store
 
-@DragDropContext(HTML5Backend)
-class App extends Component {
+class _App extends Component {
   componentWillMount() {
     store.dispatch(userInit)
   }
@@ -36,4 +35,4 @@ class App extends Component {
   }
 }
 
-export default App
+export default DragDropContext(HTML5Backend)(_App)

UI/src/components/oauth-bot-flow/index.js

@@ -2,7 +2,6 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import superagent from 'superagent'
 
-@connect()
 class OauthCallback extends Component {
   state = {
     notReady: true,
@@ -29,4 +28,4 @@ class OauthCallback extends Component {
   }
 }
 
-export default OauthCallback
+export default connect(OauthCallback)

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

@@ -4,7 +4,6 @@ import superagent from 'superagent'
 import { connect } from 'react-redux'
 import { fetchServers } from '../../actions'
 
-@connect()
 class OauthCallback extends Component {
   state = {
     notReady: true,
@@ -84,4 +83,4 @@ class OauthCallback extends Component {
   }
 }
 
-export default OauthCallback
+export default connect(OauthCallback)

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

@@ -5,7 +5,6 @@ import { connect } from 'react-redux'
 import uuidv4 from 'uuid/v4'
 import { fetchServers } from '../../actions'
 
-@connect()
 class OauthCallback extends Component {
   state = {
     notReady: true,
@@ -83,4 +82,4 @@ class OauthCallback extends Component {
   }
 }
 
-export default OauthCallback
+export default connect(OauthCallback)

UI/src/components/role-editor/Category.js

@@ -1,29 +1,9 @@
 import React, { Component } from 'react'
 import { DropTarget } from 'react-dnd'
-
 import Role from '../role/draggable'
 import CategoryEditor from './CategoryEditor'
 
-@DropTarget(
-  Symbol.for('dnd: role'),
-  {
-    drop(props, monitor, element) {
-      props.onDrop(monitor.getItem())
-    },
-    canDrop(props, monitor) {
-      return (
-        props.mode !== Symbol.for('edit') && monitor.getItem().category !== props.name
-      )
-    },
-  },
-  (connect, monitor) => ({
-    connectDropTarget: connect.dropTarget(),
-    isOver: monitor.isOver(),
-    isOverCurrent: monitor.isOver({ shallow: true }),
-    canDrop: monitor.canDrop(),
-    itemType: monitor.getItemType(),
-  })
-)
+
 class Category extends Component {
   render() {
     const {
@@ -66,4 +46,26 @@ class Category extends Component {
     )
   }
 }
-export default Category
+
+const dropTarget = DropTarget(
+  Symbol.for('dnd: role'),
+  {
+    drop(props, monitor, element) {
+      props.onDrop(monitor.getItem())
+    },
+    canDrop(props, monitor) {
+      return (
+        props.mode !== Symbol.for('edit') && monitor.getItem().category !== props.name
+      )
+    },
+  },
+  (connect, monitor) => ({
+    connectDropTarget: connect.dropTarget(),
+    isOver: monitor.isOver(),
+    isOverCurrent: monitor.isOver({ shallow: true }),
+    canDrop: monitor.canDrop(),
+    itemType: monitor.getItemType(),
+  })
+)
+
+export default dropTarget(Category)

UI/src/components/role-editor/index.js

@@ -16,8 +16,7 @@ const mapState = ({ rolePicker, roleEditor, servers }, ownProps) => ({
   server: servers.get(ownProps.match.params.server),
 })
 
-@connect(mapState)
-@DropTarget(
+const dropTarget = DropTarget(
   Symbol.for('dnd: role'),
   {
     drop(props, monitor, element) {
@@ -232,4 +231,4 @@ class RoleEditor extends Component {
   }
 }
 
-export default RoleEditor
+export default dropTarget(connect(mapState)(RoleEditor))

UI/src/components/role-picker/index.js

@@ -14,7 +14,6 @@ const mapState = ({ rolePicker, servers }, ownProps) => {
   }
 }
 
-@connect(mapState)
 class RolePicker extends Component {
   componentWillMount() {
     const {
@@ -207,4 +206,4 @@ class RolePicker extends Component {
   }
 }
 
-export default RolePicker
+export default connect(mapState)(RolePicker)

UI/src/components/role/draggable.js

@@ -1,19 +1,8 @@
 import React, { Component } from 'react'
 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
-@DragSource(
+const dragSource = DragSource(
   Symbol.for('dnd: role'),
   {
     beginDrag({ role, categoryId }) {
@@ -25,8 +14,11 @@ export default
     isDragging: monitor.isDragging(),
   })
 )
+
 class DraggableRole extends Component {
   render() {
     return <Role {...this.props} type="drag" />
   }
 }
+
+export default dragSource(DraggableRole)

UI/src/components/servers/UserCard.js

@@ -1,11 +1,10 @@
 import React, { Component } from 'react'
 import ImmutablePropTypes from 'react-immutable-proptypes'
-import { NavLink } from 'react-router-dom'
 import { connect } from 'react-redux'
+import { NavLink } from 'react-router-dom'
 import * as Actions from '../../actions'
 import './UserCard.sass'
 
-@connect()
 class UserCard extends Component {
   static propTypes = {
     user: ImmutablePropTypes.map,
@@ -67,4 +66,4 @@ class UserCard extends Component {
   }
 }
 
-export default UserCard
+export default connect()(UserCard)

UI/src/components/servers/index.js

@@ -20,7 +20,6 @@ const mapState = ({ servers, user, appState }) => {
   }
 }
 
-@connect(mapState)
 class Servers extends Component {
   get defaultPath() {
     console.log(this.props.servers.toJS())
@@ -65,4 +64,4 @@ class Servers extends Component {
   }
 }
 
-export default Servers
+export default connect(mapState)(Servers)

UI/src/router/index.js

@@ -9,10 +9,7 @@ import Servers from '../components/servers'
 import ServerLanding from '../components/servers/ServerLanding'
 import Pages, { Error404, Landing } from '../pages'
 
-export default
-@withRouter
-@connect(({ appState, user }) => ({ ready: appState.ready, user }))
-class AppRouter extends Component {
+class _AppRouter extends Component {
   render() {
     const isLoggedIn = this.props.user.get('isLoggedIn')
 
@@ -52,3 +49,5 @@ class AppRouter extends Component {
     )
   }
 }
+
+export default withRouter(connect(({ appState, user }) => ({ ready: appState.ready, user }))(_AppRouter))

start.sh

@@ -3,12 +3,12 @@
 docker-compose up -d 
 
 pushd Server
-yarn
+npm ci
 yarn dev
 
 popd
 
 pushd UI
-yarn
+npm ci
 yarn start
 popd