Add title texts with exact date/time

This commit is contained in:
Christopher Gurnee 2021-12-12 13:20:08 -05:00
parent 82d3342ab3
commit c6eaa3a865
3 changed files with 16 additions and 5 deletions

View file

@ -1,6 +1,6 @@
import React from 'react'
import { Link } from 'react-router-dom'
import { prettyScore, prettyDate, prettyTimeDiff, parse, redditThumbnails, isDeleted, isRemoved } from '../../utils'
import { prettyScore, prettyDate, prettyTimeDiff, exactDateTime, parse, redditThumbnails, isDeleted, isRemoved } from '../../utils'
export default (props) => {
if (!props.title) {
@ -54,7 +54,7 @@ export default (props) => {
}
<span className='domain'>({props.domain})</span>
<div className='thread-info'>
submitted <span className='thread-time'>{prettyDate(props.created_utc)}</span> by&nbsp;
submitted <span className='thread-time' title={exactDateTime(props.created_utc)}>{prettyDate(props.created_utc)}</span> by&nbsp;
<a className='thread-author author' href={userLink}>{props.author}</a>
&nbsp;to /r/{props.subreddit}
</div>

View file

@ -1,6 +1,6 @@
import React, { useState } from 'react'
import { Link } from 'react-router-dom'
import { prettyScore, prettyDate, prettyTimeDiff, parse, isRemoved } from '../../utils'
import { prettyScore, prettyDate, prettyTimeDiff, exactDateTime, parse, isRemoved } from '../../utils'
const Comment = (props) => {
let commentStyle = 'comment '
@ -54,9 +54,10 @@ const Comment = (props) => {
<span className='space' />
<span className='comment-score'>{prettyScore(props.score)} point{(props.score !== 1) && 's'}</span>
<span className='space' />
<span className='comment-time'>{prettyDate(props.created_utc)}</span>
<span className='comment-time' title={exactDateTime(props.created_utc)}>{prettyDate(props.created_utc)}</span>
{props.hasOwnProperty('edited_body') &&
<span className='comment-time'>* (last edited {prettyDate(props.edited ? props.edited : props.created_utc)})</span>}
<span className='comment-time' title={props.edited ? exactDateTime(props.edited) : 'within 3 minutes'}
>* (last edited {prettyDate(props.edited ? props.edited : props.created_utc)})</span>}
</div>
<div style={collapsed ? {display: 'none'} : {}}>
<div className='comment-body' dangerouslySetInnerHTML={{ __html: showEdited ? editedInnerHTML : innerHTML }} />

View file

@ -54,12 +54,22 @@ export const prettyDate = createdUTC => {
if (secondDiff < 7200) return 'an hour ago'
if (secondDiff < 86400) return `${Math.floor(secondDiff / 3600)} hours ago`
}
if (dayDiff < 2) return `1 day ago`
if (dayDiff < 7) return `${dayDiff} days ago`
if (dayDiff < 31) return `${Math.floor(dayDiff / 7)} weeks ago`
if (dayDiff < 365) return `${Math.floor(dayDiff / 30)} months ago`
return `${Math.floor(dayDiff / 365)} years ago`
}
// The date and time, to the second, formatted in the user's locale
export const exactDateTime = utc => {
const datetime = new Date(utc * 1000)
if (new Date().toDateString() == datetime.toDateString())
return datetime.toLocaleTimeString([], {timeStyle: 'long'})
else
return datetime.toLocaleString([], {dateStyle: 'medium', timeStyle: 'long'})
}
// Time difference in seconds to text, rounded up by default (e.g. x seconds/minutes/hours)
export const prettyTimeDiff = (secondDiff, roundDown = false) => {
if (secondDiff < 2) return `1 second`