Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/cam 47 #24

Open
wants to merge 2 commits into
base: development
Choose a base branch
from
Open

Feature/cam 47 #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3d773cc
:sparkles: Implementar funcionalidad de edición en perfil de usuario …
JuanYunda Jun 8, 2024
6086abe
:bug: Deshabilitar interacción de mouse en imagen de perfil
JuanYunda Jun 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ import AppBarComponent from './components/AppBarComponent/AppBarComponent'
import SectionHome from './views/landingPage/SectionHome'
import SectionRegisterLogin from './views/landingPage/SectionRegisterLogin'
import SectionSignUp from './views/signUp/SectionSignUp'
import SectionTerms from './views/terms/SectionTerms'
import SectionAbout from './views/aboutUs/SectionAboutUs'
import SectionTerms from './views/Terms/SectionTerms'
import SectionAbout from './views/AboutUs/SectionAboutUs'
import InfoHome from './components/HomeComponent/infoHome/InfoHomeComponent'
import TermsHome from './components/HomeComponent/termsHome/HomeTermsComponent'
import { ProfileComponent } from './views/profile/Profile'
Expand Down
2 changes: 1 addition & 1 deletion src/services/authService.js
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Eliminar console.log

Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ export const getUser = async (uid) => {
'Content-Type': 'application/json',
},
});

console.log(response.data)
return response.data;
} catch (error) {
throw new Error(`Error de respuesta del servidor: ${error.response.data}`);
Expand Down
10 changes: 6 additions & 4 deletions src/views/profile/components/FormSignUp.css → src/views/profile/components/FormProfile.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,13 +31,15 @@ button, a {
}

.img-register {
position: absolute;
bottom: 0;
right: 0;
width: 900px;
height: 100%;
object-fit: cover;
max-height: 86%;
border-radius: 20px;
pointer-events: none; /* Esto hace que la imagen no sea focuseable por el mouse */
}


.input-form {
/* Other styling for input-form */
padding: 10px;
Expand All @@ -48,7 +50,7 @@ button, a {
}

.readonly-input {
color: #999; /* Lighter text color for read-only fields */
color: #888888; /* Lighter text color for read-only fields */
background-color: #f5f5f5; /* Optional: slightly different background color */
}

Expand Down
44 changes: 26 additions & 18 deletions src/views/profile/components/FormProfile.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import React, { useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom"; // Importa useParams
import { Button, Container, DialogActions, DialogContent, DialogContentText, FormControl, Grid, TextField } from "@mui/material";
import { useNavigate, useParams } from "react-router-dom";
import { Button, Container, DialogActions, DialogContent, DialogContentText, FormControl, Grid } from "@mui/material";
import Dialog from '@mui/material/Dialog';
import DialogTitle from '@mui/material/DialogTitle';
import { LoadingComponent } from "../../../components/LoadingComponent/Loading";
import { postUser, postDriver, postPassenger, getUser, putUser } from './../../../services/authService';
import ImagePortrait from '../../../assets/images/fondo_registro.png';
import './FormSignUp.css';
import './FormProfile.css';

import { useUser } from "../../../contexts/userContext";

Expand All @@ -15,10 +15,9 @@ function EditProfile() {
const { userType } = useUser();
const [typeUser, setTypeUser] = useState('');
const [typeUserSpanish, setTypeUserSpanish] = useState('');

// Utiliza useParams para obtener el userId de la URL
const { userId } = useParams();

const [savedUid, setSavedUid] = useState('');
const [formValues, setFormValues] = useState({
firstName: '',
lastName: '',
Expand All @@ -30,6 +29,7 @@ function EditProfile() {
phoneNumber: '',
});

const [isEditable, setIsEditable] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [isError, setIsError] = useState(false);
const [isSuccess, setIsSuccess] = useState(false);
Expand All @@ -48,7 +48,7 @@ function EditProfile() {
// Fetch user data
const fetchUserData = async () => {
try {
const userData = await getUser(userId); // Usar userId obtenido de la URL
const userData = await getUser(userId);
setFormValues({
firstName: userData.data.first_name,
lastName: userData.data.last_name,
Expand All @@ -74,6 +74,10 @@ function EditProfile() {
}));
};

const toggleEdit = () => {
setIsEditable((prev) => !prev);
};

const saveUser = async (e) => {
e.preventDefault();
setIsLoading(true);
Expand All @@ -94,7 +98,7 @@ function EditProfile() {
setIsSuccess(true);
} else {
const res = await postUser(user);
setuserId(res.userId);
setSavedUid(res.userId);
localStorage.setItem('userId', res.userId);
if (typeUser === 'driver') {
await postDriver({ userId: res.userId });
Expand All @@ -107,16 +111,17 @@ function EditProfile() {
setIsError(true);
} finally {
setIsLoading(false);
setIsEditable(false);
}
};

const handleClose = () => {
setIsError(false);
setIsSuccess(false);
}
};

const handleSuccess = () => {
navigate(`/user/profile/${userId}`); // Redirige a la página de perfil
navigate(`/user/profile/${savedUid}`);
};

return (
Expand All @@ -131,34 +136,37 @@ function EditProfile() {
</Grid>
<Grid item xs={12} sm={6} md={6}>
<input
className="input-form"
className={`input-form ${!isEditable && 'readonly-input'}`}
name="firstName"
onChange={handleChange}
value={formValues.firstName}
placeholder={formValues.firstName}
readOnly={!isEditable}
/>
</Grid>
<Grid item xs={12} sm={6} md={6}>
<input
className="input-form"
className={`input-form ${!isEditable && 'readonly-input'}`}
name="lastName"
onChange={handleChange}
value={formValues.lastName}
placeholder={formValues.lastName}
readOnly={!isEditable}
/>
</Grid>
<Grid item xs={12} sm={6} md={6}>
<input
className="input-form"
className={`input-form ${!isEditable && 'readonly-input'}`}
name="phoneNumber"
onChange={handleChange}
value={formValues.phoneNumber}
placeholder={formValues.phoneNumber}
readOnly={!isEditable}
/>
</Grid>
<Grid item xs={12} sm={6} md={6}>
<input
className="input-form readonly-input"
className={`input-form ${true && 'readonly-input'}`}
name="email"
value={formValues.email}
placeholder={formValues.email}
Expand All @@ -168,7 +176,7 @@ function EditProfile() {
</Grid>
<Grid item xs={12} sm={6} md={6}>
<input
className="input-form readonly-input"
className={`input-form ${true && 'readonly-input'}`}
name="documentNumber"
value={formValues.documentNumber}
placeholder={formValues.documentNumber}
Expand All @@ -177,7 +185,7 @@ function EditProfile() {
</Grid>
<Grid item xs={12} sm={6} md={6}>
<input
className="input-form readonly-input"
className={`input-form ${true && 'readonly-input'}`}
name="documentType"
value={formValues.documentType}
placeholder={formValues.documentType}
Expand All @@ -186,7 +194,7 @@ function EditProfile() {
</Grid>
<Grid item xs={12} sm={6} md={6}>
<input
className="input-form readonly-input"
className={`input-form ${true && 'readonly-input'}`}
name="address"
value={formValues.address}
placeholder={formValues.address}
Expand All @@ -197,9 +205,9 @@ function EditProfile() {
<button
className="btn btn-primary"
type="submit"
onClick={(e) => saveUser(e)}
onClick={isEditable ? saveUser : toggleEdit}
>
{typeUser === 'passenger' ? 'Registrarse' : 'Guardar Cambios'}
{isEditable ? 'Guardar Cambios' : 'Editar'}
</button>
</Grid>
</Grid>
Expand Down