✨ Display & Delete in love list

app/my-loves/hooks/useActions.ts

@@ -0,0 +1,54 @@
+export const useActions = ({
+	loveToDelete,
+	setLoveToDelete,
+	setDeleteMessage,
+	refreshDataset,
+}) => {
+	const handleEdit = (id: string) => {
+		alert('Fonctionnalité en cours de développement');
+	};
+
+	const openPopup = (id: string) => {
+		setDeleteMessage(null);
+		setLoveToDelete(id);
+	};
+
+	const closePopup = () => {
+		setDeleteMessage(null);
+		setLoveToDelete(null);
+	};
+
+	const deleteLove = async () => {
+		const token = localStorage.getItem('token');
+
+		try {
+			const response = await fetch('/api/point', {
+				method: 'DELETE',
+				headers: {
+					Authorization: token,
+					'Content-Type': 'application/json',
+				},
+				body: JSON.stringify({
+					pointId: loveToDelete,
+				}),
+			});
+
+			if (response.ok) {
+				await refreshDataset();
+				setLoveToDelete(null);
+				return;
+			}
+		} catch (error) {
+			console.error(error);
+		}
+
+		setDeleteMessage("Une erreur s'est produite. Veuillez réessayer");
+	};
+
+	return {
+		handleEdit,
+		openPopup,
+		closePopup,
+		deleteLove,
+	};
+};

app/my-loves/hooks/useData.ts

@@ -0,0 +1,45 @@
+// ---------------------------------------------------------------------------------------------------------------------
+//!                                                      Imports
+// ---------------------------------------------------------------------------------------------------------------------
+
+// -------------------------------------------------- React & Next -----------------------------------------------------
+import { useEffect, useState } from 'react';
+// ---------------------------------------------------------------------------------------------------------------------
+
+// -------------------------------------------------- Hooks & Utils ----------------------------------------------------
+import { getDataset } from '@/app/request';
+// ---------------------------------------------------------------------------------------------------------------------
+
+export const useData = () => {
+	const [dataset, setDataset] = useState([]);
+	const [loveToDelete, setLoveToDelete] = useState<string | null>(null);
+	const [deleteMessage, setDeleteMessage] = useState<string | null>(null);
+
+	useEffect(() => {
+		refreshDataset();
+	}, []);
+
+	const refreshDataset = async () => {
+		const data = await getDataset();
+
+		const formattedDataset = data.map((d) => {
+			const formattedDate = new Date(d.createdat).toLocaleString('fr-FR');
+
+			return {
+				...d,
+				createdat: formattedDate,
+			};
+		});
+
+		setDataset(formattedDataset);
+	};
+
+	return {
+		dataset,
+		loveToDelete,
+		setLoveToDelete,
+		deleteMessage,
+		setDeleteMessage,
+		refreshDataset,
+	};
+};

app/my-loves/page.jsx

@@ -1,35 +0,0 @@
-// ---------------------------------------------------------------------------------------------------------------------
-//!                                                      Imports
-// ---------------------------------------------------------------------------------------------------------------------
-
-// ------------------------------------------------- Assets & Styles ---------------------------------------------------
-import './styles.scss';
-// ---------------------------------------------------------------------------------------------------------------------
-
-const MyLoves = () => {
-	const data = [];
-
-	return (
-		<div className='myLovesContainer'>
-			<h1 className='title'>Mes loves</h1>
-
-			<div className='myLovesList'>
-				{data.map((love, index) => (
-					<div
-						key={love.id || index}
-						className='loveItem'
-					>
-						<p className='date'>
-							Le: {love.createdAt || '20/09/2024'}
-						</p>
-						<p className='description'>
-							{love.description || 'Description'}
-						</p>
-					</div>
-				))}
-			</div>
-		</div>
-	);
-};
-
-export default MyLoves;

app/my-loves/page.tsx

@@ -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;

app/my-loves/styles.scss

@@ -2,8 +2,21 @@
 	flex-grow: 1;
 	display: flex;
 	flex-direction: column;
-	gap: 10px;
-	padding: 10px;
+
+	& > .header {
+		display: flex;
+		flex-wrap: nowrap;
+		align-items: center;
+		gap: 20px;
+		padding: 20px;
+		width: 100%;
+		background-color: #d94253;
+		color: #ffffff;
+
+		& > .title {
+			font-size: 1.2rem;
+		}
+	}
 
 	& > .title {
 		font-size: 1.5rem;
@@ -16,24 +29,57 @@
 		flex-direction: column;
 
 		& > .loveItem {
-			display: flex;
-			flex-direction: column;
-			gap: 5px;
+			$buttonSize: 30px;
+			display: grid;
+			grid-template-columns: 1fr $buttonSize;
 			padding: 10px;
-			background-color: #d94253;
+			border-bottom: 1px solid #d94253;
+			background-color: #f9e2e5;
 
-			&:not(:last-child) {
-				border-bottom: 2px solid #d80135;
+			& > .infos {
+				display: flex;
+				flex-direction: column;
+				gap: 5px;
+
+				& > .location {
+					font-size: 1.1rem;
+					color: #d94253;
+				}
+
+				& > .comment {
+					color: #d94253;
+				}
+
+				& > .date {
+					font-size: 0.9rem;
+					font-weight: 300;
+					color: #d94253;
+				}
 			}
 
-			& > .date {
-				font-size: 1.1rem;
-				color: #ffffff;
-			}
+			& > .actionButtons {
+				display: flex;
+				flex-direction: column;
+				gap: 10px;
 
-			& > .description {
-				font-weight: 300;
-				color: #ffffff;
+				& > .actionButton {
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					padding: 5px;
+					width: $buttonSize;
+					height: $buttonSize;
+					border: none;
+					border-radius: 50%;
+					background-color: transparent;
+					color: #d94253;
+					transition: background-color 0.3s ease, color 0.3s ease;
+
+					&:hover {
+						background-color: #d94253;
+						color: #ffffff;
+					}
+				}
 			}
 		}
 	}