From 91a91cb6a3d332905f9f519a3ecb00e4fb378c70 Mon Sep 17 00:00:00 2001
From: Jorge Vargas <jorgev259@outlook.es>
Date: Mon, 24 Mar 2025 14:00:44 -0600
Subject: [PATCH] Implement Get Lucky sidebar button

---
 src/components/Sidebar.astro               |  5 ++++-
 src/components/sidebar/GetLuckyAlbum.astro | 14 ++++++++++++++
 src/pages/holy12.astro                     | 22 +++-------------------
 src/utils/queries.ts                       | 18 ++++++++++++++++++
 4 files changed, 39 insertions(+), 20 deletions(-)
 create mode 100644 src/components/sidebar/GetLuckyAlbum.astro
 create mode 100644 src/utils/queries.ts

diff --git a/src/components/Sidebar.astro b/src/components/Sidebar.astro
index f0d801e..722a70c 100644
--- a/src/components/Sidebar.astro
+++ b/src/components/Sidebar.astro
@@ -13,13 +13,16 @@ import AlbumBox from './AlbumBox.astro'
 import AlbumCount from './sidebar/AlbumCount.astro'
 import CommentCarousel from './sidebar/CommentCarousel.astro'
 import SidebarAd from './sidebar/SidebarAd.astro'
+import GetLuckyAlbum from './sidebar/GetLuckyAlbum.astro'
 
 const listClass =
   'uppercase text-3xl font-semibold w-full text-center py-3 hover:bg-dark-hover hover:text-cyan-400 hover:underline'
 ---
 
 <div class='md:w-3/12 md:max-w-[300px] h-full bg-dark flex flex-col'>
-  <a href='#' class={listClass}>{m.getLucky()}</a>
+  <GetLuckyAlbum server:defer class={listClass}>
+    <div slot='fallback' class:list={[listClass, 'animate-pulse w-full h-14 bg-gray/90']}></div>
+  </GetLuckyAlbum>
   <a href='/holy12' class={listClass}>{m.randomPull()}</a>
   <div class='px-6 flex flex-col gap-y-3'>
     <SidebarSection class='flex flex-col gap-y-3'>
diff --git a/src/components/sidebar/GetLuckyAlbum.astro b/src/components/sidebar/GetLuckyAlbum.astro
new file mode 100644
index 0000000..9ff952b
--- /dev/null
+++ b/src/components/sidebar/GetLuckyAlbum.astro
@@ -0,0 +1,14 @@
+---
+interface Props {
+  class: string
+}
+
+import * as m from '../../paraglide/messages.js'
+
+import { getRandomAlbum } from 'utils/queries'
+
+const album = await getRandomAlbum()
+const { class: className } = Astro.props
+---
+
+<a href={`/album/${album.id}`} class={className}>{m.getLucky()}</a>
diff --git a/src/pages/holy12.astro b/src/pages/holy12.astro
index 41c0319..465e9a5 100644
--- a/src/pages/holy12.astro
+++ b/src/pages/holy12.astro
@@ -1,28 +1,12 @@
 ---
 import * as m from 'paraglide/messages'
-import prismaClient from 'utils/prisma-client'
+
+import { getRandom } from 'utils/form'
+import { getRandomAlbum } from 'utils/queries'
 
 import Base from 'layouts/base.astro'
-import { getRandom } from 'utils/form'
 import AlbumBox from 'components/AlbumBox.astro'
 
-async function getRandomAlbum(): Promise<{ id: number; title: string }> {
-  const res: { id: number; title: string }[] = await prismaClient.$queryRawUnsafe(`
-    SELECT r1.id as id, r1.title as title
-    FROM albums AS r1 JOIN (
-	    SELECT (
-		    RAND() * (
-			    SELECT MAX(id) FROM albums
-		    )
-	    ) AS id
-    )  AS r2
-    WHERE r1.id >= r2.id
-    ORDER BY r1.id ASC
-    LIMIT 1;`)
-
-  return res[0]
-}
-
 const titles = [m.holy12_0(), m.holy12_1(), m.holy12_2(), m.holy12_3(), m.holy12_4(), m.holy12_5()]
 const title = getRandom(titles)
 const albums: { id: number; title: string }[] = await Promise.all(Array.from({ length: 12 }, getRandomAlbum))
diff --git a/src/utils/queries.ts b/src/utils/queries.ts
new file mode 100644
index 0000000..8ae49a7
--- /dev/null
+++ b/src/utils/queries.ts
@@ -0,0 +1,18 @@
+import prismaClient from './prisma-client'
+
+export async function getRandomAlbum(): Promise<{ id: number; title: string }> {
+  const res: { id: number; title: string }[] = await prismaClient.$queryRawUnsafe(`
+    SELECT r1.id as id, r1.title as title
+    FROM albums AS r1 JOIN (
+	    SELECT (
+		    RAND() * (
+			    SELECT MAX(id) FROM albums
+		    )
+	    ) AS id
+    )  AS r2
+    WHERE r1.id >= r2.id
+    ORDER BY r1.id ASC
+    LIMIT 1;`)
+
+  return res[0]
+}