Josh/extensions

extension/app/components/Action.jsx

@@ -0,0 +1,13 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+const Action = (props) => {
+  const { snapshot } = props;
+  return <div className="action-component">{snapshot.state}</div>;
+};
+
+Action.propTypes = {
+  // snapshot: PropTypes.object,
+};
+
+export default Action;

extension/app/components/App.jsx

@@ -1,9 +1,6 @@
 import React, { Component } from 'react';
+import MainContainer from '../containers/MainContainer';
 
-const App = () => (
-  <div>
-    App
-  </div>
-);
+const App = () => <MainContainer />;
 
 export default App;

extension/app/containers/ActionContainer.jsx

@@ -0,0 +1,21 @@
+import React, { Component } from 'react';
+import Action from '../components/Action';
+
+class ActionContainer extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const { snapshots } = this.props;
+    let actionsArr = [];
+    if (snapshots) {
+      actionsArr = snapshots.map((snapshot, index) => (
+        <Action key={`action${index}`} snapshot={snapshot} />
+      ));
+    }
+    return <div className="action-container">{actionsArr}</div>;
+  }
+}
+
+export default ActionContainer;

extension/app/containers/HeadContainer.jsx

@@ -0,0 +1,13 @@
+import React, { Component } from 'react';
+
+class HeadContainer extends Component {
+  constructor() {
+    super();
+  }
+
+  render() {
+    return <div className="head-container">HeadContainer</div>;
+  }
+}
+
+export default HeadContainer;

extension/app/containers/MainContainer.jsx

@@ -0,0 +1,48 @@
+import React, { Component } from 'react';
+import HeadContainer from './HeadContainer';
+import ActionContainer from './ActionContainer';
+import StateContainer from './StateContainer';
+import TravelContainer from './TravelContainer';
+
+class MainContainer extends Component {
+  constructor() {
+    super();
+    this.state = { snapshots: [] };
+  }
+
+  componentDidMount() {
+    // add a listener to capture messages from our backend
+    // this should be in the inject script
+    // window.addEventListener(
+    //   'message',
+    //   (event) => {
+    //     // We only accept messages from ourselves
+    //     if (event.source !== window) return;
+    //     console.log(`Message received from backend: ${event.payload}`);
+    //   },
+    //   false,
+    // );
+
+    // MOCK DATA -- FOR TESTING PURPOSES ONLY
+    this.setState({
+      snapshots: [{ state: 'snapshot1' }, { state: 'snapshot2' }, { state: 'snapshot3' }],
+    });
+  }
+
+  render() {
+    const { snapshots } = this.state;
+
+    return (
+      <div className="main-container">
+        <HeadContainer />
+        <div className="body-container">
+          <ActionContainer snapshots={snapshots} />
+          <StateContainer />
+        </div>
+        <TravelContainer />
+      </div>
+    );
+  }
+}
+
+export default MainContainer;

extension/app/containers/StateContainer.jsx

@@ -0,0 +1,13 @@
+import React, { Component } from 'react';
+
+class StateContainer extends Component {
+  constructor() {
+    super();
+  }
+
+  render() {
+    return <div className="state-container">StateContainer</div>;
+  }
+}
+
+export default StateContainer;

extension/app/containers/TravelContainer.jsx

@@ -0,0 +1,13 @@
+import React, { Component } from 'react';
+
+class TravelContainer extends Component {
+  constructor() {
+    super();
+  }
+
+  render() {
+    return <div className="travel-container">TravelContainer</div>;
+  }
+}
+
+export default TravelContainer;

extension/app/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './components/App';
+import styles from './styles/styles.css';
 
-ReactDOM.render(
-  <App />, document.getElementById('root'),
-);
+ReactDOM.render(<App />, document.getElementById('root'));

extension/app/styles/panel.css

@@ -0,0 +1,12 @@
+html {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  height: 100%;
+}
+
+#root {
+  height: 100%;
+}

extension/app/styles/styles.css

@@ -0,0 +1,57 @@
+.main-container {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  background-color: rgb(238, 238, 238);
+}
+
+.head-container {
+  height: 10%;
+}
+
+.body-container {
+  height: 80%;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.action-container {
+  flex: 3 auto;
+}
+
+.state-container {
+  flex: 7 auto;
+}
+
+/* if extension width is less than 500px, stack the body containers */
+@media (max-width: 500px) {
+  .body-container {
+    flex-direction: column;
+  }
+  .state-container {
+    flex: 3 auto;
+  }
+}
+
+.travel-container {
+  height: 10%;
+}
+
+.head-container,
+.body-container,
+.action-container,
+.state-container,
+.travel-container {
+  border-style: solid;
+  border-color: black;
+  border-width: thin;
+}
+
+.action-component {
+  height: 40px;
+  width: 100%;
+  background-color: rgb(170, 170, 170);
+  border-style: solid;
+  border-width: thin;
+}

extension/panel.html

@@ -1,16 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Document</title>
+  </head>
 
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title>Document</title>
-</head>
-
-<body>
-  <div id="root" />
-  <script type="text/javascript" src="dist/app.bundle.js"></script>
-</body>
-
+  <body>
+    <div id="root"></div>
+    <link rel="stylesheet" type="text/css" href="./app/styles/panel.css" />
+    <script type="text/javascript" src="dist/app.bundle.js"></script>
+  </body>
 </html>