Alex Mireles patch - thank you

reactjs/components/Gallery/index.js

@@ -0,0 +1,32 @@
+import PropTypes from 'prop-types';
+
+function Gallery(props) {
+  const content = props.giphyData.map((img) =>
+    <div key={img.id}>
+      <div className="col-sm-6 col-md-4 m-2">
+        <div className="card" style={ { width:"18rem", height:"18rem" } }>
+          <img src={img.images.fixed_height.url} alt={img.title}/>
+          <div className="card-body mt-1">
+            <h6 className="card-title text-sm-center text-uppercase">{img.title}</h6>
+          </div>
+        </div>
+
+      </div>
+    </div>
+);
+return (
+  <section>
+    <div className="container">
+      <div className="row my-5">
+        <div className="row justify-content-center">{content}</div>
+      </div>
+    </div>
+  </section>
+ )
+}
+
+Gallery.propTypes = {
+  content: PropTypes.array
+}
+
+export default Gallery;

reactjs/components/HtmlHead/index.js

@@ -25,6 +25,7 @@ SystemSeed Technical Assessment
       <meta name="viewport" content="width=device-width, initial-scale=1" />
       <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
       <link rel="shortcut icon" href="/static/favicon.ico" type="image/vnd.microsoft.icon" />
+      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
       {stylesheets}
     </Head>
   );

reactjs/package.json

