External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

implemented date formatter

Browse Source
This commit is contained in:
plebbitor
2023-03-05 14:15:51 +01:00
parent 87aefacb9e
commit 2420908443
5 changed files with 53 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Board.jsx
+9 -9
View File
@@ -6,7 +6,7 @@ import ImageBanner from './ImageBanner';
import { useFeed, useAccountsActions } from '@plebbit/plebbit-react-hooks';
import InfiniteScroll from 'react-infinite-scroller';
import { Tooltip } from 'react-tooltip';
import moment from 'moment';
import getDate from '../utils/getDate';
const Board = ({ setBodyStyle }) => {
@@ -501,7 +501,7 @@ const Board = ({ setBodyStyle }) => {
: <span key={`n-${thread.cid}`} className="name">
Anonymous</span>}
&nbsp;
(User:&nbsp;
(u/
{thread.author.address.length > 15 ?
<>
<Tooltip key={`mob-tt-am-${thread.cid}`} id="tt-address-mobile" className="tooltip" />
@@ -516,7 +516,7 @@ const Board = ({ setBodyStyle }) => {
{thread.author.address}
</span>})
&nbsp;
<span key={`dt-${thread.cid}`} className="date-time" data-utc="data">{moment(thread.timestamp * 1000).fromNow()}</span>
<span key={`dt-${thread.cid}`} className="date-time" data-utc="data">{getDate(thread.timestamp)}</span>
&nbsp;
<span key={`pn-${thread.cid}`} className="post-number">
<a key={`pl1-${thread.cid}`} href={handleVoidClick} title="Link to this post">c/</a>
@@ -578,7 +578,7 @@ const Board = ({ setBodyStyle }) => {
Anonymous</span>}
&nbsp;
<span key={`pa-${reply.cid}`} className="poster-address">
(User:&nbsp;
(u/
{reply.author.address.length > 12 ?
<>
<Tooltip key={`mob-tt-am-${reply.cid}`} id="tt-address" className="tooltip" />
@@ -596,7 +596,7 @@ const Board = ({ setBodyStyle }) => {
</span>
</span>
&nbsp;
<span key={`dt-${reply.cid}`} className="date-time" data-utc="data">{moment(reply.timestamp * 1000).fromNow()}</span>
<span key={`dt-${reply.cid}`} className="date-time" data-utc="data">{getDate(reply.timestamp)}</span>
&nbsp;
<span key={`pn-${reply.cid}`} className="post-number">
<a key={`pl1-${reply.cid}`} href={handleVoidClick} title="Link to this post">c/</a>
@@ -654,7 +654,7 @@ const Board = ({ setBodyStyle }) => {
Anonymous</span>}
&nbsp;
<span key={`mob-pa-${thread.cid}`} className="poster-address-mobile">
(User:&nbsp;
(u/
{thread.author.address.length > 15 ?
<>
<Tooltip key={`mob-tt-am-${thread.cid}`} id="tt-address-mobile" className="tooltip" />
@@ -688,7 +688,7 @@ const Board = ({ setBodyStyle }) => {
: null}
</span>
<span key={`mob-dt-${thread.cid}`} className="date-time-mobile">
{moment(thread.timestamp * 1000).fromNow()}
{getDate(thread.timestamp)}
&nbsp;
<a key={`mob-no-${thread.cid}`} href={handleVoidClick} title="Link to this post">c/</a>
<a key={`mob-no2-${thread.cid}`} href={handleVoidClick} title="Reply to this post">{thread.cid.slice(0, 8)}</a>
@@ -746,7 +746,7 @@ const Board = ({ setBodyStyle }) => {
Anonymous</span>}
&nbsp;
<span key={`mob-pa-${reply.cid}`} className="poster-address-mobile">
(User:&nbsp;
(u/
{reply.author.address.length > 10 ?
<>
<Tooltip key={`mob-tt-am-${reply.cid}`} id="tt-address-mobile" className="tooltip" />
@@ -765,7 +765,7 @@ const Board = ({ setBodyStyle }) => {
<br key={`mob-br-${reply.cid}`} />
</span>
<span key={`mob-dt-${reply.cid}`} className="date-time-mobile">
{moment(reply.timestamp * 1000).fromNow()}&nbsp;
{getDate(reply.timestamp)}&nbsp;
<a key={`mob-pl1-${reply.cid}`} href={handleVoidClick} title="Link to this post">c/</a>
<a key={`mob-pl2-${reply.cid}`} href={handleVoidClick} title="Reply to this post">{reply.cid.slice(0, 8)}</a>
</span>
src/components/Thread.jsx
+9 -9
View File
@@ -6,7 +6,7 @@ import { BoardContext } from '../App';
import { useComment } from '@plebbit/plebbit-react-hooks';
import ImageBanner from './ImageBanner';
import { Tooltip } from 'react-tooltip';
import moment from 'moment';
import getDate from '../utils/getDate';
const Thread = ({ setBodyStyle }) => {
@@ -404,7 +404,7 @@ const Thread = ({ setBodyStyle }) => {
&nbsp;
&nbsp;
<span className="poster-address">
(User:&nbsp;
(u/
{comment.author.address.length > 20 ?
<>
<Tooltip key={`mob-tt-am-${comment.cid}`} id="tt-address-mobile" className="tooltip" />
@@ -420,7 +420,7 @@ const Thread = ({ setBodyStyle }) => {
</span>})
</span>
&nbsp;
<span className="date-time" data-utc="data">{moment(comment.timestamp * 1000).fromNow()}</span>
<span className="date-time" data-utc="data">{getDate(comment.timestamp)}</span>
&nbsp;
<span className="post-number">
<a href={handleVoidClick} title="Link to this post">c/</a>
@@ -467,7 +467,7 @@ const Thread = ({ setBodyStyle }) => {
Anonymous</span>}
&nbsp;
<span key={`pa-${reply.cid}`} className="poster-address">
(User:&nbsp;
(u/
{reply.author.address.length > 20 ?
<>
<Tooltip key={`mob-tt-am-${reply.cid}`} id="tt-address" className="tooltip" />
@@ -484,7 +484,7 @@ const Thread = ({ setBodyStyle }) => {
</span>
</span>
&nbsp;
<span key={`dt-${reply.cid}`} className="date-time" data-utc="data">{moment(reply.timestamp * 1000).fromNow()}</span>
<span key={`dt-${reply.cid}`} className="date-time" data-utc="data">{getDate(reply.timestamp)}</span>
&nbsp;
<span key={`pn-${reply.cid}`} className="post-number">
<a key={`pl1-${reply.cid}`} href={handleVoidClick} title="Link to this post">c/</a>
@@ -528,7 +528,7 @@ const Thread = ({ setBodyStyle }) => {
Anonymous</span>}
&nbsp;
<span key={`mob-pa-${comment.cid}`} className="poster-address-mobile">
(User:&nbsp;
(u/
{comment.author.address.length > 15 ?
<>
<Tooltip key={`mob-tt-am-${comment.cid}`} id="tt-address-mobile" className="tooltip" />
@@ -561,7 +561,7 @@ const Thread = ({ setBodyStyle }) => {
</span>) : null}
</span>
<span key={`mob-dt-${comment.cid}`} className="date-time-mobile">
{moment(comment.timestamp * 1000).fromNow()}
{getDate(comment.timestamp)}
&nbsp;
<a key={`mob-no-${comment.cid}`} href={handleVoidClick} title="Link to this post">c/</a>
<a key={`mob-no2-${comment.cid}`} href={handleVoidClick} title="Reply to this post">{comment.cid.slice(0, 8)}</a>
@@ -609,7 +609,7 @@ const Thread = ({ setBodyStyle }) => {
Anonymous</span>}
&nbsp;
<span key={`mob-pa-${reply.cid}`} className="poster-address-mobile">
(User:&nbsp;
(u/
{reply.author.address.length > 12 ?
<>
<Tooltip key={`mob-tt-am-${reply.cid}`} id="tt-address-mobile" className="tooltip" />
@@ -628,7 +628,7 @@ const Thread = ({ setBodyStyle }) => {
<br key={`mob-br-${reply.cid}`} />
</span>
<span key={`mob-dt-${reply.cid}`} className="date-time-mobile">
{moment(reply.timestamp * 1000).fromNow()}&nbsp;
{getDate(reply.timestamp)}&nbsp;
<a key={`mob-pl1-${reply.cid}`} href={handleVoidClick} title="Link to this post">c/</a>
<a key={`mob-pl2-${reply.cid}`} href={handleVoidClick} title="Reply to this post">{reply.cid.slice(0, 8)}</a>
</span>
src/utils/getDate.js
+35
View File
@@ -0,0 +1,35 @@
const getDate = (commentTimestamp) => {
const locale = Intl.DateTimeFormat().resolvedOptions().locale;
const string = new Intl.DateTimeFormat(locale, {
hour12: false,
year: '2-digit',
month: '2-digit',
day: '2-digit',
weekday: 'short',
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
}).format(new Date(commentTimestamp * 1000));
if (locale.startsWith('ar')) {
return string
}
const items = string.split(/,* /)
if (items.length === 3) {
const itemIsNumber = [
items[0][0].match(/[0-9]/),
items[1][0].match(/[0-9]/)
]
if (itemIsNumber[0] && itemIsNumber[1]) {
return `${items[0]}(${items[2]})${items[1]}`
}
if (itemIsNumber[0] && !itemIsNumber[1]) {
return `${items[0]}(${items[1]})${items[2]}`
}
if (!itemIsNumber[0] && itemIsNumber[1]) {
return `${items[1]}(${items[0]})${items[2]}`
}
}
return string
}
export default getDate;