diff --git a/src/pages/Search/Search.jsx b/src/pages/Search/Search.jsx index cb5eedf8..e2d43b8e 100644 --- a/src/pages/Search/Search.jsx +++ b/src/pages/Search/Search.jsx @@ -1,12 +1,10 @@ import React, { useState, useEffect, useRef } from "react"; import { MdSearch } from "react-icons/md"; -import { fetchTrendingGifs, fetchGifsByKeyword } from "../../service/fetchGif"; - import NavBar from "../../components/NavBar/NavBar"; import Footer from "../../components/Footer/Footer"; import GifItem from "../../components/GifItem/GifItem"; - +import { fetchTrendingGifs, fetchGifsByKeyword } from "../../service/fetchGif"; import styles from "./Search.module.css"; const DEFAULT_PAGE_INDEX = 0; @@ -18,7 +16,7 @@ const ResultTitle = ({ showTrending, noResult }) => { if (showTrending) { return

- 🔥 Trending Now 🔥 + 🔥 Trending Now 🔥

; } @@ -71,21 +69,25 @@ const Search = () => { } const loadMore = async () => { - const nextPageIndex = currentPageIndex + 1; - const gifs = await fetchGifsByKeyword(searchKeyword, nextPageIndex); + const nextPageIndex = currentPageIndex + 1; + const gifs = await fetchGifsByKeyword(searchKeyword, nextPageIndex); - setGifList([...gifList, ...gifs]); - setCurrentPageIndex(nextPageIndex); + setGifList([...gifList, ...gifs]); + setCurrentPageIndex(nextPageIndex); } - useEffect(async () => { - if (loading) { - const gifs = await fetchTrendingGifs(); - - setGifList(gifs); - setLoading(false); + useEffect(() => { + const loadTrendingGifs = async () => { + if (loading) { + const gifs = await fetchTrendingGifs(); + + setGifList(gifs); + setLoading(false); + } } + loadTrendingGifs(); + return () => setLoading(true); }, []);