Reimplement modals for stability

1 files changed, 48 insertions, 73 deletions

diff --git a/frontend/src/components/modals/custom-components/NewTopologyModalComponent.js b/frontend/src/components/modals/custom-components/NewTopologyModalComponent.js
index 8a625b13..b20ec13b 100644
--- a/frontend/src/components/modals/custom-components/NewTopologyModalComponent.js
+++ b/frontend/src/components/modals/custom-components/NewTopologyModalComponent.js
@@ -1,90 +1,65 @@
 import PropTypes from 'prop-types'
-import React from 'react'
+import { Form, FormGroup, Input, Label } from 'reactstrap'
+import React, { useRef } from 'react'
 import Shapes from '../../../shapes'
 import Modal from '../Modal'
 
-class NewTopologyModalComponent extends React.Component {
-    static propTypes = {
-        show: PropTypes.bool.isRequired,
-        topologies: PropTypes.arrayOf(Shapes.Topology),
-        onCreateTopology: PropTypes.func.isRequired,
-        onDuplicateTopology: PropTypes.func.isRequired,
-        onCancel: PropTypes.func.isRequired,
+const NewTopologyModalComponent = ({ show, onCreateTopology, onDuplicateTopology, onCancel, topologies }) => {
+    const textInput = useRef(null)
+    const originTopology = useRef(null)
+
+    const onCreate = () => {
+        onCreateTopology(textInput.current.value)
     }
 
-    reset() {
-        if (this.textInput) {
-            this.textInput.value = ''
-            this.originTopology.selectedIndex = 0
-        }
+    const onDuplicate = () => {
+        onDuplicateTopology(textInput.current.value, originTopology.current.value)
     }
 
-    onSubmit() {
-        if (this.originTopology.selectedIndex === 0) {
-            this.onCreate()
+    const onSubmit = () => {
+        if (originTopology.current.selectedIndex === 0) {
+            onCreate()
         } else {
-            this.onDuplicate()
+            onDuplicate()
         }
     }
 
-    onCreate() {
-        this.props.onCreateTopology(this.textInput.value)
-        this.reset()
-    }
-
-    onDuplicate() {
-        this.props.onDuplicateTopology(this.textInput.value, this.originTopology.value)
-        this.reset()
-    }
-
-    onCancel() {
-        this.props.onCancel()
-        this.reset()
-    }
-
-    render() {
-        return (
-            <Modal
-                title="New Topology"
-                show={this.props.show}
-                onSubmit={this.onSubmit.bind(this)}
-                onCancel={this.onCancel.bind(this)}
+    return (
+        <Modal title="New Topology" 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">Name</label>
-                        <input
-                            type="text"
-                            className="form-control"
-                            required
-                            ref={(textInput) => (this.textInput = textInput)}
-                        />
-                    </div>
-                    <div className="form-group">
-                        <label className="form-control-label">Topology to duplicate</label>
-                        <select
-                            className="form-control"
-                            ref={(originTopology) => (this.originTopology = originTopology)}
-                        >
-                            <option value={-1} key={-1}>
-                                None - start from scratch
+                <FormGroup>
+                    <Label for="name">Name</Label>
+                    <Input name="name" type="text" required innerRef={textInput} />
+                </FormGroup>
+                <FormGroup>
+                    <Label for="origin">Topology to duplicate</Label>
+                    <Input name="origin" type="select" innerRef={originTopology}>
+                        <option value={-1} key={-1}>
+                            None - start from scratch
+                        </option>
+                        {topologies.map((topology) => (
+                            <option value={topology._id} key={topology._id}>
+                                {topology.name}
                             </option>
-                            {this.props.topologies.map((topology) => (
-                                <option value={topology._id} key={topology._id}>
-                                    {topology.name}
-                                </option>
-                            ))}
-                        </select>
-                    </div>
-                </form>
-            </Modal>
-        )
-    }
+                        ))}
+                    </Input>
+                </FormGroup>
+            </Form>
+        </Modal>
+    )
+}
+
+NewTopologyModalComponent.propTypes = {
+    show: PropTypes.bool.isRequired,
+    topologies: PropTypes.arrayOf(Shapes.Topology),
+    onCreateTopology: PropTypes.func.isRequired,
+    onDuplicateTopology: PropTypes.func.isRequired,
+    onCancel: PropTypes.func.isRequired,
 }
 
 export default NewTopologyModalComponent