Skip to content

Commit

Permalink
Merge pull request #206 from Arquisoft/Valentin_Interfaz2
Browse files Browse the repository at this point in the history 
Valentin_Interfaz2
  • Loading branch information
@UO271548
UO271548 authored May 1, 2022
2 parents e5dcbbe + 6e7d60d commit 2ca1130
Show file tree
Hide file tree
Showing 6 changed files with 295 additions and 207 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 @@ -60,13 +57,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 @@ -77,7 +74,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 @@ -86,35 +83,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
10 changes: 5 additions & 5 deletions webapp/src/code/Theme.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@ import { createTheme } from "@mui/material";
export const theme = createTheme({
palette: {
primary: {
light: "#f3af2f",
light: "#FFC04A",
main: "#f3af2f",
dark: "#553311",
dark: "#A67110",
contrastText: "#111",
},
secondary: {
light: "#ff7961",
main: "#f44336",
dark: "#ba000d",
light: "#429AFF",
main: "#2787F5",
dark: "#0D56A8",
contrastText: "#000",
},
},
Expand Down
104 changes: 57 additions & 47 deletions webapp/src/components/CartItem.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,56 +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" >
<CardMedia
className = "img-ci"
component="img"
sx={{ width: 150, maxWidth: 150 }}
image={item.img}
alt={item.name}
/>
<CardContent>
<Typography className='name-ci' 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" variant="h6">
{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" variant="h6">
{(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>

</Grid>
</Grid>
</CardContent>
</Card>

)
};

);
}

export default CartItem;

Loading

0 comments on commit 2ca1130

Please sign in to comment.