Patrick Ren librz

In TypeScript, u can easily declare constants using as const:

const Meal = {
  Breakfast: 'breakfast',
  Lunch: 'lunch',
  Dinner: 'dinner'
}

	import { debounce } from "es-toolkit";
	import {
	useCallback,
	useRef,
	useState,
	type ChangeEventHandler,
	type InputHTMLAttributes,
	} from "react";
	import { useUpdateEffect } from "react-use";

	// why this won't work:
	// 1. ref is scoped to component
	// 2. there's no way to know whether the window is already opened


	import { useMemo, useRef } from "react";

	export type WindowConfig = {
	/** window path */
	path: string;

	form.addEventListener('submit', async (e) => {
	e.preventDefault();
	const formData = new FormData(form);
	const response = await fetch(form.action, {
	method: form.method,
	body: formData
	});
	// handle response...
	});

	import { PauseIcon, PlayIcon } from "Todo";
	import { Button } from "Todo";
	import * as Slider from "@radix-ui/react-slider";
	import classNames from "classnames";
	import throttle from "lodash.throttle";
	import {
	useCallback,
	useEffect,
	useRef,
	useState,

	import { useQuery } from "@tanstack/react-query";
	import { useRef, useState } from "react";

	async function fetchVideoContentLength(videoUrl: string) {
	const controller = new AbortController();
	const signal = controller.signal;
	try {
	const response = await fetch(videoUrl, {
	// the idiomatic way of requesting only the response headers(without the content) is using a HEAD request, but server may not support the HEAD method
	method: "GET",

	export function getErrorMessage(err: unknown, defaultMessage = "An error occurred") {
	if (err instanceof Error && err.message) {
	return err.message;
	}
	if (err instanceof Object && "message" in err && typeof err.message === "string" && err.message) {
	return err.message;
	}
	if (typeof err === "string" && err) {
	return err;
	}

	import { useState } from "react";
	import { useBeforeUnload, useBlocker } from "react-router-dom";

	// unstable_usePrompt: https://reactrouter.com/en/main/hooks/use-prompt
	// useBlocker: https://reactrouter.com/en/main/hooks/use-blocker
	// useBeforeUnload: https://reactrouter.com/en/main/hooks/use-before-unload

	export default function Form() {
	const [input, setInput] = useState("");

	/**
	* 以下代码来自 react-router-dom v6，用于解决 react-router-dom v5 没有 useSearchParams 的问题
	* see: https://github.com/remix-run/react-router/blob/main/packages/react-router-dom/index.tsx#L1432
	* 在原代码的基础上做的改动:
	* 1. 原代码使用了 useNavigate，但 react-router v5 还没有这个 hook，使用 useHistory 代替(https://reactrouter.com/en/main/upgrading/v5#use-usenavigate-instead-of-usehistory)
	* 2. 在返回的数组中提供 updateSearchParams 以在保留其他参数的情况下设置/更新指定的参数
	*/

	import React, { useCallback } from 'react';
	import { useLocation, useHistory } from 'react-router';