impress/app/javascript/wardrobe-2020/util.js

import React from "react";
import {
	Box,
	Flex,
	Grid,
	Heading,
	Link,
	useColorModeValue,
} from "@chakra-ui/react";
import loadableLibrary from "@loadable/component";
import * as Sentry from "@sentry/react";
import { WarningIcon } from "@chakra-ui/icons";

import { buildImpress2020Url } from "./impress-2020-config";

import ErrorGrundoImg from "./images/error-grundo.png";
import ErrorGrundoImg2x from "./images/error-grundo@2x.png";

/**
 * Delay hides its content at first, then shows it after the given delay.
 *
 * This is useful for loading states: it can be disruptive to see a spinner or
 * skeleton element for only a brief flash, we'd rather just show them if
 * loading is genuinely taking a while!
 *
 * 300ms is a pretty good default: that's about when perception shifts from "it
 * wasn't instant" to "the process took time".
 * https://developers.google.com/web/fundamentals/performance/rail
 */
export function Delay({ children, ms = 300 }) {
	const [isVisible, setIsVisible] = React.useState(false);

	React.useEffect(() => {
		const id = setTimeout(() => setIsVisible(true), ms);
		return () => clearTimeout(id);
	}, [ms, setIsVisible]);

	return (
		<Box opacity={isVisible ? 1 : 0} transition="opacity 0.5s">
			{children}
		</Box>
	);
}

/**
 * Heading1 is a large, page-title-ish heading, with our DTI-brand-y Delicious
 * font and some special typographical styles!
 */
export function Heading1({ children, ...props }) {
	return (
		<Heading
			as="h1"
			size="2xl"
			fontFamily="Delicious, sans-serif"
			fontWeight="800"
			{...props}
		>
			{children}
		</Heading>
	);
}

/**
 * Heading2 is a major subheading, with our DTI-brand-y Delicious font and some
 * special typographical styles!!
 */
export function Heading2({ children, ...props }) {
	return (
		<Heading
			as="h2"
			size="xl"
			fontFamily="Delicious, sans-serif"
			fontWeight="700"
			{...props}
		>
			{children}
		</Heading>
	);
}

/**
 * Heading2 is a minor subheading, with our DTI-brand-y Delicious font and some
 * special typographical styles!!
 */
export function Heading3({ children, ...props }) {
	return (
		<Heading
			as="h3"
			size="lg"
			fontFamily="Delicious, sans-serif"
			fontWeight="700"
			{...props}
		>
			{children}
		</Heading>
	);
}

/**
 * ErrorMessage is a simple error message for simple errors!
 */
export function ErrorMessage({ children, ...props }) {
	return (
		<Box color="red.400" {...props}>
			{children}
		</Box>
	);
}

export function useCommonStyles() {
	return {
		brightBackground: useColorModeValue("white", "gray.700"),
		bodyBackground: useColorModeValue("gray.50", "gray.800"),
	};
}

/**
 * safeImageUrl returns an HTTPS-safe image URL for Neopets assets!
 */
export function safeImageUrl(
	urlString,
	{ crossOrigin = null, preferArchive = false } = {},
) {
	if (urlString == null) {
		return urlString;
	}

	let url;
	try {
		url = new URL(
			urlString,
			// A few item thumbnail images incorrectly start with "/". When that
			// happens, the correct URL is at images.neopets.com.
			//
			// So, we provide "http://images.neopets.com" as the base URL when
			// parsing. Most URLs are absolute and will ignore it, but relative URLs
			// will resolve relative to that base.
			"http://images.neopets.com",
		);
	} catch (e) {
		logAndCapture(
			new Error(
				`safeImageUrl could not parse URL: ${urlString}. Returning a placeholder.`,
			),
		);
		return buildImpress2020Url("/__error__URL-was-not-parseable__");
	}

	// Rewrite Neopets URLs to their HTTPS equivalents, and additionally to our
	// proxy if we need CORS headers.
	if (
		url.origin === "http://images.neopets.com" ||
		url.origin === "https://images.neopets.com"
	) {
		url.protocol = "https:";
		if (preferArchive) {
			const archiveUrl = new URL(
				`/api/readFromArchive`,
				window.location.origin,
			);
			archiveUrl.search = new URLSearchParams({ url: url.toString() });
			url = archiveUrl;
		} else if (crossOrigin) {
			// NOTE: Previously we would rewrite this to our proxy that adds an
			// `Access-Control-Allow-Origin` header (images.neopets-asset-proxy.
			// openneo.net), but images.neopets.com now includes this header for us!
			//
			// So, do nothing!
		}
	} else if (
		url.origin === "http://pets.neopets.com" ||
		url.origin === "https://pets.neopets.com"
	) {
		url.protocol = "https:";
		if (crossOrigin) {
			url.host = "pets.neopets-asset-proxy.openneo.net";
		}
	}

	if (url.protocol !== "https:" && url.hostname !== "localhost") {
		logAndCapture(
			new Error(
				`safeImageUrl was provided an unsafe URL, but we don't know how to ` +
					`upgrade it to HTTPS: ${urlString}. Returning a placeholder.`,
			),
		);
		return buildImpress2020Url("/__error__URL-was-not-HTTPS__");
	}

	return url.toString();
}

