From 1edbae1a0224e30bafb98638f419e1f967a9286f Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Thu, 13 May 2021 17:42:53 +0200
Subject: ui: Move modal state outside of Redux

This change updates the frontend so that the modal state is not stored
inside Redux but instead is stored using the useState hook. This
simplifies the design of the modal components.
---
 .../sidebars/topology/room/DeleteRoomContainer.js  | 32 ++++++++++++++++++----
 1 file changed, 26 insertions(+), 6 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/DeleteRoomContainer.js')

diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/DeleteRoomContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/DeleteRoomContainer.js
index 6a80e9b0..2062462f 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/DeleteRoomContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/DeleteRoomContainer.js
@@ -1,12 +1,32 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { useDispatch } from 'react-redux'
-import { openDeleteRoomModal } from '../../../../../actions/modals/topology'
-import DeleteRoomComponent from '../../../../../components/app/sidebars/topology/room/DeleteRoomComponent'
+import { Button } from 'reactstrap'
+import ConfirmationModal from '../../../../../components/modals/ConfirmationModal'
+import { deleteRoom } from '../../../../../actions/topology/room'
 
-const DeleteRoomContainer = (props) => {
+const DeleteRoomContainer = () => {
     const dispatch = useDispatch()
-    const onClick = () => dispatch(openDeleteRoomModal())
-    return <DeleteRoomComponent {...props} onClick={onClick} />
+    const [isVisible, setVisible] = useState(false)
+    const callback = (isConfirmed) => {
+        if (isConfirmed) {
+            dispatch(deleteRoom())
+        }
+        setVisible(false)
+    }
+    return (
+        <>
+            <Button color="danger" outline block onClick={() => setVisible(true)}>
+                <span className="fa fa-trash mr-2" />
+                Delete this room
+            </Button>
+            <ConfirmationModal
+                title="Delete this room"
+                message="Are you sure you want to delete this room?"
+                show={isVisible}
+                callback={callback}
+            />
+        </>
+    )
 }
 
 export default DeleteRoomContainer
-- 
cgit v1.2.3


From d9e65dceb38cdb8dc4e464d388755f9456620566 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Sun, 16 May 2021 17:07:58 +0200
Subject: ui: Restructure OpenDC frontend

This change updates the structure of the OpenDC frontend in order to
improve the maintainability of the frontend.
---
 .../src/containers/app/sidebars/topology/room/DeleteRoomContainer.js    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/DeleteRoomContainer.js')

diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/DeleteRoomContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/DeleteRoomContainer.js
index 2062462f..3560c381 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/DeleteRoomContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/DeleteRoomContainer.js
@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import { useDispatch } from 'react-redux'
 import { Button } from 'reactstrap'
 import ConfirmationModal from '../../../../../components/modals/ConfirmationModal'
-import { deleteRoom } from '../../../../../actions/topology/room'
+import { deleteRoom } from '../../../../../redux/actions/topology/room'
 
 const DeleteRoomContainer = () => {
     const dispatch = useDispatch()
-- 
cgit v1.2.3


From 53623fad76274e39206b8e073e371775ea96946b Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Mon, 17 May 2021 12:16:10 +0200
Subject: ui: Migrate to FontAwesome 5 React library

This change updates the frontend to use the FontAwesome 5 React library
that renders SVG icons as opposed to CSS icon fonts. This migration
resolves a couple of issues we had with server-side rendering of the
previous FontAwesome icons.
---
 .../src/containers/app/sidebars/topology/room/DeleteRoomContainer.js  | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

(limited to 'opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/DeleteRoomContainer.js')

diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/DeleteRoomContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/DeleteRoomContainer.js
index 3560c381..0fbbb036 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/DeleteRoomContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/DeleteRoomContainer.js
@@ -3,6 +3,8 @@ import { useDispatch } from 'react-redux'
 import { Button } from 'reactstrap'
 import ConfirmationModal from '../../../../../components/modals/ConfirmationModal'
 import { deleteRoom } from '../../../../../redux/actions/topology/room'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faTrash } from '@fortawesome/free-solid-svg-icons'
 
 const DeleteRoomContainer = () => {
     const dispatch = useDispatch()
@@ -16,7 +18,7 @@ const DeleteRoomContainer = () => {
     return (
         <>
             <Button color="danger" outline block onClick={() => setVisible(true)}>
-                <span className="fa fa-trash mr-2" />
+                <FontAwesomeIcon icon={faTrash} className="mr-2" />
                 Delete this room
             </Button>
             <ConfirmationModal
-- 
cgit v1.2.3