From 5db01202317709f06bc033c9f8d30c0524daf7dd Mon Sep 17 00:00:00 2001
From: Maxime Quandalle <maxime@quandalle.com>
Date: Thu, 30 Sep 2021 17:20:46 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Pagine=20les=20retours=20utilisa?=
 =?UTF-8?q?teurs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/Stats/DemandesUtilisateurs.tsx      | 56 ++++++++++++++-----
 mon-entreprise/source/pages/Stats/utils.tsx   |  3 +
 2 files changed, 44 insertions(+), 15 deletions(-)

diff --git a/mon-entreprise/source/pages/Stats/DemandesUtilisateurs.tsx b/mon-entreprise/source/pages/Stats/DemandesUtilisateurs.tsx
index 92bcd2ff8..86ef823b3 100644
--- a/mon-entreprise/source/pages/Stats/DemandesUtilisateurs.tsx
+++ b/mon-entreprise/source/pages/Stats/DemandesUtilisateurs.tsx
@@ -3,7 +3,6 @@ import { useState } from 'react'
 import stats from '../../data/stats.json'
 
 export default function DemandeUtilisateurs() {
-	const [extendedView, setExtendedView] = useState(false)
 	return (
 		<section>
 			<h2 id="demandes-utilisateurs">Demandes utilisateurs</h2>
@@ -14,24 +13,51 @@ export default function DemandeUtilisateurs() {
 				</small>
 			</p>
 			<h3>En attente d'implémentation</h3>
+			<Pagination
+				items={stats.retoursUtilisateurs.open}
+				itemComponent={Issue}
+			/>
+
+			<h3>Réalisées</h3>
+			<Pagination
+				items={stats.retoursUtilisateurs.closed}
+				itemComponent={Issue}
+			/>
+		</section>
+	)
+}
+
+type PaginationProps<ItemProps> = {
+	itemComponent: React.FC<ItemProps>
+	items: Array<ItemProps>
+}
+
+function Pagination<ItemProps>({
+	itemComponent,
+	items,
+}: PaginationProps<ItemProps>) {
+	const [currentPage, setCurrentPage] = useState(0)
+	return (
+		<>
 			<ul>
-				{stats.retoursUtilisateurs.open
-					.slice(0, !extendedView ? 10 : undefined)
-					.map(Issue)}
+				{items
+					.slice(currentPage * 10, (currentPage + 1) * 10)
+					.map(itemComponent)}
 			</ul>
 			<div css={{ textAlign: 'center' }}>
-				<button
-					className="ui__ small button"
-					onClick={() => setExtendedView(!extendedView)}
-				>
-					{extendedView ? 'Replier' : 'Voir plus'}
-				</button>
+				Page :
+				{[...Array(Math.ceil(items.length / 10)).keys()].map((i) => (
+					<button
+						className="ui__ small"
+						onClick={() => setCurrentPage(i)}
+						style={i === currentPage ? { fontWeight: 'bold' } : {}}
+						key={i}
+					>
+						{i + 1}
+					</button>
+				))}
 			</div>
-			<h3>Réalisées</h3>
-			<ul style={{ opacity: 0.8 }}>
-				{stats.retoursUtilisateurs.closed.map(Issue)}
-			</ul>
-		</section>
+		</>
 	)
 }
 
diff --git a/mon-entreprise/source/pages/Stats/utils.tsx b/mon-entreprise/source/pages/Stats/utils.tsx
index 65ea00775..4255161af 100644
--- a/mon-entreprise/source/pages/Stats/utils.tsx
+++ b/mon-entreprise/source/pages/Stats/utils.tsx
@@ -23,6 +23,8 @@ export function Indicator({ main, subTitle, footnote, width }: IndicatorProps) {
 				margin: 1rem 0.5rem;
 				width: ${width || '210px'};
 				font-size: 110%;
+				display: flex;
+				flex-direction: column;
 			`}
 		>
 			<small
@@ -44,6 +46,7 @@ export function Indicator({ main, subTitle, footnote, width }: IndicatorProps) {
 					css={`
 						font-size: small;
 						display: block;
+						line-height: 1.6em;
 					`}
 				>
 					<i>{footnote}</i>