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.

1 files changed, 23 insertions, 15 deletions

diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/TopologyListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/TopologyListComponent.js
index a7d78c4a..d5627abc 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/TopologyListComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/TopologyListComponent.js
@@ -2,37 +2,45 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import { Topology } from '../../../../shapes'
 import FontAwesome from 'react-fontawesome'
+import { Button, Col, Row } from 'reactstrap'
+import classNames from 'classnames'
 
 function TopologyListComponent({ topologies, currentTopologyId, onChooseTopology, onNewTopology, onDeleteTopology }) {
     return (
         <div className="pb-3">
             <h2>
                 Topologies
-                <button className="btn btn-outline-primary float-right" onClick={onNewTopology}>
+                <Button color="primary" outline className="float-right" onClick={onNewTopology}>
                     <FontAwesome name="plus" />
-                </button>
+                </Button>
             </h2>
 
             {topologies.map((topology, idx) => (
-                <div key={topology._id} className="row mb-1">
-                    <div
-                        className={
-                            'col-7 align-self-center ' + (topology._id === currentTopologyId ? 'font-weight-bold' : '')
-                        }
+                <Row key={topology._id} className="mb-1">
+                    <Col
+                        xs="7"
+                        className={classNames('align-self-center', {
+                            'font-weight-bold': topology._id === currentTopologyId,
+                        })}
                     >
                         {topology.name}
-                    </div>
-                    <div className="col-5 text-right">
-                        <span
-                            className="btn btn-outline-primary mr-1 fa fa-play"
+                    </Col>
+                    <Col xs="5" className="text-right">
+                        <Button
+                            color="primary"
+                            outline
+                            className="mr-1 fa fa-play"
                             onClick={() => onChooseTopology(topology._id)}
                         />
-                        <span
-                            className={'btn btn-outline-danger fa fa-trash ' + (idx === 0 ? 'disabled' : '')}
+                        <Button
+                            color="danger"
+                            outline
+                            className="fa fa-trash"
+                            disable={idx === 0}
                             onClick={() => (idx !== 0 ? onDeleteTopology(topology._id) : undefined)}
                         />
-                    </div>
-                </div>
+                    </Col>
+                </Row>
             ))}
         </div>
     )