[ADD]🚀 useFetchGifs added

Author: joalbertg

src/components/GifGrid.js

@@ -1,38 +1,24 @@
-//import React, {useState, useEffect} from 'react';
 import React from 'react';
 
 import { useFetchGifs } from '../hooks/useFetchGifs';
 
-//import GifGridItem from './GifGridItem';
-//import { getGifs } from '../helpers';
+import GifGridItem from './GifGridItem';
 
 const GifGrid = ({category}) => {
-  //const [gifs, setGifs] = useState([]);
-
-  const {loading} = useFetchGifs();
-
-  //useEffect(() => {
-  //  getGifs(category)
-  //    .then(setGifs)
-  //}, [category]);
+  const {data: gifs, loading} = useFetchGifs(category);
 
   return(
     <div className="card-grid">
       <h3>{category}</h3>
+      { loading && <p>Loading</p> }
       {
-        loading ?
-          'loading...'
-        :
-          'show'
-      }
-      {/*
         gifs.map(gif => (
           <GifGridItem
             key={gif.id}
             {...gif}
           />)
         )
-      */}
+      }
     </div>
   );
 }

src/hooks/useFetchGifs.js

@@ -1,17 +1,20 @@
-import {useState} from 'react';
+import { useState, useEffect } from 'react';
 
-export const useFetchGifs = () => {
+import { getGifs } from '../helpers';
+
+export const useFetchGifs = category => {
   const [state, setState] = useState({
     data: [],
     loading: true
   });
 
-  setTimeout(() => {
-    setState({
-      ...state,
-      loading: false
-    })
-  }, 3000);
+  useEffect(() => {
+    getGifs(category)
+      .then(gifs => setState({
+        data: gifs,
+        loading: false
+      }))
+  },[category]);
 
   return state; // { data: [], loading: true }
 }