forked from rDrama/rDrama
1
0
Fork 0

Update timestamps all at once

master
Outrun Colors 2022-09-24 17:21:51 -05:00
parent 4bcebf1e24
commit 98f56af2e1
No known key found for this signature in database
GPG Key ID: 0426976DCEFE6073
2 changed files with 24 additions and 16 deletions

View File

@ -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": {

View File

@ -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;
} }