React Series Challenge - Daniel

.env

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

.eslintignore

@@ -1,3 +1,4 @@
 /coverage/
 /dist/
 /node_modules/
+.env

package.json

@@ -3,14 +3,25 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^0.18.0",
     "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-mock-store": "^1.5.3",
+    "redux-persist": "^5.10.0",
+    "redux-saga": "^0.16.0",
+    "styled-components": "^3.3.3"
   },
   "jest": {
     "collectCoverageFrom": [
       "**/src/**/*.{js,jsx}",
-      "!**/src/registerServiceWorker.{js,jsx}"
+      "!**/src/registerServiceWorker.{js,jsx}",
+      "!/node_modelus",
+      "!**/src/index.{js.jsx}"
     ],
     "coverageThreshold": {
       "global": {
@@ -27,10 +38,13 @@
     "eject": "react-scripts eject",
     "lint": "eslint ./",
     "test": "yarn lint && yarn jest",
-    "jest": "react-scripts test --env=jsdom --coverage"
+    "jest": "react-scripts test --env=jsdom --coverage",
+    "precommit": "pretty-quick staged"
   },
   "devDependencies": {
     "enzyme": "^3.3.0",
-    "enzyme-adapter-react-16": "^1.1.1"
+    "enzyme-adapter-react-16": "^1.1.1",
+    "prettier": "^1.13.7",
+    "pretty-quick": "^1.6.0"
   }
 }

public/index.html

@@ -10,6 +10,7 @@
     -->
     <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,18 @@
-import React, { Component } from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React, { Component } from "react";
+import { Provider } from "react-redux";
+import { store, persistor } from "./store";
+import { PersistGate } from 'redux-persist/integration/react';
+import "./global";
+import Routes from "./Routes";
 
 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>
+      <Provider store={store}>
+        <PersistGate loading={null} persistor={persistor}>
+          <Routes />
+        </PersistGate>
+      </Provider>
     );
   }
 }

src/App.style.js

@@ -0,0 +1,10 @@
+import styled from "styled-components";
+
+const Container = styled.div`
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+`;
+
+
+export { Container };

src/App.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<App />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});

src/Routes.js

@@ -0,0 +1,25 @@
+import React from "react";
+import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
+import Home from "./pages/Home";
+import Favorites from "./pages/Favorites";
+import Navbar from "./components/Navigation/Navbar";
+
+import { Container } from "./App.style";
+import NotFound from "./pages/NotFound";
+
+const Routes = () => {
+  return(
+    <Router>
+      <Container>
+        <Navbar />
+        <Switch>
+          <Route exact path="/" component={Home} />
+          <Route path="/favorites" component={Favorites} />
+          <Route component={NotFound} />
+        </Switch>
+      </Container>
+    </Router>
+  );
+}
+
+export default Routes;

src/actions/favoriteGifs.js

@@ -0,0 +1,9 @@
+const ADD_FAVORITE_GIF = "ADD_FAVORITE_GIF";
+const GET_FAVORITE_SEARCH_GIFS = "GET_FAVORITE_SEARCH_GIFS";
+
+export default {
+  types: {
+    ADD_FAVORITE_GIF,
+    GET_FAVORITE_SEARCH_GIFS
+  }
+};

src/actions/searchFavoriteGifs.js

@@ -0,0 +1,12 @@
+const GET_FAVORITE_SEARCH_GIFS = "GET_FAVORITE_SEARCH_GIFS";
+
+const getSearchFavoriteGifs = (payload = {}) => ({ type: GET_FAVORITE_SEARCH_GIFS, payload });
+
+export default {
+  types: {
+    GET_FAVORITE_SEARCH_GIFS
+  },
+  creators: {
+    getSearchFavoriteGifs
+  }
+};

src/actions/searchGifs.js

@@ -0,0 +1,9 @@
+const FETCH_SEARCH_GIFS = "FETCH_SEARCH_GIFS";
+const GET_SEARCH_GIFS = "GET_SEARCH_GIFS";
+
+export default {
+  types: {
+    FETCH_SEARCH_GIFS,
+    GET_SEARCH_GIFS
+  }
+};

src/actions/trendingGifs.js

@@ -0,0 +1,9 @@
+const FETCH_TRENDING_GIFS = "FETCH_TRENDING_GIFS";
+const GET_TRENDING_GIFS = "GET_TENDING_GIFS";
+
+export default {
+  types: {
+    FETCH_TRENDING_GIFS,
+    GET_TRENDING_GIFS
+  }
+};

src/components/FavoriteButton/FavoriteButton.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { connect } from "react-redux";
+import { Button } from "./FavoriteButtonStyled";
+
+const AddTransactionButton = ({ gif, addFavoriteGif, favorite }) => (
+  <Button favorite={favorite} onClick={() => addFavoriteGif(gif)}>
+    <i className="fas fa-heart" />
+  </Button>
+);
+
+const mapDispatchToProps = dispatch => {
+  return {
+    addFavoriteGif: gif => dispatch({ type: "ADD_FAVORITE_GIF", payload: gif })
+  };
+};
+
+export default connect(
+  null,
+  mapDispatchToProps
+)(AddTransactionButton);

