From 6aa98855b78645544dd69e70ac445e3a2cab81a6 Mon Sep 17 00:00:00 2001
From: Danna Cardenas <thedannitazz@gmail.com>
Date: Wed, 2 Feb 2022 14:22:17 -0500
Subject: [PATCH] Se definen los componentes de las barras superior e inferior

---
 src/App.js                       |  4 +-
 src/components/bottombar.jsx     | 39 ++++++++++++++++++++
 src/components/filterbar.jsx     | 48 ++++++++++++++++++++++++
 src/components/navbar.jsx        | 19 +++++++---
 src/components/pages/pokemon.jsx |  2 +
 src/components/searchbar.jsx     | 63 ++++++++++++++++++++++++++++++++
 6 files changed, 168 insertions(+), 7 deletions(-)
 create mode 100644 src/components/bottombar.jsx
 create mode 100644 src/components/filterbar.jsx
 create mode 100644 src/components/searchbar.jsx

diff --git a/src/App.js b/src/App.js
index d3e4b51..289b746 100644
--- a/src/App.js
+++ b/src/App.js
@@ -6,6 +6,8 @@ import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import Pokemon from './components/pages/pokemon';
 import Details from './components/pages/details';
 import Favorites from './components/pages/favorites';
+import FixedBottomNavigation from './components/bottombar';
+import SearchAppBar from './components/searchbar';
 
 
 function App() {
@@ -19,7 +21,7 @@ function App() {
           <Route exact path='/' element={<Pokemon favs={state.favIds} actionName={'setMainPage'} data={state.data} page={state.mainPage.page} dispatch={dispatch} />} />
           <Route exact path='/: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} />} /> */}
+          <Route exact path='/bottom' element={<SearchAppBar />} />
         </Routes>
       </BrowserRouter>
     </div>
diff --git a/src/components/bottombar.jsx b/src/components/bottombar.jsx
new file mode 100644
index 0000000..eb2ecd1
--- /dev/null
+++ b/src/components/bottombar.jsx
@@ -0,0 +1,39 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import CssBaseline from '@mui/material/CssBaseline';
+import BottomNavigation from '@mui/material/BottomNavigation';
+import BottomNavigationAction from '@mui/material/BottomNavigationAction';
+import Paper from '@mui/material/Paper';
+import CatchingPokemonIcon from '@mui/icons-material/CatchingPokemon';
+import StarIcon from '@mui/icons-material/Star';
+import ExitToAppIcon from '@mui/icons-material/ExitToApp';
+import { useNavigate } from 'react-router-dom';
+
+export default function FixedBottomNavigation() {
+    const navigateTo = useNavigate();
+  return (
+    <Box sx={{ pb: 7, flexGrow: 1, display: { xs: 'flex', lg: 'none' }}} /* ref={ref} */>
+      <CssBaseline />
+      <Paper sx={{ position: 'fixed', bottom: 0, left: 0, right: 0 }} elevation={3}>
+        <BottomNavigation
+          showLabels
+          onChange={(event, newValue) => {
+              if (newValue === '0'){
+                navigateTo('/');
+              } else if (newValue === '1') {
+                  navigateTo('/favorites');
+              } else if (newValue === '2') {
+                  /* navigateTo('/login') */
+                  console.log(newValue);
+              }
+          }}
+        >
+          <BottomNavigationAction label="Pokémon" value='0' icon={<CatchingPokemonIcon />} />
+          <BottomNavigationAction label="Favorites" value='1' icon={<StarIcon />} />
+          <BottomNavigationAction label="Logout" value='2' icon={<ExitToAppIcon />} />
+        </BottomNavigation>
+      </Paper>
+    </Box>
+  );
+}
+
diff --git a/src/components/filterbar.jsx b/src/components/filterbar.jsx
new file mode 100644
index 0000000..7f9ccbe
--- /dev/null
+++ b/src/components/filterbar.jsx
@@ -0,0 +1,48 @@
+import * as React from 'react';
+import Button from '@mui/material/Button';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import FilterListIcon from '@mui/icons-material/FilterList';
+
+export default function BasicMenu() {
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <div>
+      <Button
+        id="basic-button"
+        aria-controls={open ? 'basic-menu' : undefined}
+        aria-haspopup="true"
+        aria-expanded={open ? 'true' : undefined}
+        onClick={handleClick}
+      >
+        <FilterListIcon />
+      </Button>
+      <Menu
+        id="basic-menu"
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        MenuListProps={{
+          'aria-labelledby': 'basic-button',
+        }}
+      >
+        <MenuItem onClick={handleClose}>Generation I</MenuItem>
+        <MenuItem onClick={handleClose}>Generation II</MenuItem>
+        <MenuItem onClick={handleClose}>Generation III</MenuItem>
+        <MenuItem onClick={handleClose}>Generation IV</MenuItem>
+        <MenuItem onClick={handleClose}>Generation V</MenuItem>
+        <MenuItem onClick={handleClose}>Generation VI</MenuItem>
+        <MenuItem onClick={handleClose}>Generation VII</MenuItem>
+        <MenuItem onClick={handleClose}>Generation VIII</MenuItem>
+      </Menu>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/navbar.jsx b/src/components/navbar.jsx
index 50a2af7..13c4273 100644
--- a/src/components/navbar.jsx
+++ b/src/components/navbar.jsx
@@ -12,6 +12,8 @@ import Tooltip from '@mui/material/Tooltip';
 import MenuItem from '@mui/material/MenuItem';
 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";
 
 const pages = ['Pokémon', 'Favorites'];
@@ -58,7 +60,7 @@ const ResponsiveAppBar = () => {
   };
 
   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}}/>
@@ -71,7 +73,7 @@ const ResponsiveAppBar = () => {
           >
                    
           </Typography>
-          <Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }} >
+          {/* <Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }} >
             <IconButton
               size="large"
               aria-label="account of current user"
@@ -107,8 +109,8 @@ const ResponsiveAppBar = () => {
               ))}
             </Menu>
           </Box>
-          
-          <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
+           */}
+          <Box sx={{ flexGrow: 1, display: { xs: 'none', lg: 'flex' }}}>
             {pages.map((page, i) => (
               <Button
                 key={page}
@@ -120,8 +122,13 @@ const ResponsiveAppBar = () => {
               </Button>
             ))}
           </Box>
-
-          <Box sx={{ flexGrow: 0 }}>
+          <Box sx={{ flexGrow: 0, display: 'flex'}}>
+            <BasicMenu/>
+          </Box>
+          <Box sx={{ flexGrow: 0, display: 'flex'}}>
+            <SearchAppBar />
+          </Box>
+          <Box sx={{ flexGrow: 0, display: { xs: 'none', lg: 'flex' } }}>
             <Tooltip title="Open settings">
               <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
                 <LogoutIcon />
diff --git a/src/components/pages/pokemon.jsx b/src/components/pages/pokemon.jsx
index f317fcf..01175fc 100644
--- a/src/components/pages/pokemon.jsx
+++ b/src/components/pages/pokemon.jsx
@@ -3,6 +3,7 @@ import axios from 'axios';
 import ResponsiveAppBar from "../navbar"
 import PaginationControlled from "../pagination"
 import Pokelist from "../pokelist"
+import FixedBottomNavigation from '../bottombar';
 
 function Pokemon({favs, actionName, data, page, dispatch}) {
 
@@ -54,6 +55,7 @@ function Pokemon({favs, actionName, data, page, dispatch}) {
       <PaginationControlled actionName={actionName} count={pageCount} page={page} page_size ={20} data={data} dispatch={dispatch} />
       <Pokelist favs={favs} pageSize={pageSize} data={data} page={page} dispatch={dispatch}/>
       <PaginationControlled actionName={actionName} count={pageCount} page={page} page_size ={20} data={data} dispatch={dispatch} />
+      <FixedBottomNavigation />
       </>
         )
 }
diff --git a/src/components/searchbar.jsx b/src/components/searchbar.jsx
new file mode 100644
index 0000000..c0f80e7
--- /dev/null
+++ b/src/components/searchbar.jsx
@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { styled, alpha } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import InputBase from '@mui/material/InputBase';
+import SearchIcon from '@mui/icons-material/Search';
+
+const Search = styled('div')(({ theme }) => ({
+  position: 'relative',
+  borderRadius: theme.shape.borderRadius,
+  backgroundColor: alpha(theme.palette.common.white, 0.15),
+  '&:hover': {
+    backgroundColor: alpha(theme.palette.common.white, 0.25),
+  },
+  marginLeft: 0,
+  width: '100%',
+  [theme.breakpoints.up('sm')]: {
+    marginLeft: theme.spacing(1),
+    width: 'auto',
+  },
+}));
+
+const SearchIconWrapper = styled('div')(({ theme }) => ({
+  padding: theme.spacing(0, 2),
+  height: '100%',
+  position: 'absolute',
+  pointerEvents: 'none',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+}));
+
+const StyledInputBase = styled(InputBase)(({ theme }) => ({
+  color: 'inherit',
+  '& .MuiInputBase-input': {
+    padding: theme.spacing(1, 1, 1, 0),
+    // vertical padding + font size from searchIcon
+    paddingLeft: `calc(1em + ${theme.spacing(4)})`,
+    transition: theme.transitions.create('width'),
+    width: '100%',
+    [theme.breakpoints.up('sm')]: {
+      width: '12ch',
+      '&:focus': {
+        width: '20ch',
+      },
+    },
+  },
+}));
+
+export default function SearchAppBar() {
+  return (
+    <Box sx={{ flexGrow: 1 }}>
+          <Search>
+            <SearchIconWrapper>
+              <SearchIcon />
+            </SearchIconWrapper>
+            <StyledInputBase
+              placeholder="Search…"
+              inputProps={{ 'aria-label': 'search' }}
+            />
+          </Search>
+    </Box>
+  );
+}
\ No newline at end of file