MobX added with Decorators

gates/webapp.js

@@ -20,9 +20,9 @@ expressApp.use(
 expressApp.use(cors());
 expressApp.options(cors());
 expressApp.use(express.static(publicPath));
-expressApp.get('*',(req,res) => {
-  res.sendFile(path.join(publicPath, 'index.html'))
-});
+// expressApp.get('*',(req,res) => {
+//   res.sendFile(path.join(publicPath, 'index.html'))
+// });
 
 expressApp.use(bodyParser.json());
 

tsconfig.json

@@ -0,0 +1,6 @@
+{
+    "compilerOptions": {
+        "experimentalDecorators": true,
+        "allowJs": true
+    }
+}

ui/config-overrides.js

@@ -0,0 +1,5 @@
+/** @format */
+
+const {override, addDecoratorsLegacy, disableEsLint} = require('customize-cra');
+
+module.exports = override(addDecoratorsLegacy(), disableEsLint());

ui/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "client",
+  "name": "chaos_monkey",
   "version": "1.0.0",
   "private": true,
   "dependencies": {
@@ -16,10 +16,10 @@
     "socket.io-client": "^2.1.1"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "start": "react-app-rewired start",
+    "build": "react-app-rewired build",
+    "test": "react-app-rewired test",
+    "eject": "react-app-rewired eject"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -29,5 +29,10 @@
     "not dead",
     "not ie <= 11",
     "not op_mini all"
-  ]
+  ],
+  "devDependencies": {
+    "@babel/plugin-proposal-decorators": "^7.1.2",
+    "customize-cra": "^0.1.1",
+    "react-app-rewired": "^1.6.2"
+  }
 }

ui/src/App.css

@@ -1,4 +1,8 @@
 .app_logo {
     height: 30px;
     margin:0 8px;
+}
+
+.button_fixed {
+    position: fixed;
 }

ui/src/components/CreatePrank/CreatePlankList.jsx

@@ -1,53 +1,37 @@
 /** @format */
 
-import React, {Fragment} from 'react';
+import React from 'react';
+import {observer} from 'mobx-react';
 
 // Styles
 import Col from 'react-bootstrap/lib/Col';
 import Row from 'react-bootstrap/lib/Row';
 import ListGroup from 'react-bootstrap/lib/ListGroup';
-import Dropdown from 'react-bootstrap/lib/Dropdown';
-import DropdownButton from 'react-bootstrap/lib/DropdownButton';
 
-const CreatePlankList = ({items, listName, howLong}) => {
+const CreatePlankList = observer(({items, listName, onClick}) => {
   return (
-    <Fragment>
-      <Row className="my-3">
-        <Col md="3" sm="12">
-          <h6>{listName}</h6>
-        </Col>
-        <Col md='6'sm="12">
-          <ListGroup>
-            {items.map(item => (
-              <ListGroup.Item action className="py-2 px-3">
-                {item}
-              </ListGroup.Item>
-            ))}
-            <ListGroup.Item action variant="secondary" className="py-2 px-3">
-              More...
-            </ListGroup.Item>
-          </ListGroup>
-        </Col>
-      </Row>
-      {howLong && (
-        <Row className="my-4">
-          <Col md="3">New Line</Col>
-          <Col md="3">
-            <DropdownButton
-              variant="light"
-              id="dropdown-item-button"
-              title="How long"
+    <Row className="my-3">
+      <Col md="3" sm="12">
+        <h6>{listName}</h6>
+      </Col>
+      <Col md="6" sm="12">
+        <ListGroup>
+          {items.map((item, idx) => (
+            <ListGroup.Item
+              className="py-2 px-3"
+              key={idx}
+              onClick={() => onClick(item)}
             >
-              <Dropdown.Item as="button">5 sec</Dropdown.Item>
-              <Dropdown.Item as="button">10 sec</Dropdown.Item>
-              <Dropdown.Item as="button">30 sec</Dropdown.Item>
-              <Dropdown.Item as="button">1 min</Dropdown.Item>
-            </DropdownButton>
-          </Col>
-        </Row>
-      )}
-    </Fragment>
+              {item.name}
+            </ListGroup.Item>
+          ))}
+          <ListGroup.Item action variant="secondary" className="py-2 px-3">
+            More...
+          </ListGroup.Item>
+        </ListGroup>
+      </Col>
+    </Row>
   );
-};
+});
 
 export default CreatePlankList;

