Merge pull request #4 from letakeane/lk-migrationToExpress

Migrate React app to Express; initial migration

app/Image.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const Image = ({ newImageSource='./assets/images/logo-o.png' }) => {
+  return (
+    <img src={newImageSource} />
+  )
+}

app/assets/styles/main.css

@@ -1,17 +1,133 @@
 body {
   background: #f4f4f4;
-  font-family: sans-serif;
+  font-family: 'Overpass Mono', sans-serif;
   font-weight: 100;
+  margin: 0;
+  padding: 0;
 }
 
-#main h1 {
-  padding: 20px;
-  border-bottom: 1px dashed #aaa;
-  color: rgba(0,0,0,0.6);
-  font-weight: 100;
-  font-family: sans-serif;
+#root {
+  text-align: center;
+}
+
+
+/*FALLBACKS*/
+article {
+  display: block;
+}
+
+/*GLOBAL*/
+.hidden {
+  display: none;
+}
+
+button {
+  font-family: 'Overpass Mono', sans-serif;
+  font-size: 20px;
+  display: block;
+  margin: 20px auto;
+  border: none;
+  border-radius: 25px;
+  background-color: rgba(111, 157, 172, 1);
+  color: rgba(234, 206, 162, 1);
+  height: 50px;
+  padding: 0 20px;
+}
+
+/*APP*/
+.App {
+  text-align: center;
+}
+
+a {
+  text-decoration: none;
+}
+
+header {
+  background-color: #629EAE;
+  margin: 0;
+  padding: 10px 0 30px 0;
+}
+
+h1 {
+  margin: 15px 0;
+  text-align: center;
+  color: #EDCD9C;
+  font-size: 60px;
+  font-weight: 700;
+}
+
+.logo-o {
+  width: 35px;
+  margin-left: 5px;
 }
 
-#main {
+.logo-i {
+  color: #FFF8F3;
+}
+
+/*NAVBAR*/
+ul {
+  display: flex;
+  justify-content: space-around;
+  list-style: none;
+  -webkit-margin-before: 0;
+  -webkit-margin-after: 0;
+  -webkit-padding-start: 0;
+}
+
+li {
+  width: 200px;
   text-align: center;
 }
+
+li a {
+  text-decoration: none;
+  color: #EDCD9C;
+  font-size: 30px;
+  border-bottom: 4px solid rgba(0, 0, 0, 0);
+}
+
+li:hover a {
+  font-weight: 700;
+  border-bottom: 4px solid rgba(237, 205, 156, 1);
+}
+
+
+/*PLAY*/
+.play {
+  display: flex;
+  justify-content: space-between;
+}
+
+
+/*IMAGE CAPTURE*/
+.image-capture {
+  text-align: center;
+  position: relative;
+}
+
+video {
+  border: 10px solid #629EAE;
+  border-radius: 50px;
+  object-fit: cover;
+  -webkit-transform: scaleX(-1);
+  transform: scaleX(-1);
+}
+
+.face-oval {
+  width: 150px;
+  height: 200px;
+  border: 2px dashed rgba(237, 205, 156, 0.5);
+  -moz-border-radius: 70px / 90px;
+	-webkit-border-radius: 70px / 90px;
+	border-radius: 70px / 90px;
+  position: absolute;
+  top: 150px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.image-capture img {
+  display: none;
+}

app/components/App/App.js

@@ -0,0 +1,28 @@
+import React, { Component } from 'react';
+import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
+import { NavBar } from '../NavBar/NavBar';
+import { Instructions } from '../Instructions/Instructions';
+import Play from '../Play/Play';
+import { Learn } from '../Learn/Learn';
+import { Image } from '../../Image';
+
+class App extends Component {
+  render() {
+    return (
+      <Router>
+        <div>
+        <Route exact path='/image' component={Image} />
+          <header>
+            <Link to='/'><h1>em<img className='logo-o' src='../../assets/images/logo-o.png' alt='o' />t<span className='logo-i'>i</span>can</h1></Link>
+            <Route path='/' component={NavBar}/>
+          </header>
+            <Route exact path='/instructions' component={Instructions}/>
+            <Route exact path='/' component={Play}/>
+            <Route path='/learn' component={Learn} />
+        </div>
+      </Router>
+    )
+  }
+}
+
+export default App;

app/components/App/App.test.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<App />, div);
+});

app/components/EmotionResults/EmotionResults.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const EmotionResults = () => {
+  return (
+    <div>Emotion results go here</div>
+  )
+}

app/components/ImageCapture/ImageCapture.js

