Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-10 23:36:14 -05:00
Code Issues Activity

Add comma separators to all numbers in comments

Browse source 
refs https://github.com/TryGhost/Team/issues/2210
This commit is contained in:
James Morris 2022-11-03 15:47:49 +00:00
parent 40c26a26f6
commit 6956b82245
4 changed files with 12 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
apps/comments-ui/src/components/content/ContentTitle.js
View file

@ -1,3 +1,5 @@
import {formatNumber} from '../../utils/helpers';
const Count = ({showCount, count}) => {
if (!showCount) {
return null;
@ -10,7 +12,7 @@ const Count = ({showCount, count}) => {
}
return (
<div className="text-[1.6rem] text-[rgba(0,0,0,0.5)] dark:text-[rgba(255,255,255,0.5)]">{count} comments</div>
<div className="text-[1.6rem] text-[rgba(0,0,0,0.5)] dark:text-[rgba(255,255,255,0.5)]">{formatNumber(count)} comments</div>
);
};

3
apps/comments-ui/src/components/content/Pagination.js
View file

@ -1,4 +1,5 @@
import React, {useContext} from 'react';
import {formatNumber} from '../../utils/helpers';
import AppContext from '../../AppContext';
const Pagination = () => {
@ -20,7 +21,7 @@ const Pagination = () => {
return (
<button data-testid="pagination-component" type="button" className="group mb-10 flex w-full items-center px-0 pt-0 pb-2 text-left font-sans text-md font-semibold text-neutral-700 dark:text-white" onClick={loadMore}>
<span className="flex h-[39px] w-full items-center justify-center whitespace-nowrap rounded-[6px] bg-[rgba(0,0,0,0.05)] py-2 px-3 text-center font-sans text-sm font-semibold text-neutral-700 outline-0 transition-[opacity,background] duration-150 hover:bg-[rgba(0,0,0,0.1)] dark:bg-[rgba(255,255,255,0.08)] dark:text-neutral-100 dark:hover:bg-[rgba(255,255,255,0.1)]">↑ Show {left} previous {left === 1 ? 'comment' : 'comments'}</span>
<span className="flex h-[39px] w-full items-center justify-center whitespace-nowrap rounded-[6px] bg-[rgba(0,0,0,0.05)] py-2 px-3 text-center font-sans text-sm font-semibold text-neutral-700 outline-0 transition-[opacity,background] duration-150 hover:bg-[rgba(0,0,0,0.1)] dark:bg-[rgba(255,255,255,0.08)] dark:text-neutral-100 dark:hover:bg-[rgba(255,255,255,0.1)]">↑ Show {formatNumber(left)} previous {left === 1 ? 'comment' : 'comments'}</span>
</button>
);
};

3
apps/comments-ui/src/components/content/RepliesPagination.js
View file

@ -1,10 +1,11 @@
import React from 'react';
import {formatNumber} from '../../utils/helpers';
const RepliesPagination = ({loadMore, count}) => {
return (
<div className="flex w-full items-center justify-start">
<button type="button" className="group ml-[48px] mb-10 flex w-auto items-center px-0 pt-0 pb-2 text-left font-sans text-md font-semibold text-neutral-700 dark:text-white sm:mb-12 " onClick={loadMore} data-testid="reply-pagination-button">
<span className="flex h-[39px] w-auto items-center justify-center whitespace-nowrap rounded-[6px] bg-[rgba(0,0,0,0.05)] py-2 px-4 text-center font-sans text-sm font-semibold text-neutral-700 outline-0 transition-[opacity,background] duration-150 hover:bg-[rgba(0,0,0,0.1)] dark:bg-[rgba(255,255,255,0.08)] dark:text-neutral-100 dark:hover:bg-[rgba(255,255,255,0.1)]">↓ Show {count} more {count === 1 ? 'reply' : 'replies'}</span>
<span className="flex h-[39px] w-auto items-center justify-center whitespace-nowrap rounded-[6px] bg-[rgba(0,0,0,0.05)] py-2 px-4 text-center font-sans text-sm font-semibold text-neutral-700 outline-0 transition-[opacity,background] duration-150 hover:bg-[rgba(0,0,0,0.1)] dark:bg-[rgba(255,255,255,0.08)] dark:text-neutral-100 dark:hover:bg-[rgba(255,255,255,0.1)]">↓ Show {formatNumber(count)} more {count === 1 ? 'reply' : 'replies'}</span>
</button>
</div>
);

5
apps/comments-ui/src/utils/helpers.js
View file

@ -22,6 +22,11 @@ export function isSentryEventAllowed({event: sentryEvent}) {
return lastFileName.includes('@tryghost/comments');
}
export function formatNumber(number) {
// Adds in commas for separators
return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}
export function formatRelativeTime(dateString) {
const date = new Date(dateString);
const now = new Date();