ui: Update frontend dependencies

This pull request updates the React dependencies used in the OpenDC frontend.

* Actualize React, react-konva and react-scripts
* Actualize Bootstrap and Reactstrap
* Migrate to Redux hooks to reduce clutter

1 files changed, 18 insertions, 31 deletions

diff --git a/opendc-web/opendc-web-ui/src/pages/Projects.js b/opendc-web/opendc-web-ui/src/pages/Projects.js
index bb54aaa5..5e642a03 100644
--- a/opendc-web/opendc-web-ui/src/pages/Projects.js
+++ b/opendc-web/opendc-web-ui/src/pages/Projects.js
@@ -1,43 +1,30 @@
-import React from 'react'
-import DocumentTitle from 'react-document-title'
-import { connect } from 'react-redux'
-import { openNewProjectModal } from '../actions/modals/projects'
+import React, { useEffect } from 'react'
+import { useDispatch } from 'react-redux'
 import { fetchAuthorizationsOfCurrentUser } from '../actions/users'
 import ProjectFilterPanel from '../components/projects/FilterPanel'
 import NewProjectModal from '../containers/modals/NewProjectModal'
 import NewProjectButtonContainer from '../containers/projects/NewProjectButtonContainer'
 import VisibleProjectList from '../containers/projects/VisibleProjectAuthList'
 import AppNavbarContainer from '../containers/navigation/AppNavbarContainer'
+import { useDocumentTitle } from '../util/hooks'
 
-class ProjectsContainer extends React.Component {
-    componentDidMount() {
-        this.props.fetchAuthorizationsOfCurrentUser()
-    }
+function Projects() {
+    const dispatch = useDispatch()
 
-    render() {
-        return (
-            <DocumentTitle title="My Projects - OpenDC">
-                <div className="full-height">
-                    <AppNavbarContainer fullWidth={false} />
-                    <div className="container text-page-container full-height">
-                        <ProjectFilterPanel />
-                        <VisibleProjectList />
-                        <NewProjectButtonContainer />
-                    </div>
-                    <NewProjectModal />
-                </div>
-            </DocumentTitle>
-        )
-    }
-}
+    useEffect(() => dispatch(fetchAuthorizationsOfCurrentUser()))
+    useDocumentTitle('My Projects - OpenDC')
 
-const mapDispatchToProps = (dispatch) => {
-    return {
-        fetchAuthorizationsOfCurrentUser: () => dispatch(fetchAuthorizationsOfCurrentUser()),
-        openNewProjectModal: () => dispatch(openNewProjectModal()),
-    }
+    return (
+        <div className="full-height">
+            <AppNavbarContainer fullWidth={false} />
+            <div className="container text-page-container full-height">
+                <ProjectFilterPanel />
+                <VisibleProjectList />
+                <NewProjectButtonContainer />
+            </div>
+            <NewProjectModal />
+        </div>
+    )
 }
 
-const Projects = connect(undefined, mapDispatchToProps)(ProjectsContainer)
-
 export default Projects