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/RoomNameContainer.js    | 30 +++++++++++++++++-----
 1 file changed, 24 insertions(+), 6 deletions(-)

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

diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/RoomNameContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/RoomNameContainer.js
index 1f53aeb6..946bb864 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/RoomNameContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/RoomNameContainer.js
@@ -1,13 +1,31 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { openEditRoomNameModal } from '../../../../../actions/modals/topology'
-import RoomNameComponent from '../../../../../components/app/sidebars/topology/room/RoomNameComponent'
+import NameComponent from '../../../../../components/app/sidebars/topology/NameComponent'
+import TextInputModal from '../../../../../components/modals/TextInputModal'
+import { editRoomName } from '../../../../../actions/topology/room'
 
-const RoomNameContainer = (props) => {
+const RoomNameContainer = () => {
+    const [isVisible, setVisible] = useState(false)
     const roomName = useSelector((state) => state.objects.room[state.interactionLevel.roomId].name)
     const dispatch = useDispatch()
-    const onEdit = () => dispatch(openEditRoomNameModal())
-    return <RoomNameComponent {...props} onEdit={onEdit} roomName={roomName} />
+    const callback = (name) => {
+        if (name) {
+            dispatch(editRoomName(name))
+        }
+        setVisible(false)
+    }
+    return (
+        <>
+            <NameComponent name={roomName} onEdit={() => setVisible(true)} />
+            <TextInputModal
+                title="Edit room name"
+                label="Room name"
+                show={isVisible}
+                initialValue={roomName}
+                callback={callback}
+            />
+        </>
+    )
 }
 
 export default RoomNameContainer
-- 
cgit v1.2.3