Navegación entre las vistas lista

webapp/src/App.tsx

@@ -1,18 +1,27 @@
 import Box from '@mui/material/Box';
 import Link from '@mui/material/Link';
-import Home from './components/Home';
+import Home from './components/Home/Home';
 import Container from '@mui/material/Container';
 import Welcome from './components/Welcome';
 import  {getUsers} from './api/api';
 import {User} from './shared/shareddtypes';
 import './App.css';
-import Details from './components/Details';
-import Carrito from './components/Carrito';
+import Details from './components/Details/Details';
+import Cart from './components/Cart/Cart';
+import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
+import Footer from './components/Fragments/Footer';
 
 function App(): JSX.Element {
   return (
     <>
-        <Carrito/>
+      <Router>
+      <Switch>
+        <Route exact path="/" component={Home} />
+        <Route  path="/Cart" render={() => <Cart/>}/>
+        <Route  path="/Details" render={() => <Details/>}/>
+      </Switch>
+      </Router>
+      <Footer/>
     </>
   );
 }

webapp/src/components/Carrito.tsx → webapp/src/components/Cart/Cart.tsx

@@ -1,11 +1,10 @@
-import List from './List';
-import Nav from './Nav';
-import Shoes from './Shoes';
+import Nav from '../Fragments/Nav';
 import { makeStyles } from '@material-ui/core/styles';
-import Footer from './Footer';
+import Footer from '../Fragments/Footer';
 import { Divider, Stack } from '@mui/material';
 import ShoesCart from './ShoesCart';
 import CartButons from './CartButons';