@@ -0,0 +1,110 @@
+import React, { Component } from 'react';
+
+export default class ImageCapture extends Component {
+  constructor(props) {
+    super()
+    this.state = {
+      constraints: { audio: false, video: { width: 300, height: 350, facingMode: 'user' } }
+    }
+  }
+
+  beginImageCapture() {
+    navigator.mediaDevices.getUserMedia(this.state.constraints)
+    .then((mediaStream) => {
+      const video = document.querySelector('video');
+      video.srcObject = mediaStream;
+      video.onloadedmetadata = (e) => {
+        video.play();
+      };
+    })
+    .catch((error) => {
+      console.log('Problem capturing image: ', error)
+    });
+  }
+
+  endImageCapture() {
+console.log('trying to stop video');
+    const video = document.querySelector('video');
+    video.pause();
+  }
+
+  storeData(faceURL) {
+    const headers = {
+      "method": "POST",
+      "hostname": "api.imgur.com",
+      "port": null,
+      "path": "/3/image",
+      "headers": {
+        "//authorization": "Client-ID 10c0cf1412fad3",
+        "authorization": "Bearer 7887599b4a9c2cec883836f79b9612f772bb4a01"
+      }
+    }
+
+    const body = {
+      "image": `'${faceURL}'`,
+      "album": "{M5OtG}",
+      "name": 'face.png',
+      "type": 'url'
+    }
+
+    const request = {
+      "method": "POST",
+      "headers": headers,
+      "body": body
+    }
+
+    fetch('https://api.imgur.com/3/image', request)
+      .then(resp => resp.json())
+      .then(data => {
+        console.log(data.link);
+      // this.props.analyzeEmotions(faceURL);
+      })
+      .catch(error => console.log('error posting to imgur: ', error))
+  }
+
+  takeSnapshot(video, ctx, canvas) {
+    if (video) {
+      ctx.drawImage(video, 350, 20, 600, 700, 0, 0, 300, 350);
+      this.endImageCapture(video);
+      canvas.toBlob((blob) => {
+          let newImg = document.createElement('img');
+          let att = document.createAttribute("class");
+          att.value = "user-image";
+          newImg.setAttributeNode(att);
+          let url = URL.createObjectURL(blob);
+
+          newImg.onload = () =>{
+              URL.revokeObjectURL(url);
+            };
+
+            newImg.src = url;
+            document.body.appendChild(newImg);
+        const faceURL = document.querySelector('.user-image').src;
+  console.log(faceURL);
+        })
+        // this.storeData(faceURL);
+    }
+  }
+
+  captureImage() {
+    const video = document.querySelector('video');
+    const canvas = document.querySelector('canvas');
+    const ctx = canvas.getContext('2d');
+    this.takeSnapshot(video, ctx, canvas);
+  }
+
+  render() {
+    return (
+      <article className='image-capture'>
+        <button onClick={() => this.beginImageCapture()}>Start video</button>
+        <video autoPlay muted='true' height='350px' width='300px'></video>
+        <div className='face-oval'></div>
+        <button className='take-picture'
+                onClick={() => this.captureImage()}>
+          take picture
+        </button>
+        <canvas height='350px' width='300px' hidden></canvas>
+      </article>
+    )
+  }
+}

app/components/Instructions/Instructions.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const Instructions = () => {
+  return (
+    <div>Instructions go here</div>
+  )
+}

app/components/Learn/Learn.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const Learn = () => {
+  return (
+    <div>Learn goes here</div>
+  )
+}

app/components/NavBar/NavBar.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+
+export const NavBar = () => {
+
+  const styleActive = () => {
+    return (
+      {
+        fontWeight: 700,
+        color: 'rgba(246, 193, 160, 100)',
+        borderBottom: '4px solid rgba(246, 193, 160, 100)'
+      }
+    )
+  }
+
+  return (
+    <nav>
+      <ul>
+        <li>
+          <NavLink
+            to="/instructions"
+            activeStyle={styleActive()}>
+              instructions
+          </NavLink>
+        </li>
+        <li>
+          <NavLink
+            exact
+            to="/"
+            activeStyle={styleActive()}>
+              play
+          </NavLink>
+        </li>
+        <li>
+          <NavLink
+            to="/learn"
+            activeStyle={styleActive()}>
+              learn
+          </NavLink>
+        </li>
+      </ul>
+    </nav>
+  )
+}

app/components/PickEmotion/PickEmotion.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const PickEmotion = () => {
+  return (
+    <div>Pick Emotion goes here</div>
+  )
+}