adds new code.

Author: wlongmireBloomTech

src/App.js

@@ -1,12 +1,43 @@
 import React from 'react';
+
+import { connect } from 'react-redux';
 import './App.css';
+import { useEffect } from 'react';
+
+import { getGifs } from './actions';
+
+import GifList from './components/GifList';
+import GifForm from './components/GifForm';
+
+function App(props) {
+  const { loading, error, getGifs } = props;
+
+  useEffect(()=> {
+    getGifs("jump");
+  }, []);
 
-function App() {
   return (
     <div className="App">
-      Async Redux Project
+      <h1>Search for Gifs</h1>
+      <GifForm />
+      
+      {
+        (error !== "") && <h3>{error}</h3>
+      }
+
+      {
+        loading ? <h3>We are loading</h3> : <GifList/>
+      }
+      
     </div>
   );
 }
 
-export default App;
+const mapStateToProps = state => {
+  return {
+    loading: state.loading,
+    error: state.error
+  }
+}
+
+export default connect(mapStateToProps, { getGifs })(App);

src/actions/index.js

@@ -0,0 +1,24 @@
+import axios from 'axios';
+
+
+export const FETCH_START =  "FETCH_START";
+export const FETCH_SUCCESS =  "FETCH_SUCCESS";
+
+
+export const getGifs = (searchTerm)=> {
+    return(dispatch => {
+        dispatch(fetchStart());
+        axios.get(`https://api.giphy.com/v1/gifs/search?api_key=eF68i1SpJhoVnYQRTDKYcXdtpZlGeJDP&q=${searchTerm}`)
+          .then(res=>{
+            dispatch(fetchSuccess(res.data.data));
+        })
+    });
+}
+
+export const fetchStart = () => {
+    return({type: FETCH_START});
+}
+
+export const fetchSuccess = gifs => {
+    return({type:FETCH_SUCCESS, payload: gifs})
+}

src/components/Gif.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+const Gif = (props)=>{
+    const { gif } = props;
+
+    return(<div className="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,24 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { useState } from 'react';
+import { getGifs } from './../actions';
+
+const GifForm = props => {
+  const [searchTerm, setSearchTerm] = useState("");
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    props.getGifs(searchTerm);
+  }
+
+  const handleChange = (e) => {
+    props.getGifs(e.target.value);
+  }
+
+  return (<form onSubmit={handleSubmit}>
+      <input onChange={handleChange}/>
+      <button>Search</button>
+    </form>);
+}
+
+export default connect(null, { getGifs })(GifForm);

src/components/GifList.js

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

src/data/gifs.js

@@ -0,0 +1,54 @@
+
+const data = [
+    {
+        type: "gif",
+        id: "gzBwhbjfjdZzIaO9En",
+        url: "https://giphy.com/gifs/studiosoriginals-gzBwhbjfjdZzIaO9En",
+        username: "studiosoriginals",
+        source: "",
+        title: "Miss You Dogs GIF by GIPHY Studios Originals",
+        rating: "g",
+        import_datetime: "2021-01-15 21:34:13",
+        trending_datetime: "2021-03-18 18:00:14",
+        images: {
+            original: {
+                url: "https://media1.giphy.com/media/gzBwhbjfjdZzIaO9En/giphy.gif?cid=80bc7db2gun9ywhqob8y2c94d09e1ah8klz8q6l8re2muu5t&rid=giphy.gif",
+                hash: "7cd04c1e38de9382e3f2628dc3e7aa46"
+            }
+        }
+    },{
+        type: "gif",
+        id: "gzBwhbjfjdZzIaO9En",
+        url: "https://media0.giphy.com/media/VeHBSH9F4GZpuuic00/giphy.gif?cid=80bc7db2gun9ywhqob8y2c94d09e1ah8klz8q6l8re2muu5t&rid=giphy.gif",
+        username: "studiosoriginals",
+        source: "",
+        title: "Robot GIF by GIPHY Studios Originals",
+        rating: "g",
+        import_datetime: "2021-01-15 21:34:13",
+        trending_datetime: "2021-03-18 18:00:14",
+        images: {
+            original: {
+                url: "https://media0.giphy.com/media/VeHBSH9F4GZpuuic00/giphy.gif?cid=80bc7db2gun9ywhqob8y2c94d09e1ah8klz8q6l8re2muu5t&rid=giphy.gif",
+                hash: "7cd04c1e38de9382e3f2628dc3e7aa46"
+            }
+        }
+    },{
+        type: "gif",
+        id: "gzBwhbjfjdZzIaO9En",
+        url: "https://giphy.com/gifs/dogs-good-job-pups-kBZBlLVlfECvOQAVno",
+        username: "studiosoriginals",
+        source: "",
+        title: "Yahhhh by GIPHY Studios Originals",
+        rating: "g",
+        import_datetime: "2021-01-15 21:34:13",
+        trending_datetime: "2021-03-18 18:00:14",
+        images: {
+            original: {
+                url: "https://media0.giphy.com/media/kBZBlLVlfECvOQAVno/giphy.gif?cid=80bc7db2gun9ywhqob8y2c94d09e1ah8klz8q6l8re2muu5t&rid=giphy.gif",
+                hash: "7cd04c1e38de9382e3f2628dc3e7aa46"
+            }
+        }
+    }
+];
+
+export default data;

src/index.css

@@ -1,4 +1,13 @@
-
 body {
-	background: #f5f5f5;
-}
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

src/index.js

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

src/reducer/index.js

@@ -0,0 +1,31 @@
+import data from './../data/gifs';
+
+import { FETCH_START, FETCH_SUCCESS } from './../actions';
+
+const initialState = {
+    gifs: data,
+    loading: false,
+    error: ""
+}
+
+const reducer = (state = initialState, action) => {
+    switch(action.type) {
+        case FETCH_START:
+            return {
+                ...state,
+                loading: true,
+                error:""
+            }
+        case FETCH_SUCCESS:
+            return {
+                ...state,
+                loading: false,
+                gifs: action.payload,
+                error: ""
+            }
+        default:
+            return(state);
+    }
+}
+
+export default reducer;

src/reportWebVitals.js

@@ -0,0 +1,13 @@
+const reportWebVitals = onPerfEntry => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;