diff --git a/webapp/src/App.tsx b/webapp/src/App.tsx index 89e871c..7005d3c 100644 --- a/webapp/src/App.tsx +++ b/webapp/src/App.tsx @@ -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; }; @@ -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 }]; }); }; @@ -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]; } @@ -86,35 +83,62 @@ function App(): JSX.Element { }; return ( - - - setCartOpen(true)} /> - - - } /> - } /> - } /> - } /> - } /> - } /> - } /> - }/> - }/> - - - setCartOpen(false)} - > - - - - + <> + + + setCartOpen(true)} /> + + + } + /> + } /> + } + /> + } + /> + + } + /> + } /> + } /> + } + /> + + } + /> + + + setCartOpen(false)} + > + + + + + ); } diff --git a/webapp/src/code/Theme.tsx b/webapp/src/code/Theme.tsx index 8a8a5dc..330159a 100644 --- a/webapp/src/code/Theme.tsx +++ b/webapp/src/code/Theme.tsx @@ -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", }, }, diff --git a/webapp/src/components/CartItem.tsx b/webapp/src/components/CartItem.tsx index bec83e5..cac80ca 100644 --- a/webapp/src/components/CartItem.tsx +++ b/webapp/src/components/CartItem.tsx @@ -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 = ({item, handleAddToCart, handleRemoveFromCart}) => { - return ( - - - - {item.name} -
+function CartItem(props: CartItemProps): JSX.Element { + return ( + + + + {props.item.name} + + + + - - {item.quantityCart + " uds" } + color="secondary" + size="small" + disableElevation + variant="contained" + onClick={() => props.handleRemoveFromCart(props.item.name)} + > + - + + + + + {props.item.quantityCart + " uds "} + + -
- - {(item.price * item.quantityCart).toFixed(2) + " €"} + color="secondary" + size="small" + disableElevation + variant="contained" + onClick={() => props.handleAddToCart(props.item)} + > + + + + + + + + + {(props.item.price * props.item.quantityCart).toFixed(2) + " €"} - - + + + - - ) -}; - + ); +} export default CartItem; - diff --git a/webapp/src/components/ProductView.tsx b/webapp/src/components/ProductView.tsx index 58bc0ea..8280ab1 100644 --- a/webapp/src/components/ProductView.tsx +++ b/webapp/src/components/ProductView.tsx @@ -1,16 +1,11 @@ -import React, { useEffect, useState } from "react"; -import Button from "@mui/material/Button"; -import TextField from "@mui/material/TextField"; -import type { AlertColor } from "@mui/material/Alert"; -import { useNavigate, useParams } from "react-router-dom"; -import Link from "@mui/material/Link"; -import { addUser, getRocksById } from "../api/api"; -import Swal from "sweetalert2"; -import axios from "axios"; +import { useEffect, useState } from "react"; +import { useParams } from "react-router-dom"; +import { getRocksById } from "../api/api"; import "../css/LoginRegister.css"; -import { Grid, Typography } from "@mui/material"; +import { Button, Card, CardMedia, Grid, Paper, Typography } from "@mui/material"; +import InfoIcon from '@mui/icons-material/Info'; import { Rock } from "../shared/shareddtypes"; - +import ProductViewData from "./ProductViewData"; type RegisterProps = { handleAddToCart(r: Rock): void; }; @@ -28,47 +23,67 @@ function ProductView(props: RegisterProps): JSX.Element { if (rock !== undefined) return ( <> - - - {rock.name} - - - - - Tipo - - - {rock.type} - + - - Densidad - - - {rock.density} g/cm3 - - - Mohs - - - {rock.mohsHardness} - + + + {rock.name} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - Precio - - - {rock.price}€ - - + + ); else diff --git a/webapp/src/components/ProductViewData.tsx b/webapp/src/components/ProductViewData.tsx new file mode 100644 index 0000000..a598460 --- /dev/null +++ b/webapp/src/components/ProductViewData.tsx @@ -0,0 +1,44 @@ +import "../css/LoginRegister.css"; +import { Grid, Paper, Tooltip, Typography } from "@mui/material"; +import InfoIcon from '@mui/icons-material/Info'; +type RegisterProps = { + infoContent?: string, + content: string, +}; + +function ProductViewData(props: RegisterProps): JSX.Element { + + + return ( + <> + + + + {props.infoContent!==undefined ? + <> + + + + + + + + + {props.content} + + : + + {props.content} + + } + + + + + + + ); + +} + +export default ProductViewData; diff --git a/webapp/src/components/ShoppingCart.tsx b/webapp/src/components/ShoppingCart.tsx index 56ee444..bb7f735 100644 --- a/webapp/src/components/ShoppingCart.tsx +++ b/webapp/src/components/ShoppingCart.tsx @@ -1,52 +1,34 @@ -import { AppBar, Button, Grid, List } from '@mui/material'; -import { Card, CardContent } from '@mui/material'; -import { Rock } from '../shared/shareddtypes'; -import CartItem from './CartItem'; -import '../css/ShoppingCart.css'; +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 = ({ cartContent, handleAddToCart, handleRemoveFromCart }) => { - const getTotalPrice = () => cartContent.reduce((sum: number, item) => sum + item.quantityCart * item.price, 0); - const getTotalUds = () => cartContent.reduce((sum: number, item) => sum + item.quantityCart, 0); +function Cart(props: CartProps): JSX.Element { + const getTotalPrice = () => + props.cartContent.reduce( + (sum: number, item) => sum + item.quantityCart * item.price, + 0 + ); - return ( - - -

Mi carrito

+ return ( + <> + {props.cartContent.length !== 0 ? ( + <> + + + Mi Carrito - - } - > - {[0].map((sectionId) => ( -
  • -
      - {cartContent.map(item => ( - - ))} -
    -
    • - ))} -     + + Total (iva 21% incluido): {getTotalPrice().toFixed(2)} € +
    @@ -60,21 +42,34 @@ const Cart: React.FC = ({ cartContent, handleAddToCart, handleRemoveFromC - - ) -}; + {props.cartContent.map((item) => ( + + ))} + + + ) : ( + El carrito está vacío + )} + + ); +} -export default Cart; \ No newline at end of file +export default Cart;