✨ Display & Delete in love list

2024-10-11 19:08:52 +02:00
parent b702bc629c
commit 1077400260
23 changed files with 644 additions and 523 deletions
@@ -0,0 +1,90 @@
+'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;