From 827c65be86463b6952659b3dce43e0e4abf8e307 Mon Sep 17 00:00:00 2001
From: Danna Cardenas <thedannitazz@gmail.com>
Date: Tue, 1 Feb 2022 17:57:17 -0500
Subject: [PATCH] Se renderiza vista de detalles

---
 src/App.js                       |  2 +-
 src/components/pages/details.jsx |  6 ++-
 src/components/pokedetails.jsx   | 69 +++++++++++++++++++++++++++++++-
 src/components/pokelist.jsx      | 10 ++++-
 src/hooks/reducer.js             | 10 +++++
 5 files changed, 91 insertions(+), 6 deletions(-)

diff --git a/src/App.js b/src/App.js
index 1e5b88b..1ffc4c9 100644
--- a/src/App.js
+++ b/src/App.js
@@ -17,7 +17,7 @@ function App() {
       <BrowserRouter>
         <Routes>
           <Route exact path='/' element={<Pokemon favs={state.favIds} actionName={'setMainPage'} data={state.data} page={state.mainPage.page} dispatch={dispatch} />} />
-          {/* <Route exact path='/details' element={<Details state={state} dispatch={dispatch} />} /> */}
+          <Route exact path='/details/:id' element={<Details pokemon={state.pokemon} dispatch={dispatch} />} />
           <Route exact path='/favorites' element={<Pokemon favs={state.favIds} actionName={'setFavPage'} data={state.favs} page={state.favPage.page} dispatch={dispatch} />} />
           {/* <Route exact path='/favorites' element={<Favorites state={state} dispatch={dispatch} />} /> */}
         </Routes>
diff --git a/src/components/pages/details.jsx b/src/components/pages/details.jsx
index fb7a229..b70de48 100644
--- a/src/components/pages/details.jsx
+++ b/src/components/pages/details.jsx
@@ -1,11 +1,13 @@
 import  Pokedetails  from "../pokedetails"
 
 
-function Details({state, dispatch}) {
+
+function Details({pokemon, dispatch}) {
+
     return (
         <>
        <h1>Vista detalles</h1>
-      <Pokedetails />
+      <Pokedetails pokemon={pokemon} dispatch={dispatch}/>
       </>
         )
 }
diff --git a/src/components/pokedetails.jsx b/src/components/pokedetails.jsx
index 3a06946..5100ea7 100644
--- a/src/components/pokedetails.jsx
+++ b/src/components/pokedetails.jsx
@@ -1,7 +1,72 @@
-function Pokedetails() {
+import { useParams } from 'react-router-dom';
+import { useEffect } from "react";
+import axios from 'axios';
+import { Typography, Card, CardContent, CardMedia } from '@mui/material';
+
+
+function Pokedetails({ pokemon, dispatch }) {
+    const { id } = useParams();
+    function upperFirstLetter(str) {
+        return str.charAt(0).toUpperCase() + str.slice(1);
+    }
+    const checkState = (state) => {
+        try {
+            return state.name
+        }
+        catch {
+            return 'loading'
+        }
+    }
+    useEffect(() => {
+        async function getPokeData() {
+            try {
+                const response = await axios.get(`https://pokeapi.co/api/v2/pokemon/${id}/`);
+                const fulldata = response.data;
+                console.log('Pokemon: ', fulldata);
+                dispatch({ type: 'getPokemon', pokemon: fulldata });
+            } catch (error) {
+                console.error(error);
+            }
+        }
+        getPokeData();
+
+    }
+        , [])
 
     return (
-        <p>Detalles de Pokémon</p>
+        <>
+
+            <div>
+                <Card sx={{ with: '80vw', height: '92vh', display: 'flex', justifyContent: 'center' }}>
+                    <CardContent sx={{ align: 'center' }}>
+                        <Typography component="div" variant="h4" textAlign='center'>
+                            Pokemon #{id} {upperFirstLetter(pokemon.name)}
+                        </Typography>
+                        <CardMedia
+                            component="img"
+                            sx={{ height: '40vh', align: 'center' }}
+                            image={pokemon && pokemon.sprites.other["official-artwork"].front_default}
+                            alt="pokemon"
+                        />
+                        <Typography component="div" variant="p" textAlign='center'>
+
+                            <hr></hr>
+                            Type: {pokemon && pokemon.types.map((type, i)=> {
+                                return (<li key={'t'+ i}>{type.type.name}</li>)
+                            })}
+                            <hr></hr>
+                            STATS: {pokemon && pokemon.stats.map((stat, i) => {
+                                return <>
+                                    <li key={'p' + i}>{stat.stat.name}: {stat.base_stat}</li>
+                                </>
+                            })}
+
+
+                        </Typography>
+                    </CardContent>
+                </Card>
+            </div>
+        </>
     )
 }
 
diff --git a/src/components/pokelist.jsx b/src/components/pokelist.jsx
index 69c37b5..e29338d 100644
--- a/src/components/pokelist.jsx
+++ b/src/components/pokelist.jsx
@@ -7,14 +7,22 @@ import Button from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
 import StarBorderSharpIcon from '@mui/icons-material/StarBorderSharp';
 import StarIcon from '@mui/icons-material/Star';
+import { useNavigate } from "react-router-dom";
+
 
 function Pokelist({ favs, data, page, pageSize, dispatch }) {
 
+    const navigateTo = useNavigate();
     const pageData = data.slice((page-1)*pageSize, page*pageSize)
 
     function upperFirstLetter(str) {
         return str.charAt(0).toUpperCase() + str.slice(1);
     }
+    function handleClick(e) {
+        const id = e.currentTarget.value
+        console.log('id', id)
+        navigateTo(`details/${id}`);
+    }
     return (
         <div style={{ width: '100vw', display: 'flex', flexDirection: 'row', flexFlow: 'row wrap', justifyContent: 'center' }}>
             {pageData && pageData.map((pokemon, i) => {
@@ -42,7 +50,7 @@ function Pokelist({ favs, data, page, pageSize, dispatch }) {
                                     return <StarBorderSharpIcon onClick={(e) => dispatch({ type: 'setFav', value: pokemon.id })} />
                                 }
                             })()}
-                            <Button size="small">Detalles</Button>
+                            <Button size="small" value={pokemon.id} onClick={(e) => handleClick(e)}>Detalles</Button>
                         </CardActions>
                     </Card>
                 )
diff --git a/src/hooks/reducer.js b/src/hooks/reducer.js
index d5e4703..cdf2ab6 100644
--- a/src/hooks/reducer.js
+++ b/src/hooks/reducer.js
@@ -2,6 +2,12 @@ export const initialState = {
     data: [],
     favs: [],
     favIds: [],
+    pokemon: {
+        name: 'loading',
+        types: [{type: {name: 'loading', url: 'url'}}],
+        stats: [{'base_stat': '50', stat: {name: 'loading', url: 'url'}}, {'base_stat': '50', stat: {name: 'loading', url: 'url'}}, {'base_stat': '50', stat: {name: 'loading', url: 'url'}}, {'base_stat': '50', stat: {name: 'loading', url: 'url'}}, {'base_stat': '50', stat: {name: 'loading', url: 'url'}}, {'base_stat': '50', stat: {name: 'loading', url: 'url'}}],
+        sprites: {other:{'official-artwork': { front_default: 'loading'}}}
+    },
     mainPage: {
         currentData:[],
         page: 1,
@@ -32,6 +38,10 @@ export const reducer = (state, action) => {
             return {...state, mainPage: {...state.mainPage, page: action.page}}  
         case 'setFavPage':
             return {...state, favPage: {...state.favPage, page: action.page}} 
+        case 'getPokemon':
+            const pokemon = action.pokemon;
+            console.log('El pokemon es: ',  pokemon.name)
+            return {...state, pokemon: pokemon}    
         case 'setFav':
             const id = action.value;
             const index = id - 1;