Arquisoft · UO276900 · May 1, 2022 · May 1, 2022 · May 1, 2022 · May 1, 2022
diff --git 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 {
             <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

diff --git a/webapp/src/api/api.ts b/webapp/src/api/api.ts
@@ -27,7 +27,6 @@ export async function getRocas():Promise<Rock[]>{
 } 
 
 export async function getRocksById(rockId:String):Promise<Rock[]>{
-  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
@@ -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<NotificationType>({severity:'success',message:''});
-  
+  const [notification, setNotification] = useState<NotificationType>({ severity: 'success', message: '' });
+
   const navigate = useNavigate();
 
 
@@ -59,87 +59,96 @@ function EmailForm(): JSX.Element {
                  footer: '<a href ="/signup">¿No tienes cuenta? Registrate ahora!</a>'
              });
         }
-    })
- }
- 
+      })
+  }
+
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     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',
         message:'El usuario o contraseña son incorrectos, vuelva a introducirlos'
       });
     }
   }
-  function allFunc(idUser: String, pass: String){
+  function allFunc(idUser: String, pass: String) {
     handleLogin(idUser, pass);
     setPulse(true);
-}
+  }
 
 
   return (
     <>
-      <div className='loginBackground'>
       <form name="loggin" onSubmit={handleSubmit}>
+        <Grid
+          container
+          style={{ width: '100%' }}
+          direction="column"
+          alignItems="center"
+          padding={2}
+        >
+          <Grid item >
+            <Typography variant="h2">Iniciar sesión</Typography>
+          </Grid>
+          <Grid item width={'50%'}>
+            <TextField
+              required
+              name="Usuario"
+              label="email"
+              variant="outlined"
+              fullWidth
+              value={email}
+              error={checkParams(email) && pulse}
+              helperText={checkParams(email) && pulse ? 'El campo no puede estar vacio' : ''}
+              onChange={e => setEmail(e.target.value)}
+              sx={{ my: 2 }}
+            />
+          </Grid>
+          <Grid item width={'50%'}>
+            <TextField
+              required
+              name="Contraseña"
+              label="password"
+              variant="outlined"
+              type="password"
+              fullWidth
+              value={password}
+              error={checkParams(password) && pulse}
+              helperText={checkParams(password) && pulse ? 'El campo no puede estar vacio' : ''}
+              onChange={e => setPassword(e.target.value)}
+              sx={{ my: 2 }}
+            />
+
+          </Grid>
+          <Grid item width={'50%'}>
+
+            <Button onClick={() => allFunc(email, password)} variant="contained" fullWidth type="submit">Iniciar Sesión</Button>
 
-      <div className='registerForm'>
-      <h1>Entrar en Sesión</h1>
-      <div className='field-container'>
-
-        <TextField
-            required
-            name="Usuario"
-            label="email" 
-            variant="outlined"
-            value={email}
-            error = {checkParams(email) && pulse}
-            helperText={checkParams(email) && pulse ? 'El campo no puede estar vacio' : ''}
-            onChange={e => setEmail(e.target.value)}
-            sx={{ my: 2 }}
-          />
-      </div>
-      <div className='field-container'>
-
-        <TextField
-          required
-          name="Contraseña"
-          label="password" 
-          variant="outlined"
-          type="password"
-          value={password}
-          error = {checkParams(password) && pulse}
-          helperText={checkParams(password) && pulse ? 'El campo no puede estar vacio' : ''}
-          onChange={e => setPassword(e.target.value)}
-          sx={{ my: 2 }}
-        />
-        </div>    
-
-        <div className='buttonCls'>
-           <Button onClick={() => allFunc(email, password)} variant="contained" type="submit">Iniciar Sesión</Button>
-           </div>
-           <Link href = "/register">¿Aún no estás registrado? Regístrate aqui!</Link>
-        </div>
-
-        </form>
-
-      </div>
-      <Snackbar open={notificationStatus} autoHideDuration={3000} onClose={()=>{setNotificationStatus(false)}}>
-        <Alert severity={notification.severity} sx={{ width: '100%' }}>
-          {notification.message}
-        </Alert>
-      </Snackbar>
+          </Grid>
+          <Grid item marginTop={2}>
+            <Link href="/register">
+              <Typography >¿Aún no estás registrado? Regístrate aqui!</Typography>
+            </Link>
+          </Grid>
+        </Grid>
+        <Snackbar open={notificationStatus} autoHideDuration={3000} onClose={() => { setNotificationStatus(false) }}>
+          <Alert severity={notification.severity} sx={{ width: '100%' }}>
+            {notification.message}
+          </Alert>
+        </Snackbar>
+      </form>
     </>
   );
 }

diff --git 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<HTMLElement>)=>{
+    setCardState(8)
+  }
+  const handleNotHoveringProduct = (event: React.MouseEvent<HTMLElement>)=>{
+    setCardState(2)
+  }
   return (
-
-    <Card className="product">
-      <CardActionArea>
+    <Card elevation={cardState} className="product" onMouseEnter={handleHoveringProduct} onMouseLeave={handleNotHoveringProduct}>
+      
+      <CardActionArea href={'/product/'+product.product.id}>
         <CardMedia component="img"
           height="200"
           image={product.product?.img}
           alt={product.product?.name}
         />
-        </CardActionArea >
+
         <CardContent>
-          {product.product !== null ?
-
             <Grid container spacing={3} >
               <Grid item xs={12}>
                 <Paper elevation={3} className='productDataContainer' />
@@ -50,24 +56,17 @@ function Product(product: ProductProps): JSX.Element {
                 <Paper />
               </Grid>
             </Grid>
-
-            : <></>
-          }
-
-
-
-
-      <Button
+        </CardContent>
+        <Button
+        sx={{marginBottom:'1em'}}
         variant="contained"
         className='btnBuy'
         color="primary"
         style={{ width: '100%' }}
         onClick={() => product.handleAddToCart(product.product as Rock)}>
         Comprar</Button>
-        </CardContent>
-
+        </CardActionArea >
     </Card >
-
   );
 }
 

diff --git a/webapp/src/components/ProductView.tsx 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<Rock>()
+  const refreshRock = async () => {
+    if (id !== undefined)
+      setRock((await getRocksById(id))[0])
+    console.log(rock)
+  }
+  useEffect(() => {
+    refreshRock();
+  }, []);
+  if (rock !== undefined)
+    return (
+      <>
+        <Grid container>
+          <Grid item>
+            <Typography>{rock.name}</Typography>
+          </Grid>
+        </Grid>
+      </>
+    );
+  else
+    return <></>
+}
+
+export default ProductView;