58 lines
1.6 KiB
TypeScript
58 lines
1.6 KiB
TypeScript
|
import { Badge, Tooltip } from "@geist-ui/core";
|
||
|
|
import { timeUntil } from "@lib/time-ago";
|
||
|
|
import { useCallback, useEffect, useMemo, useState } from "react";
|
||
|
|
|
||
|
|
const ExpirationBadge = ({
|
||
|
|
postExpirationDate,
|
||
|
|
onExpires
|
||
|
|
}: {
|
||
|
|
postExpirationDate: Date | string | null
|
||
|
|
onExpires?: () => void
|
||
|
|
}) => {
|
||
|
|
const expirationDate = useMemo(() => postExpirationDate ? new Date(postExpirationDate) : null, [postExpirationDate])
|
||
|
|
const [timeUntilString, setTimeUntil] = useState<string | null>(expirationDate ? timeUntil(expirationDate) : null);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
let interval: NodeJS.Timer | null = null;
|
||
|
|
if (expirationDate) {
|
||
|
|
interval = setInterval(() => {
|
||
|
|
if (expirationDate) {
|
||
|
|
setTimeUntil(timeUntil(expirationDate))
|
||
|
|
}
|
||
|
|
}, 1000)
|
||
|
|
}
|
||
|
|
|
||
|
|
return () => {
|
||
|
|
if (interval) {
|
||
|
|
clearInterval(interval)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}, [expirationDate])
|
||
|
|
|
||
|
|
const isExpired = useMemo(() => {
|
||
|
|
return expirationDate && new Date(expirationDate) < new Date()
|
||
|
|
}, [expirationDate])
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (isExpired) {
|
||
|
|
if (onExpires) {
|
||
|
|
onExpires();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}, [isExpired, onExpires])
|
||
|
|
|
||
|
|
if (!expirationDate) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Badge type={isExpired ? "error" : "warning"}>
|
||
|
|
<Tooltip
|
||
|
|
text={`${expirationDate.toLocaleDateString()} ${expirationDate.toLocaleTimeString()}`}>
|
||
|
|
{isExpired ? "Expired" : `Expires ${timeUntilString}`}
|
||
|
|
</Tooltip>
|
||
|
|
</Badge>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default ExpirationBadge
|