src/components/FavoriteButton/FavoriteButton.test.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { mount, shallow } from 'enzyme';
+import configureStore from 'redux-mock-store';
+import FavoriteButton from "./FavoriteButton";
+
+
+describe('test', () => {
+    const initialState = { };
+    const mockStore = configureStore();
+    let store,wrapper;
+
+    beforeEach(() => {
+        let props = {
+            favorite: true,
+            gif: {
+                id : "01",
+                images: {
+                    url: "https://media0.giphy.com/media/4TgL0taO3uU5H6kKcQ/giphy-preview.webp"
+                }
+            }
+        };
+        store = mockStore(initialState)
+        wrapper = mount(shallow(<FavoriteButton store={store} {...props} />).get(0));
+    })
+    ///// Test button onClick
+    test("Button on click", ()=> {
+        const button = wrapper.find("button").first()
+        button.simulate("click")
+    })
+});
+
+

src/components/FavoriteButton/FavoriteButtonStyled.js

@@ -0,0 +1,22 @@
+import styled from "styled-components";
+
+const Button = styled.button`
+    position: absolute;
+    right: 2px;
+    top: 5px;
+    background-color: transparent;
+    color: ${props => props.favorite ? "#EF4748" : "#ccc" };
+    font-size: 2.5rem
+    font-weight: bold;
+    border: none;
+    &:focus {
+        outline: 0;
+    }
+    cursor: pointer
+
+    &:hover {
+        transform: translateY(-3px);
+    }
+`;
+
+export { Button };

src/components/FavoriteGifs/FavoriteGifs.js

@@ -0,0 +1,34 @@
+import React from "react";
+import { connect } from "react-redux";
+import FavoriteButton from "../FavoriteButton/FavoriteButton";
+import {ItemGif, Image } from "../ListGifs/GifItemStyle";
+
+const FavoritesGifs = ({ favoriteGifs, searchFavoriteGifs }) => {
+  let filterFavoriteGifs = null;
+  if (Object.keys(searchFavoriteGifs).length) {
+    filterFavoriteGifs = Object.keys(favoriteGifs)
+    .filter(key => searchFavoriteGifs.includes(key))
+    .reduce((obj, key) => {
+      obj[key] = favoriteGifs[key];
+      return obj
+    }, {});
+  }
+  return(
+    Object.keys(filterFavoriteGifs || favoriteGifs).map(key => (
+      <ItemGif key={key}>
+        <Image src={favoriteGifs[key].images.preview_webp.url} />
+        <FavoriteButton gif={favoriteGifs[key]} key={favoriteGifs[key].id} favorite />
+      </ItemGif>
+    ))
+  )
+};
+
+const mapStateToProps = ({ favoriteGifs, searchFavoriteGifs }) => ({
+  favoriteGifs,
+  searchFavoriteGifs
+});
+
+export default connect(
+  mapStateToProps,
+  null
+)(FavoritesGifs);

src/components/FavoriteGifs/FavoriteGifs.test.js

@@ -0,0 +1,40 @@
+import FavoriteGifs from "./FavoriteGifs";
+import { shallow } from 'enzyme';
+import configureStore from 'redux-mock-store'
+import React from 'react';
+
+describe('Todo component renders the list of trending gifs', () => {
+  const favoriteGifs = [
+    {
+      id: "01", 
+      images: { 
+        preview_webp: { 
+          url: "https://media0.giphy.com/media/4TgL0taO3uU5H6kKcQ/giphy-preview.webp" 
+        }
+      }
+    }, 
+    {
+      id: "02", 
+      images: { 
+        preview_webp: { 
+          url: "https://media0.giphy.com/media/4TgL0taO3uU5H6kKcQ/giphy-preview.webp" 
+        }
+      }
+    }];
+  const initialState = { favoriteGifs, searchFavoriteGifs: null };
+  const mockStore = configureStore();
+  let store,container;
+
+    beforeEach(()=>{
+      store = mockStore(initialState)
+      container = shallow(<FavoriteGifs store={store} /> )
+    });
+    it('+++ render the DUMB component', () => {
+      expect(container.length).toEqual(1)
+    });
+
+    it('+++ contains output', () => {
+      expect(container.prop('output')).toEqual(initialState.output)
+    });
+
+});

src/components/ListGifs/GifItem.js

@@ -0,0 +1,11 @@
+import React from "react";
+import FavoriteButton from "../FavoriteButton/FavoriteButton";
+import { ItemGif, Image } from "./GifItemStyle";
+
+const GifItem = ({ gif, favoriteGifs }) => 
+   <ItemGif>
+    <Image src={gif.images.preview_webp.url} alt="Gif item" />
+    <FavoriteButton gif={gif} favorite ={favoriteGifs[gif.id]} />
+  </ItemGif>;
+
+export default GifItem;

src/components/ListGifs/GifItemStyle.js

@@ -0,0 +1,17 @@
+import styled from "styled-components";
+
+const ItemGif = styled.div`
+    position: relative;
+`
+
+const Image = styled.img`
+    height: 200px;
+    width: 200px;
+    padding: 0.5rem;
+    display: flex;
+    object-fit: cover;
+    justify-content: flex-end;
+
+`;
+
+export { ItemGif, Image };