forked from rDrama/rDrama
Update timestamps all at once
parent
4bcebf1e24
commit
98f56af2e1
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "chat",
|
"name": "chat",
|
||||||
"version": "0.0.10",
|
"version": "0.0.11",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
|
|
@ -7,6 +7,7 @@ import { useChat, useRootContext } from "../../hooks";
|
||||||
import "./ChatMessage.css";
|
import "./ChatMessage.css";
|
||||||
|
|
||||||
interface ChatMessageProps extends IChatMessage {
|
interface ChatMessageProps extends IChatMessage {
|
||||||
|
timestampUpdates: number;
|
||||||
showUser?: boolean;
|
showUser?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -27,6 +28,7 @@ export function ChatMessage({
|
||||||
text_censored,
|
text_censored,
|
||||||
time,
|
time,
|
||||||
quotes,
|
quotes,
|
||||||
|
timestampUpdates,
|
||||||
}: ChatMessageProps) {
|
}: ChatMessageProps) {
|
||||||
const message = {
|
const message = {
|
||||||
id,
|
id,
|
||||||
|
@ -46,7 +48,7 @@ export function ChatMessage({
|
||||||
censored,
|
censored,
|
||||||
themeColor,
|
themeColor,
|
||||||
} = useRootContext();
|
} = useRootContext();
|
||||||
const { quote, messageLookup, deleteMessage, quoteMessage } = useChat();
|
const { messageLookup, deleteMessage, quoteMessage } = useChat();
|
||||||
const content = censored ? text_censored : text_html;
|
const content = censored ? text_censored : text_html;
|
||||||
const hasMention = content.includes(loggedInUsername);
|
const hasMention = content.includes(loggedInUsername);
|
||||||
const mentionStyle = hasMention
|
const mentionStyle = hasMention
|
||||||
|
@ -60,18 +62,10 @@ export function ChatMessage({
|
||||||
setConfirmedDelete(true);
|
setConfirmedDelete(true);
|
||||||
}
|
}
|
||||||
}, [text, confirmedDelete]);
|
}, [text, confirmedDelete]);
|
||||||
const [timestamp, setTimestamp] = useState(formatTimeAgo(time));
|
const timestamp = useMemo(() => formatTimeAgo(time), [
|
||||||
|
time,
|
||||||
useEffect(() => {
|
timestampUpdates,
|
||||||
const updatingTimestamp = setInterval(
|
]);
|
||||||
() => setTimestamp(formatTimeAgo(time)),
|
|
||||||
TIMESTAMP_UPDATE_INTERVAL
|
|
||||||
);
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
clearInterval(updatingTimestamp);
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="ChatMessage" style={mentionStyle} id={id}>
|
<div className="ChatMessage" style={mentionStyle} id={id}>
|
||||||
|
@ -158,6 +152,18 @@ export function ChatMessage({
|
||||||
|
|
||||||
export function ChatMessageList() {
|
export function ChatMessageList() {
|
||||||
const { messages } = useChat();
|
const { messages } = useChat();
|
||||||
|
const [timestampUpdates, setTimestampUpdates] = useState(0);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const updatingTimestamps = setInterval(
|
||||||
|
() => setTimestampUpdates((prev) => prev + 1),
|
||||||
|
TIMESTAMP_UPDATE_INTERVAL
|
||||||
|
);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
clearInterval(updatingTimestamps);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="ChatMessageList">
|
<div className="ChatMessageList">
|
||||||
|
@ -165,6 +171,7 @@ export function ChatMessageList() {
|
||||||
<ChatMessage
|
<ChatMessage
|
||||||
key={key(message)}
|
key={key(message)}
|
||||||
{...message}
|
{...message}
|
||||||
|
timestampUpdates={timestampUpdates}
|
||||||
showUser={message.username !== messages[index - 1]?.username}
|
showUser={message.username !== messages[index - 1]?.username}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
|
@ -174,10 +181,11 @@ export function ChatMessageList() {
|
||||||
|
|
||||||
function formatTimeAgo(time: number) {
|
function formatTimeAgo(time: number) {
|
||||||
const now = new Date().getTime();
|
const now = new Date().getTime();
|
||||||
|
const humanized = `${humanizeDuration(time * 1000 - now, {
|
||||||
return `${humanizeDuration(time * 1000 - now, {
|
|
||||||
round: true,
|
round: true,
|
||||||
units: ["h", "m", "s"],
|
units: ["h", "m", "s"],
|
||||||
largest: 2,
|
largest: 2,
|
||||||
})} ago`;
|
})} ago`;
|
||||||
|
|
||||||
|
return humanized === "0 seconds ago" ? "just now" : humanized;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue