diff --git a/webapp/src/App.tsx b/webapp/src/App.tsx index 588606d..ba7d26b 100644 --- a/webapp/src/App.tsx +++ b/webapp/src/App.tsx @@ -22,7 +22,7 @@ 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'; type Props = { openCart: () => void; }; @@ -98,6 +98,7 @@ function App(): JSX.Element { } /> } /> }/> + }/> { } export async function getRocksById(rockId:String):Promise{ - const apiEndPoint= process.env.REACT_APP_API_URI || 'http://localhost:5000/api' let response = await fetch(apiEndPoint+'/rocks/' + rockId); //The objects returned by the api are directly convertible to User objects return response.json() diff --git a/webapp/src/components/Login.tsx b/webapp/src/components/Login.tsx index 446d522..d83d4d6 100644 --- a/webapp/src/components/Login.tsx +++ b/webapp/src/components/Login.tsx @@ -7,11 +7,11 @@ import type { AlertColor } from '@mui/material/Alert'; import Box from '@mui/material/Box'; import logo from '../../logoAsturShop.png' import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom"; -import {useNavigate} from 'react-router-dom'; +import { useNavigate } from 'react-router-dom'; import { checkUser } from '../api/api'; import Swal from 'sweetalert2'; import axios from 'axios'; -import { Link } from '@mui/material'; +import { Grid, Link, Typography } from '@mui/material'; const checkParams = (text: String) => { return text === "" || text == null; @@ -34,8 +34,8 @@ function EmailForm(): JSX.Element { const [notificationStatus, setNotificationStatus] = useState(false); - const [notification, setNotification] = useState({severity:'success',message:''}); - + const [notification, setNotification] = useState({ severity: 'success', message: '' }); + const navigate = useNavigate(); @@ -59,23 +59,23 @@ function EmailForm(): JSX.Element { footer: '¿No tienes cuenta? Registrate ahora!' }); } - }) - } - + }) + } + const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); - let result:boolean = await checkUser(email,password); - if (result){ + let result: boolean = await checkUser(email, password); + if (result) { setNotificationStatus(true); - setNotification({ - severity:'success', - message:'You have been registered in the system!' + setNotification({ + severity: 'success', + message: 'You have been registered in the system!' }); console.log(sessionStorage.getItem("userLogged")); navigate("/catalog"); window.location.reload(); } - else{ + else { setNotificationStatus(true); setNotification({ severity:'error', @@ -83,63 +83,72 @@ function EmailForm(): JSX.Element { }); } } - function allFunc(idUser: String, pass: String){ + function allFunc(idUser: String, pass: String) { handleLogin(idUser, pass); setPulse(true); -} + } return ( <> -
+ + + Iniciar sesión + + + setEmail(e.target.value)} + sx={{ my: 2 }} + /> + + + setPassword(e.target.value)} + sx={{ my: 2 }} + /> + + + + + -
-

Entrar en Sesión

