diff --git a/components/postcard/base.tsx b/components/postcard/base.tsx index 175cc59..f79b32a 100644 --- a/components/postcard/base.tsx +++ b/components/postcard/base.tsx @@ -1,11 +1,11 @@ -import { ComponentPropsWithoutRef } from "react"; +import { StaticImageData } from "next/image"; import { createDefinedContext } from "../../utils/definedContext"; /** * The string to be used as the `src` of the postcard. */ -export type PostcardSource = string +export type PostcardSource = string | StaticImageData /** @@ -29,8 +29,8 @@ export enum PostcardVisibility { */ export type PostcardContextContents = { visibility: PostcardVisibility, - previousSrc: PostcardSource, - currentSrc: PostcardSource, + previousSrc: string, + currentSrc: string, changePostcard: (src: PostcardSource) => void, resetPostcard: () => void, changeVisibility: (visibility: PostcardVisibility) => void, diff --git a/components/postcard/changer.tsx b/components/postcard/changer.tsx index 97e5960..3dce7b0 100644 --- a/components/postcard/changer.tsx +++ b/components/postcard/changer.tsx @@ -12,12 +12,7 @@ export function usePostcardImage(src: PostcardSource | StaticImageData) { useEffect( () => { - if (typeof src === "string") { - changePostcard(src) - } - else { - changePostcard(src.src) - } + changePostcard(src) }, [src, changePostcard] ) diff --git a/components/postcard/renderer.tsx b/components/postcard/renderer.tsx index adce386..40a414f 100644 --- a/components/postcard/renderer.tsx +++ b/components/postcard/renderer.tsx @@ -1,9 +1,8 @@ import { default as classNames } from "classnames" import style from "./renderer.module.css" import { useDefinedContext } from "../../utils/definedContext" -import { PostcardContext, PostcardVisibility } from "./base" -import { LegacyRef, useEffect, useRef, useState } from "react" -import { asleep } from "../../utils/asleep" +import { PostcardContext, PostcardSource, PostcardVisibility } from "./base" +import { LegacyRef, useEffect, useRef } from "react" export function PostcardRenderer() { diff --git a/components/postcard/storage.ts b/components/postcard/storage.ts index 71bc198..b5539ab 100644 --- a/components/postcard/storage.ts +++ b/components/postcard/storage.ts @@ -26,6 +26,9 @@ type UsePostcardStorageState = { previousSrc: PostcardSource, } +/** + * Reducer for {@link usePostcardStorage}. + */ function reducerUsePostcardStorage(prev: UsePostcardStorageState, action: UsePostcardStorageAction): UsePostcardStorageState { switch (action.type) { case "change": @@ -40,6 +43,18 @@ function reducerUsePostcardStorage(prev: UsePostcardStorageState, action: UsePos } } +/** + * Convert a {@link PostcardSource} to a string suitable for use in `` tags. + */ +function getProperSrc(obj: PostcardSource): string { + if (typeof obj === "string") { + return obj + } + else { + return obj.src + } +} + /** * Hook holding as state the {@link PostcardContextContents}. */ @@ -75,8 +90,8 @@ export function usePostcardStorage(defaultPostcard: PostcardSource): PostcardCon ) return { - previousSrc, - currentSrc, + previousSrc: getProperSrc(previousSrc), + currentSrc: getProperSrc(currentSrc), changePostcard, resetPostcard, changeVisibility, diff --git a/public/locales/it-IT/common.json b/public/locales/it-IT/common.json index 1f0e7ca..e1e80e1 100644 --- a/public/locales/it-IT/common.json +++ b/public/locales/it-IT/common.json @@ -25,6 +25,6 @@ "eventError": "Si è verificato il seguente errore nel recupero dei dettagli dell'evento:", "debugLoading": "Questo è un esempio di caricamento full-page.", "debugError": "Questo è un esempio di errore full-page.", - "debugPostcardText": "Questo è un esempio di transizione nello sfondo.", + "debugPostcardText": "Questo è un esempio di transizione dello sfondo.", "debugPostcardButton": "Hmmm." } \ No newline at end of file