Challenge (Diego Plascencia)

.env.example

@@ -0,0 +1 @@
+REACT_APP_GIPHY_API_KEY=OWyGqcD3SWfggMMzdErRe9yHvasf2BBq

.gitignore

@@ -11,6 +11,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

package.json

@@ -5,12 +5,27 @@
   "dependencies": {
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
-    "react-scripts": "1.1.1"
+    "react-redux": "^5.0.7",
+    "react-router-dom": "^4.3.1",
+    "react-scripts": "1.1.1",
+    "redux": "^4.0.0",
+    "redux-actions": "^2.4.0",
+    "redux-localstorage": "^0.4.1",
+    "redux-saga": "^0.16.0",
+    "styled-components": "^3.3.3"
   },
   "jest": {
+    "snapshotSerializers": [
+      "enzyme-to-json/serializer"
+    ],
     "collectCoverageFrom": [
       "**/src/**/*.{js,jsx}",
-      "!**/src/registerServiceWorker.{js,jsx}"
+      "!**/src/**/setupTests.js",
+      "!**/src/index.js",
+      "!**/src/enhancers/*.js",
+      "!**/src/middleware/logger.js",
+      "!**/src/registerServiceWorker.js",
+      "!**/src/global.styled.js"
     ],
     "coverageThreshold": {
       "global": {
@@ -31,6 +46,10 @@
   },
   "devDependencies": {
     "enzyme": "^3.3.0",
-    "enzyme-adapter-react-16": "^1.1.1"
+    "enzyme-adapter-react-16": "^1.1.1",
+    "enzyme-to-json": "^3.3.4",
+    "jest-enzyme": "^6.0.2",
+    "jest-styled-components": "^5.0.1",
+    "redux-devtools-extension": "^2.13.5"
   }
 }

public/index.html

@@ -10,6 +10,9 @@
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
+
     <!--
       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.js

@@ -1,19 +1,15 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
-import './App.css';
+import { Route, Switch } from 'react-router-dom';
+import Home from './components/Home';
+import Favorites from './components/Favorites';
 
 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>
+      <Switch>
+        <Route exact path="/" component={Home} />
+        <Route path="/favorites" component={Favorites} />
+      </Switch>
     );
   }
 }

src/App.test.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import App from './App';
+
+describe('App', () => {
+  test('App', () => {
+    const appComponent = shallow(<App />);
+    expect(appComponent).toMatchSnapshot();
+  })
+})

src/__snapshots__/App.test.js.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`App App 1`] = `
+<Switch>
+  <Route
+    component={[Function]}
+    exact={true}
+    path="/"
+  />
+  <Route
+    component={[Function]}
+    path="/favorites"
+  />
+</Switch>
+`;

src/actions/__snapshots__/favorites.test.js.snap

@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`giphyApi Actions toggleFavoriteGif 1`] = `
+Object {
+  "payload": Object {
+    "gif": Object {
+      "8FMLOqBX3TwBxnKbrA": Object {
+        "id": "8FMLOqBX3TwBxnKbrA",
+        "images": Object {
+          "fixed_width": Object {
+            "height": "112",
+            "mp4": "https://media2.giphy.com/media/8FMLOqBX3TwBxnKbrA/200w.mp4",
+            "mp4_size": "142753",
+            "size": "739715",
+            "url": "https://media2.giphy.com/media/8FMLOqBX3TwBxnKbrA/200w.gif",
+            "webp": "https://media2.giphy.com/media/8FMLOqBX3TwBxnKbrA/200w.webp",
+            "webp_size": "265118",
+            "width": "200",
+          },
+        },
+        "slug": "ellamai-ella-mai-bood-up-8FMLOqBX3TwBxnKbrA",
+        "type": "gif",
+      },
+    },
+  },
+  "type": "TOGGLE_FAVORITE_GIF",
+}
+`;

src/actions/__snapshots__/giphyApi.test.js.snap