-
- - setEmail(e.target.value)} - sx={{ my: 2 }} - /> -
-
- - setPassword(e.target.value)} - sx={{ my: 2 }} - /> -
- -
- -
- ¿Aún no estás registrado? Regístrate aqui! -
- - - -
- {setNotificationStatus(false)}}> - - {notification.message} - - + + + + ¿Aún no estás registrado? Regístrate aqui! + + + + { setNotificationStatus(false) }}> + + {notification.message} + + + ); } diff --git a/webapp/src/components/Product.tsx b/webapp/src/components/Product.tsx index 3d87f37..0edd48b 100644 --- a/webapp/src/components/Product.tsx +++ b/webapp/src/components/Product.tsx @@ -1,27 +1,33 @@ import { Rock } from '../shared/shareddtypes'; import Button from '@mui/material/Button'; import { Card, CardActionArea, CardContent, CardMedia, Grid, Paper, Typography } from '@mui/material'; +import { useState } from 'react'; +import { height, padding } from '@mui/system'; type ProductProps = { - product: Rock | null; + product: Rock; buyable: boolean; handleAddToCart(r: Rock): void; }; - //a function Product(product: ProductProps): JSX.Element { + const [cardState,setCardState] = useState<2 | 8>(2) + const handleHoveringProduct = (event: React.MouseEvent)=>{ + setCardState(8) + } + const handleNotHoveringProduct = (event: React.MouseEvent)=>{ + setCardState(2) + } return ( - - - + + + - + - {product.product !== null ? - @@ -50,24 +56,17 @@ function Product(product: ProductProps): JSX.Element { - - : <> - } - - - - - - - + - ); } diff --git a/webapp/src/components/ProductView.tsx b/webapp/src/components/ProductView.tsx new file mode 100644 index 0000000..ef390d3 --- /dev/null +++ b/webapp/src/components/ProductView.tsx @@ -0,0 +1,43 @@ +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 "../css/LoginRegister.css"; +import { Grid, Typography } from "@mui/material"; +import { Rock } from "../shared/shareddtypes"; + +type RegisterProps = { + handleAddToCart(r: Rock): void; +}; + +function ProductView(props: RegisterProps): JSX.Element { + const { id } = useParams() + const [rock, setRock] = useState() + const refreshRock = async () => { + if (id !== undefined) + setRock((await getRocksById(id))[0]) + console.log(rock) + } + useEffect(() => { + refreshRock(); + }, []); + if (rock !== undefined) + return ( + <> + + + {rock.name} + + + + ); + else + return <> +} + +export default ProductView; diff --git a/webapp/src/components/Register.tsx b/webapp/src/components/Register.tsx index 133b8c1..b05bba4 100644 --- a/webapp/src/components/Register.tsx +++ b/webapp/src/components/Register.tsx @@ -1,215 +1,273 @@ -import React, { useState } from 'react'; -import Button from '@mui/material/Button'; -import TextField from '@mui/material/TextField'; -import type { AlertColor } from '@mui/material/Alert'; -import {useNavigate} from 'react-router-dom'; -import Link from '@mui/material/Link'; -import { addUser } from '../api/api'; -import Swal from 'sweetalert2'; -import axios from 'axios'; -import '../css/LoginRegister.css'; - +import React, { useState } from "react"; +import Button from "@mui/material/Button"; +import TextField from "@mui/material/TextField"; +import type { AlertColor } from "@mui/material/Alert"; +import { useNavigate } from "react-router-dom"; +import Link from "@mui/material/Link"; +import { addUser } from "../api/api"; +import Swal from "sweetalert2"; +import axios from "axios"; +import "../css/LoginRegister.css"; +import { Grid, Typography } from "@mui/material"; type RegisterProps = { OnUserListChange: () => void; -} +}; type NotificationType = { - severity: AlertColor, + severity: AlertColor; message: string; -} +}; const checkParams = (text: String) => { return text === "" || text == null; -} +}; const checkPaswwords = (repPass: String, pass: String) => { return repPass !== pass; -} - +}; function RegisterForm(): JSX.Element { + const [password, setPassword] = useState(""); + const [confirmPassword, setConfirmPassword] = useState(""); + const [email, setEmail] = useState(""); + const [dni, setDni] = useState(""); + const [name, setName] = useState(""); + const [pulse, setPulse] = useState(false); - const [password, setPassword] = useState(''); - const [confirmPassword, setConfirmPassword] = useState(''); - const [email, setEmail] = useState(''); - const[dni,setDni] = useState(''); - const[name,setName] = useState(''); - const [pulse, setPulse] = useState(false) - - async function allFunc(name:String,dni:String,email: String,password: String,confirmPassword:String){ + async function allFunc( + name: String, + dni: String, + email: String, + password: String, + confirmPassword: String + ) { setPulse(true); - if(await getEmail(email).then(resolve => {return resolve})){ - Swal.fire({ - title: "El e-mail ya existe", - text: "El e-mail ya existe en el sistema, pruebe con otro", - icon: "error" - }); - }else{ - handleSignup(name,dni,email,password,confirmPassword); + if ( + await getEmail(email).then((resolve) => { + return resolve; + }) + ) { + Swal.fire({ + title: "El e-mail ya existe", + text: "El e-mail ya existe en el sistema, pruebe con otro", + icon: "error", + }); + } else { + handleSignup(name, dni, email, password, confirmPassword); } -} -const handleSignup = (name:String,dni:String,email: String,pass: String,repPass:String) => { - axios.post("http://localhost:5000/user/signup",{"name":name,"dni":dni,"email":email,"role":"ROLE_USER","password":pass,"repPassword":repPass}) - .then((res: { data: any; status: number; }) => { - console.log(res); - console.log(res.data); - if(res.status == 201){ + } + const handleSignup = ( + name: String, + dni: String, + email: String, + pass: String, + repPass: String + ) => { + axios + .post("http://localhost:5000/user/signup", { + name: name, + dni: dni, + email: email, + role: "ROLE_USER", + password: pass, + repPassword: repPass, + }) + .then((res: { data: any; status: number }) => { + console.log(res); + console.log(res.data); + if (res.status == 201) { Swal.fire({ - title: "Usuario registrado", - text: "Te has registrado correctamente en la aplicación", - icon: "success" + title: "Usuario registrado", + text: "Te has registrado correctamente en la aplicación", + icon: "success", }).then(() => { - window.location.assign("/login"); + window.location.assign("/login"); }); - } - }) -} -const getEmail = async (email: String) => { - const data = await axios.get("http://localhost:5000/user/list/"+ email). - then(res => { - return res.data - }) - return data != null; -} - + } + }); + }; + const getEmail = async (email: String) => { + const data = await axios + .get("http://localhost:5000/user/list/" + email) + .then((res) => { + return res.data; + }); + return data != null; + }; const [notificationStatus, setNotificationStatus] = useState(false); - const [notification, setNotification] = useState({severity:'success',message:''}); - - const navigate = useNavigate(); + const [notification, setNotification] = useState({ + severity: "success", + message: "", + }); + const navigate = useNavigate(); const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); - let result:boolean = await addUser({name : name, email: email, dni:dni, password:password, repeatPassword:confirmPassword}); - console.log({email}); - console.log({name}); - console.log({dni}); - console.log({password}); - console.log({confirmPassword}) - + let result: boolean = await addUser({ + name: name, + email: email, + dni: dni, + password: password, + repeatPassword: confirmPassword, + }); + console.log({ email }); + console.log({ name }); + console.log({ dni }); + console.log({ password }); + console.log({ confirmPassword }); - if (result){ + if (result) { console.log("User Registered Succesfully"); setNotificationStatus(true); - setNotification({ - severity:'success', - message:'You have been registered in the system!' + setNotification({ + severity: "success", + message: "You have been registered in the system!", }); //Notify the change to the parent component navigate("/login"); - } - else{ + } else { setNotificationStatus(true); - setNotification({ - severity:'error', - message:'There\'s been an error in the register proccess.' + setNotification({ + severity: "error", + message: "There's been an error in the register proccess.", }); } - } + }; return ( - <> -
-
-
- -

