dot env added

.gitignore

@@ -17,6 +17,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.env
 
 npm-debug.log*
 yarn-debug.log*

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "axios": "^0.18.0",
+    "dotenv": "^8.0.0",
     "express": "^4.17.0",
     "nodemon": "^1.19.0",
     "path": "^0.12.7",
@@ -17,7 +18,7 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "server": "nodemon server.js",
-    "start":"node server.js"
+    "start": "node server.js"
   },
   "eslintConfig": {
     "extends": "react-app"

public/index.html

@@ -10,6 +10,8 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
+
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

src/App.css

@@ -7,6 +7,11 @@
   height: 40vmin;
   pointer-events: none;
 }
+.App-logo-small {
+  animation: App-logo-spin infinite 20s linear;
+  height: 20vmin;
+  pointer-events: none;
+}
 
 .App-header {
   background-color: #282c34;

src/App.js

@@ -1,24 +1,29 @@
 import React from 'react';
 import logo from './logo.svg';
 import ChucksJoke from './ChucksJoke'
+import Quote from './Quote'
+import SkyScanner from './SkyScanner'
+import Chuck from './assets/chuck.jpg'
 import './App.css';
 
+
 function App() {
   return (
     <div className="App">
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
+        <Quote />
+        <img src={Chuck} className="animated fadeInLeftBig delay-2s" alt="cuck"  />
         <ChucksJoke />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
+        <img src={logo} className="App-logo-small" alt="logo" />
+        <SkyScanner />
         <a
           className="App-link"
           href="https://reactjs.org"
           target="_blank"
           rel="noopener noreferrer"
         >
-         Team Cobra gogogogogo!!!
+         Team Cobra - Saviours of the Universe!!!
         </a>
       </header>
     </div>

src/ChucksJoke.js

@@ -1,6 +1,8 @@
 import React from "react";
+require('dotenv').config()
 
-export default class ApiOne extends React.Component {
+
+export default class ChucksJoke extends React.Component {
   constructor() {
     super();
     this.state = {
@@ -16,7 +18,8 @@ export default class ApiOne extends React.Component {
     );
     myHeaders.append(
       "X-RapidAPI-Key",
-      "5456615b4cmsh40eaeb350692ccep17bbe1jsn2758aaa3f720"
+
+      process.env.REACT_APP_API_RAPID
     );
     myHeaders.append("accept", "application/json");
 

src/Quote.js

@@ -0,0 +1,46 @@
+import React from "react";
+require('dotenv').config()
+console.log(process.env)
+
+
+export default class Quote extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      quote: []
+    };
+  }
+
+  componentDidMount() {
+    const myHeadersOne = new Headers();
+    myHeadersOne.append(
+      "X-RapidAPI-Host", "andruxnet-random-famous-quotes.p.rapidapi.com"
+    );
+    myHeadersOne.append(
+      "X-RapidAPI-Key", process.env.REACT_APP_API_RAPID
+    );
+
+    const myInit = { method: "GET", headers: myHeadersOne };
+
+    const myRequestOne = new Request(
+      "https://andruxnet-random-famous-quotes.p.rapidapi.com/?cat=famous&count=1",
+      myInit
+    );
+
+    fetch(myRequestOne)
+      .then(res => res.json())
+      .then(data =>
+        this.setState({
+          quote: data[0].quote
+        })
+      );
+  }
+
+  render() {
+    return (
+      <div className="container">
+        <h2>{this.state.quote}</h2>
+      </div>
+    );
+  }
+}

src/SkyScanner.js

@@ -0,0 +1,53 @@
+import React from "react";
+require('dotenv').config()
+
+
+export default class SkyScanner extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      minPrice: [],
+      departure: '',
+      arrival: ''
+    };
+  }
+
+  componentDidMount() {
+    const myHeadersOne = new Headers();
+    myHeadersOne.append(
+      "X-RapidAPI-Host", "skyscanner-skyscanner-flight-search-v1.p.rapidapi.com"
+    );
+    myHeadersOne.append(
+      "X-RapidAPI-Key", process.env.REACT_APP_API_RAPID
+    );
+
+    const myInit = { method: "GET", headers: myHeadersOne };
+
+    const myRequestOne = new Request(
+      "https://skyscanner-skyscanner-flight-search-v1.p.rapidapi.com/apiservices/browsequotes/v1.0/US/USD/en-US/SFO-sky/JFK-sky/2019-10-01?inboundpartialdate=2019-09-01",
+      myInit
+    );
+
+    fetch(myRequestOne)
+      .then(res => res.json())
+      .then(data =>
+        this.setState({
+          minPrice: data.Quotes[0].MinPrice,
+          departure: data.Places[0].Name,
+          arrival: data.Places[1].Name
+        })
+      );
+
+  }
+
+  render() {
+    return (
+      <div className="container">
+
+        <h2>{this.state.departure}  to  {this.state.arrival}- £{this.state.minPrice}</h2>
+      </div>
+    );
+  }
+}
+
+

yarn.lock

@@ -3475,6 +3475,11 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-6.2.0.tgz#941c0410535d942c8becf28d3f357dbd9d476064"
   integrity sha512-HygQCKUBSFl8wKQZBSemMywRWcEDNidvNbjGVyZu3nbZ8qq9ubiPoGLMdRDpfSrpkkm9BXYFkpKxxFX38o/76w==
 
+dotenv@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.0.0.tgz#ed310c165b4e8a97bb745b0a9d99c31bda566440"
+  integrity sha512-30xVGqjLjiUOArT4+M5q9sYdvuR4riM6yK9wMcas9Vbp6zZa+ocC9dp6QoftuhTPhFAiLK/0C5Ni2nou/Bk8lg==
+
 duplexer3@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/duplexer3/-/duplexer3-0.1.4.tgz#ee01dd1cac0ed3cbc7fdbea37dc0a8f1ce002ce2"