From 24147cba0f5723be3525e8f40d1954144841629b Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Thu, 13 May 2021 13:00:00 +0200
Subject: ui: Address technical dept in frontend

---
 .../src/components/modals/TextInputModal.js        | 75 +++++++++-------------
 .../custom-components/NewScenarioModalComponent.js |  8 +--
 .../custom-components/NewTopologyModalComponent.js |  4 +-
 3 files changed, 37 insertions(+), 50 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/components/modals')

diff --git a/opendc-web/opendc-web-ui/src/components/modals/TextInputModal.js b/opendc-web/opendc-web-ui/src/components/modals/TextInputModal.js
index d0918c7e..6758fdc0 100644
--- a/opendc-web/opendc-web-ui/src/components/modals/TextInputModal.js
+++ b/opendc-web/opendc-web-ui/src/components/modals/TextInputModal.js
@@ -1,54 +1,41 @@
 import PropTypes from 'prop-types'
-import React from 'react'
+import React, { useRef } from 'react'
 import Modal from './Modal'
 
-class TextInputModal extends React.Component {
-    static propTypes = {
-        title: PropTypes.string.isRequired,
-        label: PropTypes.string.isRequired,
-        show: PropTypes.bool.isRequired,
-        callback: PropTypes.func.isRequired,
-        initialValue: PropTypes.string,
+function TextInputModal({ title, label, show, callback, initialValue }) {
+    const textInput = useRef(null)
+    const onSubmit = () => {
+        callback(textInput.current.value)
+        textInput.current.value = ''
     }
-
-    componentDidUpdate() {
-        if (this.props.initialValue && this.textInput) {
-            this.textInput.value = this.props.initialValue
-        }
-    }
-
-    onSubmit() {
-        this.props.callback(this.textInput.value)
-        this.textInput.value = ''
-    }
-
-    onCancel() {
-        this.props.callback(undefined)
-        this.textInput.value = ''
+    const onCancel = () => {
+        callback(undefined)
+        textInput.current.value = ''
     }
 
-    render() {
-        return (
-            <Modal
-                title={this.props.title}
-                show={this.props.show}
-                onSubmit={this.onSubmit.bind(this)}
-                onCancel={this.onCancel.bind(this)}
+    return (
+        <Modal title={title} show={show} onSubmit={onSubmit} onCancel={onCancel}>
+            <form
+                onSubmit={(e) => {
+                    e.preventDefault()
+                    onSubmit()
+                }}
             >
-                <form
-                    onSubmit={(e) => {
-                        e.preventDefault()
-                        this.onSubmit()
-                    }}
-                >
-                    <div className="form-group">
-                        <label className="form-control-label">{this.props.label}</label>
-                        <input type="text" className="form-control" ref={(textInput) => (this.textInput = textInput)} />
-                    </div>
-                </form>
-            </Modal>
-        )
-    }
+                <div className="form-group">
+                    <label className="form-control-label">{label}</label>
+                    <input type="text" className="form-control" ref={textInput} defaultValue={initialValue} />
+                </div>
+            </form>
+        </Modal>
+    )
+}
+
+TextInputModal.propTypes = {
+    title: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired,
+    show: PropTypes.bool.isRequired,
+    callback: PropTypes.func.isRequired,
+    initialValue: PropTypes.string,
 }
 
 export default TextInputModal
diff --git a/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewScenarioModalComponent.js b/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewScenarioModalComponent.js
index 01a5719c..782812ac 100644
--- a/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewScenarioModalComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewScenarioModalComponent.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import React, { useRef } from 'react'
 import { Form, FormGroup, Input, Label } from 'reactstrap'
-import Shapes from '../../../shapes'
+import { Scheduler, Topology, Trace } from '../../../shapes'
 import Modal from '../Modal'
 
 const NewScenarioModalComponent = ({
@@ -135,9 +135,9 @@ NewScenarioModalComponent.propTypes = {
     show: PropTypes.bool.isRequired,
     currentPortfolioId: PropTypes.string.isRequired,
     currentPortfolioScenarioIds: PropTypes.arrayOf(PropTypes.string),
-    traces: PropTypes.arrayOf(Shapes.Trace),
-    topologies: PropTypes.arrayOf(Shapes.Topology),
-    schedulers: PropTypes.arrayOf(Shapes.Scheduler),
+    traces: PropTypes.arrayOf(Trace),
+    topologies: PropTypes.arrayOf(Topology),
+    schedulers: PropTypes.arrayOf(Scheduler),
     callback: PropTypes.func.isRequired,
 }
 
diff --git a/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewTopologyModalComponent.js b/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewTopologyModalComponent.js
index 9fee8831..f06fe797 100644
--- a/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewTopologyModalComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewTopologyModalComponent.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import { Form, FormGroup, Input, Label } from 'reactstrap'
 import React, { useRef } from 'react'
-import Shapes from '../../../shapes'
+import { Topology } from '../../../shapes'
 import Modal from '../Modal'
 
 const NewTopologyModalComponent = ({ show, onCreateTopology, onDuplicateTopology, onCancel, topologies }) => {
@@ -62,7 +62,7 @@ const NewTopologyModalComponent = ({ show, onCreateTopology, onDuplicateTopology
 
 NewTopologyModalComponent.propTypes = {
     show: PropTypes.bool.isRequired,
-    topologies: PropTypes.arrayOf(Shapes.Topology),
+    topologies: PropTypes.arrayOf(Topology),
     onCreateTopology: PropTypes.func.isRequired,
     onDuplicateTopology: PropTypes.func.isRequired,
     onCancel: PropTypes.func.isRequired,
-- 
cgit v1.2.3