♻️ refactor tvlog

Signed-off-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>

src/pages/logs/watched.astro

@@ -1,8 +1,22 @@
 ---
 import SectionContainer from '../../components/SectionContainer.astro';
-import watched from '../../data/watched.json'
+import tv from '../../data/watched.json'
 
-const tvByYear = watched.reduce((acc:any, tv) => {
+let watched = [];
+let currently = [];
+
+tv.lists.forEach(list => {
+  switch (list.name) {
+    case "Watched":
+        watched = list.tv;
+        break;
+    case "Currently watching":
+        currently = list.tv;
+        break;
+  }
+});
+
+const tvByYear = watched.reduce((acc, tv) => {
     const year = new Date(tv.date.string).getFullYear();
     if (!acc[year]) {
         acc[year] = [];
@@ -12,46 +26,33 @@ const tvByYear = watched.reduce((acc:any, tv) => {
 }, {});
 
 const sortedYears = Object.keys(tvByYear).sort((a: any, b: any) => b - a);
-
-/*
-function getEmojiStars(rating:any) {
-    let stars = '';
-    for (let i = 0; i < rating; i++) {
-        stars += '⭐';
-    }
-    return stars;
-}
-*/
-
-function getHeartEmoji(rating:any) {
-  let heart = '';
-  if (rating == 5) heart = "❤️";
-  return heart;
-}
-
-const today = new Date();
 ---
 <SectionContainer>
-    <main class="flex flex-col gap-4 mt-4">
+    <main class="flex flex-col flex-1 gap-4 mt-4">
 		<h1 class="text-3xl font-extrabold">📺 La télévision</h1>
-		<h2 class="text-xl font-semibold">{today.getFullYear()} - Currently Watching:</h2>
-        <p>👀 ONE PIECE Egghead Arc</p>
-        <p>👀 Star Wars: The Clone Wars S05</p>
+		
+        <h2 class="text-xl font-semibold">on the screen</h2>
+        <ul>
+            {currently.map((tv) => (
+                <li class="borderbottom mb-3">👀 {tv.title}</li>
+            ))}
+        </ul>
+
         {sortedYears.map(year => (
-            <section>
-                <div class="flex items-center gap-2 text-xl font-semibold mb-2">{year} - Finished <p class="text-xs">({tvByYear[year].length} entries)</p></div>
+            <details>
+                <summary class="text-xl font-semibold cursor-pointer">{year} <span class="text-xs">({tvByYear[year].length} entries)</span></summary>
                 <ul>
                     {
                         tvByYear[year].map(tv => (
                             <li class="flex mb-2 break-words gap-2 borderbottom">
                                 <p class="text-s w-1/3">{tv.title}</p>
                                 <p class="w-1/3 text-center">{tv.type}</p>
-                                <p class="w-1/3 text-end">{getHeartEmoji(tv.my_rating)}</p>
+                                <p class="w-1/3 text-end">{tv.rating === 5 ? "❤️" : ""}</p>
                             </li>
                         ))
                     }
                 </ul>
-            </section>
+            </details>
         ))}
 	</main>
 </SectionContainer>