Fix types

src/lib/client.ts

@@ -84,20 +84,21 @@ export class BaseClient {
   }
 }
 
+const PhotoSchema = z.object({
+  size: z.number(),
+  url: z.string(),
+  width: z.number(),
+  height: z.number()
+});
+export type Photo = z.infer<typeof PhotoSchema>;
+
 const ContentfulPhotoGallerySchema = z.object({
   data: z.object({
     photoGalleryCollection: z.object({
       items: z.array(
         AlbumSchema.extend({
           photosCollection: z.object({
-            items: z.array(
-              z.object({
-                size: z.number(),
-                url: z.string(),
-                width: z.number(),
-                height: z.number()
-              })
-            )
+            items: z.array(PhotoSchema)
           })
         })
       )
@@ -154,7 +155,8 @@ query {
       const photos = album.photosCollection.items;
       return photos;
     } else {
-      return response;
+      const error = response as Error;
+      throw new Error(error.message);
     }
   }
 

src/lib/globe.tsx

@@ -8,7 +8,7 @@ import { GeoJsonGeometry } from 'three-geojson-geometry';
 import { geoGraticule10 } from 'd3-geo';
 import * as topojson from 'topojson-client';
 import { useWindowSize } from '@/hooks/use-window-size';
-import albums, { Album, types } from './albums';
+import albums, { Album, AlbumTitle, types } from './albums';
 import Link from 'next/link';
 
 type Ref = CustomGlobeMethods | undefined; // Reference to globe instance
@@ -86,15 +86,15 @@ function useRings(
   globeElRef: CustomGlobeMethods,
   setPointAltitude: React.Dispatch<React.SetStateAction<number>>
 ) {
-  const [activeAlbum, setActiveAlbum] = useState<Array<Album>>();
+  const [activeAlbum, setActiveAlbum] = useState<AlbumTitle>();
 
   const [rings, setRings] = useState<Array<Ring>>([]);
   const colorInterpolator = (t: number) =>
     `rgba(255,100,50,${Math.sqrt(1 - t)})`;
 
   const [enterTimeoutId, setEnterTimeoutId] = useState<NodeJS.Timeout>();
-  function handleMouseEnter({ lat, lng, name, type }: Album) {
-    setActiveAlbum(name);
+  function handleMouseEnter({ lat, lng, title, type }: Album) {
+    setActiveAlbum(title);
 
     clearTimeout(enterTimeoutId);
 

src/lib/masonry.tsx

@@ -3,21 +3,27 @@
 import * as React from 'react';
 import { Masonry as MasonicMasonry } from 'masonic';
 import { useLightbox } from '../hooks/use-lightbox';
+import { Photo } from './client';
 
-const MasonryItem = ({ index, data: { url, width, height } }) => (
+const MasonryItem = ({ data: { url, width, height } }: { data: Photo }) => (
   <a
     href={url}
-    className="scale-in"
     data-pswp-width={width}
     data-pswp-height={height}
     target="_blank"
     rel="noreferrer"
   >
-    <img src={url} />
+    <img className="scale-in" src={url} />
   </a>
 );
 
-export const Masonry = ({ items = [], ...props }) => {
+export const Masonry = ({
+  items = [],
+  ...props
+}: {
+  items: Array<Photo>;
+  className?: string;
+}) => {
   useLightbox(items);
 
   if (items.length === 0) {
@@ -30,7 +36,7 @@ export const Masonry = ({ items = [], ...props }) => {
         items={items}
         render={MasonryItem}
         columnGutter={18}
-        columnWidth={240}
+        columnWidth={250}
         overscanBy={2}
         {...props}
       />