wizelineacademy · RogFed · Jul 6, 2018 · Jul 6, 2018 · Jul 6, 2018 · Jul 6, 2018
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,8 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^0.18.0",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
+    "react-router-dom": "^4.3.1",
     "react-scripts": "1.1.1"
   },
   "jest": {

diff --git a/public/index.html b/public/index.html
@@ -19,7 +19,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Giphy Client / @RogFed</title>
   </head>
   <body>
     <noscript>

diff --git a/src/App.css b/src/App.css
@@ -1,28 +1,43 @@
-.App {
-  text-align: center;
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
+html {
+  font-size: 62.5%;
 }
 
-.App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
-  color: white;
+body {
+  font-size: 1.6rem;
+  background: #0C120C;
 }
 
-.App-title {
-  font-size: 1.5em;
+.HomeView {
+  padding: 1vh 1vw;
 }
 
-.App-intro {
-  font-size: large;
+.SearchBar input {
+  width: 100%;
+  padding: 2vh 1vw;
+  background: #3C6997;
+  border: none;
+  border-radius: 5px;
+  font-size: 2rem;
 }
 
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+.SearchBar input::-webkit-input-placeholder {
+  color: #000;
 }
+
+.DisplayGifs {
+  padding: 3vh 1vw;
+  color: #F2C812;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.SingleGif {
+  flex-basis: 30%;
+  margin: 1vh 1vw;
+}
diff --git a/src/App.js b/src/App.js
@@ -1,19 +1,24 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
+//Import Route and Switch Components from react-router-dom
+import { Route, Switch } from 'react-router-dom';
 import './App.css';
 
+//Import Components
+import HomeView from './components/HomeView';
+import FavouritesView from './components/FavouritesView';
+
 class App extends Component {
   render() {
     return (
-      <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <h1 className="App-title">Welcome to React</h1>
-        </header>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
-      </div>
+      /**
+       * Add a Switch Component to ensure only ONE match
+       * Add a HomeView Route -> This will serve as our Homepage
+       * Add a FavouritesView Route -> This will render our FavouritesView
+       */
+      <Switch>
+        <Route path='/favourites' component={FavouritesView} />
+        <Route path='/' component={HomeView} />
+      </Switch>
     );
   }
 }

diff --git a/src/api/index.js b/src/api/index.js
@@ -0,0 +1,6 @@
+const giphyAPI = {
+    API_KEY: 'Sa7XeM55KtWebQ4JSASjAax5mDscbodO',
+    URL: 'https://api.giphy.com/v1/gifs/trending'
+}
+
+export default giphyAPI;
diff --git a/src/components/FavouritesView.js b/src/components/FavouritesView.js
@@ -0,0 +1,13 @@
+/**
+ * FavouritesView Component
+ */
+
+import React from 'react';
+
+const FavouritesView = () => {
+    return (
+        <h1>FavouritesView</h1>
+    );
+}
+
+export default FavouritesView;
diff --git a/src/components/HomeView.js b/src/components/HomeView.js
@@ -0,0 +1,20 @@
+/**
+ * HomeView Component
+ */
+
+import React from 'react';
+
+//Import Components
+import SearchBar from './home/SearchBar';
+import DisplayGifs from './home/DisplayGifs';
+
+const HomeView = () => {
+    return (
+        <section className="HomeView">
+            <SearchBar />
+            <DisplayGifs />
+        </section>
+    );
+}
+
+export default HomeView;
diff --git a/src/components/home/DisplayGifs.js b/src/components/home/DisplayGifs.js
@@ -0,0 +1,68 @@
+/**
+ * DisplayGifs Component
+ */
+
+import React, { Component, Fragment } from 'react';
+import axios from 'axios';
+
+import SingleGif from './SingleGif';
+
+//import API Request Data
+import API_DATA from '../../api';
+
+export default class DisplayGifs extends Component {
+
+    constructor(props){
+        super(props);
+
+        this.state = {
+            gifs: {}
+        }
+    }
+
+    componentDidMount(){
+        this.sendGiphyRequest(API_DATA);
+    }
+
+    sendGiphyRequest = (data) => {
+        const { API_KEY, URL } = data;
+
+        axios({
+            method: 'get',
+            url: URL,
+            params: {
+                api_key: API_KEY
+            }
+        }).then( res => {
+            this.setState( () => {
+                return { gifs: res.data };
+            } );
+        } ).catch( err => {
+            console.log(err);
+        } );
+    }
+
+    renderSingleGif = () => {
+        const gifs = this.state.gifs.data;
+        if(!gifs){
+            return;
+        }
+
+        let singleGif = gifs.map( (gif) => {
+            const { embed_url, title, id } = gif;
+            return <SingleGif url={embed_url} title={title} key={id} />;
+        } );
+
+        return singleGif;
+    }
+
+    render(){
+        return (
+            <section className="DisplayGifs">
+                <Fragment>
+                    {this.renderSingleGif()}
+                </Fragment>
+            </section>
+        );
+    }
+}
diff --git a/src/components/home/SearchBar.js b/src/components/home/SearchBar.js
@@ -0,0 +1,36 @@
+/**
+ * SearchBar Component
+ */
+
+import React, { Component } from 'react';
+
+/**
+ * SearchBar Component becomes a class based component to handle its value state
+ */
+
+export default class SearchBar extends Component {
+    constructor(props){
+        super(props);
+
+        this.state = {
+            term: ""
+        }
+    }
+
+    onTermChange = (e) => {
+        const targetElement = e.target;
+        const newValue = targetElement.value;
+
+        this.setState( () => {
+            return { term: newValue }
+        } );
+    }
+
+    render(){
+        return (
+            <section className="SearchBar">
+                <input type="text" value={this.state.term} onChange={ this.onTermChange } placeholder="Search Giphy:" />
+            </section>
+        );
+    };
+}
diff --git a/src/components/home/SingleGif.js b/src/components/home/SingleGif.js
@@ -0,0 +1,18 @@
+/**
+ * SingleGif Component
+ */
+
+ import React from 'react';
+
+ const SingleGif = (props) => {
+    return (
+        <div className="SingleGif">
+            <div style={{ 'width': '100%', 'height': '0', 'paddingBottom': '100%', 'position': 'relative' }}>
+                <iframe src={props.url} width="100%" height="100%" 
+                style={{ 'position': 'absolute' }} frameBorder="0" className="giphy-embed" allowFullScreen title={props.title}></iframe>
+            </div>
+        </div>
+    );
+}
+
+export default SingleGif;
diff --git a/src/index.js b/src/index.js
@@ -3,6 +3,10 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import registerServiceWorker from './registerServiceWorker';
+//Import BrowserRouter from react-router-dom
+import { BrowserRouter as Router } from 'react-router-dom';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(
+<Router><App /></Router>, 
+document.getElementById('root'));
 registerServiceWorker();