Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-06 22:40:14 -05:00
Code Issues Activity

Prevented relative time updates on comment state changes

Browse source 
no issue

When the state of a comment changes (e.g., after a like) the relative time would update. This is not desirable because it looks glitchy. If the relative time doesn't update every second, then it is better to never update it after the initial render.
This commit is contained in:
Simon Backx 2022-09-09 11:52:26 +02:00
parent f72e804d08
commit 500ebf0de2
2 changed files with 16 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
apps/comments-ui/src/components/content/Comment.js
View file

@ -6,7 +6,8 @@ import ReplyButton from './buttons/ReplyButton';
import MoreButton from './buttons/MoreButton';
import Replies from './Replies';
import AppContext from '../../AppContext';
import {formatRelativeTime, formatExplicitTime, isCommentPublished} from '../../utils/helpers';
import {formatExplicitTime, isCommentPublished} from '../../utils/helpers';
import {useRelativeTime} from '../../utils/hooks';
import ReplyForm from './forms/ReplyForm';
import EditForm from './forms/EditForm';
@ -182,6 +183,8 @@ function AuthorName({comment}) {
}
function CommentHeader({comment}) {
const createdAtRelative = useRelativeTime(comment.created_at);
return (
<div className="-mt-[3px] mb-2 flex items-start">
<div>
@ -189,7 +192,7 @@ function CommentHeader({comment}) {
<div className="flex items-baseline pr-4 font-sans text-[14px] tracking-tight text-[rgba(0,0,0,0.5)] dark:text-[rgba(255,255,255,0.5)]">
<span>
<MemberExpertise comment={comment}/>
<span title={formatExplicitTime(comment.created_at)}>{formatRelativeTime(comment.created_at)}</span>
<span title={formatExplicitTime(comment.created_at)}>{createdAtRelative}</span>
<EditedInfo comment={comment} />
</span>
</div>

12
apps/comments-ui/src/utils/hooks.js
View file

@ -1,5 +1,6 @@
import {useCallback, useEffect, useRef, useContext} from 'react';
import {useCallback, useEffect, useRef, useContext, useMemo} from 'react';
import AppContext from '../AppContext';
import {formatRelativeTime} from './helpers';
/**
* Execute a callback when a ref is set and unset.
@ -47,3 +48,12 @@ export function usePopupOpen(type) {
const {popup} = useContext(AppContext);
return popup?.type === type;
}
/**
* Avoids a rerender of the relative time unless the date changed, and not the current timestamp changed
*/
export function useRelativeTime(dateString) {
return useMemo(() => {
return formatRelativeTime(dateString);
}, [dateString]);
}