91 lines
2.7 KiB
TypeScript
91 lines
2.7 KiB
TypeScript
'use client';
|
|
|
|
import TrashIcon from '@/assets/TrashIcon';
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
//! Imports
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
// --------------------------------------------------- Components ------------------------------------------------------
|
|
import ConfirmPopup from '@/components/ConfirmPopup/ConfirmPopup';
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
// -------------------------------------------------- Hooks & Utils ----------------------------------------------------
|
|
import { useData } from './hooks/useData';
|
|
import { useActions } from './hooks/useActions';
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
// ------------------------------------------------- Assets & Styles ---------------------------------------------------
|
|
import PenIcon from '@/assets/PenIcon';
|
|
import './styles.scss';
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
const MyLoves = () => {
|
|
const {
|
|
dataset,
|
|
loveToDelete,
|
|
setLoveToDelete,
|
|
deleteMessage,
|
|
setDeleteMessage,
|
|
refreshDataset,
|
|
} = useData();
|
|
|
|
const { handleEdit, openPopup, closePopup, deleteLove } = useActions({
|
|
loveToDelete,
|
|
setLoveToDelete,
|
|
setDeleteMessage,
|
|
refreshDataset,
|
|
});
|
|
|
|
return (
|
|
<div className='myLovesContainer'>
|
|
<div className='header'>
|
|
<p className='title'>Mes loves</p>
|
|
</div>
|
|
|
|
<div className='myLovesList'>
|
|
{dataset.map((love) => (
|
|
<div
|
|
key={love.id}
|
|
className='loveItem'
|
|
>
|
|
<div className='infos'>
|
|
<p className='location'>{love.location}</p>
|
|
<p className='comment'>{love.comment || '-'}</p>
|
|
<p className='date'>Le: {love.createdat}</p>
|
|
</div>
|
|
|
|
<div className='actionButtons'>
|
|
<button
|
|
type='button'
|
|
className='actionButton'
|
|
onClick={() => handleEdit(love.id)}
|
|
>
|
|
<PenIcon />
|
|
</button>
|
|
<button
|
|
type='button'
|
|
className='actionButton'
|
|
onClick={() => openPopup(love.id)}
|
|
>
|
|
<TrashIcon />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{loveToDelete && (
|
|
<ConfirmPopup
|
|
title='Supprimer ce love'
|
|
content='Es-tu sûr de vouloir supprimer ce love ?'
|
|
onClose={closePopup}
|
|
message={deleteMessage}
|
|
onAccept={deleteLove}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MyLoves;
|