From 6d5a2eebb609da67239ea37d12d6b2d3bbfef76e Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
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/Profile.js | 51 ++++++++++++++-------------
 1 file changed, 26 insertions(+), 25 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/pages/Profile.js')

diff --git a/opendc-web/opendc-web-ui/src/pages/Profile.js b/opendc-web/opendc-web-ui/src/pages/Profile.js
index 0d94b519..1e817037 100644
--- a/opendc-web/opendc-web-ui/src/pages/Profile.js
+++ b/opendc-web/opendc-web-ui/src/pages/Profile.js
@@ -1,35 +1,36 @@
 import React from 'react'
 import DocumentTitle from 'react-document-title'
-import { connect } from 'react-redux'
+import { useDispatch } from 'react-redux'
 import { openDeleteProfileModal } from '../actions/modals/profile'
 import DeleteProfileModal from '../containers/modals/DeleteProfileModal'
 import AppNavbarContainer from '../containers/navigation/AppNavbarContainer'
 
-const ProfileContainer = ({ onDelete }) => (
-    <DocumentTitle title="My Profile - OpenDC">
-        <div className="full-height">
-            <AppNavbarContainer fullWidth={false} />
-            <div className="container text-page-container full-height">
-                <button className="btn btn-danger mb-2 ml-auto mr-auto" style={{ maxWidth: 300 }} onClick={onDelete}>
-                    Delete my account on OpenDC
-                </button>
-                <p className="text-muted text-center">
-                    This does not delete your Google account, but simply disconnects it from the OpenDC platform and
-                    deletes any project info that is associated with you (projects you own and any authorizations you
-                    may have on other projects).
-                </p>
-            </div>
-            <DeleteProfileModal />
-        </div>
-    </DocumentTitle>
-)
+const Profile = () => {
+    const dispatch = useDispatch()
+    const onDelete = () => dispatch(openDeleteProfileModal())
 
-const mapDispatchToProps = (dispatch) => {
-    return {
-        onDelete: () => dispatch(openDeleteProfileModal()),
-    }
+    return (
+        <DocumentTitle title="My Profile - OpenDC">
+            <div className="full-height">
+                <AppNavbarContainer fullWidth={false} />
+                <div className="container text-page-container full-height">
+                    <button
+                        className="btn btn-danger mb-2 ml-auto mr-auto"
+                        style={{ maxWidth: 300 }}
+                        onClick={onDelete}
+                    >
+                        Delete my account on OpenDC
+                    </button>
+                    <p className="text-muted text-center">
+                        This does not delete your Google account, but simply disconnects it from the OpenDC platform and
+                        deletes any project info that is associated with you (projects you own and any authorizations
+                        you may have on other projects).
+                    </p>
+                </div>
+                <DeleteProfileModal />
+            </div>
+        </DocumentTitle>
+    )
 }
 
-const Profile = connect(undefined, mapDispatchToProps)(ProfileContainer)
-
 export default Profile
-- 
cgit v1.2.3


From c2c5dfe0119546935118ce5ae1803bf87f0b787c Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
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/Profile.js | 35 ++++++++++++---------------
 1 file changed, 15 insertions(+), 20 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/pages/Profile.js')

diff --git a/opendc-web/opendc-web-ui/src/pages/Profile.js b/opendc-web/opendc-web-ui/src/pages/Profile.js
index 1e817037..ea781686 100644
--- a/opendc-web/opendc-web-ui/src/pages/Profile.js
+++ b/opendc-web/opendc-web-ui/src/pages/Profile.js
@@ -1,35 +1,30 @@
 import React from 'react'
-import DocumentTitle from 'react-document-title'
 import { useDispatch } from 'react-redux'
 import { openDeleteProfileModal } from '../actions/modals/profile'
 import DeleteProfileModal from '../containers/modals/DeleteProfileModal'
 import AppNavbarContainer from '../containers/navigation/AppNavbarContainer'
+import { useDocumentTitle } from '../util/hooks'
 
 const Profile = () => {
     const dispatch = useDispatch()
     const onDelete = () => dispatch(openDeleteProfileModal())
 
+    useDocumentTitle('My Profile - OpenDC')
     return (
-        <DocumentTitle title="My Profile - OpenDC">
-            <div className="full-height">
-                <AppNavbarContainer fullWidth={false} />
-                <div className="container text-page-container full-height">
-                    <button
-                        className="btn btn-danger mb-2 ml-auto mr-auto"
-                        style={{ maxWidth: 300 }}
-                        onClick={onDelete}
-                    >
-                        Delete my account on OpenDC
-                    </button>
-                    <p className="text-muted text-center">
-                        This does not delete your Google account, but simply disconnects it from the OpenDC platform and
-                        deletes any project info that is associated with you (projects you own and any authorizations
-                        you may have on other projects).
-                    </p>
-                </div>
-                <DeleteProfileModal />
+        <div className="full-height">
+            <AppNavbarContainer fullWidth={false} />
+            <div className="container text-page-container full-height">
+                <button className="btn btn-danger mb-2 ml-auto mr-auto" style={{ maxWidth: 300 }} onClick={onDelete}>
+                    Delete my account on OpenDC
+                </button>
+                <p className="text-muted text-center">
+                    This does not delete your Google account, but simply disconnects it from the OpenDC platform and
+                    deletes any project info that is associated with you (projects you own and any authorizations you
+                    may have on other projects).
+                </p>
             </div>
-        </DocumentTitle>
+            <DeleteProfileModal />
+        </div>
     )
 }
 
-- 
cgit v1.2.3


From 4397a959e806bf476be4c81bc804616adf58b969 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
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/Profile.js | 31 ---------------------------
 1 file changed, 31 deletions(-)
 delete mode 100644 opendc-web/opendc-web-ui/src/pages/Profile.js

(limited to 'opendc-web/opendc-web-ui/src/pages/Profile.js')

diff --git a/opendc-web/opendc-web-ui/src/pages/Profile.js b/opendc-web/opendc-web-ui/src/pages/Profile.js
deleted file mode 100644
index ea781686..00000000
--- a/opendc-web/opendc-web-ui/src/pages/Profile.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react'
-import { useDispatch } from 'react-redux'
-import { openDeleteProfileModal } from '../actions/modals/profile'
-import DeleteProfileModal from '../containers/modals/DeleteProfileModal'
-import AppNavbarContainer from '../containers/navigation/AppNavbarContainer'
-import { useDocumentTitle } from '../util/hooks'
-
-const Profile = () => {
-    const dispatch = useDispatch()
-    const onDelete = () => dispatch(openDeleteProfileModal())
-
-    useDocumentTitle('My Profile - OpenDC')
-    return (
-        <div className="full-height">
-            <AppNavbarContainer fullWidth={false} />
-            <div className="container text-page-container full-height">
-                <button className="btn btn-danger mb-2 ml-auto mr-auto" style={{ maxWidth: 300 }} onClick={onDelete}>
-                    Delete my account on OpenDC
-                </button>
-                <p className="text-muted text-center">
-                    This does not delete your Google account, but simply disconnects it from the OpenDC platform and
-                    deletes any project info that is associated with you (projects you own and any authorizations you
-                    may have on other projects).
-                </p>
-            </div>
-            <DeleteProfileModal />
-        </div>
-    )
-}
-
-export default Profile
-- 
cgit v1.2.3