Se corrige bug en barra de busqueda y se añade bottom bar a vista det…

…alles
DannitaZz · Feb 3, 2022 · 74a7ba4 · 74a7ba4
1 parent 06ea50d
commit 74a7ba4
Show file tree

Hide file tree

Showing 10 changed files with 98 additions and 58 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -19,7 +19,7 @@ function App() {
       <BrowserRouter>
         <Routes>
           <Route exact path='/' element={!loggedIn ? <Navigate to="/login" /> : <Pokemon favs={state.favIds} actionName={'setMainPage'} data={state.data} page={state.mainPage.page} filterState={state.filterState} dispatch={dispatch} />} />
-          <Route exact path='/:id' element={!loggedIn ? <Navigate to="/login" /> : <Details pokemon={state.detailPage.pokemon} currentType={state.filterState.type} dispatch={dispatch} />} />
+          <Route exact path='/:id' element={!loggedIn ? <Navigate to="/login" /> : <Details searchValue={state.filterState.name} pokemon={state.detailPage.pokemon} currentType={state.filterState.type} dispatch={dispatch} />} />
           <Route exact path='/favorites' element={!loggedIn ? <Navigate to="/login" /> : <Pokemon favs={state.favIds} actionName={'setFavPage'} data={state.favs} page={state.favPage.page} filterState={state.filterState} dispatch={dispatch} />} />
           <Route exact path='/login' element={<SignIn />} />
         </Routes>

diff --git 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 (
-    <AppBar position="static" style={{background: '#161B22'}} >
+    <AppBar position="static" style={{ background: '#161B22' }} >
       <Container maxWidth="xl">
         <Toolbar disableGutters>
-            <img src={logo} alt='logo' style={{maxWidth: 50}} onClick={() => navigateTo('/')}/>
-            
-            <Typography
+          <img src={logo} alt='logo' style={{ maxWidth: 50 }} onClick={() => navigateTo('/')} />
+
+          <Typography
             variant="h6"
             noWrap
             component="div"
             sx={{ mr: 2, display: { xs: 'none', md: 'flex' } }}
           >
-                   
+
           </Typography>
-          <Box sx={{ flexGrow: 1, display: { xs: 'none', lg: 'flex' }}}>
+          <Box sx={{ flexGrow: 1, display: { xs: 'none', lg: 'flex' } }}>
             {pages.map((page, i) => (
               <Button
                 key={page}
@@ -93,12 +94,26 @@ const ResponsiveAppBar = ({currentType, dispatch}) => {
               </Button>
             ))}
           </Box>
-          <Box sx={{ flexGrow: 0, display: 'flex'}}>
+          {(() => {
+            if (location.pathname === '/' || location.pathname === '/favorites') {
+              return (
+                <>
+                  <Box sx={{ flexGrow: 0, display: 'flex' }}>
+                    <BasicMenu currentType={currentType} dispatch={dispatch} />
+                  </Box>
+                  <Box sx={{ flexGrow: 0, display: 'flex' }}>
+                    <SearchAppBar searchValue={searchValue} dispatch={dispatch} />
+                  </Box>
+                </>
+              )
+            }
+          })()}
+          {/* <Box sx={{ flexGrow: 0, display: 'flex' }}>
             <BasicMenu currentType={currentType} dispatch={dispatch} />
           </Box>
-          <Box sx={{ flexGrow: 0, display: 'flex'}}>
-            <SearchAppBar dispatch={dispatch}/>
-          </Box>
+          <Box sx={{ flexGrow: 0, display: 'flex' }}>
+            <SearchAppBar searchValue={searchValue} dispatch={dispatch} />
+          </Box> */}
           <Box sx={{ flexGrow: 0, display: { xs: 'none', lg: 'flex' } }}>
             <Tooltip title="Open settings">
               <IconButton onClick={handleOpenUserMenu} sx={{ p: 0, color: 'white', marginLeft: '10px' }}>

diff --git 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 (
         <>
-        <ResponsiveAppBar currentType={currentType} dispatch={dispatch}/>
-       <h1>Vista detalles</h1>
+        <ResponsiveAppBar searchValue={searchValue} currentType={currentType} dispatch={dispatch}/>
       <Pokedetails pokemon={pokemon} dispatch={dispatch}/>
+      <FixedBottomNavigation />
       </>
         )
 }

diff --git 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 (
         <>
-        <ResponsiveAppBar currentType = {filterState.type} dispatch={dispatch}/>
+        <ResponsiveAppBar searchValue={filterState.name} currentType = {filterState.type} dispatch={dispatch}/>
       <PaginationControlled actionName={actionName} count={pageCount} page={page} page_size ={20} data={filteredData} dispatch={dispatch} />
       <Pokelist favs={favs} pageSize={pageSize} data={filteredData} page={page} dispatch={dispatch}/>
       <PaginationControlled actionName={actionName} count={pageCount} page={page} page_size ={20} data={filteredData} dispatch={dispatch} />

diff --git a/src/components/pagination.jsx b/src/components/pagination.jsx
@@ -11,8 +11,6 @@ export default function PaginationControlled({actionName, page, count, dispatch}
   return (
       <div style={{width: '100vw', display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: '1%', marginBottom: '1%'}}>
     <Stack spacing={2} sx={{alignSelf: 'center'}}>
-      {/* <Typography>Page: {state && state.page}</Typography> */}
-      {/* <Pagination count={Math.round(data.length / page_size)}  color="primary" page={page}  onChange={handleChange} /> */}
         <Pagination count={count}  color="primary" page={page}  onChange={handleChange} />
     </Stack>
     </div>

diff --git 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 }) {
                         />
                         <Typography component="div" variant="p" textAlign='center'>
                             <hr></hr>
-                            Type: {pokemon && pokemon.types.map((type, i)=> {
+                            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 <div key={'p' + i}>
-                                    <li >{stat.stat.name}: {stat.base_stat}</li>
-                                </div>
-                            })}
-
-
-
                         </Typography>
+                        <hr></hr>
+                        <Chart
+                            chartType="BarChart"
+                            width="100%"
+                            height="200px"
+                            data={data}
+                            options={options}
+                        />
                     </CardContent>
                 </Card>
             </div>

diff --git 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 (
     <Box sx={{ flexGrow: 1 }}>
           <Search>
@@ -56,6 +57,7 @@ export default function SearchAppBar({dispatch}) {
             <StyledInputBase
               placeholder="Search…"
               inputProps={{ 'aria-label': 'search' }}
+              value={searchValue}
               onChange={(e) => dispatch({type: 'filterName', value: e.target.value })}
             />
           </Search>

diff --git 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)',
-    }, */
   },
 }
 );