From 5916185c859b2910fd614dfd1102442608b377f3 Mon Sep 17 00:00:00 2001 From: Chuck Dries Date: Mon, 10 Oct 2022 03:00:54 -0700 Subject: [PATCH] pretty much solve type errors --- .../{ActionButtons.js => ActionButtons.tsx} | 18 ++++++++++++++---- src/pages/index.tsx | 14 +++++++++----- src/utils.ts | 11 ++++++----- 3 files changed, 29 insertions(+), 14 deletions(-) rename src/components/index/{ActionButtons.js => ActionButtons.tsx} (75%) diff --git a/src/components/index/ActionButtons.js b/src/components/index/ActionButtons.tsx similarity index 75% rename from src/components/index/ActionButtons.js rename to src/components/index/ActionButtons.tsx index 5d25b04..fe9dfe6 100644 --- a/src/components/index/ActionButtons.js +++ b/src/components/index/ActionButtons.tsx @@ -3,8 +3,9 @@ import classnames from "classnames"; import { Link } from "gatsby"; import Shuffle from "@spectrum-icons/workflow/Shuffle"; +import { HomepageImage } from "../../pages"; -const getButtonClasses = (isClient) => +const getButtonClasses = (isClient?: boolean) => classnames( "z-20 rounded-md text-md inline-block px-2 py-1 mt-1 mr-2 text-md hover:underline", isClient @@ -12,7 +13,16 @@ const getButtonClasses = (isClient) => : "text-gray-300 bg-gray-700" ); -const ActionButtons = ({ isClient, image, shuffleImage }) => ( +interface ActionButtonsProps { + isClient?: boolean; + image: HomepageImage; + shuffleImage: (image: HomepageImage) => void; +} +const ActionButtons = ({ + isClient, + image, + shuffleImage, +}: ActionButtonsProps) => (

Try my word game!

@@ -25,14 +35,14 @@ const ActionButtons = ({ isClient, image, shuffleImage }) => (
view image
- {isClient ? ( + {isClient && img ? ( image.fields?.imageMeta; +export const getMeta = (image: T) => image.fields?.imageMeta; export const getName = (image: GalleryImage) => - getMeta(image)?.meta?.ObjectName || image.base; +image.fields?.imageMeta?.meta?.ObjectName || image.base; // some pleasing default colors for SSR and initial hydration -export const getVibrant = (image: GalleryImage) => getMeta(image)?.vibrant; +export const getVibrant = (image: GalleryImage | HomepageImage) => getMeta(image)?.vibrant; -export const hasName = (image: GalleryImage) => Boolean(getMeta(image)?.meta?.ObjectName); +export const hasName = (image: GalleryImage) => Boolean(image.fields?.imageMeta?.meta?.ObjectName); -export const getAspectRatio = (image: GalleryImage): number => +export const getAspectRatio = (image: GalleryImage | HomepageImage): number => image.childImageSharp?.fluid?.aspectRatio ?? 1; export const getCanonicalSize = (image: GalleryImage) => ({