From 7ea2508185ae96582eae74561970bf771d827b93 Mon Sep 17 00:00:00 2001
From: Romulus21 <romain@delanoe.pro>
Date: Sun, 31 Dec 2023 16:07:34 +0100
Subject: [PATCH] add month titles on birthdays list

---
 src/App.tsx                     |  5 ++++
 src/components/BirthdayList.tsx | 45 +++++++++++++++++++--------------
 src/utilities.ts                |  2 ++
 3 files changed, 33 insertions(+), 19 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 1fa3fe2..e366641 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -38,6 +38,11 @@ function App() {
             result.push(item)
             return result
         }, [])
+            .sort((a, b) => {
+                if (b.birthday < a.birthday) return 1
+                if (b.birthday > a.birthday) return -1
+                return 0
+            })
 
         return birthdays
     }
diff --git a/src/components/BirthdayList.tsx b/src/components/BirthdayList.tsx
index b9ed4cc..be84b85 100644
--- a/src/components/BirthdayList.tsx
+++ b/src/components/BirthdayList.tsx
@@ -1,5 +1,6 @@
-import {FC} from "react";
+import {FC, ReactNode} from "react";
 import {Birthday} from "../types.ts";
+import {MONTHS} from "../utilities.ts";
 
 const BirthdayList: FC<BirthdayListProps> = ({birthdays, selectedPerson, selectPerson}) => {
 
@@ -9,26 +10,32 @@ const BirthdayList: FC<BirthdayListProps> = ({birthdays, selectedPerson, selectP
     }
 
     return <ul className="text-2xl">
-        {birthdays.sort((a, b) => {
-            if (b.birthday < a.birthday) return 1
-            if (b.birthday > a.birthday) return -1
-            return 0
-        })
-            .map(birthday => <li key={birthday.name + '-' + birthday.day + '-' + birthday.month}
-                                       className={`${selectedPerson?.id === birthday.id ? 'bg-blue-400' : ''} hover:bg-blue-300 flex gap-2 flex-wrap`}>
-            <div className="flex-1 cursor-pointer flex items-center pl-5"
-                 onClick={() => selectPerson(birthday)}>
-                {birthday.name}
-            </div>
-            <div className="flex-1 flex pr-5">
-                <div className="flex-1 text-center">
-                    <div>{birthday.day} / {birthday.month}</div>
-                    <div className="text-lg text-gray-400">{birthday.year ? birthday.year : null}</div>
+        {birthdays.map((birthday, index) => {
+            const content: ReactNode[] = []
+            if (index === 0 || (index > 0 && birthdays[index].month !== birthdays[index - 1].month)) {
+                content.push(<li key={"month-" + birthday.month}
+                                 className="text-lg pl-2 text-gray-600 border-t">
+                    {MONTHS[birthday.month - 1]}
+                </li>)
+            }
+            content.push(<li key={birthday.name + '-' + birthday.day + '-' + birthday.month}
+                className={`${selectedPerson?.id === birthday.id ? 'bg-blue-400' : ''} hover:bg-blue-300 flex gap-2 flex-wrap`}>
+                <div className="flex-1 cursor-pointer flex items-center pl-5"
+                     onClick={() => selectPerson(birthday)}>
+                    {birthday.name}
                 </div>
-                <div className="flex flex-1 justify-center items-center">
-                    {birthday.year ? age(birthday) + ' ans' : null}</div>
+                <div className="flex-1 flex pr-5">
+                    <div className="flex-1 text-center">
+                        <div>{birthday.day} / {birthday.month}</div>
+                        <div className="text-lg text-gray-400">{birthday.year ? birthday.year : null}</div>
+                    </div>
+                    <div className="flex flex-1 justify-center items-center">
+                        {birthday.year ? age(birthday) + ' ans' : null}</div>
                 </div>
-        </li>)}
+            </li>)
+
+            return content
+        })}
     </ul>
 }
 
diff --git a/src/utilities.ts b/src/utilities.ts
index 04e3490..bc65b01 100644
--- a/src/utilities.ts
+++ b/src/utilities.ts
@@ -9,3 +9,5 @@ export const arrayRange = (end: number, start = 0) => {
 export const pad = (number: number, pad = 2, char = '0') => {
     return (new Array(pad).join(char) + number).slice(-pad)
 }
+
+export const MONTHS = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre']
\ No newline at end of file