vore-scenario-generator/src/common/client/ResultText.tsx

import { useEffect, useRef, useState } from 'preact/hooks';
import { pulseElement } from './pulseElement';

export interface ResultTextPropsBase {
	text: string
}

export interface ResultTextPropsFull extends ResultTextPropsBase {
	mappingId: number
	textId: number
	updated: Date
}

export interface ResultTextPropsLimited extends ResultTextPropsBase {
	mappingId?: null
	textId?: null
	updated?: null
}

export type ResultTextProps = ResultTextPropsFull|ResultTextPropsLimited

export function reconstituteResultText(button: HTMLButtonElement, partial: Partial<ResultTextProps> = {}): ResultTextProps {
	const text = button.innerText
	if (typeof partial.mappingId ?? button.dataset["mappingId"] === "undefined") {
		return {text}
	} else {
		return {
			text,
			mappingId: partial.mappingId ?? parseInt(button.dataset["mappingId"]!),
			textId: partial.textId ?? parseInt(button.dataset["textId"]!),
			updated: partial.updated ?? new Date(parseInt(button.dataset["updated"]!))
		}
	}
}

export function ResultText({text, mappingId, textId, updated}: ResultTextProps) {
	const ref = useRef<HTMLButtonElement>(null)
	const [lastText, setLastText] = useState<string>(text)
	useEffect(() => {
		if (text !== lastText) {
			setLastText(text)
			if (ref.current) {
				pulseElement(ref.current)
			}
		}
	}, [ref, text, lastText, setLastText]);
	return <button className="resultText" ref={ref}
								 {...(updated
											? { "data-mapping-id": mappingId, "data-text-id": textId, "data-updated": updated.getTime() }
											: {})}>{text}</button>
}