+
 const useStyles = makeStyles({
   sizes: {
     marginLeft:'34%',
@@ -22,38 +21,30 @@ const useStyles = makeStyles({
                         'footer footer footer'`,
    gridTemplateRows: '1fr 3fr 1fr',
    gridTemplateColumns: '1fr 2fr 1fr',
-},
-main: {
- gridArea: 'main',
-
-},
-footer: {
-  gridArea: 'footer'
-
-},
-header: {
-  gridArea: 'header'
-
-},
-left: {
-  gridArea: 'left'
-
-},right: {
-  gridArea: 'right'
-
-}
-
-
-
-
+  },
+  main: {
+    gridArea: 'main',
+  },
+  footer: {
+    gridArea: 'footer'
+  },
+  header: {
+    gridArea: 'header'
+  },
+  left: {
+    gridArea: 'left' 
+  },
+  right: {
+    gridArea: 'right'
+  }
 });
-const Carrito = () => {
-  const classes = useStyles();
+
+const Cart = () => {
 
     return (
       <div>
-          <Nav/>
-          <Stack
+        <Nav/>
+        <Stack
         direction="row"
         divider={<Divider orientation="vertical" flexItem />}
         spacing={2}
@@ -62,10 +53,7 @@ const Carrito = () => {
             <CartButons/>
         </Stack>
         <Footer/>
-      </div>
-
-
-
+      </div>   
     );
   };
-  export default Carrito;
+  export default Cart;

webapp/src/components/CartButons.tsx → webapp/src/components/Cart/CartButons.tsx

@@ -1,14 +1,8 @@
 import * as React from 'react';
-import CssBaseline from '@mui/material/CssBaseline';
-import Box from '@mui/material/Box';
 import Container from '@mui/material/Container';
-import { BottomNavigationAction } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core';
-import { Grid } from '@mui/material';
 import Button from '@mui/material/Button';
-import ButtonGroup from '@mui/material/ButtonGroup';
 import ShoppingCartIcon from "@mui/icons-material/ShoppingCart";
-import { FavoriteBorder } from "@mui/icons-material";
 
 const useStyles = makeStyles({
     sizes: {
@@ -37,16 +31,16 @@ const useStyles = makeStyles({
 
   },
 });
+
 export default function CartButons() {
     const classes = useStyles();
   return (
-        <Container maxWidth='lg' className={classes.container}>
-
-         <div className={classes.margen}>
+    <Container maxWidth='lg' className={classes.container}>    
+      <div className={classes.margen}>
         <Button variant="contained" endIcon={<ShoppingCartIcon />} sx={{ bgcolor: 'black' }} size='large' >
-           Finalizar Compra
-         </Button>
+          Finalizar Compra
+        </Button>
       </div>        
-      </Container>
+    </Container>
   );
 }

webapp/src/components/ShoesCart.tsx → webapp/src/components/Cart/ShoesCart.tsx

@@ -2,13 +2,10 @@ import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import Card from '@material-ui/core/Card';
 import CardActionArea from '@material-ui/core/CardActionArea';
-import CardActions from '@material-ui/core/CardActions';
 import CardContent from '@material-ui/core/CardContent';
 import CardMedia from '@material-ui/core/CardMedia';
-import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
-import {Container, CssBaseline, Grid } from "@mui/material";
-import Box from '@material-ui/core/Box';
+import {Container, Grid } from "@mui/material";
 import DeleteIcon from '@mui/icons-material/Delete';
 import { IconButton } from '@material-ui/core';
 
@@ -60,44 +57,42 @@ const shoes_images=[
     }]
 
 
-    const ShoesCart = () => {
-        const classes = useStyles();
+const ShoesCart = () => {
+  const classes = useStyles();
 
-        return (
-            <Container maxWidth="md" className={classes.colores2}>
-                <Typography variant='h2' className={classes.colores}>
-                         ARTICULOS EN EL CARRITO
-                </Typography>
-                <Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs:2, sm:2,md: 4  }} rowSpacing={{xs: 1}}>
-                {shoes_images.map( item =>
-                <Grid item  sm={2} md={2} key={item.id}>
-            <Card className={classes.sizes}>
-              <CardActionArea>
-                <CardMedia
-                  component="img"
-                  alt={item.name}
-                  height="200px"
-                  width="200px"
-                  image={item.image}
-                  title={item.name}
-                />
-                <CardContent >
-                    <Typography variant='h6' >
-                        {item.name}
-                    </Typography>
-                    <Typography variant='h6' >
-                        Precio:{item.price}
-                    </Typography>
-                </CardContent>
-              </CardActionArea>
-              <IconButton aria-label="delete"><DeleteIcon /></IconButton>
-            </Card>
-            </Grid>
-            )}
-            </Grid>
-
-            </Container>
-
-          );
-        };
-        export default ShoesCart;
+    return (
+      <Container maxWidth="md" className={classes.colores2}>
+        <Typography variant='h3' className={classes.colores}>
+          ARTICULOS EN EL CARRITO
+        </Typography>
+        <Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs:2, sm:2,md: 4  }} rowSpacing={{xs: 1}}>
+        {shoes_images.map( item =>
+          <Grid item  sm={2} md={2} key={item.id}>
+          <Card className={classes.sizes}>
+            <CardActionArea>
+              <CardMedia
+                component="img"
+                alt={item.name}
+                height="200px"
+                width="200px"
+                image={item.image}
+                title={item.name}
+              />
+            <CardContent >
+              <Typography variant='h6' >
+                {item.name}
+              </Typography>
+              <Typography variant='h6' >
+                Precio:{item.price}
+              </Typography>
+            </CardContent>
+            </CardActionArea>
+            <IconButton aria-label="delete"><DeleteIcon /></IconButton>
+          </Card>
+          </Grid>
+          )}
+        </Grid> 
+      </Container>  
+    );
+};
+export default ShoesCart;

webapp/src/components/Details.tsx → webapp/src/components/Details/Details.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import Nav from './Nav';
-import RightDetails from './RightDetails';
-import LeftDetails from './LeftDetails';
+import Nav from '../Fragments/Nav';
 import { makeStyles } from '@material-ui/core/styles';
-import Footer from './Footer';
+import Footer from '../Fragments/Footer';
 import { Divider, Stack } from '@mui/material';
+import LeftDetails from './LeftDetails';
+import RightDetails from './RightDetails';
 
 const useStyles = makeStyles({
   sizes: {
@@ -27,7 +27,6 @@ const useStyles = makeStyles({
 });
 
 const Details = () => {
-  const classes = useStyles();
 
     return (
       <div>

webapp/src/components/LeftDetails.tsx → webapp/src/components/Details/LeftDetails.tsx

@@ -9,7 +9,6 @@ const useStyles = makeStyles({
   });
 
 const LeftDetails = () => {
-    const classes = useStyles();
 
       return (
         <ImageList variant="masonry" cols={3} gap={8}>

webapp/src/components/RightDetails.tsx → webapp/src/components/Details/RightDetails.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import Button from '@mui/material/Button';
 import ButtonGroup from '@mui/material/ButtonGroup';
 import ShoppingCartIcon from "@mui/icons-material/ShoppingCart";
 import { FavoriteBorder } from "@mui/icons-material";
-import { Box, ButtonBase, Typography } from '@mui/material';
+import { Box, Typography } from '@mui/material';
 import TableSizes from './TableSizes';
 
 const tallas = [

webapp/src/components/TableSizes.tsx → webapp/src/components/Details/TableSizes.tsx

@@ -27,7 +27,6 @@ const StyledTableCell = styled(TableCell)(({ theme }) => ({
       border: 0,
     },
   }));
-
 
 function createData(
     sizeCm: number,

webapp/src/components/Footer.tsx → webapp/src/components/Fragments/Footer.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { makeStyles } from '@material-ui/core/styles';
-import { color } from "@mui/system";
 import { Typography } from "@mui/material";
+
 const useStyles = makeStyles({
     stickToBottom: {
       backgroundColor:'#000000',
@@ -13,20 +13,17 @@ const useStyles = makeStyles({
       left: '0',
       width: '100%',
       textAlign:'center'
-
     },
-    
+});
 
-  });
 const Footer = () => {
     const classes = useStyles();
     return (
-  <div className={classes.stickToBottom}>
-    <Typography variant='h6' >
-        @DeDe_es3A
-    </Typography>
-  </div>
+      <div className={classes.stickToBottom}>
+        <Typography variant='h6' >
+          @DeDe_es3A
+        </Typography>
+      </div>
     );
 };
-
 export default Footer;