/**
 * useDebounce helps make a rapidly-changing value change less! It waits for a
 * pause in the incoming data before outputting the latest value.
 *
 * We use it in search: when the user types rapidly, we don't want to update
 * our query and send a new request every keystroke. We want to wait for it to
 * seem like they might be done, while still feeling responsive!
 *
 * Adapted from https://usehooks.com/useDebounce/
 */
export function useDebounce(
	value,
	delay,
	{ waitForFirstPause = false, initialValue = null, forceReset = null } = {},
) {
	// State and setters for debounced value
	const [debouncedValue, setDebouncedValue] = React.useState(
		waitForFirstPause ? initialValue : value,
	);

	React.useEffect(
		() => {
			// Update debounced value after delay
			const handler = setTimeout(() => {
				setDebouncedValue(value);
			}, delay);

			// Cancel the timeout if value changes (also on delay change or unmount)
			// This is how we prevent debounced value from updating if value is changed ...
			// .. within the delay period. Timeout gets cleared and restarted.
			return () => {
				clearTimeout(handler);
			};
		},
		[value, delay], // Only re-call effect if value or delay changes
	);

	// The `forceReset` option helps us decide whether to set the value
	// immediately! We'll update it in an effect for consistency and clarity, but
	// also return it immediately rather than wait a tick.
	const shouldForceReset = forceReset && forceReset(debouncedValue, value);
	React.useEffect(() => {
		if (shouldForceReset) {
			setDebouncedValue(value);
		}
	}, [shouldForceReset, value]);

	return shouldForceReset ? value : debouncedValue;
}

/**
 * useFetch uses `fetch` to fetch the given URL, and returns the request state.
 *
 * Our limited API is designed to match the `use-http` library!
 */
export function useFetch(url, { responseType, skip, ...fetchOptions }) {
	// Just trying to be clear about what you'll get back ^_^` If we want to
	// fetch non-binary data later, extend this and get something else from res!
	if (responseType !== "arrayBuffer") {
		throw new Error(`unsupported responseType ${responseType}`);
	}

	const [response, setResponse] = React.useState({
		loading: skip ? false : true,
		error: null,
		data: null,
	});

	// We expect this to be a simple object, so this helps us only re-send the
	// fetch when the options have actually changed, rather than e.g. a new copy
	// of an identical object!
	const fetchOptionsAsJson = JSON.stringify(fetchOptions);

	React.useEffect(() => {
		if (skip) {
			return;
		}

		let canceled = false;

		fetch(url, JSON.parse(fetchOptionsAsJson))
			.then(async (res) => {
				if (canceled) {
					return;
				}

				const arrayBuffer = await res.arrayBuffer();
				setResponse({ loading: false, error: null, data: arrayBuffer });
			})
			.catch((error) => {
				if (canceled) {
					return;
				}

				setResponse({ loading: false, error, data: null });
			});

		return () => {
			canceled = true;
		};
	}, [skip, url, fetchOptionsAsJson]);

	return response;
}

/**
 * useLocalStorage is like React.useState, but it persists the value in the
 * device's `localStorage`, so it comes back even after reloading the page.
 *
 * Adapted from https://usehooks.com/useLocalStorage/.
 */
let storageListeners = [];
export function useLocalStorage(key, initialValue) {
	const loadValue = React.useCallback(() => {
		if (typeof localStorage === "undefined") {
			return initialValue;
		}
		try {
			const item = localStorage.getItem(key);
			return item ? JSON.parse(item) : initialValue;
		} catch (error) {
			console.error(error);
			return initialValue;
		}
	}, [key, initialValue]);

	const [storedValue, setStoredValue] = React.useState(loadValue);

	const setValue = React.useCallback(
		(value) => {
			try {
				setStoredValue(value);
				window.localStorage.setItem(key, JSON.stringify(value));
				storageListeners.forEach((l) => l());
			} catch (error) {
				console.error(error);
			}
		},
		[key],
	);

	const reloadValue = React.useCallback(() => {
		setStoredValue(loadValue());
	}, [loadValue, setStoredValue]);

	// Listen for changes elsewhere on the page, and update here too!
	React.useEffect(() => {
		storageListeners.push(reloadValue);
		return () => {
			storageListeners = storageListeners.filter((l) => l !== reloadValue);
		};
	}, [reloadValue]);

	// Listen for changes in other tabs, and update here too! (This does not
	// catch same-page updates!)
	React.useEffect(() => {
		window.addEventListener("storage", reloadValue);
		return () => window.removeEventListener("storage", reloadValue);
	}, [reloadValue]);

	return [storedValue, setValue];
}

