+
+
+
+
+
+ );
+}
diff --git a/src/components/cardsList/CardsList.jsx b/src/components/cardsList/CardsList.jsx
new file mode 100644
index 000000000..bcbe2151f
--- /dev/null
+++ b/src/components/cardsList/CardsList.jsx
@@ -0,0 +1,59 @@
+import { useContext, useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { GlobalContext } from "../../context";
+
+import { goToHome } from "../../router/Coordinator";
+import Card from "../card/Card";
+import Pagination from "../pagination/Pagination";
+
+export default function CardsList() {
+ const {
+ pokemons,
+ count,
+ globaLimit,
+ setCurrentPage,
+ currentPage,
+ isLoading,
+ } = useContext(GlobalContext);
+ const pathParams = useParams();
+
+ useEffect(() => {
+ setCurrentPage(pathParams.page ? pathParams.page : 1);
+ }, [pathParams.page ? pathParams.page : 1]);
+
+ const [pokedex, setPokedex] = useState(
+ JSON.parse(
+ localStorage.getItem("pokedex") == null
+ ? "[]"
+ : localStorage.getItem("pokedex")
+ )
+ );
+
+ const navigate = useNavigate();
+
+ return (
+
+
+
+
+
+
+
+
+
+ + #{pokemon.id} +
++ {pokemon && + pokemon.name && + pokemon.name[0].toUpperCase() + pokemon.name.slice(1)} +
+
+ {pokemon.types?.map((item) => (
+ ![]({"/images/pokemon-types/")
+ ))}
+
+
+ ))}
+
+ ![]({pokemon.sprites?.other["official-artwork"].front_default})
+
+
+
+
+
+
+ {!isNaN(location.pathname.split("/")[1]) ? (
+ !pokedex.some((pokemon) => pokemon == url) ? (
+
+ ) : (
+
+ )
+ ) : location.pathname.indexOf("pokedex") > -1 ? (
+
+ ) : (
+ <>
+ )}
+
+
+ {isLoading ? (
+ <>loading...
+ ) : (
+ {
+ setCurrentPage(page);
+ goToHome(navigate, page);
+ }}
+ />
+
+ );
+}
diff --git a/src/components/header/Header.jsx b/src/components/header/Header.jsx
new file mode 100644
index 000000000..1876570bf
--- /dev/null
+++ b/src/components/header/Header.jsx
@@ -0,0 +1,96 @@
+import { useContext, useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import { GlobalContext } from "../../context";
+import { goToPokedex, goToHome } from "../../router/Coordinator";
+
+export default function Header({ id }) {
+ const navigate = useNavigate();
+ const location = useLocation();
+
+ const [pokedex, setPokedex] = useState(
+ JSON.parse(
+ localStorage.getItem("pokedex") == null
+ ? "[]"
+ : localStorage.getItem("pokedex")
+ )
+ );
+
+ function deleteFromPokedex() {
+ const auxPokedex = [...pokedex];
+ const index = auxPokedex.findIndex(
+ (item) => item.split("/")[item.split("/").length - 2] == id
+ );
+ auxPokedex.splice(index, 1);
+
+ setPokedex(auxPokedex);
+ localStorage.setItem("pokedex", JSON.stringify(auxPokedex));
+ }
+
+ const { baseUrl } = useContext(GlobalContext);
+
+ function addToPokedex() {
+ const auxPokedex = [...pokedex];
+ auxPokedex.push(baseUrl + id + "/");
+ localStorage.setItem("pokedex", JSON.stringify(auxPokedex));
+ setPokedex(auxPokedex);
+ }
+
+ return (
+
+ {pokemons?.map((pokemon) => (
+
+ )}
+
+
+
+ ))}
+
+
+ );
+}
diff --git a/src/components/pagination/Pagination.jsx b/src/components/pagination/Pagination.jsx
new file mode 100644
index 000000000..22b00262c
--- /dev/null
+++ b/src/components/pagination/Pagination.jsx
@@ -0,0 +1,96 @@
+import classNames from "classnames";
+import { PaginationContainer } from "./Style";
+const range = (start, end) => {
+ return [...Array(end - start).keys()].map((el) => el + start);
+};
+
+const getPagesCut = ({ pagesCount, pagesCutCount, currentPage }) => {
+ const ceiling = Math.ceil(pagesCutCount / 2);
+ const floor = Math.floor(pagesCutCount / 2);
+
+ if (Number(pagesCount) < Number(pagesCutCount)) {
+ return { start: 1, end: Number(pagesCount) + 1 };
+ } else if (Number(currentPage) >= 1 && Number(currentPage) <= ceiling) {
+ return { start: 1, end: Number(pagesCutCount) + 1 };
+ } else if (Number(currentPage) + floor >= Number(pagesCount)) {
+ return {
+ start: Number(pagesCount) - Number(pagesCutCount) + 1,
+ end: Number(pagesCount) + 1,
+ };
+ } else {
+ return {
+ start: Number(currentPage) - ceiling + 1,
+ end: Number(currentPage) + floor + 2,
+ };
+ }
+};
+
+const PaginationItem = ({ page, currentPage, onPageChange, isDisabled }) => {
+ const liClasses = classNames({
+ "page-item": true,
+ active: Number(page) === Number(currentPage),
+ disabled: isDisabled,
+ });
+
+ return (
+
+ {location.pathname.indexOf("pokedex") > -1 ||
+ location.pathname.indexOf("details") > -1 ? (
+
+ ) : (
+
+ )}
+
+
+
+ 
+
+
+
+
+ {location.pathname.indexOf("details") > -1 &&
+ pokedex.some(
+ (item) => item.split("/")[item.split("/").length - 2] == id
+ ) ? (
+
+ ) : location.pathname.indexOf("details") > -1 ? (
+
+ ) : (
+ <>
+ )}
+ {!isNaN(location.pathname.split("/")[1]) ? (
+
+ ) : (
+
+ )}
+
+
+ onPageChange(1)}
+ isDisabled={isFirstPage}
+ />
+
+ onPageChange(Number(currentPage) - 1)}
+ isDisabled={isFirstPage}
+ />
+
+ {pages.map((page) => (
+ onPageChange(Number(currentPage) + 1)}
+ isDisabled={isLastPage}
+ />
+ onPageChange(pagesCount)}
+ isDisabled={isLastPage}
+ />
+
+ ) : (
+ <>
+ )}
+
+ {
+ setCurrentPage(page);
+ goToPokedex(navigate, page);
+ }}
+ />
+
+ );
+}
diff --git a/src/context/index.jsx b/src/context/index.jsx
new file mode 100644
index 000000000..a2f8ed03e
--- /dev/null
+++ b/src/context/index.jsx
@@ -0,0 +1,72 @@
+import axios from "axios";
+import React, { useEffect, useState } from "react";
+import { createContext } from "react";
+
+export const GlobalContext = createContext();
+
+const GlobalContextProvider = ({ children }) => {
+ const [currentPage, setCurrentPage] = useState(1);
+ const baseUrl = "https://pokeapi.co/api/v2/pokemon/";
+ const [globaLimit, setGlobalLimit] = useState(20);
+ const globalOffSet = !currentPage ? 1 : (currentPage - 1) * globaLimit;
+ const [pokemons, setPokemons] = useState([]);
+ const [count, setCount] = useState(0);
+ const [isLoading, setIsLoading] = useState(false);
+
+ useEffect(() => {
+ setIsLoading(true);
+ getPokemons(`${baseUrl}?limit=${globaLimit}&offset=${globalOffSet}`);
+ setIsLoading(false);
+ }, [currentPage]);
+
+ const getPokemons = async (url) => {
+ try {
+ let response = await axios.get(url);
+ setCount(response.data.count);
+ setPokemons(response.data.results);
+ } catch (error) {
+ console.log(error);
+ }
+ };
+
+ const [pokemon, setPokemon] = useState([]);
+
+ const getPokemon = async (url) => {
+ try {
+ const response = await axios.get(url);
+ setPokemon(response.data);
+ } catch (error) {
+ console.log(error);
+ }
+ };
+
+ const [pokedex, setPokedex] = useState(
+ JSON.parse(
+ localStorage.getItem("pokedex") == null
+ ? "[]"
+ : localStorage.getItem("pokedex")
+ )
+ );
+
+ return (
+
+ {auxPokedex?.map((url) => (
+
+
+
+ ))}
+
+
+ );
+}
diff --git a/src/pages/home/Home.jsx b/src/pages/home/Home.jsx
new file mode 100644
index 000000000..25cd5e5f7
--- /dev/null
+++ b/src/pages/home/Home.jsx
@@ -0,0 +1,14 @@
+import CardsList from "../../components/cardsList/CardsList";
+import Header from "../../components/header/Header";
+
+export default function Home() {
+ return (
+
+
+ + Details +
+
+
+
+
+
+ 
+
+
+ 
+
+
+
+
+
+
+ + Base stats +
+ +
+ {pokemon[0].stats.map((item) => (
+
+
+ {item.stat.name + ": " + item.base_stat}
+
+ ))}
+
+
+
+
+
+
+
+
+
+ + #{pokemon[0].id} +
++ {pokemon[0] && + pokemon[0].name && + pokemon[0].name[0].toUpperCase() + pokemon[0].name.slice(1)} +
+
+ {pokemon[0].types?.map((item) => (
+
+ ))}
+
+
+ ))}
+
+ {pokemon[0].moves.slice(0, 4).map((item) => (
+
+
+ {item.move.name}
+
+ ))}
+
+ ![]({pokemon[0].sprites?.other["official-artwork"].front_default})
+
+
+
+ );
+}
diff --git a/src/pages/pokedex/Pokedex.jsx b/src/pages/pokedex/Pokedex.jsx
new file mode 100644
index 000000000..ff55ba9e9
--- /dev/null
+++ b/src/pages/pokedex/Pokedex.jsx
@@ -0,0 +1,14 @@
+import Header from "../../components/header/Header";
+import PokedexComponent from "../../components/pokedex/Pokedex";
+
+export default function Pokedex() {
+ return (
+
+ All Pokémons
+
+
+
+ );
+}
diff --git a/src/router/Coordinator.jsx b/src/router/Coordinator.jsx
new file mode 100644
index 000000000..7f990b62d
--- /dev/null
+++ b/src/router/Coordinator.jsx
@@ -0,0 +1,9 @@
+export const goToHome = (navigate, page) => {
+ navigate(`/${page}`);
+};
+export const goToPokedex = (navigate, page) => {
+ navigate(`/pokedex/${page}`);
+};
+export const goToDetails = (navigate, pokemon) => {
+ navigate(`/details/${pokemon}`);
+};
diff --git a/src/router/Router.jsx b/src/router/Router.jsx
new file mode 100644
index 000000000..d61dc755b
--- /dev/null
+++ b/src/router/Router.jsx
@@ -0,0 +1,15 @@
+import { Routes, Route } from "react-router-dom";
+import Details from "../pages/details/Details";
+import Home from "../pages/home/Home";
+import Pokedex from "../pages/pokedex/Pokedex";
+
+export const Router = () => {
+ return (
+
+ My Pokémons
+
+