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

---
 .../app/sidebars/project/ScenarioListComponent.js  | 105 ++++++++++-----------
 1 file changed, 52 insertions(+), 53 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js')

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 4efa99ef..26543d12 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,65 +1,64 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import Shapes from '../../../../shapes'
+import { Scenario } from '../../../../shapes'
 import Link from 'next/link'
 import FontAwesome from 'react-fontawesome'
 
-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
-                                href={`/projects/${this.props.currentProjectId}/portfolios/${scenario.portfolioId}/scenarios/${scenario._id}`}
-                            >
-                                <a
-                                    className="btn btn-outline-primary mr-1 fa fa-play disabled"
-                                    onClick={() => this.props.onChooseScenario(scenario.portfolioId, scenario._id)}
-                                />
-                            </Link>
-                            <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">
+function ScenarioListComponent({
+    scenarios,
+    portfolioId,
+    currentProjectId,
+    currentScenarioId,
+    onNewScenario,
+    onChooseScenario,
+    onDeleteScenario,
+}) {
+    return (
+        <>
+            {scenarios.map((scenario, idx) => (
+                <div key={scenario._id} className="row mb-1">
                     <div
-                        className="btn btn-outline-primary"
-                        onClick={() => this.props.onNewScenario(this.props.portfolioId)}
+                        className={
+                            'col-7 pl-5 align-self-center ' +
+                            (scenario._id === currentScenarioId ? 'font-weight-bold' : '')
+                        }
                     >
-                        <FontAwesome name="plus" className="mr-1" />
-                        New scenario
+                        {scenario.name}
                     </div>
+                    <div className="col-5 text-right">
+                        <Link
+                            href={`/projects/${currentProjectId}/portfolios/${scenario.portfolioId}/scenarios/${scenario._id}`}
+                        >
+                            <a
+                                className="btn btn-outline-primary mr-1 fa fa-play disabled"
+                                onClick={() => onChooseScenario(scenario.portfolioId, scenario._id)}
+                            />
+                        </Link>
+                        <span
+                            className={'btn btn-outline-danger fa fa-trash ' + (idx === 0 ? 'disabled' : '')}
+                            onClick={() => (idx !== 0 ? onDeleteScenario(scenario._id) : undefined)}
+                        />
+                    </div>
+                </div>
+            ))}
+            <div className="pl-4 mb-2">
+                <div className="btn btn-outline-primary" onClick={() => onNewScenario(this.props.portfolioId)}>
+                    <FontAwesome name="plus" className="mr-1" />
+                    New scenario
                 </div>
-            </>
-        )
-    }
+            </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
-- 
cgit v1.2.3