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

added timestamps and CIDs

Browse Source
This commit is contained in:
plebbitor
2023-03-04 22:11:45 +01:00
parent 044cdabbfb
commit 33305a4b1f
5 changed files with 54 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1
View File
@@ -17,6 +17,7 @@
"eslint": "^8.34.0", "eslint": "^8.34.0",
"eslint-config-react-app": "^7.0.1", "eslint-config-react-app": "^7.0.1",
"ext-name": "^5.0.0", "ext-name": "^5.0.0",
"moment": "^2.29.4",
"postcss": "^8.4.21", "postcss": "^8.4.21",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
src/components/Board.jsx
+18 -22
View File
@@ -6,6 +6,7 @@ import ImageBanner from './ImageBanner';
import { useFeed, useAccountsActions } from '@plebbit/plebbit-react-hooks'; import { useFeed, useAccountsActions } from '@plebbit/plebbit-react-hooks';
import InfiniteScroll from 'react-infinite-scroller'; import InfiniteScroll from 'react-infinite-scroller';
import { Tooltip } from 'react-tooltip'; import { Tooltip } from 'react-tooltip';
import moment from 'moment';
const Board = ({ setBodyStyle }) => { const Board = ({ setBodyStyle }) => {
@@ -450,7 +451,6 @@ const Board = ({ setBodyStyle }) => {
loader={<div>Loading...</div>} loader={<div>Loading...</div>}
> >
{renderedFeed.map(thread => { {renderedFeed.map(thread => {
let counter = 1;
const { replies: { pages: { topAll: { comments } } } } = thread; const { replies: { pages: { topAll: { comments } } } } = thread;
const renderedComments = renderComments(comments); const renderedComments = renderComments(comments);
return ( return (
@@ -516,11 +516,11 @@ const Board = ({ setBodyStyle }) => {
{thread.author.address} {thread.author.address}
</span>}) </span>})
&nbsp; &nbsp;
<span key={`dt-${thread.cid}`} className="date-time" data-utc="data">2 weeks ago</span> <span key={`dt-${thread.cid}`} className="date-time" data-utc="data">{moment(thread.timestamp * 1000).fromNow()}</span>
&nbsp; &nbsp;
<span key={`pn-${thread.cid}`} className="post-number"> <span key={`pn-${thread.cid}`} className="post-number">
<a key={`pl1-${thread.cid}`} href={handleVoidClick} title="Link to this post">No.</a> <a key={`pl1-${thread.cid}`} href={handleVoidClick} title="Link to this post">c/</a>
<a key={`pl2-${thread.cid}`} href={handleVoidClick} title="Reply to this post">00000001</a> <a key={`pl2-${thread.cid}`} href={handleVoidClick} title="Reply to this post">{thread.cid.slice(0, 8)}</a>
&nbsp; &nbsp;
<span key={`rl1-${thread.cid}`}> <span key={`rl1-${thread.cid}`}>
[ [
@@ -531,7 +531,7 @@ const Board = ({ setBodyStyle }) => {
<a key={`pmb-${thread.cid}`} className="post-menu-button" href={handleVoidClick} title="Post menu" data-cmd="post-menu">▶</a> <a key={`pmb-${thread.cid}`} className="post-menu-button" href={handleVoidClick} title="Post menu" data-cmd="post-menu">▶</a>
<div key={`bi-${thread.cid}`} id="backlink-id" className="backlink"> <div key={`bi-${thread.cid}`} id="backlink-id" className="backlink">
<span key={`ql1-${thread.cid}`}> <span key={`ql1-${thread.cid}`}>
<a key={`ql2-${thread.cid}`} className="quote-link" href={handleVoidClick}>{'>>'}00000002</a> <a key={`ql2-${thread.cid}`} className="quote-link" href={handleVoidClick}>{'>>'}{thread.cid.slice(0, 8)}</a>
</span> </span>
</div> </div>
</span> </span>
@@ -555,8 +555,6 @@ const Board = ({ setBodyStyle }) => {
</div> </div>
</div> </div>
{renderedComments.map(reply => { {renderedComments.map(reply => {
counter++;
const counterString = counter.toString().padStart(8, '0');
return ( return (
<div key={`pc-${reply.cid}`} className="reply-container"> <div key={`pc-${reply.cid}`} className="reply-container">
<div key={`sa-${reply.cid}`} className="side-arrows">{'>>'}</div> <div key={`sa-${reply.cid}`} className="side-arrows">{'>>'}</div>
@@ -598,11 +596,11 @@ const Board = ({ setBodyStyle }) => {
</span> </span>
</span> </span>
&nbsp; &nbsp;
<span key={`dt-${reply.cid}`} className="date-time" data-utc="data">2 weeks ago</span> <span key={`dt-${reply.cid}`} className="date-time" data-utc="data">{moment(reply.timestamp * 1000).fromNow()}</span>
&nbsp; &nbsp;
<span key={`pn-${reply.cid}`} className="post-number"> <span key={`pn-${reply.cid}`} className="post-number">
<a key={`pl1-${reply.cid}`} href={handleVoidClick} title="Link to this post">No.</a> <a key={`pl1-${reply.cid}`} href={handleVoidClick} title="Link to this post">c/</a>
<a key={`pl2-${reply.cid}`} href={handleVoidClick} title="Reply to this post">{counterString}</a> <a key={`pl2-${reply.cid}`} href={handleVoidClick} title="Reply to this post">{reply.cid.slice(0, 8)}</a>
</span> </span>
<a key={`pmb-${reply.cid}`} className="post-menu-button" href={handleVoidClick} title="Post menu" data-cmd="post-menu">▶</a> <a key={`pmb-${reply.cid}`} className="post-menu-button" href={handleVoidClick} title="Post menu" data-cmd="post-menu">▶</a>
</div> </div>
@@ -611,7 +609,7 @@ const Board = ({ setBodyStyle }) => {
<> <>
<blockquote key={`pm-${reply.cid}`} className="post-message"> <blockquote key={`pm-${reply.cid}`} className="post-message">
<a key={`r-pm-${reply.cid}`} className="quotelink" href={handleVoidClick}> <a key={`r-pm-${reply.cid}`} className="quotelink" href={handleVoidClick}>
{`>>${counterString}`}{<br />} {`>>${reply.cid.slice(0, 8)}`}{<br />}
</a> </a>
{reply.content.slice(0, 1000)} {reply.content.slice(0, 1000)}
<span key={`ttl-s-${reply.cid}`} className="ttl"> (...) <span key={`ttl-s-${reply.cid}`} className="ttl"> (...)
@@ -623,7 +621,7 @@ const Board = ({ setBodyStyle }) => {
</> </>
: <blockquote key={`pm-${thread.cid}`} className="post-message"> : <blockquote key={`pm-${thread.cid}`} className="post-message">
<a key={`r-pm-${reply.cid}`} className="quotelink" href={handleVoidClick}> <a key={`r-pm-${reply.cid}`} className="quotelink" href={handleVoidClick}>
{`>>${counterString}`}{<br />} {`>>${reply.cid.slice(0, 8)}`}{<br />}
</a> </a>
{reply.content} {reply.content}
</blockquote>) </blockquote>)
@@ -690,10 +688,10 @@ const Board = ({ setBodyStyle }) => {
: null} : null}
</span> </span>
<span key={`mob-dt-${thread.cid}`} className="date-time-mobile"> <span key={`mob-dt-${thread.cid}`} className="date-time-mobile">
2 weeks ago {moment(thread.timestamp * 1000).fromNow()}
&nbsp; &nbsp;
<a key={`mob-no-${thread.cid}`} href={handleVoidClick} title="Link to this post">No.</a> <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">00000001</a> <a key={`mob-no2-${thread.cid}`} href={handleVoidClick} title="Reply to this post">{thread.cid.slice(0, 8)}</a>
</span> </span>
</div> </div>
<div key={`mob-f-${thread.cid}`} className="file-mobile"> <div key={`mob-f-${thread.cid}`} className="file-mobile">
@@ -725,8 +723,6 @@ const Board = ({ setBodyStyle }) => {
</div> </div>
</div> </div>
{renderedComments.map(reply => { {renderedComments.map(reply => {
counter++;
const counterString = counter.toString().padStart(8, '0');
return ( return (
<div key={`mob-rc-${reply.cid}`} className="reply-container"> <div key={`mob-rc-${reply.cid}`} className="reply-container">
<div key={`mob-pr-${reply.cid}`} className="post-reply"> <div key={`mob-pr-${reply.cid}`} className="post-reply">
@@ -770,8 +766,8 @@ const Board = ({ setBodyStyle }) => {
</span> </span>
<span key={`mob-dt-${reply.cid}`} className="date-time-mobile"> <span key={`mob-dt-${reply.cid}`} className="date-time-mobile">
2 weeks ago&nbsp; 2 weeks ago&nbsp;
<a key={`mob-pl1-${reply.cid}`} href={handleVoidClick} title="Link to this post">No.</a> <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">{counterString}</a> <a key={`mob-pl2-${reply.cid}`} href={handleVoidClick} title="Reply to this post">{reply.cid.slice(0, 8)}</a>
</span> </span>
</div> </div>
{reply.content ? ( {reply.content ? (
@@ -779,7 +775,7 @@ const Board = ({ setBodyStyle }) => {
<> <>
<blockquote key={`mob-pm-${reply.cid}`} className="post-message"> <blockquote key={`mob-pm-${reply.cid}`} className="post-message">
<a key={`mob-r-pm-${reply.cid}`} className="quotelink" href={handleVoidClick}> <a key={`mob-r-pm-${reply.cid}`} className="quotelink" href={handleVoidClick}>
{`>>${counterString}`}{<br />} {`>>${reply.cid.slice(0, 8)}`}{<br />}
</a> </a>
{reply.content.slice(0, 1000)} {reply.content.slice(0, 1000)}
<span key={`mob-ttl-s-${reply.cid}`} className="ttl"> (...) <span key={`mob-ttl-s-${reply.cid}`} className="ttl"> (...)
@@ -789,9 +785,9 @@ const Board = ({ setBodyStyle }) => {
&nbsp;to view. </span> &nbsp;to view. </span>
</blockquote> </blockquote>
</> </>
: <blockquote key={`mob-pm-${thread.cid}`} className="post-message"> : <blockquote key={`mob-pm-${reply.cid}`} className="post-message">
<a key={`mob-r-pm-${reply.cid}`} className="quotelink" href={handleVoidClick}> <a key={`mob-r-pm-${reply.cid}`} className="quotelink" href={handleVoidClick}>
{`>>${counterString}`}{<br />} {`>>${reply.cid.slice(0, 8)}`}{<br />}
</a> </a>
{reply.content} {reply.content}
</blockquote>) </blockquote>)
src/components/ImageBanner.jsx
+14 -1
View File
@@ -3,14 +3,27 @@ import { useLocation } from 'react-router-dom';
const ImageBanner = () => { const ImageBanner = () => {
const [currentImage, setCurrentImage] = useState(1); const [currentImage, setCurrentImage] = useState(1);
const [isLoaded, setIsLoaded] = useState(false);
const location = useLocation(); const location = useLocation();
useEffect(() => { useEffect(() => {
setIsLoaded(false);
setCurrentImage(Math.floor(Math.random() * 13) + 1); setCurrentImage(Math.floor(Math.random() * 13) + 1);
}, [location.key]); }, [location.key]);
useEffect(() => {
setIsLoaded(false);
const img = new Image();
img.src = `/assets/banners/banner-${currentImage}.jpg?${Date.now()}`;
img.onload = () => {
setIsLoaded(true);
};
}, [currentImage]);
return ( return (
<img id="banner-img" src={`/assets/banners/banner-${currentImage}.jpg?${Date.now()}`} alt="banner" /> <>
{isLoaded && <img id="banner-img" src={`/assets/banners/banner-${currentImage}.jpg?${Date.now()}`} alt="banner" />}
</>
); );
}; };
src/components/Thread.jsx
+16 -21
View File
@@ -6,6 +6,7 @@ import { BoardContext } from '../App';
import { useComment } from '@plebbit/plebbit-react-hooks'; import { useComment } from '@plebbit/plebbit-react-hooks';
import ImageBanner from './ImageBanner'; import ImageBanner from './ImageBanner';
import { Tooltip } from 'react-tooltip'; import { Tooltip } from 'react-tooltip';
import moment from 'moment';
const Thread = ({ setBodyStyle }) => { const Thread = ({ setBodyStyle }) => {
@@ -419,16 +420,16 @@ const Thread = ({ setBodyStyle }) => {
</span>}) </span>})
</span> </span>
&nbsp; &nbsp;
<span className="date-time" data-utc="data">2 weeks ago</span> <span className="date-time" data-utc="data">{moment(comment.timestamp * 1000).fromNow()}</span>
&nbsp; &nbsp;
<span className="post-number"> <span className="post-number">
<a href={handleVoidClick} title="Link to this post">No.</a> <a href={handleVoidClick} title="Link to this post">c/</a>
<a href={handleVoidClick} title="Reply to this post">00000001</a> <a href={handleVoidClick} title="Reply to this post">{comment.cid.slice(0, 8)}</a>
</span> </span>
<a key={`pmb-${comment.cid}`} className="post-menu-button" href={handleVoidClick} title="Post menu" data-cmd="post-menu">▶</a> <a key={`pmb-${comment.cid}`} className="post-menu-button" href={handleVoidClick} title="Post menu" data-cmd="post-menu">▶</a>
<div id="backlink-id" className="backlink"> <div id="backlink-id" className="backlink">
<span> <span>
<a className="quote-link" href={handleVoidClick}>{'>>'}00000002</a> <a className="quote-link" href={handleVoidClick}>{'>>'}{comment.cid.slice(0, 8)}</a>
</span> </span>
</div> </div>
</span> </span>
@@ -442,9 +443,6 @@ const Thread = ({ setBodyStyle }) => {
Object.keys(comment.replies.pages.topAll.comments).map(() => { Object.keys(comment.replies.pages.topAll.comments).map(() => {
const renderedComments = renderComments(comment.replies.pages.topAll.comments); const renderedComments = renderComments(comment.replies.pages.topAll.comments);
return renderedComments.map(reply => { return renderedComments.map(reply => {
let counter = 1;
counter++;
const counterString = counter.toString().padStart(8, '0');
return ( return (
<div key={`pc-${reply.cid}`} className="reply-container"> <div key={`pc-${reply.cid}`} className="reply-container">
<div key={`sa-${reply.cid}`} className="side-arrows">{'>>'}</div> <div key={`sa-${reply.cid}`} className="side-arrows">{'>>'}</div>
@@ -486,17 +484,17 @@ const Thread = ({ setBodyStyle }) => {
</span> </span>
</span> </span>
&nbsp; &nbsp;
<span key={`dt-${reply.cid}`} className="date-time" data-utc="data">2 weeks ago</span> <span key={`dt-${reply.cid}`} className="date-time" data-utc="data">{moment(reply.timestamp * 1000).fromNow()}</span>
&nbsp; &nbsp;
<span key={`pn-${reply.cid}`} className="post-number"> <span key={`pn-${reply.cid}`} className="post-number">
<a key={`pl1-${reply.cid}`} href={handleVoidClick} title="Link to this post">No.</a> <a key={`pl1-${reply.cid}`} href={handleVoidClick} title="Link to this post">c/</a>
<a key={`pl2-${reply.cid}`} href={handleVoidClick} title="Reply to this post">{counterString}</a> <a key={`pl2-${reply.cid}`} href={handleVoidClick} title="Reply to this post">{reply.cid.slice(0, 8)}</a>
</span> </span>
<a key={`pmb-${reply.cid}`} className="post-menu-button" href={handleVoidClick} title="Post menu" data-cmd="post-menu">▶</a> <a key={`pmb-${reply.cid}`} className="post-menu-button" href={handleVoidClick} title="Post menu" data-cmd="post-menu">▶</a>
</div> </div>
<blockquote key={`pm-${reply.cid}`} className="post-message"> <blockquote key={`pm-${reply.cid}`} className="post-message">
<a className="quotelink" href={handleVoidClick}> <a className="quotelink" href={handleVoidClick}>
{`>>${counterString}`}{<br />} {`>>${reply.cid.slice(0, 8)}`}{<br />}
</a> </a>
{reply.content} {reply.content}
</blockquote> </blockquote>
@@ -563,10 +561,10 @@ const Thread = ({ setBodyStyle }) => {
</span>) : null} </span>) : null}
</span> </span>
<span key={`mob-dt-${comment.cid}`} className="date-time-mobile"> <span key={`mob-dt-${comment.cid}`} className="date-time-mobile">
2 weeks ago {moment(comment.timestamp * 1000).fromNow()}
&nbsp; &nbsp;
<a key={`mob-no-${comment.cid}`} href={handleVoidClick} title="Link to this post">No.</a> <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">00000001</a> <a key={`mob-no2-${comment.cid}`} href={handleVoidClick} title="Reply to this post">{comment.cid.slice(0, 8)}</a>
</span> </span>
</div> </div>
<div key={`mob-f-${comment.cid}`} className="file-mobile"> <div key={`mob-f-${comment.cid}`} className="file-mobile">
@@ -588,9 +586,6 @@ const Thread = ({ setBodyStyle }) => {
Object.keys(comment.replies.pages.topAll.comments).map(() => { Object.keys(comment.replies.pages.topAll.comments).map(() => {
const renderedComments = renderComments(comment.replies.pages.topAll.comments); const renderedComments = renderComments(comment.replies.pages.topAll.comments);
return renderedComments.map(reply => { return renderedComments.map(reply => {
let counter = 1;
counter++;
const counterString = counter.toString().padStart(8, '0');
return ( return (
<div key={`mob-rc-${reply.cid}`} className="reply-container"> <div key={`mob-rc-${reply.cid}`} className="reply-container">
<div key={`mob-pr-${reply.cid}`} className="post-reply"> <div key={`mob-pr-${reply.cid}`} className="post-reply">
@@ -633,14 +628,14 @@ const Thread = ({ setBodyStyle }) => {
<br key={`mob-br-${reply.cid}`} /> <br key={`mob-br-${reply.cid}`} />
</span> </span>
<span key={`mob-dt-${reply.cid}`} className="date-time-mobile"> <span key={`mob-dt-${reply.cid}`} className="date-time-mobile">
2 weeks ago&nbsp; {moment(reply.timestamp * 1000).fromNow()}&nbsp;
<a key={`mob-pl1-${reply.cid}`} href={handleVoidClick} title="Link to this post">No.</a> <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">{counterString}</a> <a key={`mob-pl2-${reply.cid}`} href={handleVoidClick} title="Reply to this post">{reply.cid.slice(0, 8)}</a>
</span> </span>
</div> </div>
<blockquote key={`mob-pm-${reply.cid}`} className="post-message-mobile"> <blockquote key={`mob-pm-${reply.cid}`} className="post-message-mobile">
<a key={`mob-ql-${reply.cid}`} className="quotelink-mobile" href={handleVoidClick}> <a key={`mob-ql-${reply.cid}`} className="quotelink-mobile" href={handleVoidClick}>
{`>>${counterString}`}{<br />} {`>>${reply.cid.slice(0, 8)}`}{<br />}
</a> </a>
{reply.content} {reply.content}
</blockquote> </blockquote>
yarn.lock
+5
View File
@@ -8566,6 +8566,11 @@ mkdirp@~0.5.1:
dependencies: dependencies:
minimist "^1.2.6" minimist "^1.2.6"
moment@^2.29.4:
version "2.29.4"
resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
ms@2.0.0: ms@2.0.0:
version "2.0.0" version "2.0.0"
resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8" resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"