feat: Added timestamps to the posts
This commit is contained in:
parent
5c62dc8a91
commit
f7b3dad4ac
@ -1,6 +1,4 @@
|
||||
import './Layout.css';
|
||||
import Disclaimer from '../Disclaimer';
|
||||
import useDisclaimerState from '../../utils/useDisclaimerState';
|
||||
import { useState } from 'react';
|
||||
import Login from '../Login/Login';
|
||||
import { useGlobalState } from '../../utils/globalState';
|
||||
|
@ -5,6 +5,8 @@ import useProfile from '../../ngine/hooks/useProfile';
|
||||
import useNav from '../../utils/useNav';
|
||||
import LazyLoad from 'react-lazy-load';
|
||||
import uniq from 'lodash/uniq';
|
||||
import { timeDifference } from '../../utils/time';
|
||||
import { unixNow } from '../../ngine/time';
|
||||
|
||||
interface MasonryImageProps {
|
||||
image: NostrImage;
|
||||
@ -39,6 +41,7 @@ const MasonryImage = ({ image, onClick, index }: MasonryImageProps) => {
|
||||
|
||||
const description = image.content && image.content?.substring(0, 60) + (image.content.length > 60 ? ' ... ' : ' ');
|
||||
const showTags = useMemo(() => uniq(image.tags).slice(0, 5), [image.tags]);
|
||||
const now = unixNow();
|
||||
|
||||
return (
|
||||
<LazyLoad>
|
||||
@ -79,7 +82,8 @@ const MasonryImage = ({ image, onClick, index }: MasonryImageProps) => {
|
||||
)}
|
||||
</a>
|
||||
{(showAuthor || description || showTags.length > 0) && (
|
||||
<div style={{ display: 'block', lineHeight: '1.4em', paddingBottom: '.5em', paddingTop: '.5em' }}>
|
||||
<div style={{ display: 'block', lineHeight: '1.4em', paddingBottom: '.5em', paddingTop: '.5em', position: 'relative' }}>
|
||||
<div className="time">{image.timestamp && timeDifference(now, image.timestamp)}</div>
|
||||
{showAuthor && (
|
||||
<div style={{ paddingBottom: '.25em' }}>
|
||||
<a onClick={() => profileClick(image.author)}>{profile?.displayName || profile?.name}</a>
|
||||
|
@ -91,3 +91,13 @@
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.mason-imagegrid .time {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top:0px;
|
||||
color: #666;
|
||||
padding-top: .5em;
|
||||
background-color: #111;
|
||||
padding-left: .4em;
|
||||
}
|
26
src/utils/time.ts
Normal file
26
src/utils/time.ts
Normal file
@ -0,0 +1,26 @@
|
||||
export function timeDifference(current: number, previous: number) {
|
||||
const sPerMinute = 60;
|
||||
const sPerHour = sPerMinute * 60;
|
||||
const sPerDay = sPerHour * 24;
|
||||
const sPerMonth = sPerDay * 30;
|
||||
const sPerYear = sPerDay * 365;
|
||||
|
||||
const elapsed = current - previous;
|
||||
|
||||
if (elapsed < 10) {
|
||||
return 'now';
|
||||
}
|
||||
if (elapsed < sPerMinute) {
|
||||
return Math.round(elapsed) + ' s';
|
||||
} else if (elapsed < sPerHour) {
|
||||
return Math.round(elapsed / sPerMinute) + ' m';
|
||||
} else if (elapsed < sPerDay) {
|
||||
return Math.round(elapsed / sPerHour) + ' h';
|
||||
} else if (elapsed < sPerMonth) {
|
||||
return Math.round(elapsed / sPerDay) + ' d';
|
||||
} else if (elapsed < sPerYear) {
|
||||
return Math.round(elapsed / sPerMonth) + ' M';
|
||||
} else {
|
||||
return Math.round(elapsed / sPerYear) + ' Y';
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user