From 6d5a2eebb609da67239ea37d12d6b2d3bbfef76e Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Wed, 28 Oct 2020 16:41:53 +0100 Subject: ui: Do not clutter component tree with Redux connects This change refactors the frontend to use hooks for obtaining state within the Redux store as opposed to using Higher-Order Components (HOCs). This eliminates a lot of clutter in the components. --- opendc-web/opendc-web-ui/src/pages/Projects.js | 48 ++++++++++---------------- 1 file changed, 18 insertions(+), 30 deletions(-) (limited to 'opendc-web/opendc-web-ui/src/pages/Projects.js') diff --git a/opendc-web/opendc-web-ui/src/pages/Projects.js b/opendc-web/opendc-web-ui/src/pages/Projects.js index bb54aaa5..f759073f 100644 --- a/opendc-web/opendc-web-ui/src/pages/Projects.js +++ b/opendc-web/opendc-web-ui/src/pages/Projects.js @@ -1,7 +1,6 @@ -import React from 'react' +import React, { useEffect } from 'react' import DocumentTitle from 'react-document-title' -import { connect } from 'react-redux' -import { openNewProjectModal } from '../actions/modals/projects' +import { useDispatch } from 'react-redux' import { fetchAuthorizationsOfCurrentUser } from '../actions/users' import ProjectFilterPanel from '../components/projects/FilterPanel' import NewProjectModal from '../containers/modals/NewProjectModal' @@ -9,35 +8,24 @@ import NewProjectButtonContainer from '../containers/projects/NewProjectButtonCo import VisibleProjectList from '../containers/projects/VisibleProjectAuthList' import AppNavbarContainer from '../containers/navigation/AppNavbarContainer' -class ProjectsContainer extends React.Component { - componentDidMount() { - this.props.fetchAuthorizationsOfCurrentUser() - } +function Projects() { + const dispatch = useDispatch() - render() { - return ( - -
- -
- - - -
- -
- - ) - } -} + useEffect(() => dispatch(fetchAuthorizationsOfCurrentUser())) -const mapDispatchToProps = (dispatch) => { - return { - fetchAuthorizationsOfCurrentUser: () => dispatch(fetchAuthorizationsOfCurrentUser()), - openNewProjectModal: () => dispatch(openNewProjectModal()), - } + return ( + +
+ +
+ + + +
+ +
+ + ) } -const Projects = connect(undefined, mapDispatchToProps)(ProjectsContainer) - export default Projects -- cgit v1.2.3 From c2c5dfe0119546935118ce5ae1803bf87f0b787c Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Mon, 10 May 2021 17:31:43 +0200 Subject: ui: Update React dependencies This change updates the React dependencies to version 17, in order to keep up to date with React. --- opendc-web/opendc-web-ui/src/pages/Projects.js | 21 ++++++++++----------- 1 file changed, 10 insertions(+), 11 deletions(-) (limited to 'opendc-web/opendc-web-ui/src/pages/Projects.js') diff --git a/opendc-web/opendc-web-ui/src/pages/Projects.js b/opendc-web/opendc-web-ui/src/pages/Projects.js index f759073f..5e642a03 100644 --- a/opendc-web/opendc-web-ui/src/pages/Projects.js +++ b/opendc-web/opendc-web-ui/src/pages/Projects.js @@ -1,5 +1,4 @@ import React, { useEffect } from 'react' -import DocumentTitle from 'react-document-title' import { useDispatch } from 'react-redux' import { fetchAuthorizationsOfCurrentUser } from '../actions/users' import ProjectFilterPanel from '../components/projects/FilterPanel' @@ -7,24 +6,24 @@ 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' function Projects() { const dispatch = useDispatch() useEffect(() => dispatch(fetchAuthorizationsOfCurrentUser())) + useDocumentTitle('My Projects - OpenDC') return ( - -
- -
- - - -
- +
+ +
+ + +
- + +
) } -- cgit v1.2.3 From 4397a959e806bf476be4c81bc804616adf58b969 Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Wed, 12 May 2021 22:42:12 +0200 Subject: ui: Migrate from CRA to Next.js This change updates the web frontend to use Next.js instead of Create React App (CRA). Next.js enables the possibility of rendering pages on the server side (which reduces the time to first frame) and overall provides a better development experience. Future commits will try to futher optimize the implementation for Next.js. --- opendc-web/opendc-web-ui/src/pages/Projects.js | 30 -------------------------- 1 file changed, 30 deletions(-) delete mode 100644 opendc-web/opendc-web-ui/src/pages/Projects.js (limited to 'opendc-web/opendc-web-ui/src/pages/Projects.js') diff --git a/opendc-web/opendc-web-ui/src/pages/Projects.js b/opendc-web/opendc-web-ui/src/pages/Projects.js deleted file mode 100644 index 5e642a03..00000000 --- a/opendc-web/opendc-web-ui/src/pages/Projects.js +++ /dev/null @@ -1,30 +0,0 @@ -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' - -function Projects() { - const dispatch = useDispatch() - - useEffect(() => dispatch(fetchAuthorizationsOfCurrentUser())) - useDocumentTitle('My Projects - OpenDC') - - return ( -
- -
- - - -
- -
- ) -} - -export default Projects -- cgit v1.2.3