Crear cuenta

-
- - + + + + Crear cuenta + + + setEmail(e.target.value)} + fullWidth + error={checkParams(email) && pulse} + helperText={ + checkParams(email) && pulse + ? "El campo no puede estar vacio" + : "" + } + onChange={(e) => setEmail(e.target.value)} sx={{ my: 2 }} - /> -
- -
+ + setName(e.target.value)} + error={checkParams(name) && pulse} + helperText={ + checkParams(name) && pulse + ? "El campo no puede estar vacio" + : "" + } + onChange={(e) => setName(e.target.value)} sx={{ my: 2 }} - /> -
- -
+ + setDni(e.target.value)} + error={checkParams(dni) && pulse} + helperText={ + checkParams(dni) && pulse ? "El campo no puede estar vacio" : "" + } + onChange={(e) => setDni(e.target.value)} sx={{ my: 2 }} - /> -
- -
- + + setPassword(e.target.value)} + error={checkParams(password) && pulse} + helperText={ + checkParams(password) && pulse + ? "El campo no puede estar vacio" + : "" + } + onChange={(e) => setPassword(e.target.value)} sx={{ my: 2 }} - /> -
-
- + + setConfirmPassword(e.target.value)} + fullWidth + error={checkParams(confirmPassword) && pulse} + helperText={ + checkParams(confirmPassword) && pulse + ? "El campo no puede estar vacio" + : "" || (checkPaswwords(confirmPassword, password) && pulse) + ? "Las contraseñas no coinciden" + : "" + } + onChange={(e) => setConfirmPassword(e.target.value)} sx={{ my: 2 }} - /> - -
-
- -
- ¿Ya tienes una cuenta? Inicia sesión aqui! -
-
-
- + + + + + + + ¿Ya tienes una cuenta? Inicia sesión aqui! + + + + ); } - export default RegisterForm; \ No newline at end of file +export default RegisterForm; diff --git a/webapp/src/components/tests/user/Register.test.tsx b/webapp/src/components/tests/user/Register.test.tsx index ee10844..fc3ffe6 100644 --- a/webapp/src/components/tests/user/Register.test.tsx +++ b/webapp/src/components/tests/user/Register.test.tsx @@ -1,5 +1,5 @@ import { render } from '@testing-library/react'; -import { Route, Routes, Navigate, BrowserRouter as Router } from "react-router-dom"; +import { BrowserRouter as Router } from "react-router-dom"; import Register from '../../Register';