better keys, added counter for replies

This commit is contained in:
plebbitor
2023-02-10 22:45:50 +01:00
parent 70162cb42f
commit 132fdb3351
2 changed files with 9 additions and 9 deletions
+1 -1
View File
@@ -46,7 +46,7 @@ export default function App() {
/> />
<BoardContext.Provider value={{ selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress }}> <BoardContext.Provider value={{ selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress }}>
<Routes> <Routes>
<Route path='/' element={<Home />} /> <Route exact path='/' element={<Home />} />
<Route path='/board' element={<Board setBodyStyle={setBodyStyle} />} /> <Route path='/board' element={<Board setBodyStyle={setBodyStyle} />} />
<Route path='/board/:thread' element={<Thread />} /> <Route path='/board/:thread' element={<Thread />} />
</Routes> </Routes>
+8 -8
View File
@@ -98,10 +98,7 @@ const Board = ({ setBodyStyle }) => {
} }
} }
// eslint-disable-next-line const { feed } = useFeed([`${selectedAddress}`], 'new');
const {feed, hasMore, loadMore} = useFeed([`${selectedAddress}`], 'new');
// console.log(feed);
return ( return (
<Container> <Container>
@@ -110,7 +107,7 @@ const Board = ({ setBodyStyle }) => {
{defaultSubplebbits.map(subplebbit => ( {defaultSubplebbits.map(subplebbit => (
<span className="boardList" key={subplebbit.address}> <span className="boardList" key={subplebbit.address}>
[ [
<a href="#" onClick={() => handleClick(subplebbit.title, subplebbit.address)} <a href="javascript:void(0)" onClick={() => handleClick(subplebbit.title, subplebbit.address)}
>{subplebbit.title}</a> >{subplebbit.title}</a>
]&nbsp; ]&nbsp;
</span> </span>
@@ -160,6 +157,7 @@ const Board = ({ setBodyStyle }) => {
<BoardForm selectedStyle={selectedStyle} id="board-form" name="board-form" action="" method="post"> <BoardForm selectedStyle={selectedStyle} id="board-form" name="board-form" action="" method="post">
<div className="board"> <div className="board">
{feed.map(object => { {feed.map(object => {
let counter = 1;
const thread = object; const thread = object;
const { replies: { pages: { topAll: { comments } } } } = object; const { replies: { pages: { topAll: { comments } } } } = object;
return ( return (
@@ -205,7 +203,9 @@ const Board = ({ setBodyStyle }) => {
</div> </div>
</div> </div>
</div> </div>
{comments.map(reply => ( {comments.map(reply => {
counter++;
return (
<div key={`pc-${reply.cid}`} className="post-container reply-container"> <div key={`pc-${reply.cid}`} className="post-container reply-container">
<div key={`sa-${reply.cid}`} className="side-arrows">{'>>'}</div> <div key={`sa-${reply.cid}`} className="side-arrows">{'>>'}</div>
<div key={`pr-${reply.cid}`} className="post-reply"> <div key={`pr-${reply.cid}`} className="post-reply">
@@ -223,7 +223,7 @@ const Board = ({ setBodyStyle }) => {
&nbsp; &nbsp;
<span key={`pn-${reply.cid}`} className="post-number"> <span key={`pn-${reply.cid}`} className="post-number">
<a key={`pl1-${reply.cid}`} href="javascript:void(0)" title="Link to this post">No.</a> <a key={`pl1-${reply.cid}`} href="javascript:void(0)" title="Link to this post">No.</a>
<a key={`pl2-${reply.cid}`} href="javascript:void(0)" title="Reply to this post">00000002</a> <a key={`pl2-${reply.cid}`} href="javascript:void(0)" title="Reply to this post">{`0000000${counter}`}</a>
</span> </span>
<a key={`pmb-${reply.cid}`} className="post-menu-button" href="javascript:void(0)" title="Post menu" data-cmd="post-menu"></a> <a key={`pmb-${reply.cid}`} className="post-menu-button" href="javascript:void(0)" title="Post menu" data-cmd="post-menu"></a>
</div> </div>
@@ -232,7 +232,7 @@ const Board = ({ setBodyStyle }) => {
</blockquote> </blockquote>
</div> </div>
</div> </div>
))} )})}
</div> </div>
<hr key={`hr-${thread.cid}`} /> <hr key={`hr-${thread.cid}`} />
</> </>