Finished the project functionality

package.json

@@ -45,6 +45,7 @@
     "react-redux": "^7.2.6",
     "react-router-dom": "5.2.0",
     "redux": "^4.1.2",
+    "redux-thunk": "^2.4.2",
     "sass": "^1.32.8",
     "style-loader": "^3.3.1",
     "styled-components": "5.3.3",

src/App.css

@@ -32,7 +32,20 @@
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(360deg);
   }
 }
+
+.Error {
+  color: red
+}
+
+.GifForm {
+  padding: 20px;
+}
+
+.GifList {
+  padding: 20px;
+}

src/App.js

@@ -1,12 +1,44 @@
 import React from 'react';
 import './App.css';
+import GifList from "./components/GifList";
+import GifForm from "./components/GifForm";
+import { connect } from 'react-redux';
 
-function App() {
-  return (
-    <div className="App">
-      Async Redux Project
+function App(props) {
+  const { isFetching, error, data } = props
+
+  if (error) {
+    return <div>
+      <h2 className="Error">{error}</h2>
+      <h1>Search for Gifs</h1>
+      <GifForm className="GifForm" />
+      <GifList className="GifList" />
     </div>
-  );
+  }
+  else {
+    return (
+      <div className="App">
+        {isFetching ? <h2>We are loading</h2> : <></>}
+        <h1>Search for Gifs</h1>
+        {data.length === 0 ? <div>
+          <p className="Error"><strong >Search Bar EMPTY!</strong></p>
+          <GifForm className="GifForm" />
+          <GifList className="GifList" />
+        </div> : <div>
+          <GifForm className="GifForm" />
+          <GifList className="GifList" />
+        </div>}
+      </div>
+    );
+  }
 }
 
-export default App;
+const mapStateToProps = state => {
+  return {
+    data: state.data,
+    isFetching: state.isFetching,
+    error: state.error
+  }
+}
+
+export default connect(mapStateToProps)(App);

src/actions/GifAction.js

@@ -0,0 +1,34 @@
+import axios from "axios";
+
+export const SEARCH_SUCCESS = "SEARCH_SUCCESS";
+export const SEARCH_ERROR = "SEARCH_ERROR";
+export const SET_IS_FETCHING = "SET_IS_FETCHING";
+
+export const search = (input) => dispatch => {
+    dispatch(setIsFetching(true));
+    axios.get(`https://api.giphy.com/v1/gifs/search?api_key=Rc4z5w3LRWM5pjEILUqVhHdANlmsFSug&q=${input}`)
+    .then(res => { 
+        dispatch(searchSuccess(res.data.data))
+    })
+    .catch(err => {
+        dispatch(searchError("Request failed with status code 401"))
+    })
+}
+
+const setIsFetching = (isFetching) => {
+    return{
+        type: SET_IS_FETCHING, payload: isFetching
+    }
+}
+
+const searchSuccess = (data) => {
+    return {
+        type: SEARCH_SUCCESS, payload: data
+    }
+}
+
+const searchError = (error) => {
+    return {
+        type: SEARCH_ERROR, payload: error
+    }
+}

src/components/Gif.js

@@ -0,0 +1,17 @@
+import React from "react";
+
+const Gif = (props) => {
+    const { gif } = props;
+
+    return(
+        <div class="gif">
+            <h3>{gif.title}</h3>
+            <p>{gif.username}</p>
+            <img width="200" src={gif.images.original.url}/>
+            <p>Rating: <strong>{gif.rating}</strong></p>
+            <a target="_blank" href={gif.url}><button>Check it out on giffy</button></a>
+        </div>
+    )
+}
+
+export default Gif;

src/components/GifForm.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { connect } from "react-redux";
+import { search } from "../actions/GifAction";
+import { useState } from "react";
+
+const GifForm = (props) => {
+    const [currentInput, setCurrentInput] = useState("");
+    const { search } = props;
+    return (
+        <form>
+            <input
+                type="text"
+                value={currentInput}
+                onChange={(e) => setCurrentInput(e.target.value)}
+            />
+            <button onClick={(e) => e.preventDefault()/search(currentInput)/setCurrentInput("")}>Search</button>
+        </form>
+    )
+}
+
+
+export default connect(null, { search })(GifForm);

src/components/GifList.js

@@ -0,0 +1,27 @@
+import React from "react";
+import Gif from "./Gif";
+import { connect } from "react-redux";
+
+const GifList = props => {
+    const { data } = props;
+
+    return (
+        <div id="gifList">
+            {
+                data.map(gif => {
+                    return (
+                        <Gif gif={gif}/>
+                    )
+                })
+            }
+        </div>
+    )
+}
+
+const mapStateToProps = state => {
+    return {
+        data: state.data
+    }
+}
+
+export default connect(mapStateToProps)(GifList);

src/data/gifs.js

@@ -0,0 +1,67 @@
+const data = [
+    {
+        "type": "gif",
+        "id": "VCyJwT1DZEWyqU95oS",
+        "url": "https://giphy.com/gifs/cat-ps4-dualshock-VCyJwT1DZEWyqU95oS",
+        "slug": "cat-ps4-dualshock-VCyJwT1DZEWyqU95oS",
+        "bitly_gif_url": "https://gph.is/g/amnBb6J",
+        "bitly_url": "https://gph.is/g/amnBb6J",
+        "embed_url": "https://giphy.com/embed/VCyJwT1DZEWyqU95oS",
+        "username": "",
+        "source": "",
+        "title": "Cat Reaction GIF",
+        "rating": "g",
+        "import_datetime": "2020-01-17 18:00:19",
+        "trending_datetime": "2021-01-11 23:00:11",
+        "images": {
+            "original": {
+                "url": "https://media2.giphy.com/media/VCyJwT1DZEWyqU95oS/giphy.gif?cid=181edf16scp0iyunaxref3ar399h15n8fwspse44yxffi4xy&ep=v1_gifs_search&rid=giphy.gif&ct=g",
+                "hash": "bdbe2f7942302078932ab1744a5a3c72"
+            }
+        }
+    },
+    {
+        "type": "gif",
+        "id": "6VoDJzfRjJNbG",
+        "url": "https://giphy.com/gifs/cat-6VoDJzfRjJNbG",
+        "slug": "cat-6VoDJzfRjJNbG",
+        "bitly_gif_url": "http://gph.is/QFgPA0",
+        "bitly_url": "http://gph.is/QFgPA0",
+        "embed_url": "https://giphy.com/embed/6VoDJzfRjJNbG",
+        "username": "",
+        "source": "http://www.reddit.com/r/gifs/comments/23y94f/cat_attack/",
+        "title": "Cat Pounce GIF",
+        "rating": "g",
+        "import_datetime": "2014-04-25 14:46:21",
+        "trending_datetime": "2014-04-25 16:20:56",
+        "images": {
+            "original": {
+                "url": "https://media1.giphy.com/media/6VoDJzfRjJNbG/giphy.gif?cid=181edf16scp0iyunaxref3ar399h15n8fwspse44yxffi4xy&ep=v1_gifs_search&rid=giphy.gif&ct=g",
+                "hash": "ce771abeb35ee5ea556e8ebd9c420c48"
+            }
+        }
+    },
+    {
+        "type": "gif",
+        "id": "2x0VePimPaFJDpGZ7H",
+        "url": "https://giphy.com/gifs/reaction-mood-2x0VePimPaFJDpGZ7H",
+        "slug": "reaction-mood-2x0VePimPaFJDpGZ7H",
+        "bitly_gif_url": "https://gph.is/2IW3ijl",
+        "bitly_url": "https://gph.is/2IW3ijl",
+        "embed_url": "https://giphy.com/embed/2x0VePimPaFJDpGZ7H",
+        "username": "",
+        "source": "http://cutecatgifs.com",
+        "title": "International Cat Day Cats GIF by MOODMAN",
+        "rating": "g",
+        "import_datetime": "2018-03-26 22:00:02",
+        "trending_datetime": "0000-00-00 00:00:00",
+        "images": {
+            "original": {
+                "url": "https://media3.giphy.com/media/2x0VePimPaFJDpGZ7H/giphy.gif?cid=181edf16scp0iyunaxref3ar399h15n8fwspse44yxffi4xy&ep=v1_gifs_search&rid=giphy.gif&ct=g",
+                "hash": "89afe42ce75402a7bf8317cf78acd135"
+            }
+        }
+    }
+]
+
+export default data;

src/index.js

@@ -1,10 +1,22 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { createStore } from 'redux';
+import { Provider } from "react-redux"
+import { applyMiddleware } from 'redux';
+import thunk from "redux-thunk";
 
 import App from './App';
 import './index.css';
 
+import { reducer } from "./reducers/gifReducer";
+
+const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+const store = createStore(reducer, composeEnhancers(applyMiddleware(thunk)));
+
 ReactDOM.render(
-  <App />,
+  <Provider store={store}>
+    <App />
+  </Provider>
+  ,
   document.getElementById('root')
 );

src/reducers/gifReducer.js

@@ -0,0 +1,33 @@
+import { SEARCH_SUCCESS, SEARCH_ERROR, SET_IS_FETCHING } from "../actions/GifAction";
+import data from "../data/gifs";
+
+const initialState = {
+    data,
+    isFetching: false,
+    error: ""
+};
+
+export const reducer = (state = initialState, action) => {
+    switch (action.type) {
+        case SET_IS_FETCHING:
+            return {
+                ...state,
+                isFetching: action.payload
+            }
+        case SEARCH_SUCCESS:
+            return {
+                ...state,
+                isFetching: false,
+                data: action.payload,
+                error: ""
+            }
+        case SEARCH_ERROR:
+            return {
+                ...state,
+                isFetching: false,
+                error: action.payload
+            }
+        default:
+            return state
+    }
+}