From 6d5a2eebb609da67239ea37d12d6b2d3bbfef76e Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Wed, 28 Oct 2020 16:41:53 +0100
Subject: ui: Do not clutter component tree with Redux connects

This change refactors the frontend to use hooks for obtaining state
within the Redux store as opposed to using Higher-Order Components
(HOCs). This eliminates a lot of clutter in the components.
---
 .../src/components/app/map/MapStageComponent.js    | 28 +++++++---------------
 1 file changed, 8 insertions(+), 20 deletions(-)

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

diff --git a/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js b/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js
index 2cd0ed6e..60bf3104 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js
@@ -1,6 +1,6 @@
 import React from 'react'
+import { HotKeys } from 'react-hotkeys'
 import { Stage } from 'react-konva'
-import { Shortcuts } from 'react-shortcuts'
 import MapLayer from '../../../containers/app/map/layers/MapLayer'
 import ObjectHoverLayer from '../../../containers/app/map/layers/ObjectHoverLayer'
 import RoomHoverLayer from '../../../containers/app/map/layers/RoomHoverLayer'
@@ -55,23 +55,11 @@ class MapStageComponent extends React.Component {
         this.setState({ mouseX: mousePos.x, mouseY: mousePos.y })
     }
 
-    handleShortcuts(action) {
-        switch (action) {
-            case 'MOVE_LEFT':
-                this.moveWithDelta(MAP_MOVE_PIXELS_PER_EVENT, 0)
-                break
-            case 'MOVE_RIGHT':
-                this.moveWithDelta(-MAP_MOVE_PIXELS_PER_EVENT, 0)
-                break
-            case 'MOVE_UP':
-                this.moveWithDelta(0, MAP_MOVE_PIXELS_PER_EVENT)
-                break
-            case 'MOVE_DOWN':
-                this.moveWithDelta(0, -MAP_MOVE_PIXELS_PER_EVENT)
-                break
-            default:
-                break
-        }
+    handlers = {
+        MOVE_LEFT: () => this.moveWithDelta(MAP_MOVE_PIXELS_PER_EVENT, 0),
+        MOVE_RIGHT: () => this.moveWithDelta(-MAP_MOVE_PIXELS_PER_EVENT, 0),
+        MOVE_UP: () => this.moveWithDelta(0, MAP_MOVE_PIXELS_PER_EVENT),
+        MOVE_DOWN: () => this.moveWithDelta(0, -MAP_MOVE_PIXELS_PER_EVENT),
     }
 
     moveWithDelta(deltaX, deltaY) {
@@ -80,7 +68,7 @@ class MapStageComponent extends React.Component {
 
     render() {
         return (
-            <Shortcuts name="MAP" handler={this.handleShortcuts.bind(this)} targetNodeSelector="body">
+            <HotKeys handlers={this.handlers}>
                 <Stage
                     ref={(stage) => {
                         this.stage = stage
@@ -95,7 +83,7 @@ class MapStageComponent extends React.Component {
                         <ObjectHoverLayer mouseX={this.state.mouseX} mouseY={this.state.mouseY} />
                     </Provider>
                 </Stage>
-            </Shortcuts>
+            </HotKeys>
         )
     }
 }
-- 
cgit v1.2.3


From 00c8d0086631a249f7d9dcee022e013bbc683616 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Wed, 28 Oct 2020 16:42:43 +0100
Subject: ui: Do not prevent default on mouse scroll

This change removes the prevent default from the mouse scroll since
Chrome does not allow it anymore.
---
 opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js | 1 -
 1 file changed, 1 deletion(-)

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

diff --git a/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js b/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js
index 60bf3104..7ca10792 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js
@@ -46,7 +46,6 @@ class MapStageComponent extends React.Component {
     }
 
     updateScale(e) {
-        e.preventDefault()
         this.props.zoomInOnPosition(e.deltaY < 0, this.state.mouseX, this.state.mouseY)
     }
 
-- 
cgit v1.2.3


From 6e6f14db8986f5de6491b51117de0e1b0438b341 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Thu, 29 Oct 2020 00:53:52 +0100
Subject: ui: Adapt home components to Reactstrap

---
 .../src/components/home/ContactSection.js          | 44 +++++++++++-----------
 .../src/components/home/ContentSection.js          | 13 ++++---
 .../src/components/home/IntroSection.js            | 21 ++++++-----
 .../src/components/home/ScreenshotSection.js       | 13 +------
 .../src/components/home/StakeholderSection.js      | 18 ++++++---
 .../src/components/home/TechnologiesSection.js     | 21 ++++++-----
 6 files changed, 66 insertions(+), 64 deletions(-)

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

diff --git a/opendc-web/opendc-web-ui/src/components/home/ContactSection.js b/opendc-web/opendc-web-ui/src/components/home/ContactSection.js
index d5c6e55f..d25a1bc4 100644
--- a/opendc-web/opendc-web-ui/src/components/home/ContactSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/ContactSection.js
@@ -1,42 +1,44 @@
 import React from 'react'
 import FontAwesome from 'react-fontawesome'
-import './ContactSection.sass'
+import { Row, Col } from 'reactstrap'
 import ContentSection from './ContentSection'
 
+import './ContactSection.sass'
+
 const ContactSection = () => (
-    <ContentSection name="contact" title="Contact">
-        <div className="row justify-content-center">
-            <div className="col-4">
+    <ContentSection name="contact" title="Contact" className="contact-section">
+        <Row className="justify-content-center">
+            <Col md="4">
                 <a href="https://github.com/atlarge-research/opendc">
                     <FontAwesome name="github" size="3x" className="mb-2" />
                     <div className="w-100" />
                     atlarge-research/opendc
                 </a>
-            </div>
-            <div className="col-4">
+            </Col>
+            <Col md="4">
                 <a href="mailto:opendc@atlarge-research.com">
                     <FontAwesome name="envelope" size="3x" className="mb-2" />
                     <div className="w-100" />
                     opendc@atlarge-research.com
                 </a>
-            </div>
-        </div>
-        <div className="row">
-            <div className="col text-center">
-                <img src="img/tudelft-icon.png" className="img-fluid tudelft-icon" alt="TU Delft" />
-            </div>
-        </div>
-        <div className="row">
-            <div className="col text-center">
+            </Col>
+        </Row>
+        <Row>
+            <Col className="text-center">
+                <img src="img/tudelft-icon.png" className="img-fluid tudelft-icon" height="100" alt="TU Delft" />
+            </Col>
+        </Row>
+        <Row>
+            <Col className="text-center">
                 A project by the &nbsp;
                 <a href="http://atlarge.science" target="_blank" rel="noopener noreferrer">
                     <strong>@Large Research Group</strong>
                 </a>
                 .
-            </div>
-        </div>
-        <div className="row">
-            <div className="col text-center disclaimer mt-5 small">
+            </Col>
+        </Row>
+        <Row>
+            <Col className="text-center disclaimer mt-5 small">
                 <FontAwesome name="exclamation-triangle" size="2x" className="mr-2" />
                 <br />
                 <strong>Disclaimer: </strong>
@@ -47,8 +49,8 @@ const ContactSection = () => (
                     <a href="https://github.com/atlarge-research/opendc/blob/master/LICENSE.txt">license</a>
                 </strong>
                 ). Sorry for the inconvenience.
-            </div>
-        </div>
+            </Col>
+        </Row>
     </ContentSection>
 )
 
diff --git a/opendc-web/opendc-web-ui/src/components/home/ContentSection.js b/opendc-web/opendc-web-ui/src/components/home/ContentSection.js
index 9d4832d9..3a8960d9 100644
--- a/opendc-web/opendc-web-ui/src/components/home/ContentSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/ContentSection.js
@@ -1,15 +1,16 @@
+import React from 'react'
 import classNames from 'classnames'
+import { Container } from 'reactstrap'
 import PropTypes from 'prop-types'
-import React from 'react'
 import './ContentSection.sass'
 
-const ContentSection = ({ name, title, children }) => (
-    <div id={name} className={classNames(name + '-section', 'content-section')}>
-        <div className="container">
+const ContentSection = ({ name, title, children, className }) => (
+    <section id={name} className={classNames(className, name + '-section', 'content-section')}>
+        <Container>
             <h1>{title}</h1>
             {children}
-        </div>
-    </div>
+        </Container>
+    </section>
 )
 
 ContentSection.propTypes = {
diff --git a/opendc-web/opendc-web-ui/src/components/home/IntroSection.js b/opendc-web/opendc-web-ui/src/components/home/IntroSection.js
index a799272a..bc6ee83b 100644
--- a/opendc-web/opendc-web-ui/src/components/home/IntroSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/IntroSection.js
@@ -1,18 +1,19 @@
 import React from 'react'
+import { Container, Row, Col } from 'reactstrap'
 
 const IntroSection = () => (
     <section id="intro" className="intro-section">
-        <div className="container pt-5 pb-3">
-            <div className="row justify-content-center">
-                <div className="col-xl-4 col-lg-4 col-md-4 col-sm-8 col-8">
+        <Container className="pt-5 pb-3">
+            <Row className="justify-content-center">
+                <Col xl="4" lg="4" md="4" sm="8">
                     <h4>The datacenter (DC) industry...</h4>
                     <ul>
                         <li>Is worth over $15 bn, and growing</li>
                         <li>Has many hard-to-grasp concepts</li>
                         <li>Needs to become accessible to many</li>
                     </ul>
-                </div>
-                <div className="col-xl-4 col-lg-4 col-md-4 col-sm-8 col-8">
+                </Col>
+                <Col xl="4" lg="4" md="4" sm="8">
                     <img
                         src="img/datacenter-drawing.png"
                         className="col-12 img-fluid"
@@ -23,17 +24,17 @@ const IntroSection = () => (
                             Image source
                         </a>
                     </p>
-                </div>
-                <div className="col-xl-4 col-lg-4 col-md-4 col-sm-8 col-8">
+                </Col>
+                <Col xl="4" lg="4" md="4" sm="8">
                     <h4>OpenDC provides...</h4>
                     <ul>
                         <li>Collaborative online DC modeling</li>
                         <li>Diverse and effective DC simulation</li>
                         <li>Exploratory DC performance feedback</li>
                     </ul>
-                </div>
-            </div>
-        </div>
+                </Col>
+            </Row>
+        </Container>
     </section>
 )
 
diff --git a/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js b/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js
index 263590d5..33aab17f 100644
--- a/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js
@@ -1,4 +1,3 @@
-import classNames from 'classnames'
 import React from 'react'
 import { Row, Col } from 'reactstrap'
 import ContentSection from './ContentSection'
@@ -7,20 +6,12 @@ import './ScreenshotSection.sass'
 const ScreenshotSection = ({ name, title, imageUrl, caption, imageIsRight, children }) => (
     <ContentSection name={name} title={title}>
         <Row>
-            <Col
-                xl="5"
-                lg="5"
-                md="5"
-                sm="!2"
-                className={classNames('text-left my-auto', {
-                    'order-1': !imageIsRight,
-                })}
-            >
+            <Col xl="5" lg="5" md="5" sm="12" className={`text-left ${!imageIsRight ? 'order-1' : ''}`}>
                 {children}
             </Col>
             <Col xl="7" lg="7" md="7" sm="12">
                 <img src={imageUrl} className="col-12 screenshot" alt={caption} />
-                <Row className="text-muted justify-content-center">{caption}</Row>
+                <div className="row text-muted justify-content-center">{caption}</div>
             </Col>
         </Row>
     </ContentSection>
diff --git a/opendc-web/opendc-web-ui/src/components/home/StakeholderSection.js b/opendc-web/opendc-web-ui/src/components/home/StakeholderSection.js
index e5ed9683..1624b4d2 100644
--- a/opendc-web/opendc-web-ui/src/components/home/StakeholderSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/StakeholderSection.js
@@ -1,29 +1,35 @@
 import React from 'react'
+import { Row, Col } from 'reactstrap'
 import ContentSection from './ContentSection'
 
 const Stakeholder = ({ name, title, subtitle }) => (
-    <div className="col-xl-4 col-lg-4 col-md-4 col-sm-6 col-6">
-        <img
+    <Col xl="4" lg="4" md="4" sm="6">
+        <Col
+            tag="img"
+            xl="3"
+            lg="3"
+            md="4"
+            sm="4"
             src={'img/stakeholders/' + name + '.png'}
-            className="col-xl-3 col-lg-4 col-md-4 col-sm-4 col-4 img-fluid"
+            className="img-fluid"
             alt={title}
         />
         <div className="text-center mt-2">
             <h4>{title}</h4>
             <p>{subtitle}</p>
         </div>
-    </div>
+    </Col>
 )
 
 const StakeholderSection = () => (
     <ContentSection name="stakeholders" title="Stakeholders">
-        <div className="row justify-content-center">
+        <Row className="justify-content-center">
             <Stakeholder name="Manager" title="Managers" subtitle="Seeing is deciding" />
             <Stakeholder name="Sales" title="Sales" subtitle="Demo concepts" />
             <Stakeholder name="Developer" title="DevOps" subtitle="Develop & tune" />
             <Stakeholder name="Researcher" title="Researchers" subtitle="Understand & design" />
             <Stakeholder name="Student" title="Students" subtitle="Grasp complex concepts" />
-        </div>
+        </Row>
     </ContentSection>
 )
 
diff --git a/opendc-web/opendc-web-ui/src/components/home/TechnologiesSection.js b/opendc-web/opendc-web-ui/src/components/home/TechnologiesSection.js
index c6013c71..efd77edf 100644
--- a/opendc-web/opendc-web-ui/src/components/home/TechnologiesSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/TechnologiesSection.js
@@ -1,39 +1,40 @@
 import React from 'react'
 import FontAwesome from 'react-fontawesome'
+import { ListGroup, ListGroupItem } from 'reactstrap'
 import ContentSection from './ContentSection'
 
 const TechnologiesSection = () => (
     <ContentSection name="technologies" title="Technologies">
-        <ul className="list-group text-left">
-            <li className="d-flex list-group-item justify-content-between align-items-center list-group-item-primary">
+        <ListGroup className="list-group text-left">
+            <ListGroupItem color="primary" className="d-flex justify-content-between align-items-center">
                 <span style={{ minWidth: 100 }}>
                     <FontAwesome name="window-maximize" className="mr-2" />
                     <strong className="">Browser</strong>
                 </span>
                 <span className="text-right">JavaScript, React, Redux, Konva</span>
-            </li>
-            <li className="d-flex list-group-item justify-content-between align-items-center list-group-item-warning">
+            </ListGroupItem>
+            <ListGroupItem color="warning" className="d-flex justify-content-between align-items-center">
                 <span style={{ minWidth: 100 }}>
                     <FontAwesome name="television" className="mr-2" />
                     <strong>Server</strong>
                 </span>
                 <span className="text-right">Python, Flask, FlaskSocketIO, OpenAPI</span>
-            </li>
-            <li className="d-flex list-group-item justify-content-between align-items-center list-group-item-success">
+            </ListGroupItem>
+            <ListGroupItem color="success" className="d-flex justify-content-between align-items-center">
                 <span style={{ minWidth: 100 }}>
                     <FontAwesome name="database" className="mr-2" />
                     <strong>Database</strong>
                 </span>
                 <span className="text-right">MongoDB</span>
-            </li>
-            <li className="d-flex list-group-item justify-content-between align-items-center list-group-item-danger">
+            </ListGroupItem>
+            <ListGroupItem color="danger" className="d-flex justify-content-between align-items-center">
                 <span style={{ minWidth: 100 }}>
                     <FontAwesome name="cogs" className="mr-2" />
                     <strong>Simulator</strong>
                 </span>
                 <span className="text-right">Kotlin</span>
-            </li>
-        </ul>
+            </ListGroupItem>
+        </ListGroup>
     </ContentSection>
 )
 
-- 
cgit v1.2.3