From 8bde354b7176ed9fe4ea56ee61ea292a999a6fc2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Un=20=C3=89picier?= <alexisvasseur96@gmail.com>
Date: Fri, 11 Oct 2024 19:38:51 +0200
Subject: [PATCH] :sparkles: Added data loading text to each pages

---
 app/manifest.ts                  |   2 +-
 app/my-loves/hooks/useActions.ts |   3 +
 app/my-loves/hooks/useData.ts    |   9 +-
 app/my-loves/page.tsx            |  66 +++++++------
 app/my-loves/styles.scss         |   5 +
 app/settings/hooks/useData.ts    |   6 ++
 app/settings/page.tsx            | 162 +++++++++++++++----------------
 app/settings/styles.scss         |   5 +
 app/statistics/hooks/useData.ts  |   9 +-
 app/statistics/page.tsx          | 152 ++++++++++++++---------------
 app/statistics/styles.scss       |   5 +
 11 files changed, 233 insertions(+), 191 deletions(-)

diff --git a/app/manifest.ts b/app/manifest.ts
index 0d88ba6..ba6edf5 100644
--- a/app/manifest.ts
+++ b/app/manifest.ts
@@ -11,7 +11,7 @@ const manifest = (): MetadataRoute.Manifest => ({
 	theme_color: '#d94253',
 	icons: [
 		{
-			src: '/logo.png',
+			src: '/logo-transparent.png',
 			sizes: '1024x1024',
 			type: 'image/png',
 		},
diff --git a/app/my-loves/hooks/useActions.ts b/app/my-loves/hooks/useActions.ts
index eaa1987..7c0b1fb 100644
--- a/app/my-loves/hooks/useActions.ts
+++ b/app/my-loves/hooks/useActions.ts
@@ -1,4 +1,5 @@
 export const useActions = ({
+	setIsLoading,
 	loveToDelete,
 	setLoveToDelete,
 	setDeleteMessage,
@@ -19,6 +20,7 @@ export const useActions = ({
 	};
 
 	const deleteLove = async () => {
+		setIsLoading(true);
 		const token = localStorage.getItem('token');
 
 		try {
@@ -43,6 +45,7 @@ export const useActions = ({
 		}
 
 		setDeleteMessage("Une erreur s'est produite. Veuillez réessayer");
+		setIsLoading(false);
 	};
 
 	return {
diff --git a/app/my-loves/hooks/useData.ts b/app/my-loves/hooks/useData.ts
index 7a43db8..f860906 100644
--- a/app/my-loves/hooks/useData.ts
+++ b/app/my-loves/hooks/useData.ts
@@ -11,12 +11,17 @@ import { getDataset } from '@/app/request';
 // ---------------------------------------------------------------------------------------------------------------------
 
 export const useData = () => {
+	const [isLoading, setIsLoading] = useState(true);
 	const [dataset, setDataset] = useState([]);
 	const [loveToDelete, setLoveToDelete] = useState<string | null>(null);
 	const [deleteMessage, setDeleteMessage] = useState<string | null>(null);
 
 	useEffect(() => {
-		refreshDataset();
+		(async () => {
+			setIsLoading(true);
+			await refreshDataset();
+			setIsLoading(false);
+		})();
 	}, []);
 
 	const refreshDataset = async () => {
@@ -35,6 +40,8 @@ export const useData = () => {
 	};
 
 	return {
+		isLoading,
+		setIsLoading,
 		dataset,
 		loveToDelete,
 		setLoveToDelete,
diff --git a/app/my-loves/page.tsx b/app/my-loves/page.tsx
index e4e1bb0..d5dc3af 100644
--- a/app/my-loves/page.tsx
+++ b/app/my-loves/page.tsx
@@ -17,10 +17,13 @@ import { useActions } from './hooks/useActions';
 // ------------------------------------------------- Assets & Styles ---------------------------------------------------
 import PenIcon from '@/assets/PenIcon';
 import './styles.scss';
+import Loader from '@/assets/Loader';
 // ---------------------------------------------------------------------------------------------------------------------
 
 const MyLoves = () => {
 	const {
+		isLoading,
+		setIsLoading,
 		dataset,
 		loveToDelete,
 		setLoveToDelete,
@@ -30,6 +33,7 @@ const MyLoves = () => {
 	} = useData();
 
 	const { handleEdit, openPopup, closePopup, deleteLove } = useActions({
+		setIsLoading,
 		loveToDelete,
 		setLoveToDelete,
 		setDeleteMessage,
@@ -42,37 +46,41 @@ const MyLoves = () => {
 				<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>
+			{isLoading ? (
+				<p className='loader'>Chargement...</p>
+			) : (
+				<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 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>
-				))}
-			</div>
+					))}
+				</div>
+			)}
 
 			{loveToDelete && (
 				<ConfirmPopup
diff --git a/app/my-loves/styles.scss b/app/my-loves/styles.scss
index 3353559..7d6191a 100644
--- a/app/my-loves/styles.scss
+++ b/app/my-loves/styles.scss
@@ -24,6 +24,11 @@
 		color: #ffffff;
 	}
 
+	& > .loader {
+		margin: auto;
+		color: #d94253;
+	}
+
 	& > .myLovesList {
 		display: flex;
 		flex-direction: column;
diff --git a/app/settings/hooks/useData.ts b/app/settings/hooks/useData.ts
index 1e89f47..c2dec6b 100644
--- a/app/settings/hooks/useData.ts
+++ b/app/settings/hooks/useData.ts
@@ -1,4 +1,10 @@
+// ---------------------------------------------------------------------------------------------------------------------
+//!                                                      Imports
+// ---------------------------------------------------------------------------------------------------------------------
+
+// -------------------------------------------------- React & Next -----------------------------------------------------
 import { useEffect, useState } from 'react';
+// ---------------------------------------------------------------------------------------------------------------------
 
 export const useData = () => {
 	const [userData, setUserData] = useState(null);
diff --git a/app/settings/page.tsx b/app/settings/page.tsx
index 8de6dac..f324904 100644
--- a/app/settings/page.tsx
+++ b/app/settings/page.tsx
@@ -45,10 +45,6 @@ const Settings = () => {
 		setPasswordMessage,
 	});
 
-	if (!userData) {
-		return;
-	}
-
 	return (
 		<div className='settings'>
 			<div className='header'>
@@ -65,93 +61,97 @@ const Settings = () => {
 				<p className='title'>Éditer le profil</p>
 			</div>
 
-			<div className='settingsContainer'>
-				{usernameMessage && (
-					<p className='message'>{usernameMessage}</p>
-				)}
-
-				<form
-					className='card'
-					onSubmit={updateUsername}
-				>
-					<p className='cardTitle'>Nom d&apos;utilisateur</p>
-
-					<Input
-						type='text'
-						name='username'
-						placeholder="Nom d'utilisateur"
-						defaultValue={userData.username}
-						autoComplete='username'
-						required
-					/>
-
-					<button
-						type='submit'
-						className='submitButton'
-					>
-						Appliquer
-					</button>
-				</form>
-
-				<form
-					className='card'
-					onSubmit={updatePassword}
-				>
-					<p className='cardTitle'>Modifier le mot de passe</p>
-
-					{passwordMessage && (
-						<p className='message'>{passwordMessage}</p>
+			{!userData ? (
+				<p className='loading'>Chargement...</p>
+			) : (
+				<div className='settingsContainer'>
+					{usernameMessage && (
+						<p className='message'>{usernameMessage}</p>
 					)}
 
-					<div className='inputsContainer'>
+					<form
+						className='card'
+						onSubmit={updateUsername}
+					>
+						<p className='cardTitle'>Nom d&apos;utilisateur</p>
+
 						<Input
-							type='password'
-							name='currentPassword'
-							placeholder='Mot de passe actuel'
-							autoComplete='password'
+							type='text'
+							name='username'
+							placeholder="Nom d'utilisateur"
+							defaultValue={userData.username}
+							autoComplete='username'
 							required
 						/>
-						<Input
-							type='password'
-							name='newPassword'
-							placeholder='Nouveau mot de passe'
-							autoComplete='off'
-							required
-						/>
-						<Input
-							type='password'
-							name='confirmNewPassword'
-							placeholder='Confirmer le nouveau mot de passe'
-							autoComplete='off'
-							required
-						/>
-					</div>
+
+						<button
+							type='submit'
+							className='submitButton'
+						>
+							Appliquer
+						</button>
+					</form>
+
+					<form
+						className='card'
+						onSubmit={updatePassword}
+					>
+						<p className='cardTitle'>Modifier le mot de passe</p>
+
+						{passwordMessage && (
+							<p className='message'>{passwordMessage}</p>
+						)}
+
+						<div className='inputsContainer'>
+							<Input
+								type='password'
+								name='currentPassword'
+								placeholder='Mot de passe actuel'
+								autoComplete='password'
+								required
+							/>
+							<Input
+								type='password'
+								name='newPassword'
+								placeholder='Nouveau mot de passe'
+								autoComplete='off'
+								required
+							/>
+							<Input
+								type='password'
+								name='confirmNewPassword'
+								placeholder='Confirmer le nouveau mot de passe'
+								autoComplete='off'
+								required
+							/>
+						</div>
+
+						<button
+							type='submit'
+							className='submitButton'
+						>
+							Appliquer
+						</button>
+					</form>
 
 					<button
-						type='submit'
-						className='submitButton'
+						className='deleteButton'
+						onClick={handleDeleteUser}
 					>
-						Appliquer
+						<TrashIcon />
+						Supprimer mon compte
 					</button>
-				</form>
 
-				<button
-					className='deleteButton'
-					onClick={handleDeleteUser}
-				>
-					<TrashIcon />
-					Supprimer mon compte
-				</button>
-
-				{isPopupDisplayed && (
-					<ConfirmPopup
-						title='Supprimer le compte ?'
-						content='Es-tu sûr de vouloir supprimer ton compte ? Cette action est irréversible.'
-						onClose={handleClosePopup}
-						onAccept={deleteUser}
-					/>
-				)}
-			</div>
+					{isPopupDisplayed && (
+						<ConfirmPopup
+							title='Supprimer le compte ?'
+							content='Es-tu sûr de vouloir supprimer ton compte ? Cette action est irréversible.'
+							onClose={handleClosePopup}
+							onAccept={deleteUser}
+						/>
+					)}
+				</div>
+			)}
 		</div>
 	);
 };
diff --git a/app/settings/styles.scss b/app/settings/styles.scss
index 470d2a3..50abe8b 100644
--- a/app/settings/styles.scss
+++ b/app/settings/styles.scss
@@ -26,6 +26,11 @@
 		}
 	}
 
+	& > .loading {
+		margin: auto;
+		color: #d94253;
+	}
+
 	& > .settingsContainer {
 		display: flex;
 		flex-direction: column;
diff --git a/app/statistics/hooks/useData.ts b/app/statistics/hooks/useData.ts
index b38b044..3d5370b 100644
--- a/app/statistics/hooks/useData.ts
+++ b/app/statistics/hooks/useData.ts
@@ -1,7 +1,12 @@
+// ---------------------------------------------------------------------------------------------------------------------
+//!                                                      Imports
+// ---------------------------------------------------------------------------------------------------------------------
+
+// -------------------------------------------------- React & Next -----------------------------------------------------
 import { useEffect, useState } from 'react';
+// ---------------------------------------------------------------------------------------------------------------------
 
 export const useData = () => {
-	const [isLoading, setIsLoading] = useState(true);
 	const [userData, setUserData] = useState(null);
 
 	useEffect(() => {
@@ -24,13 +29,11 @@ export const useData = () => {
 				),
 			};
 
-			setIsLoading(false);
 			setUserData(formattedResponse);
 		})();
 	}, []);
 
 	return {
-		isLoading,
 		userData,
 	};
 };
diff --git a/app/statistics/page.tsx b/app/statistics/page.tsx
index 2907fd2..d3b4625 100644
--- a/app/statistics/page.tsx
+++ b/app/statistics/page.tsx
@@ -22,92 +22,92 @@ import './styles.scss';
 
 const Statistics = () => {
 	const router = useRouter();
-	const { isLoading, userData } = useData();
-
-	if (!userData) {
-		return;
-	}
+	const { userData } = useData();
 
 	const logout = () => {
 		localStorage.clear();
 		router.push('/auth/login');
 	};
 
-	if (isLoading) {
-		return <></>;
-	}
-
 	return (
 		<div className='accountContainer'>
-			<div className='header'>
-				<div className='infosContainer'>
-					<p className='username'>{userData.username}</p>
-					<p className='sinceDate'>Créé le: {userData.createdat}</p>
-				</div>
+			{!userData ? (
+				<p className='loading'>Chargement...</p>
+			) : (
+				<>
+					<div className='header'>
+						<div className='infosContainer'>
+							<p className='username'>{userData.username}</p>
+							<p className='sinceDate'>
+								Créé le: {userData.createdat}
+							</p>
+						</div>
 
-				<div className='buttonsContainer'>
-					<button
-						type='button'
-						className='button'
-						onClick={logout}
-					>
-						<Logout />
-					</button>
-					<Link
-						href={'/settings'}
-						className='button'
-					>
-						<SettingsIcon />
-					</Link>
-				</div>
-			</div>
+						<div className='buttonsContainer'>
+							<button
+								type='button'
+								className='button'
+								onClick={logout}
+							>
+								<Logout />
+							</button>
+							<Link
+								href={'/settings'}
+								className='button'
+							>
+								<SettingsIcon />
+							</Link>
+						</div>
+					</div>
 
-			<div className='statistics'>
-				<div className='statistic'>
-					<SlotCounter
-						value={'00'}
-						startValue={'00'}
-						startValueOnce
-						dummyCharacterCount={10}
-						direction='top-down'
-						containerClassName='slotCounter'
-					/>
-					<p className='statName'>Loves par semaine</p>
-				</div>
-				<div className='statistic'>
-					<SlotCounter
-						value={'00'}
-						startValue={'00'}
-						startValueOnce
-						dummyCharacterCount={10}
-						direction='top-down'
-						containerClassName='slotCounter'
-					/>
-					<p className='statName'>Loves par mois</p>
-				</div>
-				<div className='statistic'>
-					<SlotCounter
-						value={'00'}
-						startValue={'00'}
-						startValueOnce
-						dummyCharacterCount={10}
-						direction='top-down'
-						containerClassName='slotCounter'
-					/>
-					<p className='statName'>Loves par an</p>
-				</div>
-				<div className='statistic'>
-					<SlotCounter
-						value={'00'}
-						startValue={'00'}
-						startValueOnce
-						dummyCharacterCount={10}
-						direction='top-down'
-						containerClassName='slotCounter'
-					/>
-					<p className='statName'>Loves total</p>
-				</div>
-			</div>
+					<div className='statistics'>
+						<div className='statistic'>
+							<SlotCounter
+								value={'00'}
+								startValue={'00'}
+								startValueOnce
+								dummyCharacterCount={10}
+								direction='top-down'
+								containerClassName='slotCounter'
+							/>
+							<p className='statName'>Loves par semaine</p>
+						</div>
+						<div className='statistic'>
+							<SlotCounter
+								value={'00'}
+								startValue={'00'}
+								startValueOnce
+								dummyCharacterCount={10}
+								direction='top-down'
+								containerClassName='slotCounter'
+							/>
+							<p className='statName'>Loves par mois</p>
+						</div>
+						<div className='statistic'>
+							<SlotCounter
+								value={'00'}
+								startValue={'00'}
+								startValueOnce
+								dummyCharacterCount={10}
+								direction='top-down'
+								containerClassName='slotCounter'
+							/>
+							<p className='statName'>Loves par an</p>
+						</div>
+						<div className='statistic'>
+							<SlotCounter
+								value={'00'}
+								startValue={'00'}
+								startValueOnce
+								dummyCharacterCount={10}
+								direction='top-down'
+								containerClassName='slotCounter'
+							/>
+							<p className='statName'>Loves total</p>
+						</div>
+					</div>
+				</>
+			)}
 		</div>
 	);
 };
diff --git a/app/statistics/styles.scss b/app/statistics/styles.scss
index 58ff251..12bc555 100644
--- a/app/statistics/styles.scss
+++ b/app/statistics/styles.scss
@@ -5,6 +5,11 @@
 	flex-direction: column;
 	align-items: center;
 
+	& > .loading {
+		margin: auto;
+		color: #d94253;
+	}
+
 	& > .header {
 		display: flex;
 		flex-wrap: nowrap;