Hola estoy a punto de terminar la sgte aplicacion y me he tomado con algo inesperado. Explicacion del problema: al entrar a la app, se muestran 3 usuarios, al cambiar la imagen de cualquiera de estos, aparece una camara que es un input file que sirve para actualizar la imagen, aparece tanto en la imagen de usuario y en el fondo de usuario.
Entonces cuando se carga una nueva imagen, esta se reemplaza con la actual, al eliminar esa card user teniendo consigo una camara en la imagen de usuario o fondo o si se ha modificado la imagen con una nueva imagen de usuario o fondo, tanto la camara o la nueva imagen pasan a la card user que esta despues de la card user eliminada.
Ejm más claro por si no se entendio lo de arriba: Al usuario Aristide se cambia su imagen por una nueva, entonces decido eliminar a Aristide, ahora cuando es eliminado, Lara María hereda la imagen nueva de Aristide y aparece de igual manera la camara. ¿Por que sucede esto? . A continuacion el codigo donde renderizo la card user:
import React, { useState } from 'react';
import Icon from '../assets/Icon';
import LoadImage from '../assets/LoadImage';
import Swal from 'sweetalert2';
const ListFriendships = props => {
const {
fondoImagen,
imagenUsuario,
} = props,
/* Mostrar camara */
[showCamera, setShowCamera] = useState(false),
/* Cambiar icono de editar y check */
[edit, setEdit] = useState(false),
/* Capturando la actual img de usuario */
[actualUserImg, setActualUserImg] = useState(''),
/* Capturando la actual img de fondo */
[actualBackgroundImg, setActualBackgroundImg] = useState(''),
loadImage = e => {
const { name } = e.target,
file = e.target.parentElement.querySelector('input[type="file"]').files[0], reader = new FileReader();
reader.addEventListener('load', () => {
if (name === 'userImg') {
setActualUserImg(reader.result);
} else {
setActualBackgroundImg(reader.result);
}
}, false)
file && reader.readAsDataURL(file);
};
return (
<div className="person">
<article className="image-person">
<img className="background-image" src={!actualBackgroundImg ? `${process.env.PUBLIC_URL}/${fondoImagen}` : actualBackgroundImg} alt="background" />
{showCamera
? <LoadImage
onChange={e => {
loadImage(e);
}}
name="backgroundImg"
id="file"
/>
: null}
</article>
<article className="name-person">
{!edit
? <Icon title="Editar" className="fas fa-edit"
onClick={() => {
setShowCamera(true);
setEdit(true);
}} />
: <Icon title="Aplicar cambios" className="fas fa-check" onClick={() => {
confirmLoadImage();
}} />
}
<Icon title="Eliminar" className="fas fa-trash" onClick={() => {
Swal.fire({
icon: 'warning',
iconColor: '#BBB45B',
html: `<h3 id="messageForDeleteFriend">¿Estás seguro(a) que deseas eliminar a ${nombreDeUsuario}?</h3>`,
background: 'rgba(0,0,0,0.85)',
showDenyButton: true,
confirmButtonText: `Eliminar`,
denyButtonText: `Descartar`,
confirmButtonColor: '#A80000',
denyButtonColor: 'rgba(255,255,255,0.15)',
}).then((result) => {
if (result.isConfirmed) {
props.deleteFriendship();
props.showFriendsDelete();
} else if (result.isDenied) {
return null;
}
})
}} />
<figure>
<img src={!actualUserImg ? `${process.env.PUBLIC_URL}/${imagenUsuario}` : actualUserImg} alt={nombreDeUsuario} title={nombreDeUsuario} onClick={() => showModal()} />
{showCamera
? <LoadImage
onChange={e => {
loadImage(e);
}}
name="userImg"
id="file1"
/>
: null}
</figure>
</article>
</div>
)
};
export default ListFriendships;
Estoy usando SweetAlert
para generar los mensajes de confirmacion para eliminar un card user, la verdad no entiendo porque sigue manteniendo el estado de [showCamera, actualUserImg, actualBackgroundImg]
en la anterior tarjeta de la tarjeta que es eliminada. El componente <LoadImage />
solo me genera la camara:
const LoadImage = props => {
const {onChange, id, name} = props;
return (
<div className="edit-image">
<input onChange={onChange} name={name} type="file" id={id} accept="image/*" />
<label htmlFor={id} className="load-image"></label>
</div>
)
}
export default LoadImage;
Ahora el componente que renderiza cada card user, lo renderizo en el sgte componente:
import React, { useState } from 'react';
import './css/styles.css';
/* Components */
import ListFriendships from './ListFriendships';
/* JSON */
import friendships from '../json/friendships';
const Friendship = () => {
const [person, setPerson] = useState(friendships);
const deleteCardPerson = (x, index) => {
const newState = x.filter((e, i) => {
return i !== index;
});
setPerson(newState);
}
return (
<div id="container">
<section id="friendships">
<h3>Tu lista de amistades :</h3>
<div id="content-person">
{person.map((x, index) => (
<ListFriendships
key={index}
fondoImagen={x.fondoImagen}
imagenUsuario={x.imagenUsuario}
index={index}
deleteFriendship={() => deleteCardPerson(person, index)}
showFriendsDelete={() => showFriendsDelete(x)}
/>
))
}
</div>
</section>
</div>
)
}
export default Friendship;
Agradeceria mucho su ayuda. Es lo ultimo que me falta solucionar para terminar la app y empezar a aprender nuevas cosas. A continuacion dejo los componentes en el sgte github.