fix: make DB fetched types typesafe

src/pages/themes/[...page].astro

@@ -9,6 +9,8 @@ import { paginate } from "~/helpers/paginate.js"
 import MainLayout from "~/layouts/MainLayout.astro"
 import SubmitTheme from "./_components/SubmitTheme.astro"
 import ThemeCard from "./_components/ThemeCard.astro"
+import type { ThemeAndAuthor, ThemeCategory, ThemeTool } from "./_types/index.ts"
+import type { Theme } from "./_types/index.ts"
 
 export const prerender = false
 
@@ -25,7 +27,7 @@ if (!currentPage || isNaN(currentPage)) {
 const search = Astro.url.searchParams.get("search")
 
 // get a list of all supported categories, this is the same list used by the zod schema
-const categories = await fetch(`${import.meta.env.THEMES_API_URL}/api/themes/tools`).then((res) =>
+const categories: ThemeCategory[] = await fetch(`${import.meta.env.THEMES_API_URL}/api/themes/tools`).then((res) =>
 	res.json().then((data) => data.themeCategories),
 )
 // get a list of category filters applied to the request
@@ -34,7 +36,7 @@ const selectedCategories = Astro.url.searchParams.getAll("categories[]")
 // massage category data for the Filter components
 const categoryFilter: FilterGroup = {
 	title: "Categories",
-	options: categories.map((c: any) => ({
+	options: categories.map((c) => ({
 		id: c.value,
 		name: "categories[]",
 		value: c.value,
@@ -44,7 +46,7 @@ const categoryFilter: FilterGroup = {
 }
 
 // get a list of all supported tools, this is the same list used by the zod schema
-const tools = await fetch(`${import.meta.env.THEMES_API_URL}/api/themes/tools`).then((res) =>
+const tools: ThemeTool[] = await fetch(`${import.meta.env.THEMES_API_URL}/api/themes/tools`).then((res) =>
 	res.json().then((data) => data.themeTools),
 )
 
@@ -54,7 +56,7 @@ const selectedTools = Astro.url.searchParams.getAll("technology[]")
 // massage tool data for the Filter components
 const toolFilter: FilterGroup = {
 	title: "Technology",
-	options: tools.map((t: any) => ({
+	options: tools.map((t) => ({
 		id: t.value,
 		name: "technology[]",
 		value: t.value,
@@ -86,7 +88,7 @@ const priceFilter: FilterGroup = {
 	})),
 }
 
-const allThemes = await fetch(
+const allThemes: ThemeAndAuthor[] = await fetch(
 	`${import.meta.env.THEMES_API_URL}/api/themes?${Astro.url.searchParams}`,
 ).then((res) => res.json())
 
@@ -110,7 +112,7 @@ const themes = page.data
 
 const showRecentlyAdded =
 	currentPage === 1 && !Array.from(Astro.url.searchParams).some(([_, value]) => !!value)
-const recentlyAdded = showRecentlyAdded
+const recentlyAdded: ThemeAndAuthor[] = showRecentlyAdded
 	? await fetch(`${import.meta.env.THEMES_API_URL}/api/themes/recent`).then((res) => res.json())
 	: []
 const recentlyAddedSearch = new URLSearchParams(Astro.url.search)
@@ -157,7 +159,7 @@ const recentlyAddedHref = `${Astro.url.pathname}?${recentlyAddedSearch.toString(
 							}
 						>
 							<CardGrid class="w-full max-w-screen-2xl sm:grid-cols-2 xl:grid-cols-3">
-								{recentlyAdded.slice(0, 3).map((theme: any) => (
+								{recentlyAdded.slice(0, 3).map((theme) => (
 									<ThemeCard theme={theme} />
 								))}
 							</CardGrid>

src/pages/themes/_components/Avatar.astro

@@ -1,6 +1,8 @@
 ---
+import type { ThemeAndAuthor } from '../_types/index.ts'
+
 export type Props = {
-	theme: any
+	theme: ThemeAndAuthor
 }
 
 const { theme } = Astro.props

src/pages/themes/_components/ThemeCTAs.astro

@@ -2,9 +2,10 @@
 import type { HTMLAttributes } from "astro/types"
 import type { CollectionEntry } from "astro:content"
 import ExternalLinkIcon from "~/icons/ExternalLinkIcon.jsx"
+import type { ThemeAndAuthor } from "../_types/index.ts"
 
 export type Props = HTMLAttributes<"div"> & {
-	theme: any
+	theme: ThemeAndAuthor
 }
 
 const { theme, class: className, ...attrs } = Astro.props

src/pages/themes/_components/ThemeCard.astro

@@ -5,9 +5,10 @@ import CardFooter from "~/components/CardFooter.astro"
 import Avatar from "./Avatar.astro"
 import Badge from "./Badge.astro"
 import { Image } from 'astro:assets';
+import type { ThemeAndAuthor } from "../_types/index.ts"
 
 export type Props = {
-	theme: any
+	theme: ThemeAndAuthor
 }
 
 const { theme } = Astro.props

src/pages/themes/_components/ThemeStats.astro

@@ -1,11 +1,11 @@
 ---
 import type { HTMLAttributes } from "astro/types"
-import type { CollectionEntry } from "astro:content"
 import Avatar from "./Avatar.astro"
 import Badge from "./Badge.astro"
+import type { ThemeAndAuthor } from "../_types/index.ts"
 
 export type Props = HTMLAttributes<"div"> & {
-	theme: any
+	theme: ThemeAndAuthor
 }
 
 const { theme, class: className, ...attrs } = Astro.props

src/pages/themes/_types/index.ts

@@ -0,0 +1,63 @@
+export type ThemeAndAuthor = {
+	Theme: Theme;
+	Author: Author;
+};
+
+export type Theme = {
+	id: number;
+	slug: string;
+	title: string;
+	featured: boolean;
+	description: string;
+	fullDescription: string;
+	body: string;
+	image: string;
+	images: Array<string>; // array of strings with URL's
+	authorId: number;
+	repoUrl?: string;
+	demoUrl?: string;
+	buyUrl?: string;
+	links: Array<string>; // array of strings with URL's
+	paid: boolean;
+	stars: number;
+	publishDate: Date;
+	updatedAt?: Date;
+	approved: boolean;
+	denied: boolean;
+	hidden: boolean;
+};
+
+export type ThemeHasCategory = {
+	themeId: number;
+	categoryId: number;
+};
+
+export type ThemeHasTool = {
+	themeId: number;
+	toolId: number;
+};
+
+export type Author = {
+	id: number;
+	url?: string;
+	name: string;
+	email?: string;
+	avatar?: string;
+	role: string;
+	githubId: number;
+	username: string;
+	updatedAt: Date;
+	createdAt: Date;
+};
+
+export type ThemeCategory = {
+	id: number;
+	value: string;
+	name: string;
+};
+
+export type ThemeTool = {
+	id: number;
+	value: string;
+	name: string;
+};