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.
---
 .../src/containers/modals/DeleteProfileModal.js    | 42 +++++++++-------------
 1 file changed, 17 insertions(+), 25 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/containers/modals/DeleteProfileModal.js')

diff --git a/opendc-web/opendc-web-ui/src/containers/modals/DeleteProfileModal.js b/opendc-web/opendc-web-ui/src/containers/modals/DeleteProfileModal.js
index e7c4014d..93a38642 100644
--- a/opendc-web/opendc-web-ui/src/containers/modals/DeleteProfileModal.js
+++ b/opendc-web/opendc-web-ui/src/containers/modals/DeleteProfileModal.js
@@ -1,35 +1,27 @@
 import React from 'react'
-import { connect } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import { closeDeleteProfileModal } from '../../actions/modals/profile'
 import { deleteCurrentUser } from '../../actions/users'
 import ConfirmationModal from '../../components/modals/ConfirmationModal'
 
-const DeleteProfileModalComponent = ({ visible, callback }) => (
-    <ConfirmationModal
-        title="Delete my account"
-        message="Are you sure you want to delete your OpenDC account?"
-        show={visible}
-        callback={callback}
-    />
-)
+const DeleteProfileModal = () => {
+    const visible = useSelector((state) => state.modals.deleteProfileModalVisible)
 
-const mapStateToProps = (state) => {
-    return {
-        visible: state.modals.deleteProfileModalVisible,
+    const dispatch = useDispatch()
+    const callback = (isConfirmed) => {
+        if (isConfirmed) {
+            dispatch(deleteCurrentUser())
+        }
+        dispatch(closeDeleteProfileModal())
     }
+    return (
+        <ConfirmationModal
+            title="Delete my account"
+            message="Are you sure you want to delete your OpenDC account?"
+            show={visible}
+            callback={callback}
+        />
+    )
 }
 
-const mapDispatchToProps = (dispatch) => {
-    return {
-        callback: (isConfirmed) => {
-            if (isConfirmed) {
-                dispatch(deleteCurrentUser())
-            }
-            dispatch(closeDeleteProfileModal())
-        },
-    }
-}
-
-const DeleteProfileModal = connect(mapStateToProps, mapDispatchToProps)(DeleteProfileModalComponent)
-
 export default DeleteProfileModal
-- 
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.
---
 .../src/containers/modals/DeleteProfileModal.js    | 27 ----------------------
 1 file changed, 27 deletions(-)
 delete mode 100644 opendc-web/opendc-web-ui/src/containers/modals/DeleteProfileModal.js

(limited to 'opendc-web/opendc-web-ui/src/containers/modals/DeleteProfileModal.js')

diff --git a/opendc-web/opendc-web-ui/src/containers/modals/DeleteProfileModal.js b/opendc-web/opendc-web-ui/src/containers/modals/DeleteProfileModal.js
deleted file mode 100644
index 93a38642..00000000
--- a/opendc-web/opendc-web-ui/src/containers/modals/DeleteProfileModal.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { closeDeleteProfileModal } from '../../actions/modals/profile'
-import { deleteCurrentUser } from '../../actions/users'
-import ConfirmationModal from '../../components/modals/ConfirmationModal'
-
-const DeleteProfileModal = () => {
-    const visible = useSelector((state) => state.modals.deleteProfileModalVisible)
-
-    const dispatch = useDispatch()
-    const callback = (isConfirmed) => {
-        if (isConfirmed) {
-            dispatch(deleteCurrentUser())
-        }
-        dispatch(closeDeleteProfileModal())
-    }
-    return (
-        <ConfirmationModal
-            title="Delete my account"
-            message="Are you sure you want to delete your OpenDC account?"
-            show={visible}
-            callback={callback}
-        />
-    )
-}
-
-export default DeleteProfileModal
-- 
cgit v1.2.3