@@ -0,0 +1,99 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`giphyApi Actions fetchTrendingGifs 1`] = `
+Object {
+  "payload": Object {
+    "page": 0,
+    "search": "funny",
+  },
+  "type": "FETCH_TRENDING_GIFS",
+}
+`;
+
+exports[`giphyApi Actions receiveNextPageTrendingGifs 1`] = `
+Object {
+  "payload": Object {
+    "gifs": Object {
+      "7vzoRu05YJp2pFMd24": Object {
+        "id": "7vzoRu05YJp2pFMd24",
+        "images": Object {
+          "fixed_width": Object {
+            "height": "112",
+            "mp4": "https://media2.giphy.com/media/7vzoRu05YJp2pFMd24/200w.mp4",
+            "mp4_size": "68902",
+            "size": "361247",
+            "url": "https://media2.giphy.com/media/7vzoRu05YJp2pFMd24/200w.gif",
+            "webp": "https://media2.giphy.com/media/7vzoRu05YJp2pFMd24/200w.webp",
+            "webp_size": "122550",
+            "width": "200",
+          },
+        },
+        "slug": "ellamai-ella-mai-bood-up-7vzoRu05YJp2pFMd24",
+        "type": "gif",
+      },
+      "8FMLOqBX3TwBxnKbrA": Object {
+        "id": "8FMLOqBX3TwBxnKbrA",
+        "images": Object {
+          "fixed_width": Object {
+            "height": "112",
+            "mp4": "https://media2.giphy.com/media/8FMLOqBX3TwBxnKbrA/200w.mp4",
+            "mp4_size": "142753",
+            "size": "739715",
+            "url": "https://media2.giphy.com/media/8FMLOqBX3TwBxnKbrA/200w.gif",
+            "webp": "https://media2.giphy.com/media/8FMLOqBX3TwBxnKbrA/200w.webp",
+            "webp_size": "265118",
+            "width": "200",
+          },
+        },
+        "slug": "ellamai-ella-mai-bood-up-8FMLOqBX3TwBxnKbrA",
+        "type": "gif",
+      },
+    },
+  },
+  "type": "RECEIVE_NEXT_PAGE_TRENDING_GIFS",
+}
+`;
+
+exports[`giphyApi Actions receiveTrendingGifs 1`] = `
+Object {
+  "payload": Object {
+    "gifs": Object {
+      "7vzoRu05YJp2pFMd24": Object {
+        "id": "7vzoRu05YJp2pFMd24",
+        "images": Object {
+          "fixed_width": Object {
+            "height": "112",
+            "mp4": "https://media2.giphy.com/media/7vzoRu05YJp2pFMd24/200w.mp4",
+            "mp4_size": "68902",
+            "size": "361247",
+            "url": "https://media2.giphy.com/media/7vzoRu05YJp2pFMd24/200w.gif",
+            "webp": "https://media2.giphy.com/media/7vzoRu05YJp2pFMd24/200w.webp",
+            "webp_size": "122550",
+            "width": "200",
+          },
+        },
+        "slug": "ellamai-ella-mai-bood-up-7vzoRu05YJp2pFMd24",
+        "type": "gif",
+      },
+      "8FMLOqBX3TwBxnKbrA": Object {
+        "id": "8FMLOqBX3TwBxnKbrA",
+        "images": Object {
+          "fixed_width": Object {
+            "height": "112",
+            "mp4": "https://media2.giphy.com/media/8FMLOqBX3TwBxnKbrA/200w.mp4",
+            "mp4_size": "142753",
+            "size": "739715",
+            "url": "https://media2.giphy.com/media/8FMLOqBX3TwBxnKbrA/200w.gif",
+            "webp": "https://media2.giphy.com/media/8FMLOqBX3TwBxnKbrA/200w.webp",
+            "webp_size": "265118",
+            "width": "200",
+          },
+        },
+        "slug": "ellamai-ella-mai-bood-up-8FMLOqBX3TwBxnKbrA",
+        "type": "gif",
+      },
+    },
+  },
+  "type": "RECEIVE_TRENDING_GIFS",
+}
+`;

src/actions/favorites.js

@@ -0,0 +1,12 @@
+import { createActions } from 'redux-actions';
+
+const TOGGLE_FAVORITE_GIF = 'TOGGLE_FAVORITE_GIF';
+
+const { toggleFavoriteGif } = createActions({
+  [TOGGLE_FAVORITE_GIF]: (gif) => ({ gif }),
+});
+
+export {
+  toggleFavoriteGif,
+}
+

src/actions/favorites.test.js

