Super cache mang (#1754)

* lots of work, not working * zero ts errors, greatly improves ts types accross site * completes super cache mang * remove comment * removes unessary todo * removes uneeded PageServerLoad type * simplify date parse from cache (#1759) * ✨ add redis to docker compose (#1757) --------- Co-authored-by: CJ <[email protected]>
syntaxfm · Jul 18, 2024 · 4b7faac · 4b7faac
1 parent b4ef8a6
commit 4b7faac
Show file tree

Hide file tree

Showing 23 changed files with 338 additions and 313 deletions.
diff --git a/README.md b/README.md
@@ -49,6 +49,10 @@ That's it!
      DATABASE_NAME=syntax
      DATABASE_ROOT_PASSWORD=syntax
      DATABASE_URL=mysql://${DATABASE_USER}:${DATABASE_PASSWORD}@${DATABASE_HOST}:${DATABASE_PORT}/${DATABASE_NAME}
+     REDIS_PORT=6379
+     REDIS_HTTP_PORT=8079
+     UPSPLASH_TOKEN=supersecret
+     UPSPLASH_URL=http://localhost:${REDIS_HTTP_PORT}
      ```
 1. If using docker, in a separate tab run -> `docker compose up`
 1. Run -> `pnpm preheat`

diff --git a/docker-compose.yml b/docker-compose.yml
@@ -12,4 +12,16 @@ services:
       MYSQL_PASSWORD: ${DATABASE_PASSWORD}
       MYSQL_DATABASE: ${DATABASE_NAME}
     volumes:
-      - ./db-data:/var/lib/mysql
+      - ./db-data:/var/lib/mysql
+  redis:
+    image: redis
+    ports:
+      - ${REDIS_PORT}:6379
+  serverless-redis-http:
+    ports:
+      - ${REDIS_HTTP_PORT}:80
+    image: hiett/serverless-redis-http:latest
+    environment:
+      SRH_MODE: env
+      SRH_TOKEN: ${UPSPLASH_TOKEN}
+      SRH_CONNECTION_STRING: "redis://redis:6379"
diff --git a/src/hooks.server.ts b/src/hooks.server.ts
@@ -20,7 +20,8 @@ export const redis =
 	cache_status == 'ONLINE'
 		? new Redis({
 				url: UPSPLASH_URL,
-				token: UPSPLASH_TOKEN
+				token: UPSPLASH_TOKEN,
+				automaticDeserialization: false
 			})
 		: null;
 console.log(`🤓 Cache Status... ${cache_status}`);

diff --git a/src/lib/ShowCard.svelte b/src/lib/ShowCard.svelte
@@ -2,33 +2,14 @@
 	import { player } from '$state/player';
 	import { format_show_type } from '$utilities/format_show_type';
 	import get_show_path from '$utilities/slug';
-	import type { Show } from '@prisma/client';
 	import { format } from 'date-fns';
 	import FacePile from './FacePile.svelte';
 	import Icon from './Icon.svelte';
 	import Badge from './badges/Badge.svelte';
 	import Badges from './badges/Badges.svelte';
+	import type { ShowCard } from '$/server/shows/shows_queries';
 
-	// Scott - I hand wrote this type to be exactly what this component needs. Lots of TS errors
-	// Due to what generated type we're asking to satisfy here
-	export let show: Show & {
-		aiShowNote?: {
-			description?: string;
-			topics?: {
-				name: string;
-			}[];
-		} | null;
-		guests?: {
-			Guest: {
-				name: string;
-				github: string | null;
-			};
-		}[];
-		hosts?: {
-			name: string | null;
-			username: string | null;
-		}[];
-	};
+	export let show: ShowCard;
 	export let display: 'list' | 'card' | 'highlight' = 'card';
 	export let heading = 'h4';
 	export let show_date = new Date(show.date);

diff --git a/src/routes/(blank)/embed/[show_number]/+page.server.ts b/src/routes/(blank)/embed/[show_number]/+page.server.ts
@@ -1,44 +1,10 @@
+import { cache } from '$/server/cache/cache';
 import { error } from '@sveltejs/kit';
-import { cache_mang } from '$utilities/cache_mang';
-import type { Prisma, Show } from '@prisma/client';
 
 export const load = async function ({ params, locals }) {
-	const { show_number } = params;
-	const query = {
-		where: { number: parseInt(show_number) },
-		include: {
-			guests: {
-				select: {
-					Guest: true
-				}
-			},
-			hosts: {
-				select: {
-					id: true,
-					username: true,
-					name: true,
-					twitter: true
-				}
-			},
-			aiShowNote: {
-				include: {
-					topics: true,
-					links: true,
-					summary: true,
-					tweets: true
-				}
-			}
-		}
-	};
-	type ShowTemp = Prisma.ShowGetPayload<typeof query>;
-
+	const show_number = parseInt(params.show_number);
 	// Caches and gets show dynamically based on release date
-	const show = await cache_mang<ShowTemp & Show>(
-		`show:${show_number}`,
-		locals.prisma.show.findUnique,
-		query,
-		'SHOW'
-	);
+	const show = await cache.shows.show(show_number);
 
 	// Check if this is a future show
 	const now = new Date();
@@ -47,6 +13,7 @@ export const load = async function ({ params, locals }) {
 	if (show_date > now && !is_admin) {
 		throw error(401, `That is a show, but it's in the future! \n\nCome back ${show_date}`);
 	}
+	if (!show) throw error(404, 'Show not found');
 
 	return {
 		user_theme: locals.theme,

diff --git a/src/routes/(site)/+layout.server.ts b/src/routes/(site)/+layout.server.ts
@@ -0,0 +1,10 @@
+import { cache } from '$/server/cache/cache';
+export const load = async ({ locals }) => {
+	return {
+		// We load latest in layout to get the most recent track in player data
+		// auto gets passed into that page
+		latest: await cache.shows.latest_shows(),
+		user: locals.user,
+		user_theme: locals.theme
+	};
+};
diff --git a/src/routes/(site)/+layout.svelte b/src/routes/(site)/+layout.svelte
@@ -36,7 +36,6 @@
 <PageLoadingIndicator />
 
 <div class={'theme-' + user_theme + ' theme-wrapper'}>
-	<!-- <UnderConstruction /> -->
 	{#if $page.url.pathname !== '/'}
 		<Header />
 	{/if}
@@ -48,9 +47,11 @@
 	<Footer />
 
 	<ThemeMaker />
+
 	{#if browser}
 		<Player initial_show={latest[0]} />
 	{/if}
+
 	<Toaster />
 	<Loading />
 

diff --git a/src/routes/(site)/+page.server.ts b/src/routes/(site)/+page.server.ts
@@ -1,21 +1,9 @@
-import { SHOW_QUERY, type LatestShow } from '$server/ai/queries';
-import { cache_mang } from '$utilities/cache_mang';
 import type { Actions } from '@sveltejs/kit';
 import { redis } from '../../hooks.server';
 import type { PageServerLoad } from './$types';
 
-export const load: PageServerLoad = async ({ locals, url }) => {
-	const cache_s = 600;
-
-	const latest: LatestShow[] = await cache_mang(
-		`homepage:latest_shows`,
-		locals.prisma.show.findMany,
-		SHOW_QUERY(),
-		cache_s
-	);
-
+export const load: PageServerLoad = async ({ url }) => {
 	return {
-		latest,
 		meta: {
 			// canonical tells google to use `syntax.fm`, and not syntax.fm?ref=someBlog
 			canonical: `${url.protocol}//${url.host}`

diff --git a/src/routes/(site)/about/+page.server.ts b/src/routes/(site)/about/+page.server.ts
@@ -1,9 +1,8 @@
-import { count_shows } from '$server/shows/count_shows';
-import type { PageServerLoad } from './$types';
+import { cache } from '$/server/cache/cache';
 
-export const load: PageServerLoad = async function () {
+export const load = async function () {
 	return {
-		count: await count_shows(),
+		count: await cache.shows.count_shows(),
 		meta: {
 			title: 'About Syntax'
 		}

diff --git a/src/routes/(site)/admin/videos/[playlist_id]/+page.server.ts b/src/routes/(site)/admin/videos/[playlist_id]/+page.server.ts
@@ -27,7 +27,6 @@ export const load = async ({ params, locals }) => {
 
 		// Extract the video details from the playlist items
 		const videos = playlist.videos.map((item) => item.video);
-		console.log('videos', videos);
 
 		return {
 			playlist,

diff --git a/src/routes/(site)/guest/[name_slug]/+page.server.ts b/src/routes/(site)/guest/[name_slug]/+page.server.ts
@@ -1,6 +1,10 @@
-export const load = async function ({ locals, params }) {
+import { prisma_client } from '$/hooks.server';
+import { get_show_card_query } from '$/server/shows/shows_queries';
+
+export const load = async function ({ params }) {
+	const show_card_query = get_show_card_query();
 	return {
-		guest: await locals.prisma.guest.findUnique({
+		guest: await prisma_client.guest.findUnique({
 			where: {
 				name_slug: params.name_slug
 			},
@@ -11,20 +15,7 @@ export const load = async function ({ locals, params }) {
 					},
 					select: {
 						Show: {
-							include: {
-								guests: {
-									select: {
-										Guest: {
-											select: {
-												name: true,
-												name_slug: true,
-												id: true,
-												github: true
-											}
-										}
-									}
-								}
-							}
+							...show_card_query
 						}
 					}
 				}

diff --git a/src/routes/(site)/show/[show_number]/[slug]/+layout.server.ts b/src/routes/(site)/show/[show_number]/[slug]/+layout.server.ts
@@ -1,58 +1,12 @@
 import { error } from '@sveltejs/kit';
-import { cache_mang } from '$utilities/cache_mang';
-import type { Prisma, Show } from '@prisma/client';
 import { processor } from '$/utilities/markdown.js';
+import { cache } from '$/server/cache/cache';
 
 export const load = async function ({ params, locals, url }) {
 	const show_number = parseInt(params.show_number);
-	const query = {
-		where: { number: show_number },
-		include: {
-			guests: {
-				select: {
-					Guest: true
-				}
-			},
-			videos: {
-				include: {
-					video: {
-						include: {
-							playlists: {
-								include: {
-									playlist: true
-								}
-							}
-						}
-					}
-				}
-			},
-			hosts: {
-				select: {
-					id: true,
-					username: true,
-					name: true,
-					twitter: true
-				}
-			},
-			aiShowNote: {
-				include: {
-					topics: true,
-					links: true,
-					summary: true,
-					tweets: true
-				}
-			}
-		}
-	};
-	type ShowTemp = Prisma.ShowGetPayload<typeof query>;
 
 	// Caches and gets show dynamically based on release date
-	const show_promise = cache_mang<ShowTemp & Show>(
-		`show:${show_number}`,
-		locals.prisma.show.findUnique,
-		query,
-		'SHOW'
-	);
+	const show_promise = cache.shows.show(show_number);
 
 	const prev_next_show_promise = locals.prisma.show.findMany({
 		where: {
@@ -80,6 +34,9 @@ export const load = async function ({ params, locals, url }) {
 	if (show_date > now && !is_admin) {
 		error(401, `That is a show, but it's in the future! \n\nCome back ${show_date}`);
 	}
+	if (!show) {
+		error(404, `This show does not exist.`);
+	}
 
 	const body_excerpt = await processor.process(show?.show_notes || '');
 
@@ -92,12 +49,10 @@ export const load = async function ({ params, locals, url }) {
 	// so I'm making them be h3s instead
 	// maybe that's a todo for another day
 	const with_h3_body = body_string.replace(pattern, replacement);
+	show.show_notes = with_h3_body;
 
 	return {
-		show: {
-			...show,
-			show_notes: with_h3_body
-		} as ShowTemp & Show,
+		show,
 		time_start: url.searchParams.get('t') || '0',
 		prev_show: prev_next.find((s) => s.number === show_number - 1),
 		next_show: prev_next.find((s) => s.number === show_number + 1),

diff --git a/src/routes/(site)/shows/+page.server.ts b/src/routes/(site)/shows/+page.server.ts
@@ -1,11 +1,8 @@
 import { PER_PAGE } from '$const';
-import { SHOW_QUERY } from '$server/ai/queries';
-import { $Enums } from '@prisma/client';
-import type { PageServerLoad } from './$types';
 import { redirect } from '@sveltejs/kit';
-import { count_shows } from '$server/shows/count_shows';
+import { cache } from '$/server/cache/cache';
 
-export const load: PageServerLoad = async function ({ locals, url, setHeaders }) {
+export const load = async function ({ url, setHeaders }) {
 	setHeaders({
 		'cache-control': 'max-age=240'
 	});
@@ -16,21 +13,9 @@ export const load: PageServerLoad = async function ({ locals, url, setHeaders })
 	const show_type = url.searchParams.get('type')?.toUpperCase();
 	const page = parseInt(url.searchParams.get('page') || '1');
 
-	function isShowType(type: string | null | undefined): type is $Enums.ShowType {
-		if (!type) return false;
-		return Object.prototype.hasOwnProperty.call($Enums.ShowType, type);
-	}
-
-	const query = SHOW_QUERY({
-		take,
-		order,
-		skip: page ? page * take - take : 0,
-		show_type: isShowType(show_type) ? show_type : undefined
-	});
-
 	const [shows, total_show_count] = await Promise.all([
-		locals.prisma.show.findMany(query),
-		count_shows()
+		cache.shows.list_shows(page, take, order, show_type),
+		cache.shows.count_shows()
 	]);
 
 	if (!shows.length) {