@@ -3,15 +3,19 @@
   "version": "1.1.0",
   "license": "MIT",
   "dependencies": {
+    "axios": "^0.18.0",
+    "bootstrap": "^4.1.3",
     "compression": "^1.7.3",
     "express": "^4.16.3",
+    "isomorphic-unfetch": "^3.0.0",
     "next": "^7.0.2",
     "next-redux-saga": "^3.0.0-beta.1",
     "next-redux-wrapper": "^2.0.0",
     "node-sass": "^4.9.2",
     "node-sass-glob-importer": "^5.2.0",
     "nprogress": "^0.2.0",
     "prop-types": "^15.6.2",
+    "random-words": "^1.1.0",
     "raw-loader": "^0.5.1",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",

reactjs/pages/_app.js

@@ -6,6 +6,8 @@ import withReduxSaga from 'next-redux-saga';
 import HtmlHead from '../components/HtmlHead';
 import configureStore from '../store/store';
 import '../components/PageProgressBar'; // Beautiful page transition indicator.
+import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
+
 
 class Application extends App {
   static async getInitialProps({ Component, ctx }) {

reactjs/pages/index.js

@@ -1,16 +1,54 @@
 import React from 'react';
-import HelloFriend from '../components/HelloFriend';
+import Link from 'next/link';
+import {connect} from 'react-redux';
+import PropTypes from 'prop-types';
+
+import Gallery from '../components/Gallery';
 
 class Page extends React.Component {
-  static async getInitialProps() {
-    return {
-      name: 'value',
-    };
+
+  componentDidMount() {
+    this.props.dispatch({type: 'API_CALL_REQUEST'});
+    this.interval = setInterval(() => {
+      this.props.dispatch({type: 'API_CALL_REQUEST'});
+    }, 5000);
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.interval)
   }
 
   render() {
-    return <HelloFriend />;
+    const giphys = this.props.imageData;
+    return (
+      <div>
+        <div className="jumbotron">
+          <div className="row justify-content-center mb-3">
+            <h1>Alex Mireles</h1>
+          </div>
+          <div className="row justify-content-center">
+            <button  type="button" className="btn btn-dark">
+              <Link href="/pageTwo"><a style={{color:"#fff"}}>Next</a></Link>
+            </button>
+          </div>
+        </div>
+        <div className="container">
+          <Gallery giphyData={giphys} />
+
+        </div>
+      </div>
+    );
+  }
+}
+
+Page.propTypes = {
+  imageData: PropTypes.array
+}
+
+function mapStateToProps(state) {
+  return {
+    imageData: state.giphy.images.data,
   }
 }
 
-export default Page;
+export default connect(mapStateToProps)(Page);

reactjs/pages/pageTwo.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import Link from 'next/link';
+import {connect} from 'react-redux';
+import PropTypes from 'prop-types';
+
+import Gallery from '../components/Gallery';
+
+class PageTwo extends React.Component {
+
+  componentDidMount() {
+    this.props.dispatch({type: 'API_CALL_REQUEST'});
+    this.interval = setInterval(() => {
+      this.props.dispatch({type: 'API_CALL_REQUEST'});
+    }, 5000);
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.interval)
+  }
+
+  render() {
+    const giphys = this.props.imageData;
+    return (
+      <div>
+        <div className="jumbotron">
+          <div className="row justify-content-center mb-3">
+            <h1>Alex Mireles</h1>
+          </div>
+          <div className="row justify-content-center">
+            <button  type="button" className="btn btn-dark">
+              <Link href="/index"><a style={{color:"#fff"}}>Prev</a></Link>
+            </button>
+          </div>
+        </div>
+        <div className="container">
+          <Gallery giphyData={giphys}/>
+        </div>
+      </div>
+    );
+  }
+}
+
+PageTwo.propTypes = {
+  imageData: PropTypes.array
+}
+
+function mapStateToProps(state) {
+  return {
+    imageData: state.giphy.images.data,
+  }
+}
+
+export default connect(mapStateToProps)(PageTwo);

reactjs/store/actions/giphy.js

@@ -0,0 +1,23 @@
+export const API_CALL_REQUEST = "API_CALL_REQUEST";
+export const API_CALL_SUCCESS = "API_CALL_SUCCESS";
+export const API_CALL_FAILURE = "API_CALL_FAILURE";
+
+export function requestImages() {
+  return {
+    type: API_CALL_REQUEST
+  };
+}
+
+export function loadImages(images) {
+  return {
+    type: API_CALL_SUCCESS,
+    images
+  };
+}
+
+export function fetchImagesFail(error) {
+  return {
+    type: API_CALL_FAILURE,
+    error
+  };
+}

reactjs/store/reducers/giphy.js

@@ -0,0 +1,20 @@
+import {API_CALL_REQUEST, API_CALL_SUCCESS, API_CALL_FAILURE, INCREMENT} from '../actions/giphy';
+
+const defaultState = {
+  images: [],
+  isFetching: false,
+  error: false
+}
+
+export default function images(state = {defaultState}, action) {
+  switch(action.type) {
+    case API_CALL_REQUEST:
+      return {...state, error: false, isFetching: true};
+    case API_CALL_SUCCESS:
+      return {...state, error: false, images: action.images, isFetching: false} ;
+    case API_CALL_FAILURE:
+      return {...state, error: true, isFetching: false};
+    default:
+      return state;
+  }
+}

reactjs/store/reducers/index.js

@@ -1,7 +1,9 @@
 import { combineReducers } from 'redux';
 // Put all your reducers here.
 import example from './example';
+import giphy from './giphy';
 
 export default combineReducers({
   example,
+  giphy,
 });

reactjs/store/sagas/giphy.js

@@ -0,0 +1,33 @@
+import { all, takeLatest, call, put } from 'redux-saga/effects';
+import axios from 'axios';
+
+import { API_CALL_REQUEST, API_CALL_SUCCESS, API_CALL_FAILURE, API_CALL_FETCHED } from '../actions/giphy';
+
+function apiFetch() {
+  let randomWord = require('random-words');
+  let API_ENDPOINT = `https://api.giphy.com/v1/gifs/search?api_key=h6q9hI50TiiUqR8F5D4aGBm2Gqiny0jG&q=${randomWord()}&limit=12`;
+   return axios({
+     method: "get",
+     url: API_ENDPOINT
+   });
+}
+
+export function* fetchImages() {
+  try {
+      const res = yield call(apiFetch)
+      //const res = yield call(() => axios.get(API_ENDPOINT))
+      const images = yield res.data
+      yield put({type: API_CALL_SUCCESS, images})
+
+    } catch (e) {
+      yield put({type: API_CALL_FAILURE, e})
+      console.log('Error fetching giphy data')
+    }
+}
+
+export default function* giphySaga() {
+  yield all([
+    yield takeLatest(API_CALL_REQUEST, fetchImages),
+    yield call(fetchImages)
+  ]);
+}

reactjs/store/sagas/index.js

@@ -1,9 +1,11 @@
 import { all } from 'redux-saga/effects';
 // Put all your sagas here.
 import exampleSagas from './example';
+import giphySaga from './giphy';
 
 export default function* rootSaga() {
   yield all([
     ...exampleSagas(),
+    ...giphySaga(),
   ]);
 }