diff --git a/src/components/molecules/SaveIndicator.tsx b/src/components/molecules/SaveIndicator.tsx index 8854e0a..1ea6497 100644 --- a/src/components/molecules/SaveIndicator.tsx +++ b/src/components/molecules/SaveIndicator.tsx @@ -1,31 +1,14 @@ -import { useEffect, useState } from 'react' -import { formatDistanceToNow } from 'date-fns' import { StatusIcon } from '@/components/atoms' +import { useSaveIndicator } from '@/hooks/use-save-indicator' interface SaveIndicatorProps { lastSaved: number | null } export function SaveIndicator({ lastSaved }: SaveIndicatorProps) { - const [timeAgo, setTimeAgo] = useState('') - - useEffect(() => { - if (!lastSaved) return - - const updateTimeAgo = () => { - const distance = formatDistanceToNow(lastSaved, { addSuffix: true }) - setTimeAgo(distance) - } - - updateTimeAgo() - const interval = setInterval(updateTimeAgo, 10000) - - return () => clearInterval(interval) - }, [lastSaved]) - if (!lastSaved) return null - const isRecent = Date.now() - lastSaved < 3000 + const { timeAgo, isRecent } = useSaveIndicator(lastSaved) return (
diff --git a/src/hooks/use-save-indicator.ts b/src/hooks/use-save-indicator.ts new file mode 100644 index 0000000..dbfb52b --- /dev/null +++ b/src/hooks/use-save-indicator.ts @@ -0,0 +1,39 @@ +import { useEffect, useState } from 'react' +import { formatDistanceToNow } from 'date-fns' + +const DEFAULT_INTERVAL_MS = 10000 +const DEFAULT_RECENT_THRESHOLD_MS = 3000 + +export function useSaveIndicator( + lastSaved: number | null, + { + intervalMs = DEFAULT_INTERVAL_MS, + recentThresholdMs = DEFAULT_RECENT_THRESHOLD_MS, + }: { + intervalMs?: number + recentThresholdMs?: number + } = {}, +) { + const [timeAgo, setTimeAgo] = useState('') + const [isRecent, setIsRecent] = useState(false) + + useEffect(() => { + if (!lastSaved) { + setTimeAgo('') + setIsRecent(false) + return + } + + const updateIndicator = () => { + setTimeAgo(formatDistanceToNow(lastSaved, { addSuffix: true })) + setIsRecent(Date.now() - lastSaved < recentThresholdMs) + } + + updateIndicator() + const interval = setInterval(updateIndicator, intervalMs) + + return () => clearInterval(interval) + }, [intervalMs, lastSaved, recentThresholdMs]) + + return { timeAgo, isRecent } +}