ui/src/components/CreatePrank/CreatePrank.jsx

@@ -1,47 +1,70 @@
 /** @format */
 
 import React, {Component} from 'react';
+import {inject, observer} from 'mobx-react';
 
 import CreatePlankList from './CreatePlankList';
+import DurationDropdown from './DurationDropdown';
 
 // Styles
-// import Button from 'react-bootstrap/lib/Button';
 import Col from 'react-bootstrap/lib/Col';
 import Row from 'react-bootstrap/lib/Row';
 import Button from 'react-bootstrap/lib/Button';
 
+@inject('store')
+@observer
 class CreatePrank extends Component {
   state = {
-    selectedItem: '',
-    items: [
-      'Random with surprises',
-      'Exhausted hardware',
-      'Error handling benchmark',
-      'Slow and comprhensive',
+    selectedPrank: '',
+    pranks: [
+      {name: 'Random with surprises'},
+      {name: 'Exhausted hardware'},
+      {name: 'Error handling benchmark'},
+      {name: 'Slow and comprhensive'},
     ],
   };
+  componentDidMount() {
+    this.props.store.getSinglePranksList();
+  }
+
+  createPrank = prank => {
+    this.props.store.addPrank(prank);
+  };
 
   render() {
+    const {singlePranks} = this.props.store;
+    console.log('Selected Prank', this.state.selectedPrank.name);
     return (
-      <Col lg='10' md="9">
+      <Col lg="10" md="9">
         <Row className="px-3">
           <h3>Create Plank</h3>
         </Row>
         <CreatePlankList
-          items={this.state.items}
+          items={this.state.pranks}
           listName="Pranks Plan"
           howLong
         />
+        <DurationDropdown />
         <Row className="my-5">
-          <Col md="1" sm='2' xs='2'>OR</Col>
-          <Col md="7" sm='10' xs='10'>
-            <hr style={{backgroundColor:'black'}}/>
+          <Col md="1" sm="2" xs="2">
+            OR
+          </Col>
+          <Col md="7" sm="10" xs="10">
+            <hr style={{backgroundColor: 'black'}} />
           </Col>
         </Row>
-        <CreatePlankList items={this.state.items} listName="Single Prank" />
+        <CreatePlankList
+          items={singlePranks}
+          listName="Single Prank"
+          onClick={prank => this.setState({selectedPrank: prank})}
+        />
         <Row className="mt-4 mb-3">
           <Col md={{span: 3, offset: 3}}>
-            <Button>Create pranks</Button>
+            <Button
+              onClick={this.createPrank.bind(this, this.state.selectedPrank)}
+            >
+              Create pranks
+            </Button>
           </Col>
         </Row>
       </Col>

ui/src/components/CreatePrank/DurationDropdown.jsx

@@ -0,0 +1,31 @@
+/** @format */
+
+import React from 'react';
+
+// Styles
+import Col from 'react-bootstrap/lib/Col';
+import Row from 'react-bootstrap/lib/Row';
+import Dropdown from 'react-bootstrap/lib/Dropdown';
+import DropdownButton from 'react-bootstrap/lib/DropdownButton';
+
+const DurationDropdown = () => {
+  return (
+    <Row className="my-4">
+      <Col md="3">How long</Col>
+      <Col md="3">
+        <DropdownButton
+          variant="light"
+          id="dropdown-item-button"
+          title="select"
+        >
+          <Dropdown.Item as="button">5 sec</Dropdown.Item>
+          <Dropdown.Item as="button">10 sec</Dropdown.Item>
+          <Dropdown.Item as="button">30 sec</Dropdown.Item>
+          <Dropdown.Item as="button">1 min</Dropdown.Item>
+        </DropdownButton>
+      </Col>
+    </Row>
+  );
+};
+
+export default DurationDropdown;

ui/src/components/Dashboard.jsx

@@ -9,11 +9,11 @@ import Menu from './Menu';
 import Container from 'react-bootstrap/lib/Container';
 import Row from 'react-bootstrap/lib/Row';
 
-const Dashboard = ({children, ...rest}) => {
+const Dashboard = ({children, name}) => {
   return (
     <Container fluid>
       <Row>
-        <Header {...rest} />
+        <Header name={name} />
       </Row>
       <Row>
         <Menu />