From 0712a629a9934f1b614f7a2e64d340f1a0487a21 Mon Sep 17 00:00:00 2001
From: rocketdebris <rocketdebris@gmail.com>
Date: Wed, 27 May 2026 08:47:53 -0400
Subject: [PATCH] Typescript support

---
 app/api/{picsum.js => picsum.ts} | 11 ++++++++++-
 app/ligonier/control_bar.tsx     |  9 +++++++--
 app/ligonier/header.tsx          |  4 +++-
 app/ligonier/photo_card.tsx      |  4 +++-
 app/ligonier/photo_gallery.tsx   | 19 +++++++++++++++++--
 5 files changed, 40 insertions(+), 7 deletions(-)
 rename app/api/{picsum.js => picsum.ts} (57%)

diff --git a/app/api/picsum.js b/app/api/picsum.ts
similarity index 57%
rename from app/api/picsum.js
rename to app/api/picsum.ts
index 937d0e7..4ba11f1 100644
--- a/app/api/picsum.js
+++ b/app/api/picsum.ts
@@ -1,10 +1,19 @@
+export interface PicsumData {
+    id: number,
+    author: string,
+    width: number,
+    height: number,
+    url: string,
+    download_url: string
+}
+
 export async function getPicsumData() {
 	try {
 		const response = await fetch('https://picsum.photos/v2/list');
 		if (!response.ok) {
 			throw new Error('Picsum API unavailable.');
 		}
-		const data = await response.json();
+		const data: PicsumData[] = await response.json();
 		return data;
 	} catch (error) {
 		console.error("Could not fetch data:", error);
diff --git a/app/ligonier/control_bar.tsx b/app/ligonier/control_bar.tsx
index ff5d942..8acccfe 100644
--- a/app/ligonier/control_bar.tsx
+++ b/app/ligonier/control_bar.tsx
@@ -1,6 +1,11 @@
-import { useState } from 'react';
+import type { MouseEvent } from "react";
 
-export function ControlBar({ isGallery, handleClick }) {
+export interface ControlBarProps {
+    isGallery: boolean;
+    handleClick: React.MouseEventHandler<HTMLButtonElement>;
+}
+
+export function ControlBar({ isGallery, handleClick }: ControlBarProps ) {
 	return(
 		<div className="hidden md:flex ml-auto">
 			<button className="hover:bg-[#839b39] bg-[#789031] text-white p-2 rounded-lg mr-20 xl:mr-50 min-w-[130px]"
diff --git a/app/ligonier/header.tsx b/app/ligonier/header.tsx
index eb8b0ab..f09f09c 100644
--- a/app/ligonier/header.tsx
+++ b/app/ligonier/header.tsx
@@ -1,7 +1,9 @@
 import { Logo } from "./logo";
 import { ControlBar } from "./control_bar"
 
-export function Header({ isGallery, handleClick }) {
+import type { ControlBarProps } from "./control_bar"
+
+export function Header({ isGallery, handleClick }: ControlBarProps) {
 	return (
 		<div className="header flex flex-row m-5 mr-10 md:mr-0 ml-10 md:ml-20 xl:ml-50 gap-5 items-center">
 			<a href="https://www.ligonier.org">
diff --git a/app/ligonier/photo_card.tsx b/app/ligonier/photo_card.tsx
index 3b3d35e..f68745d 100644
--- a/app/ligonier/photo_card.tsx
+++ b/app/ligonier/photo_card.tsx
@@ -1,7 +1,9 @@
 import { useState } from 'react';
 
+import type { PicsumData } from '../api/picsum';
+
 // A Card, rendering an image and toggling photographer information when clicked
-export function PhotoCard({ data }) {
+export function PhotoCard({ data }: {data: PicsumData}) {
 	const [infoToggled, setInfoToggled] = useState(false);
 
 	function handleClick() {
diff --git a/app/ligonier/photo_gallery.tsx b/app/ligonier/photo_gallery.tsx
index afbc282..b65e6c6 100644
--- a/app/ligonier/photo_gallery.tsx
+++ b/app/ligonier/photo_gallery.tsx
@@ -3,10 +3,17 @@ import { useState } from 'react';
 import { Header } from './header';
 import { Footer } from './footer';
 import { PhotoCard } from './photo_card';
+import type { PicsumData } from '../api/picsum';
+
+interface PhotosProps {
+    imageData: PicsumData[];
+    isGallery: boolean;
+}
 
 export function PhotoGallery() {
-	const imageData = useLoaderData();
+	const imageData: PicsumData[] = useLoaderData();
 	const [isGallery, setGallery] = useState(false);
+    const [favorites, setFavorites] = useState();
 	return (
 		<div>
 			<Header isGallery={isGallery} handleClick={()=> setGallery(!isGallery)} />
@@ -19,7 +26,15 @@ export function PhotoGallery() {
 	);
 }
 
-function Photos({ imageData, isGallery}) {
+function favorites() {
+    return (
+        <button onClick={() => {}
+        }>
+        </button>
+    );
+}
+
+function Photos({ imageData, isGallery }: PhotosProps) {
 	const listClassNames = "flex flex-wrap"
 	const galleryClassNames = "grid md:grid-cols-2 xl:grid-cols-3"
 	const photoCards = imageData.map(image =>