Skip to content

Commit

Permalink
Cambio estilo carrito + arreglo bug theme
Browse files Browse the repository at this point in the history
  • Loading branch information
@valydumitru01
valydumitru01 committed May 1, 2022
1 parent c70cd86 commit eee22d3
Show file tree
Hide file tree
Showing 3 changed files with 186 additions and 145 deletions.
124 changes: 74 additions & 50 deletions webapp/src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,25 @@

//import { useQuery } from 'react-query';
//import Link from '@mui/material/Link';



import { Drawer } from '@mui/material';
import { useState, useEffect } from 'react';
import Welcome from './components/Welcome';
import './css/App.css';
import { Drawer } from "@mui/material";
import { useState, useEffect } from "react";
import Welcome from "./components/Welcome";
import "./css/App.css";
import { Route, Routes, Navigate, BrowserRouter } from "react-router-dom";
import {Rock} from './shared/shareddtypes';
import Catalog from './components/Catalog';
import { ThemeProvider } from '@emotion/react';
import { Rock } from "./shared/shareddtypes";
import Catalog from "./components/Catalog";
import { ThemeProvider } from "@emotion/react";
import { theme } from "./code/Theme";
import LogIn from "./components/Login";
import Register from "./components/Register";
import NavBar from "./components/NavigationBar";
import { Container } from "@mui/material";

import "./css/App.css"
import "./css/App.css";
import ShoppingCart from "./components/ShoppingCart";
import PaymentProcess from './components/payment/PaymentPage';
import OrderHistory from './components/Orders';
import ProductView from './components/ProductView';
import PaymentProcess from "./components/payment/PaymentPage";
import OrderHistory from "./components/Orders";
import ProductView from "./components/ProductView";
type Props = {
openCart: () => void;
};
Expand Down Expand Up @@ -59,13 +56,13 @@ function App(): JSX.Element {
const handleAddToCart = (selectedItem: Rock) => {
setCartContent((cart) => {
if (cart.find((rocaInCart) => rocaInCart.name === selectedItem.name)) {
return cart.map(Rock => (
Rock.name === selectedItem.name ?
{ ...Rock, quantityCart: Rock.quantityCart + 1 } :
Rock
));
return cart.map((Rock) =>
Rock.name === selectedItem.name
? { ...Rock, quantityCart: Rock.quantityCart + 1 }
: Rock
);
}
return [...cart, {...selectedItem, quantityCart: 1}];
return [...cart, { ...selectedItem, quantityCart: 1 }];
});
};

Expand All @@ -76,7 +73,7 @@ function App(): JSX.Element {
if (p.quantityCart === 1) {
return sum;
}
return [...sum, {...p, quantityCart: p.quantityCart - 1}];
return [...sum, { ...p, quantityCart: p.quantityCart - 1 }];
} else {
return [...sum, p];
}
Expand All @@ -85,35 +82,62 @@ function App(): JSX.Element {
};

return (
<ThemeProvider theme={theme}>
<Container maxWidth="xl" className="principal">
<NavBar openCart={() => setCartOpen(true)} />
<BrowserRouter>
<Routes>
<Route path="/home" element={<Welcome handleAddToCart={handleAddToCart} />} />
<Route path="/" element={<Navigate replace to="/home" />} />
<Route path="/catalog" element={ <Catalog handleAddToCart={handleAddToCart} /> } />
<Route path="/orders" element={ <OrderHistory email={"[email protected]"}/> } />
<Route path="/payment" element={ <PaymentProcess cartContent={cartContent} setNewCart={setNewCart} /> } />
<Route path="/login" element={<LogIn />} />
<Route path="/register" element={<Register />} />
<Route path="/logout" element ={<Welcome handleAddToCart={handleAddToCart} />}/>
<Route path="/product/:id" element={<ProductView handleAddToCart={handleAddToCart}></ProductView>}/>
</Routes>
</BrowserRouter>
<Drawer
anchor="right"
open={isCartOpen}
onClose={() => setCartOpen(false)}
>
<ShoppingCart
cartContent={cartContent}
handleAddToCart={handleAddToCart}
handleRemoveFromCart={handleRemoveFromCart}
/>
</Drawer>
</Container>
</ThemeProvider>
<>
<ThemeProvider theme={theme}>
<Container maxWidth="xl" className="principal">
<NavBar openCart={() => setCartOpen(true)} />
<BrowserRouter>
<Routes>
<Route
path="/home"
element={<Welcome handleAddToCart={handleAddToCart} />}
/>
<Route path="/" element={<Navigate replace to="/home" />} />
<Route
path="/catalog"
element={<Catalog handleAddToCart={handleAddToCart} />}
/>
<Route
path="/orders"
element={<OrderHistory email={"[email protected]"} />}
/>
<Route
path="/payment"
element={
<PaymentProcess
cartContent={cartContent}
setNewCart={setNewCart}
/>
}
/>
<Route path="/login" element={<LogIn />} />
<Route path="/register" element={<Register />} />
<Route
path="/logout"
element={<Welcome handleAddToCart={handleAddToCart} />}
/>
<Route
path="/product/:id"
element={
<ProductView handleAddToCart={handleAddToCart}></ProductView>
}
/>
</Routes>
</BrowserRouter>
<Drawer
anchor="right"
open={isCartOpen}
onClose={() => setCartOpen(false)}
>
<ShoppingCart
cartContent={cartContent}
handleAddToCart={handleAddToCart}
handleRemoveFromCart={handleRemoveFromCart}
/>
</Drawer>
</Container>
</ThemeProvider>
</>
);
}

