1 files changed, 69 insertions, 55 deletions
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js
index e775a663..131a00b5 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js
@@ -1,62 +1,76 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import Shapes from '../../../../shapes'
-import { Link } from 'react-router-dom'
-import FontAwesome from 'react-fontawesome'
+import { Scenario } from '../../../../shapes'
+import Link from 'next/link'
+import { Button, Col, Row } from 'reactstrap'
+import classNames from 'classnames'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faPlus, faPlay, faTrash } from '@fortawesome/free-solid-svg-icons'
 
-class ScenarioListComponent extends React.Component {
-    static propTypes = {
-        scenarios: PropTypes.arrayOf(Shapes.Scenario),
-        portfolioId: PropTypes.string,
-        currentProjectId: PropTypes.string.isRequired,
-        currentScenarioId: PropTypes.string,
-        onNewScenario: PropTypes.func.isRequired,
-        onChooseScenario: PropTypes.func.isRequired,
-        onDeleteScenario: PropTypes.func.isRequired,
-    }
-
-    onDelete(id) {
-        this.props.onDeleteScenario(id)
-    }
-
-    render() {
-        return (
-            <>
-                {this.props.scenarios.map((scenario, idx) => (
-                    <div key={scenario._id} className="row mb-1">
-                        <div
-                            className={
-                                'col-7 pl-5 align-self-center ' +
-                                (scenario._id === this.props.currentScenarioId ? 'font-weight-bold' : '')
-                            }
-                        >
-                            {scenario.name}
-                        </div>
-                        <div className="col-5 text-right">
-                            <Link
-                                className="btn btn-outline-primary mr-1 fa fa-play disabled"
-                                to={`/projects/${this.props.currentProjectId}/portfolios/${scenario.portfolioId}/scenarios/${scenario._id}`}
-                                onClick={() => this.props.onChooseScenario(scenario.portfolioId, scenario._id)}
-                            />
-                            <span
-                                className={'btn btn-outline-danger fa fa-trash ' + (idx === 0 ? 'disabled' : '')}
-                                onClick={() => (idx !== 0 ? this.onDelete(scenario._id) : undefined)}
-                            />
-                        </div>
-                    </div>
-                ))}
-                <div className="pl-4 mb-2">
-                    <div
-                        className="btn btn-outline-primary"
-                        onClick={() => this.props.onNewScenario(this.props.portfolioId)}
+function ScenarioListComponent({
+    scenarios,
+    portfolioId,
+    currentProjectId,
+    currentScenarioId,
+    onNewScenario,
+    onChooseScenario,
+    onDeleteScenario,
+}) {
+    return (
+        <>
+            {scenarios.map((scenario, idx) => (
+                <Row key={scenario._id} className="mb-1">
+                    <Col
+                        xs="7"
+                        className={classNames('pl-5 align-self-center', {
+                            'font-weight-bold': scenario._id === currentScenarioId,
+                        })}
                     >
-                        <FontAwesome name="plus" className="mr-1" />
-                        New scenario
-                    </div>
-                </div>
-            </>
-        )
-    }
+                        {scenario.name}
+                    </Col>
+                    <Col xs="5" className="text-right">
+                        <Link
+                            href={`/projects/${currentProjectId}/portfolios/${scenario.portfolioId}/scenarios/${scenario._id}`}
+                        >
+                            <Button
+                                color="primary"
+                                outline
+                                disabled
+                                className="mr-1"
+                                onClick={() => onChooseScenario(scenario.portfolioId, scenario._id)}
+                            >
+                                <FontAwesomeIcon icon={faPlay} />
+                            </Button>
+                        </Link>
+                        <Button
+                            color="danger"
+                            outline
+                            disabled={idx === 0}
+                            onClick={() => (idx !== 0 ? onDeleteScenario(scenario._id) : undefined)}
+                        >
+                            <FontAwesomeIcon icon={faTrash} />
+                        </Button>
+                    </Col>
+                </Row>
+            ))}
+            <div className="pl-4 mb-2">
+                <Button color="primary" outline onClick={() => onNewScenario(portfolioId)}>
+                    <FontAwesomeIcon icon={faPlus} className="mr-1" />
+                    New scenario
+                </Button>
+            </div>
+        </>
+    )
+}
+
+ScenarioListComponent.propTypes = {
+    scenarios: PropTypes.arrayOf(Scenario),
+    portfolioId: PropTypes.string,
+    currentProjectId: PropTypes.string.isRequired,
+    currentScenarioId: PropTypes.string,
+    onNewScenario: PropTypes.func.isRequired,
+    onChooseScenario: PropTypes.func.isRequired,
+    onDeleteScenario: PropTypes.func.isRequired,
 }
 
 export default ScenarioListComponent