@@ -0,0 +1,27 @@
+import { toggleFavoriteGif } from './favorites';
+
+describe('giphyApi Actions', () => {
+  const mockGifData = {
+    '8FMLOqBX3TwBxnKbrA': {
+      "type": "gif",
+      "id": "8FMLOqBX3TwBxnKbrA",
+      "slug": "ellamai-ella-mai-bood-up-8FMLOqBX3TwBxnKbrA",
+      "images": {
+        "fixed_width": {
+          "url": "https://media2.giphy.com/media/8FMLOqBX3TwBxnKbrA/200w.gif",
+          "width": "200",
+          "height": "112",
+          "size": "739715",
+          "mp4": "https://media2.giphy.com/media/8FMLOqBX3TwBxnKbrA/200w.mp4",
+          "mp4_size": "142753",
+          "webp": "https://media2.giphy.com/media/8FMLOqBX3TwBxnKbrA/200w.webp",
+          "webp_size": "265118"
+        }
+      }
+    }
+  };
+
+  test('toggleFavoriteGif', () => {
+    expect(toggleFavoriteGif(mockGifData)).toMatchSnapshot();
+  });
+})

src/actions/giphyApi.js

@@ -0,0 +1,17 @@
+import { createActions } from 'redux-actions';
+
+const FETCH_TRENDING_GIFS = 'FETCH_TRENDING_GIFS';
+const RECEIVE_TRENDING_GIFS = 'RECEIVE_TRENDING_GIFS';
+const RECEIVE_NEXT_PAGE_TRENDING_GIFS = 'RECEIVE_NEXT_PAGE_TRENDING_GIFS';
+
+const { fetchTrendingGifs, receiveTrendingGifs, receiveNextPageTrendingGifs } = createActions({
+  [FETCH_TRENDING_GIFS]: (search = '', page = 0) => ({ search, page }),
+  [RECEIVE_TRENDING_GIFS]: (gifs) => ({ gifs }),
+  [RECEIVE_NEXT_PAGE_TRENDING_GIFS]: (gifs) => ({ gifs }),
+});
+
+export {
+  fetchTrendingGifs,
+  receiveTrendingGifs,
+  receiveNextPageTrendingGifs,
+}

src/actions/giphyApi.test.js

@@ -0,0 +1,52 @@
+import { receiveNextPageTrendingGifs, receiveTrendingGifs, fetchTrendingGifs } from './giphyApi';
+
+describe('giphyApi Actions', () => {
+  const mockGifsData = {
+    '8FMLOqBX3TwBxnKbrA': {
+      "type": "gif",
+      "id": "8FMLOqBX3TwBxnKbrA",
+      "slug": "ellamai-ella-mai-bood-up-8FMLOqBX3TwBxnKbrA",
+      "images": {
+        "fixed_width": {
+          "url": "https://media2.giphy.com/media/8FMLOqBX3TwBxnKbrA/200w.gif",
+          "width": "200",
+          "height": "112",
+          "size": "739715",
+          "mp4": "https://media2.giphy.com/media/8FMLOqBX3TwBxnKbrA/200w.mp4",
+          "mp4_size": "142753",
+          "webp": "https://media2.giphy.com/media/8FMLOqBX3TwBxnKbrA/200w.webp",
+          "webp_size": "265118"
+        }
+      }
+    },
+    "7vzoRu05YJp2pFMd24": {
+      "type": "gif",
+      "id": "7vzoRu05YJp2pFMd24",
+      "slug": "ellamai-ella-mai-bood-up-7vzoRu05YJp2pFMd24",
+      "images": {
+        "fixed_width": {
+          "url": "https://media2.giphy.com/media/7vzoRu05YJp2pFMd24/200w.gif",
+          "width": "200",
+          "height": "112",
+          "size": "361247",
+          "mp4": "https://media2.giphy.com/media/7vzoRu05YJp2pFMd24/200w.mp4",
+          "mp4_size": "68902",
+          "webp": "https://media2.giphy.com/media/7vzoRu05YJp2pFMd24/200w.webp",
+          "webp_size": "122550"
+        }
+      }
+    }
+  };
+
+  test('fetchTrendingGifs', () => {
+    expect(fetchTrendingGifs('funny', 0)).toMatchSnapshot();
+  });
+
+  test('receiveTrendingGifs', () => {
+    expect(receiveTrendingGifs(mockGifsData)).toMatchSnapshot();
+  });
+
+  test('receiveNextPageTrendingGifs', () => {
+    expect(receiveNextPageTrendingGifs(mockGifsData)).toMatchSnapshot();
+  });
+})