Typescript support

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);

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]"

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">

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() {

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 =>