Expand Down
105 changes: 57 additions & 48 deletions webapp/src/components/CartItem.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,57 +1,66 @@
import { Typography } from '@material-ui/core';
import Button from '@material-ui/core/Button';
import { Card, CardContent, CardMedia } from '@mui/material';
import { Rock } from '../shared/shareddtypes';
import '../css/CartItem.css';
import { Grid, Typography } from "@mui/material";
import Button from '@mui/material/Button';
import { Card, CardContent, CardMedia } from "@mui/material";
import { Rock } from "../shared/shareddtypes";

type Props = {
item: Rock;
handleAddToCart: (selectedItem: Rock) => void;
handleRemoveFromCart: (id: string) => void;
}
type CartItemProps = {
item: Rock;
handleAddToCart: (selectedItem: Rock) => void;
handleRemoveFromCart: (id: string) => void;
};

const CartItem: React.FC<Props> = ({item, handleAddToCart, handleRemoveFromCart}) => {
return (
<Card className="cartItem-ci" sx={{ maxWidth: 500 } }>
<CardContent>
<Typography variant="h5">
{item.name}
</Typography>
<div className="quantityController-ci">
function CartItem(props: CartItemProps): JSX.Element {
return (
<Card sx={{ height: "25vh",paddingY:"2vh" }}>
<CardMedia
component="img"
sx={{ height: "55%" }}
image={props.item.img}
alt={props.item.name}
/>
<CardContent>
<Typography variant="h5">{props.item.name}</Typography>
<Grid container spacing={3}>
<Grid item xs={6}>
<Grid container spacing={2}>
<Grid item>
<Button
size="small"
disableElevation
variant="contained"
color="primary"
onClick={() => handleRemoveFromCart(item.name)}
>-</Button>
<Typography id="quantity-ci">
{item.quantityCart + " uds " }
color="secondary"
size="small"
disableElevation
variant="contained"
onClick={() => props.handleRemoveFromCart(props.item.name)}
>
<Typography variant="h5">-</Typography>
</Button>
</Grid>
<Grid item>
<Typography variant="h5">
{props.item.quantityCart + " uds "}
</Typography>
</Grid>
<Grid item>
<Button
size="small"
disableElevation
variant="contained"
color="primary"
onClick={() => handleAddToCart(item)}
>+</Button>
</div>
<Typography id="quantity-ci">
{(item.price * item.quantityCart).toFixed(2) + " €"}
color="secondary"
size="small"
disableElevation
variant="contained"
onClick={() => props.handleAddToCart(props.item)}
>
<Typography variant="h5">+</Typography>
</Button>
</Grid>
</Grid>
</Grid>
<Grid item xs={4}>
<Typography variant="h4">
{(props.item.price * props.item.quantityCart).toFixed(2) + " €"}
</Typography>
</CardContent>
<CardMedia
className = "img-ci"
component="img"
sx={{ width: 120, maxWidth: 120 }}
image={item.img}
alt={item.name}
/>
</Grid>
</Grid>
</CardContent>
</Card>

)
};

);
}

