diff --git a/src/App.js b/src/App.js index 904b9ba..b543b39 100644 --- a/src/App.js +++ b/src/App.js @@ -16,7 +16,7 @@ import "./App.css"; const HomePage = React.lazy(() => import("./pages/Home")); -export default function App() { +export default function App () { return (
@@ -33,7 +33,7 @@ export default function App() { diff --git a/src/components/SearchForm/hook.js b/src/components/SearchForm/hook.js index a849b5e..3ffb8cd 100644 --- a/src/components/SearchForm/hook.js +++ b/src/components/SearchForm/hook.js @@ -3,6 +3,7 @@ import { useReducer } from "react"; const ACTIONS = { CHANGE_KEYWORD: "change_keyword", CHANGE_RATING: "change_rating", + CHANGE_LANG: "change_lang", }; const ACTIONS_REDUCERS = { @@ -15,6 +16,10 @@ const ACTIONS_REDUCERS = { ...state, rating: action.payload, }), + [ACTIONS.CHANGE_LANG]: (state, action) => ({ + ...state, + lang: action.payload, + }), }; const reducer = (state, action) => { @@ -22,13 +27,15 @@ const reducer = (state, action) => { return actionReducer ? actionReducer(state, action) : state; }; -export default function useForm({ +export default function useForm ({ initialKeyword = "", initialRating = "g", + initialLang = "es", } = {}) { - const [{ keyword, rating }, dispatch] = useReducer(reducer, { + const [{ keyword, rating, lang }, dispatch] = useReducer(reducer, { keyword: decodeURIComponent(initialKeyword), - rating: initialRating + rating: initialRating, + lang: initialLang }); return { @@ -36,7 +43,10 @@ export default function useForm({ dispatch({ type: ACTIONS.CHANGE_KEYWORD, payload: keyword }), changeRating: ({ rating }) => dispatch({ type: ACTIONS.CHANGE_RATING, payload: rating }), + changeLang: ({ lang }) => + dispatch({ type: ACTIONS.CHANGE_LANG, payload: lang }), keyword, - rating + rating, + lang }; } diff --git a/src/components/SearchForm/index.js b/src/components/SearchForm/index.js index 2f504ec..5250c12 100644 --- a/src/components/SearchForm/index.js +++ b/src/components/SearchForm/index.js @@ -5,19 +5,21 @@ import css from "./SearchForm.module.css" import Button from 'components/Button' const RATINGS = ["g", "pg", "pg-13", "r"] +const LANGS = ["es", "en", "it", "pr"] -export default function SearchForm({ +export default function SearchForm ({ initialKeyword = '', - initialRating = RATINGS[0] + initialRating = RATINGS[0], + initialLang = LANGS[0], }) { const [_, pushLocation] = useLocation() - const {keyword, rating, changeKeyword, changeRating} = useForm({ initialKeyword, initialRating }) + const { keyword, rating, lang, changeKeyword, changeRating, changeLang } = useForm({ initialKeyword, initialRating, initialLang }) const onSubmit = ({ keyword }) => { if (keyword !== '') { // navegar a otra ruta - pushLocation(`/search/${keyword}/${rating}`) + pushLocation(`/search/${keyword}/${rating}/${lang}`) } } @@ -34,6 +36,10 @@ export default function SearchForm({ changeRating({ rating: evt.target.value }) } + const handleChangeLang = (evt) => { + changeLang({ lang: evt.target.value }) + } + return ( <>
@@ -53,6 +59,14 @@ export default function SearchForm({ ))} +
) diff --git a/src/hooks/useGifs.js b/src/hooks/useGifs.js index a1d6984..83c2e91 100644 --- a/src/hooks/useGifs.js +++ b/src/hooks/useGifs.js @@ -1,15 +1,15 @@ -import {useContext, useEffect, useState} from 'react' +import { useContext, useEffect, useState } from 'react' import getGifs from '../services/getGifs' import GifsContext from '../context/GifsContext' const INITIAL_PAGE = 0 -export function useGifs ({ keyword, rating } = { keyword: null }) { +export function useGifs ({ keyword, rating, lang } = { keyword: null }) { const [loading, setLoading] = useState(false) const [loadingNextPage, setLoadingNextPage] = useState(false) const [page, setPage] = useState(INITIAL_PAGE) - const {gifs, setGifs} = useContext(GifsContext) + const { gifs, setGifs } = useContext(GifsContext) // recuperamos la keyword del localStorage const keywordToUse = keyword || localStorage.getItem('lastKeyword') || 'random' @@ -17,26 +17,26 @@ export function useGifs ({ keyword, rating } = { keyword: null }) { useEffect(function () { setLoading(true) - getGifs({ keyword: keywordToUse, rating }) + getGifs({ keyword: keywordToUse, rating, lang }) .then(gifs => { setGifs(gifs) setLoading(false) // guardamos la keyword en el localStorage localStorage.setItem('lastKeyword', keyword) }) - }, [keyword, keywordToUse, rating, setGifs]) + }, [keyword, keywordToUse, lang, rating, setGifs]) useEffect(function () { if (page === INITIAL_PAGE) return setLoadingNextPage(true) - getGifs({ keyword: keywordToUse, page, rating }) + getGifs({ keyword: keywordToUse, page, rating, lang }) .then(nextGifs => { setGifs(prevGifs => prevGifs.concat(nextGifs)) setLoadingNextPage(false) }) - }, [keywordToUse, page, rating, setGifs]) + }, [keywordToUse, lang, page, rating, setGifs]) - return {loading, loadingNextPage, gifs, setPage} + return { loading, loadingNextPage, gifs, setPage } } \ No newline at end of file diff --git a/src/pages/SearchResults/index.js b/src/pages/SearchResults/index.js index f7aad49..749ab76 100644 --- a/src/pages/SearchResults/index.js +++ b/src/pages/SearchResults/index.js @@ -1,20 +1,20 @@ -import React, {useCallback, useRef, useEffect} from 'react' +import React, { useCallback, useRef, useEffect } from 'react' import Spinner from 'components/Spinner' import ListOfGifs from 'components/ListOfGifs' import SearchForm from 'components/SearchForm' -import {useGifs} from 'hooks/useGifs' +import { useGifs } from 'hooks/useGifs' import useNearScreen from 'hooks/useNearScreen' import debounce from 'just-debounce-it' -import {Helmet} from 'react-helmet' +import { Helmet } from 'react-helmet' export default function SearchResults ({ params }) { - const { keyword, rating } = params - const { loading, gifs, setPage } = useGifs({ keyword, rating }) - + const { keyword, rating, lang } = params + const { loading, gifs, setPage } = useGifs({ keyword, rating, lang }) + const externalRef = useRef() - const {isNearScreen} = useNearScreen({ + const { isNearScreen } = useNearScreen({ externalRef: loading ? null : externalRef, once: false }) @@ -39,7 +39,7 @@ export default function SearchResults ({ params }) {
- +

diff --git a/src/services/getGifs.js b/src/services/getGifs.js index 5f312c3..8d1368c 100644 --- a/src/services/getGifs.js +++ b/src/services/getGifs.js @@ -1,10 +1,10 @@ -import {API_KEY, API_URL} from './settings' +import { API_KEY, API_URL } from './settings' const fromApiResponseToGifs = apiResponse => { - const {data = []} = apiResponse + const { data = [] } = apiResponse if (Array.isArray(data)) { const gifs = data.map(image => { - const {images, title, id} = image + const { images, title, id } = image const { url } = images.downsized_medium return { title, id, url } }) @@ -13,15 +13,15 @@ const fromApiResponseToGifs = apiResponse => { return [] } -export default function getGifs({ +export default function getGifs ({ limit = 15, rating = "g", keyword = "morty", page = 0, + lang = 'es' } = {}) { - const apiURL = `${API_URL}/gifs/search?api_key=${API_KEY}&q=${keyword}&limit=${limit}&offset=${ - page * limit - }&rating=${rating}&lang=en` + const apiURL = `${API_URL}/gifs/search?api_key=${API_KEY}&q=${keyword}&limit=${limit}&offset=${page * limit + }&rating=${rating}&lang=${lang}` return fetch(apiURL) .then((res) => res.json())