Feature/feather workflows

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "client",
-  "version": "1.0.1-alpha.1",
+  "version": "1.1.0-alpha.1",
   "description": "universe.engineering web client",
   "license": "MIT",
   "repository": {

client/src/App.js

@@ -9,6 +9,9 @@ import LogIn from './containers/LogIn';
 import LogInError from './containers/LogInError';
 import LogInSuccess from './containers/LogInSuccess';
 import Dashboard from './containers/Dashboard';
+import Feather from './containers/Feather';
+import Pair from './containers/Pair';
+import FeatherInstructions from './containers/FeatherInstructions';
 import NoMatch from './containers/NoMatch';
 import './css/App.css';
 
@@ -49,6 +52,9 @@ function App() {
           <Route path="/login-error" component={LogInError} />
           <Route path="/login-success" component={LogInSuccess} />
           <Route exact path="/dashboard" component={Dashboard} />
+          <Route exact path="/feather" component={Feather} />
+          <Route exact path="/pair" component={Pair} />
+          <Route exact path="/feather/instructions/:user(new|returning)" component={FeatherInstructions} />
           <Route exact path="/">
             <Redirect to="/dashboard" />
           </Route>

client/src/containers/Feather.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import CopyrightUpdate from 'copyright-update';
+import logoWordmark from './../img/universe-wordmark.svg';
+import useBTConnected from '../hooks/useBTConnected';
+
+function Feather() {
+  const isConnected = useBTConnected();
+
+  return (
+    <div className="container-fluid text-center">
+      <div className="mt-5 mb-5">
+        <a href="/">
+          <img
+            className="brand-img"
+            src={logoWordmark}
+            alt="Universe Labs Logo"
+          />
+        </a>
+        <div className="mt-3">Welcome to Universe</div>
+      </div>
+      <div className="col-md-8 offset-md-2">
+        {!isConnected && (
+          <strong className="lead font-weight-bold">
+            Your Universe Feather device is not connected.
+          </strong>
+        )}
+        {isConnected && (
+          <strong className="lead font-weight-bold">
+            Your Universe Feather device is now connected. Please{' '}
+            <a href="/signup" className="link-dynamic-dark">
+              sign up
+            </a>{' '}
+            for Universe.
+          </strong>
+        )}
+        <p className="mt-4">
+          Please follow the setup instructions that came with your device <br />
+          or{' '}
+          <a href="/feather/instructions/new" className="link-dynamic-dark">
+            click here
+          </a>{' '}
+          for instructions.
+        </p>
+        <div className="small font-weight-bold mt-6 mb-6">
+          <CopyrightUpdate style={{ display: 'inline-block' }} /> Universe Labs
+          Inc.
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Feather;

client/src/containers/FeatherInstructions.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import CopyrightUpdate from 'copyright-update';
+import logoWordmark from './../img/universe-wordmark.svg';
+
+function FeatherInstructions({ match }) {
+  const { user } = match.params;
+
+  return (
+    <div className="container-fluid text-center">
+      <div className="mt-5 mb-5">
+        <a href="/">
+          <img
+            className="brand-img"
+            src={logoWordmark}
+            alt="Universe Labs Logo"
+          />
+        </a>
+        <div className="mt-3">Connect your Universe Feather to your laptop</div>
+      </div>
+      <div className="col-md-8 offset-md-2 col-lg-6 offset-lg-3 col-xl-4 offset-xl-4 text-left">
+        <ol>
+          <li>Turn on device</li>
+          <li>Press the button to turn on Universe Feather device</li>
+          <li>Connect device</li>
+          <li>Go to your Bluetooth setting and choose Feather Device</li>
+          {user && user === 'new' && <li>Sign up</li>}
+          {user && user === 'returning' && <li>Confirm device</li>}
+          <li>Go back to your web browser and sign up for Universe</li>
+        </ol>
+      </div>
+      <div className="small font-weight-bold mt-6 mb-6">
+        <CopyrightUpdate style={{ display: 'inline-block' }} /> Universe Labs
+        Inc.
+      </div>
+    </div>
+  );
+}
+
+export default FeatherInstructions;

client/src/containers/Pair.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import CopyrightUpdate from 'copyright-update';
+import logoWordmark from './../img/universe-wordmark.svg';
+
+function Pair() {
+  return (
+    <div className="container-fluid text-center">
+      <div className="mt-5 mb-5">
+        <a href="/">
+          <img
+            className="brand-img"
+            src={logoWordmark}
+            alt="Universe Labs Logo"
+          />
+        </a>
+        <div className="mt-3">Welcome to Universe</div>
+      </div>
+      <div className="col-md-8 offset-md-2">
+        <strong className="lead font-weight-bold">
+          Your Universe Feather device is not connected.
+        </strong>
+        <p className="mt-4">
+          Please follow the setup instructions that came with your device <br />
+          or{' '}
+          <a
+            href="/feather/instructions/returning"
+            className="link-dynamic-dark"
+          >
+            click here
+          </a>{' '}
+          for instructions.
+        </p>
+        <div className="small font-weight-bold mt-6 mb-6">
+          <CopyrightUpdate style={{ display: 'inline-block' }} /> Universe Labs
+          Inc.
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Pair;

client/src/hooks/useBTConnected.js

@@ -0,0 +1,18 @@
+/**
+ * A hook to check whether feather bluetooth device is connected
+ */
+
+import { useState } from 'react';
+
+const useBTConnected = () => {
+  const [isConnected, setIsConnected] = useState(null);
+
+  if (!isConnected) {
+    // Handle connection here
+    // setIsConnected(true);
+  }
+
+  return isConnected;
+};
+
+export default useBTConnected;