export function loadImage(
	rawSrc,
	{ crossOrigin = null, preferArchive = false } = {},
) {
	const src = safeImageUrl(rawSrc, { crossOrigin, preferArchive });
	const image = new Image();
	let canceled = false;
	let resolved = false;

	const promise = new Promise((resolve, reject) => {
		image.onload = () => {
			if (canceled) return;
			resolved = true;
			resolve(image);
		};
		image.onerror = () => {
			if (canceled) return;
			reject(new Error(`Failed to load image: ${JSON.stringify(src)}`));
		};
		if (crossOrigin) {
			image.crossOrigin = crossOrigin;
		}
		image.src = src;
	});

	promise.cancel = () => {
		// NOTE: To keep `cancel` a safe and unsurprising call, we don't cancel
		//       resolved images. That's because our approach to cancelation
		//       mutates the Image object we already returned, which could be
		//       surprising if the caller is using the Image and expected the
		//       `cancel` call to only cancel any in-flight network requests.
		//       (e.g. we cancel a DTI movie when it unloads from the page, but
		//       it might stick around in the movie cache, and we want those images
		//       to still work!)
		if (resolved) return;
		image.src = "";
		canceled = true;
	};

	return promise;
}

/**
 * loadable is a wrapper for `@loadable/component`, with extra error handling.
 * Loading the page will often fail if you keep a session open during a deploy,
 * because Vercel doesn't keep old JS chunks on the CDN. Recover by reloading!
 */
export function loadable(load, options) {
	return loadableLibrary(
		() =>
			load().catch((e) => {
				console.error("Error loading page, reloading:", e);
				window.location.reload();
				// Return a component that renders nothing, while we reload!
				return () => null;
			}),
		options,
	);
}

/**
 * logAndCapture will print an error to the console, and send it to Sentry.
 *
 * This is useful when there's a graceful recovery path, but it's still a
 * genuinely unexpected error worth logging.
 */
export function logAndCapture(e) {
	console.error(e);
	Sentry.captureException(e);
}

export function getGraphQLErrorMessage(error) {
	// If this is a GraphQL Bad Request error, show the message of the first
	// error the server returned. Otherwise, just use the normal error message!
	return (
		error?.networkError?.result?.errors?.[0]?.message || error?.message || null
	);
}

export function MajorErrorMessage({ error = null, variant = "unexpected" }) {
	// Log the detailed error to the console, so we can have a good debug
	// experience without the parent worrying about it!
	React.useEffect(() => {
		if (error) {
			console.error(error);
		}
	}, [error]);

	return (
		<Flex justify="center" marginTop="8">
			<Grid
				templateAreas='"icon title" "icon description" "icon details"'
				templateColumns="auto minmax(0, 1fr)"
				maxWidth="500px"
				marginX="8"
				columnGap="4"
			>
				<Box gridArea="icon" marginTop="2">
					<Box
						borderRadius="full"
						boxShadow="md"
						overflow="hidden"
						width="100px"
						height="100px"
					>
						<img
							src={ErrorGrundoImg}
							srcSet={`${ErrorGrundoImg}, ${ErrorGrundoImg2x} 2x`}
							alt="Distressed Grundo programmer"
							width={100}
							height={100}
						/>
					</Box>
				</Box>
				<Box gridArea="title" fontSize="lg" marginBottom="1">
					{variant === "unexpected" && <>Ah dang, I broke it 😖</>}
					{variant === "network" && <>Oops, it didn't work, sorry 😖</>}
					{variant === "not-found" && <>Oops, page not found 😖</>}
				</Box>
				<Box gridArea="description" marginBottom="2">
					{variant === "unexpected" && (
						<>
							There was an error displaying this page. I'll get info about it
							automatically, but you can tell me more at{" "}
							<Link href="mailto:matchu@openneo.net" color="green.400">
								matchu@openneo.net
							</Link>
							!
						</>
					)}
					{variant === "network" && (
						<>
							There was an error displaying this page. Check your internet
							connection and try again—and if you keep having trouble, please
							tell me more at{" "}
							<Link href="mailto:matchu@openneo.net" color="green.400">
								matchu@openneo.net
							</Link>
							!
						</>
					)}
					{variant === "not-found" && (
						<>
							We couldn't find this page. Maybe it's been deleted? Check the URL
							and try again—and if you keep having trouble, please tell me more
							at{" "}
							<Link href="mailto:matchu@openneo.net" color="green.400">
								matchu@openneo.net
							</Link>
							!
						</>
					)}
				</Box>
				{error && (
					<Box gridArea="details" fontSize="xs" opacity="0.8">
						<WarningIcon
							marginRight="1.5"
							marginTop="-2px"
							aria-label="Error message"
						/>
						"{getGraphQLErrorMessage(error)}"
					</Box>
				)}
			</Grid>
		</Flex>
	);
}

export function TestErrorSender() {
	React.useEffect(() => {
		if (window.location.href.includes("send-test-error-for-sentry")) {
			throw new Error("Test error for Sentry");
		}
	});

	return null;
}