精简飞书黑客松主页“倒计时”组件代码

[TechQuery]

Task description

将 React hooks 改为 ——

1. 纯 JavaScript 最新标准语法：

   Open-Source-Bazaar.github.io/components/Activity/Hackathon/useLiveCountdownState.ts

   Lines 6 to 44 in 760d78e

   	export const useLiveCountdownState = <T extends CountdownWindow>(
   	items: T[],
   	startTime?: TableCellValue,
   	endTime?: TableCellValue,
   	) => {
   	const [referenceTime, setReferenceTime] = useState<number | null>(null);
   	const refreshReferenceTime = useCallback(() => setReferenceTime(Date.now()), []);
   	useEffect(() => refreshReferenceTime(), [refreshReferenceTime]);
   	const countdownState = useMemo(
   	() =>
   	referenceTime === null
   	? {
   	nextItem: undefined as T | undefined,
   	countdownTo: firstTextOf(startTime) || firstTextOf(endTime) || undefined,
   	}
   	: resolveCountdownState(items, referenceTime, startTime, endTime),
   	[endTime, items, referenceTime, startTime],
   	);
   	useEffect(() => {
   	if (referenceTime === null) return;
   	const targetTime = timeOf(countdownState.countdownTo);
   	if (!Number.isFinite(targetTime)) return;
   	const delay = Math.min(2_147_483_647, Math.max(1000, targetTime - Date.now() + 1000));
   	const timer = window.setTimeout(
   	refreshReferenceTime,
   	delay,
   	);
   	return () => window.clearTimeout(timer);
   	}, [countdownState.countdownTo, referenceTime, refreshReferenceTime]);
   	return countdownState;
   	};

2. MobX 装饰器类组件：

   Open-Source-Bazaar.github.io/components/Activity/Hackathon/Hero.tsx

   Lines 77 to 107 in 760d78e

   	const useCountdown = (countdownTo?: string) => {
   	const target = useMemo(() => {
   	const value = countdownTo ? new Date(countdownTo).getTime() : NaN;
   	return Number.isFinite(value) ? value : NaN;
   	}, [countdownTo]);
   	const [now, setNow] = useState<number | null>(null);
   	useEffect(() => {
   	if (!Number.isFinite(target)) return;
   	setNow(Date.now());
   	const timer = window.setInterval(() => setNow(Date.now()), 1000);
   	return () => window.clearInterval(timer);
   	}, [target]);
   	return useMemo(() => {
   	if (!Number.isFinite(target) || now === null) return ['--', '--', '--', '--'];
   	const rest = Math.max(0, target - now);
   	const totalSeconds = Math.floor(rest / 1000);
   	const days = Math.floor(totalSeconds / 86400);
   	const hours = Math.floor((totalSeconds % 86400) / 3600);
   	const minutes = Math.floor((totalSeconds % 3600) / 60);
   	const seconds = totalSeconds % 60;
   	return [days, hours, minutes, seconds].map(value => String(value).padStart(2, '0'));
   	}, [now, target]);
   	};

参考代码：https://github.com/EasyWebApp/BootCell/blob/44eb8e49c0dab84335f5c85d192539226a2319b5/source/Calendar/CountDown.tsx#L20-L117

Reward currency

TQT $

Reward amount

45

Reward payer

水歌 tech-query@fcc-cd.dev

Task source

https://open-source-bazaar.feishu.cn/record/M0wnr5StheQr0hcrdTkcPwgMnRg

[github-actions]

Reward data

- issue: "#68"
  payer: "@水歌 <tech-query@fcc-cd.dev>"
  payee: "@TechQuery"
  currency: TQT $
  reward: 45