Fix some postcard-related things

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,

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)
-            }
         },
         [src, changePostcard]
     )

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

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 `<img>` 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,

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