diff --git a/package-lock.json b/package-lock.json index 1acaeeb..0fead5b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,7 @@ "axios": "^0.25.0", "react": "^17.0.2", "react-dom": "^17.0.2", + "react-google-charts": "^4.0.0", "react-router-dom": "^6.2.1", "react-scripts": "5.0.0", "web-vitals": "^2.1.4" @@ -13537,6 +13538,15 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz", "integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA==" }, + "node_modules/react-google-charts": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/react-google-charts/-/react-google-charts-4.0.0.tgz", + "integrity": "sha512-9OG0EkBb9JerKEPQYdhmAXnhGLzOdOHOPS9j7l+P1a3z1kcmq9mGDa7PUoX/VQUY4IjZl2/81nsO4o+1cuYsuw==", + "peerDependencies": { + "react": ">=16.3.0", + "react-dom": ">=16.3.0" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -26000,6 +26010,12 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz", "integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA==" }, + "react-google-charts": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/react-google-charts/-/react-google-charts-4.0.0.tgz", + "integrity": "sha512-9OG0EkBb9JerKEPQYdhmAXnhGLzOdOHOPS9j7l+P1a3z1kcmq9mGDa7PUoX/VQUY4IjZl2/81nsO4o+1cuYsuw==", + "requires": {} + }, "react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", diff --git a/package.json b/package.json index 0ea7af9..1b4a08d 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "axios": "^0.25.0", "react": "^17.0.2", "react-dom": "^17.0.2", + "react-google-charts": "^4.0.0", "react-router-dom": "^6.2.1", "react-scripts": "5.0.0", "web-vitals": "^2.1.4" diff --git a/src/App.js b/src/App.js index fa90edc..d491900 100644 --- a/src/App.js +++ b/src/App.js @@ -19,7 +19,7 @@ function App() { : } /> - :
} /> + :
} /> : } /> } /> diff --git a/src/components/navbar.jsx b/src/components/navbar.jsx index db3de46..fdb78f5 100644 --- a/src/components/navbar.jsx +++ b/src/components/navbar.jsx @@ -14,16 +14,17 @@ import logo from '../img/pokeball.png' import LogoutIcon from '@mui/icons-material/Logout'; import BasicMenu from './filterbar'; import SearchAppBar from './searchbar'; -import { useNavigate } from "react-router-dom"; +import { useNavigate, useLocation } from "react-router-dom"; const pages = ['Pokémon', 'Favorites']; const settings = ['Logout']; -const ResponsiveAppBar = ({currentType, dispatch}) => { +const ResponsiveAppBar = ({ searchValue, currentType, dispatch }) => { const [anchorElNav, setAnchorElNav] = React.useState(null); const [anchorElUser, setAnchorElUser] = React.useState(null); const navigateTo = useNavigate(); + let location = useLocation(); const handleOpenNavMenu = (event) => { setAnchorElNav(event.currentTarget); @@ -34,25 +35,25 @@ const ResponsiveAppBar = ({currentType, dispatch}) => { const navigateToRepo = (e) => { - if (e.target.value === '0'){ - navigateTo('/'); - } - else if (e.target.value === '1') { - navigateTo('/favorites'); - } + if (e.target.value === '0') { + navigateTo('/'); + } + else if (e.target.value === '1') { + navigateTo('/favorites'); + } setAnchorElNav(null); }; const navigateToRepo_ = (e) => { - const { value } = e.target.innerText; - if (e.target.innerText === 'Pokémon'){ - navigateTo('/'); + const { value } = e.target.innerText; + if (e.target.innerText === 'Pokémon') { + navigateTo('/'); } - else if (e.target.innerText=== 'Favorites') { - navigateTo('/favorites'); + else if (e.target.innerText === 'Favorites') { + navigateTo('/favorites'); } - setAnchorElNav(null); -}; + setAnchorElNav(null); + }; const handleCloseUserMenu = () => { navigateTo('/'); @@ -61,27 +62,27 @@ const ResponsiveAppBar = ({currentType, dispatch}) => { const handleCloseUserMenuLogout = () => { localStorage.removeItem('user') - localStorage.removeItem('pass') + localStorage.removeItem('pass') navigateTo('/login'); setAnchorElUser(null); }; return ( - + - logo navigateTo('/')}/> - - navigateTo('/')} /> + + - + - + {pages.map((page, i) => ( ))} - + {(() => { + if (location.pathname === '/' || location.pathname === '/favorites') { + return ( + <> + + + + + + + + ) + } + })()} + {/* - - - + + + */} diff --git a/src/components/pages/details.jsx b/src/components/pages/details.jsx index f51749f..bcd481d 100644 --- a/src/components/pages/details.jsx +++ b/src/components/pages/details.jsx @@ -1,15 +1,16 @@ +import FixedBottomNavigation from "../bottombar" import ResponsiveAppBar from "../navbar" import Pokedetails from "../pokedetails" -function Details({currentType, pokemon, dispatch}) { +function Details({searchValue, currentType, pokemon, dispatch}) { return ( <> - -

Vista detalles

+ + ) } diff --git a/src/components/pages/pokemon.jsx b/src/components/pages/pokemon.jsx index f7382f6..270d6f8 100644 --- a/src/components/pages/pokemon.jsx +++ b/src/components/pages/pokemon.jsx @@ -86,7 +86,7 @@ function Pokemon({favs, actionName, data, page, filterState, dispatch}) { , []) return ( <> - + diff --git a/src/components/pagination.jsx b/src/components/pagination.jsx index f10fcbc..6f75951 100644 --- a/src/components/pagination.jsx +++ b/src/components/pagination.jsx @@ -11,8 +11,6 @@ export default function PaginationControlled({actionName, page, count, dispatch} return (
- {/* Page: {state && state.page} */} - {/* */}
diff --git a/src/components/pokedetails.jsx b/src/components/pokedetails.jsx index be2fd07..21bd548 100644 --- a/src/components/pokedetails.jsx +++ b/src/components/pokedetails.jsx @@ -1,6 +1,7 @@ import { useParams } from 'react-router-dom'; import { useEffect } from "react"; import axios from 'axios'; +import { Chart } from "react-google-charts"; import { Typography, Card, CardContent, CardMedia } from '@mui/material'; @@ -9,14 +10,27 @@ function Pokedetails({ pokemon, dispatch }) { function upperFirstLetter(str) { return str.charAt(0).toUpperCase() + str.slice(1); } - const checkState = (state) => { - try { - return state.name - } - catch { - return 'loading' - } - } + const data = [ + ["Stat", "Max", {role: 'style'}], + ["HP", Number(pokemon.stats[0].base_stat), 'color: #D14461'], + ["Attack", Number(pokemon.stats[1].base_stat), 'color: #176CC5'], + ["Defense", Number(pokemon.stats[2].base_stat), 'color: #63BC5D'], + ["Special Attack", Number(pokemon.stats[3].base_stat), 'color: #F1D85A'], + ["Special Defense", Number(pokemon.stats[4].base_stat), 'color: #B667CD'], + ["Speed", Number(pokemon.stats[5].base_stat), 'color: #D87C52'], + ]; + const options = { + title: "Stats", + chartArea: { width: "50%" }, + colors: ['#D14461', '#176CC5', '#63BC5D', '#F1D85A', '#B667CD', '#D87C52'], + isStacked: true, + hAxis: { + title: "Pokémon Stats", + minValue: 0, + maxValue: 100, + }, + }; + useEffect(() => { async function getPokeData() { try { @@ -50,19 +64,18 @@ function Pokedetails({ pokemon, dispatch }) { />
- Type: {pokemon && pokemon.types.map((type, i)=> { + Type: {pokemon && pokemon.types.map((type, i) => { return (
  • {type.type.name}
    • ) })} -
    - STATS: {pokemon && pokemon.stats.map((stat, i) => { - return
    -
  • {stat.stat.name}: {stat.base_stat}
    • -
    - })} - - -     +
    + diff --git a/src/components/searchbar.jsx b/src/components/searchbar.jsx index 568a3c5..58d8464 100644 --- a/src/components/searchbar.jsx +++ b/src/components/searchbar.jsx @@ -46,7 +46,8 @@ const StyledInputBase = styled(InputBase)(({ theme }) => ({ }, })); -export default function SearchAppBar({dispatch}) { +export default function SearchAppBar({searchValue, dispatch}) { + console.log('search Value is', searchValue) return ( @@ -56,6 +57,7 @@ export default function SearchAppBar({dispatch}) { dispatch({type: 'filterName', value: e.target.value })} /> diff --git a/src/index.js b/src/index.js index 8c70148..5353aff 100644 --- a/src/index.js +++ b/src/index.js @@ -27,12 +27,6 @@ let theme = createTheme({ secondary: { main: '#f50057', }, - /* text: { - primary: 'rgba(243,239,239,0.87)', - secondary: 'rgba(212,210,210,0.54)', - disabled: 'rgba(131,131,131,0.38)', - hint: 'rgba(127,127,127,0.38)', - }, */ }, } );