export default CartItem;

102 changes: 55 additions & 47 deletions webapp/src/components/ShoppingCart.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,56 +1,64 @@
import { Button, Grid } from '@mui/material';
import { Rock } from '../shared/shareddtypes';
import CartItem from './CartItem';
import '../css/ShoppingCart.css';
import LoginPod from './solid-pods/LoginPod';
import {useNavigate} from 'react-router-dom';
import { AppBar, Button, Grid, Typography } from "@mui/material";
import { Rock } from "../shared/shareddtypes";
import CartItem from "./CartItem";
import "../css/ShoppingCart.css";
import LoginPod from "./solid-pods/LoginPod";
import { useNavigate } from "react-router-dom";


type Props = {
cartContent: Rock[];
handleAddToCart: (selectedItem: Rock) => void;
handleRemoveFromCart: (id: string) => void;
type CartProps = {
cartContent: Rock[];
handleAddToCart: (selectedItem: Rock) => void;
handleRemoveFromCart: (id: string) => void;
};

const Cart: React.FC<Props> = ({ cartContent, handleAddToCart, handleRemoveFromCart }) => {
const getTotalPrice = () => cartContent.reduce((sum: number, item) => sum + item.quantityCart * item.price, 0);
function Cart(props: CartProps): JSX.Element {
const getTotalPrice = () =>
props.cartContent.reduce(
(sum: number, item) => sum + item.quantityCart * item.price,
0
);

return (
<Grid sx = {{width: 500}}>
<h1 id='title-cart'>Mi carrito</h1>
{cartContent.length === 0 ? <h3>El carrito está vacío</h3> : null}

<div className="items-cart">
{cartContent.map(item => (
<CartItem
key={item.id}
item={item}
handleAddToCart={handleAddToCart}
handleRemoveFromCart={handleRemoveFromCart}
/>
))}
<h2 id="price-cart">Total (iva 21% incluido): {getTotalPrice().toFixed(2)} €</h2>
</div>
return (
<>
{props.cartContent.length !== 0 ? (
<>
<Grid sx={{ width: 500 }}>
<AppBar color="secondary" position="static">
<Typography variant="h5">Mi Carrito</Typography>
</AppBar>
<Typography variant="h5">
Total (iva 21% incluido): {getTotalPrice().toFixed(2)} €
</Typography>

<Button
size="medium"
disableElevation
variant="contained"
disabled={cartContent.length<=0}
onClick={() => {
if(sessionStorage.getItem("userLogged"))
window.location.href = '/payment';
else
window.location.href = '/login';
}}
disableElevation
fullWidth
color="secondary"
variant="contained"
disabled={props.cartContent.length <= 0}
onClick={() => {
if (sessionStorage.getItem("userLogged"))
window.location.href = "/payment";
else window.location.href = "/login";
}}
>
Realizar Pedido
Realizar Pedido
</Button>
{props.cartContent.map((item) => (
<CartItem
key={item.id}
item={item}
handleAddToCart={props.handleAddToCart}
handleRemoveFromCart={props.handleRemoveFromCart}
/>
))}
</Grid>
</>
) : (
<Typography variant="h3">El carrito está vacío</Typography>
)}
</>
);
}



</Grid>
)
};

export default Cart;
export default Cart;

0 comments on commit eee22d3

Please sign in to comment.