Skip to content

Commit

Permalink
Merge branch 'develop' into mainProducts
Browse files Browse the repository at this point in the history
  • Loading branch information
@sebaslh01
sebaslh01 authored Mar 14, 2022
2 parents ecf788f + ff9eb09 commit f33a999
Show file tree
Hide file tree
Showing 17 changed files with 362 additions and 402 deletions.
42 changes: 15 additions & 27 deletions webapp/src/components/CartItem.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
import React, { useState, useEffect } from 'react';
import { useState } from 'react';
import { ItemCart, Product } from "../shared/shareddtypes";
import { addToCart, deleteFromCart } from '../api/api';
import { addToCart } from '../api/api';

import Typography from "@mui/material/Typography";
import Stack from "@mui/material/Stack";
import Button from "@mui/material/Button";
import { Card, CardContent, Box, Divider, CardMedia } from "@mui/material";
import { styled } from "@mui/material/styles";
import { Link } from "react-router-dom";
import DeleteIcon from '@mui/icons-material/Delete';

type CartItemProps = {
Expand All @@ -16,31 +14,21 @@ type CartItemProps = {
deleteItem: (product: Product) => void;
};







function CartItem(props: CartItemProps) {
const [quantity,setQuantity] = useState<number>(props.item.quantity);
const [quantity, setQuantity] = useState<number>(props.item.quantity);

async function changeQuantityBy (item: ItemCart, factor: number): Promise<void> {
async function changeQuantityBy(item: ItemCart, factor: number): Promise<void> {
item.quantity += factor;
setQuantity(item.quantity);
await addToCart(item);
props.updateTotal();
};
};





return (
<Card variant="elevation" sx={{ display: 'flex', marginBottom:5 }}>
<Card variant="elevation" sx={{ display: 'flex', marginBottom: 5 }}>
<CardMedia
component="img"

//set max image to fill the card
//sx={{ maxWidth: '100', maxHeight: '110', width: '100', height: '110' }}
image={props.item.product.image}
Expand All @@ -52,31 +40,31 @@ function CartItem(props: CartItemProps) {
justifyContent='space-between'>
<CardContent>
<Typography component="h2" variant="h4">
{ props.item.product.name }
{props.item.product.name}
</Typography>
<Typography component="h3" color="text.secondary">
{ props.item.product.description }
{props.item.product.description}
</Typography>
</CardContent>
<div style={{ display: 'flex', justifyContent: 'left', margin: 15 }}>
<Stack direction="row" spacing={2} alignItems="center">
<Stack direction="row" spacing={1} alignItems="center">
<Button size="small"
<Button size="small"
disabled={props.item.quantity === 1}
onClick={() => changeQuantityBy(props.item, -1)}
style={{maxWidth: '20px', maxHeight: '20px', minWidth: '20px', minHeight: '20px'}}>
style={{ maxWidth: '20px', maxHeight: '20px', minWidth: '20px', minHeight: '20px' }}>
-
</Button>
<Typography component="h4" align="center">
{ quantity }
{quantity}
</Typography>
<Button size="small"
onClick={() => changeQuantityBy(props.item, 1)}
style={{maxWidth: '20px', maxHeight: '20px', minWidth: '20px', minHeight: '20px'}}>
style={{ maxWidth: '20px', maxHeight: '20px', minWidth: '20px', minHeight: '20px' }}>
+
</Button>
</Stack>
<Button
<Button
onClick={() => props.deleteItem(props.item.product)}
color="error" size="medium" variant="outlined" startIcon={<DeleteIcon />}
>
Expand All @@ -87,7 +75,7 @@ function CartItem(props: CartItemProps) {
</Box>
<CardContent style={{ flex: 1, marginRight: 20 }}>
<Typography component="h1" variant="h4" align="right">
{ props.item.product.price.toString().concat(" €") }
{props.item.product.price.toString().concat(" €")}
</Typography>
</CardContent>
</Card>
Expand Down
165 changes: 74 additions & 91 deletions webapp/src/components/Checkout.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,13 @@
import React, { useState, useEffect } from 'react';
import { useState, useEffect } from 'react';
import { ItemCart } from "../shared/shareddtypes";
import { getCart } from '../api/api';
import { getCart } from '../api/api';

import Typography from "@mui/material/Typography";
import Stack from "@mui/material/Stack";
import Button from "@mui/material/Button";
import { Card, CardContent, Box, Divider, CardMedia } from "@mui/material";
import { styled } from "@mui/material/styles";
import CheckoutItem from "./CheckoutItem";
import { isTemplateSpan } from "typescript";
import { Link } from "react-router-dom";


type CheckoutProps = {
items: ItemCart[];
Expand All @@ -22,94 +19,80 @@ const Img =
display: "block"
});

function Checkout(props: CheckoutProps): JSX.Element {

const [total, setTotal] = useState<number>(0);

const updateTotal = async () => {
let cart = await getCart();
setTotal(cart.reduce((acc, item) => acc + item.product.price * item.quantity, 0));
};

const [cart,setCart] = useState<ItemCart[]>([]);

const refreshCartList = async () => {
setCart( getCart());
}


// useEffect(() => {
// setTotal(props.items.reduce((acc, item) => acc + item.product.price * item.quantity, 0));
// }, [props.items]);

useEffect(()=>{
refreshCartList();
},[]);

useEffect(() => {
setTotal(props.items.reduce((acc, item) => acc + item.product.price * item.quantity, 0));
}, [props.items]);



function loadItems(): JSX.Element {

if (props.items.length === 0) {
return (
<Typography variant="h5" color="text.secondary">
The shopping cart is empty
</Typography>
);
}
else {
//console.log("Length: " + props.items.length)
let res = props.items.map((item: ItemCart) =>
{
if (item !== null && item.quantity > 0) {
return <CheckoutItem updateTotal={updateTotal} item={item}/>
}
}
)
return(
<div>
{res}
</div>
);
function Checkout(props: CheckoutProps): JSX.Element {

const [total, setTotal] = useState<number>(0);

const updateTotal = async () => {
let cart = await getCart();
setTotal(cart.reduce((acc, item) => acc + item.product.price * item.quantity, 0));
};

const [cart, setCart] = useState<ItemCart[]>([]);

const refreshCartList = async () => {
setCart(getCart());
}

useEffect(() => {
refreshCartList();
}, []);

useEffect(() => {
setTotal(props.items.reduce((acc, item) => acc + item.product.price * item.quantity, 0));
}, [props.items]);



function loadItems(): JSX.Element {

if (props.items.length === 0) {
return (
<Typography variant="h5" color="text.secondary">
The shopping cart is empty
</Typography>
);
}
else {
let res = props.items.map((item: ItemCart) => {
if (item !== null && item.quantity > 0) {
return <CheckoutItem updateTotal={updateTotal} item={item} />
}
}
)
return (
<div>
{res}
</div>
);
}

return (
<Box justifyContent="center">
<Typography component="h1" variant="h3" >
Checkout
</Typography>
<Divider/>

<Box style={{ display: 'flex' }}>
<Stack m={6} spacing={5} style={{ flex: 3 }}>
{ loadItems() }
<Card variant="elevation" sx={{display: 'flex', flexDirection: 'column', padding:3 }}>
<Typography component="h1" variant="h6" color="text.secondary">
Cart Totals:
</Typography>
<Typography component="h1" variant="h4">
{ total.toString().concat(" €") }
</Typography>
</Card>
{props.items.length>0?<Button variant="contained" href="/shipping" style = {{color:"white", backgroundColor: "#7c4dff", borderRadius: "8px", top: "20px", height:"50px"}}>
Continue to Shipping
</Button>:<></>}

</Stack>




</Box>


</Box>
);
}

return (
<Box justifyContent="center">
<Typography component="h1" variant="h3" >
Checkout
</Typography>
<Divider />

<Box style={{ display: 'flex' }}>
<Stack m={6} spacing={5} style={{ flex: 3 }}>
{loadItems()}
<Card variant="elevation" sx={{ display: 'flex', flexDirection: 'column', padding: 3 }}>
<Typography component="h1" variant="h6" color="text.secondary">
Cart Totals:
</Typography>
<Typography component="h1" variant="h4">
{total.toString().concat(" €")}
</Typography>
</Card>
{props.items.length > 0 ? <Button variant="contained" href="/shipping" style={{ color: "white", backgroundColor: "#7c4dff", borderRadius: "8px", top: "20px", height: "50px" }}>
Continue to Shipping
</Button> : <></>}
</Stack>
</Box>
</Box>
);
}

export default Checkout;
38 changes: 15 additions & 23 deletions webapp/src/components/CheckoutItem.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,46 +1,38 @@
import React, { useState, useEffect } from 'react';
import { ItemCart, Product } from "../shared/shareddtypes";
import { addToCart, deleteFromCart } from '../api/api';

import { ItemCart } from "../shared/shareddtypes";
import Typography from "@mui/material/Typography";
import Stack from "@mui/material/Stack";
import Button from "@mui/material/Button";
import { Card, CardContent, Box, Divider, CardMedia } from "@mui/material";
import { styled } from "@mui/material/styles";
import { Link } from "react-router-dom";
import DeleteIcon from '@mui/icons-material/Delete';
import { Card, CardContent, Box, CardMedia } from "@mui/material";

type CheckoutItemProps = {
item: ItemCart;
item: ItemCart;
updateTotal: () => void;
};

function CheckoutItem(props: CheckoutItemProps) {
function CheckoutItem(props: CheckoutItemProps) {

return (
<Card variant="elevation" sx={{ display: 'flex', marginBottom:5 }}>
<Card variant="elevation" sx={{ display: 'flex', marginBottom: 5 }}>
<CardMedia
component="img"

image={props.item.product.image}
sx={{ height: 260, width: 100, margin: 3 }}
style={{ flex: 2 }} />
<Box style={{ flex: 3, display: 'flex', flexDirection: 'column' }}
justifyContent='space-between'>
<CardContent>
<Typography component="h2" variant="h3">
{ props.item.product.name }
</Typography>
{props.item.product.name}

</Typography>
<Typography component="h3" variant="h4">
<p>x{ props.item.quantity }</p>
<p>Price: { props.item.product.price.toString().concat(" €") }</p>
</Typography>

<p>x{props.item.quantity}</p>
<p>Price: {props.item.product.price.toString().concat(" €")}</p>
</Typography>
</CardContent>

</Box>

</Card>
);
}
Expand Down
15 changes: 8 additions & 7 deletions webapp/src/components/Footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,13 @@ import GroupRoundedIcon from '@mui/icons-material/GroupRounded';
import CircleRoundedIcon from '@mui/icons-material/CircleRounded';
import CodeRoundedIcon from '@mui/icons-material/CodeRounded';

function Footer() : JSX.Element {
return (
<>
function Footer(): JSX.Element {

return (
<>
<BottomNavigation
style={{ width: "100vw",
style={{
width: "100vw",
backgroundColor: "lavender",
marginTop: "5%",
height: "20vh",
Expand All @@ -19,8 +20,8 @@ function Footer() : JSX.Element {
<BottomNavigationAction label="SOLID" icon={<CircleRoundedIcon />} href="https://solidproject.org/" />
<BottomNavigationAction label="Source code" icon={<CodeRoundedIcon />} href="https://github.com/arquisoft/dede_en_01b" />
</BottomNavigation>
</>
);
</>
);
}

export default Footer;
Loading

0 comments on commit f33a999

Please sign in to comment.