Merge pull request #1 from thenderson55/api

Heroku approves, so merging.

Author: ben-dyer

server.js

@@ -4,7 +4,7 @@ const app = express();
 
 app.use(express.static(path.join(`${__dirname}/build`)));
 
-const port = process.env.PORT || 3000;
+const port = process.env.PORT || 5000;
 
 const server = app.listen(port,()=>{
   process.stdout.write(`App listening on port ${port}!\n Press CTR C to stop the server`)

src/App.js

@@ -1,12 +1,14 @@
 import React from 'react';
 import logo from './logo.svg';
+import ChucksJoke from './ChucksJoke'
 import './App.css';
 
 function App() {
   return (
     <div className="App">
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
+        <ChucksJoke />
         <p>
           Edit <code>src/App.js</code> and save to reload.
         </p>

src/ChucksJoke.js

@@ -0,0 +1,50 @@
+import React from "react";
+
+export default class ApiOne extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      joke: []
+    };
+  }
+
+  componentDidMount() {
+    const myHeaders = new Headers();
+    myHeaders.append(
+      "X-RapidAPI-Host",
+      "matchilling-chuck-norris-jokes-v1.p.rapidapi.com"
+    );
+    myHeaders.append(
+      "X-RapidAPI-Key",
+      "5456615b4cmsh40eaeb350692ccep17bbe1jsn2758aaa3f720"
+    );
+    myHeaders.append("accept", "application/json");
+
+    const myInit = { method: "GET", headers: myHeaders };
+
+    const myRequest = new Request(
+      "https://matchilling-chuck-norris-jokes-v1.p.rapidapi.com/jokes/random",
+      myInit
+    );
+
+    fetch(myRequest)
+      .then(res => res.json())
+      .then(data =>
+        this.setState({
+          joke: data.value
+        })
+      );
+  }
+
+  render() {
+    return (
+      <div className="container">
+        <h1>
+          Ready to have your mind blown and be destroyed by a single Chuck
+          Norris joke!
+        </h1>
+        <h2>{this.state.joke}</h2>
+      </div>
+    );
+  }
+}