From f667eaccc4bdcd6b3b32acedb3bf9107f5073ef5 Mon Sep 17 00:00:00 2001 From: plebbitor Date: Mon, 20 Feb 2023 22:17:04 +0100 Subject: [PATCH] added state, hook and context for thread view --- src/App.js | 5 +- src/components/Board.jsx | 13 ++-- src/components/Catalog.jsx | 12 ++-- src/components/Thread.jsx | 127 +++++++++++++++++++++++++++++++++++-- 4 files changed, 142 insertions(+), 15 deletions(-) diff --git a/src/App.js b/src/App.js index b0627aef..0b565cdb 100644 --- a/src/App.js +++ b/src/App.js @@ -28,6 +28,7 @@ export default function App() { const [selectedTitle, setSelectedTitle] = useState(''); const [selectedAddress, setSelectedAddress] = useState(''); + const [selectedThread, setSelectedThread] = useState(''); const [selectedStyle, setSelectedStyle] = useState('Yotsuba'); return ( @@ -45,13 +46,13 @@ export default function App() { color={bodyStyle.color} fontFamily={bodyStyle.fontFamily} /> - + } /> }> } /> - }> + }> } /> }> diff --git a/src/components/Board.jsx b/src/components/Board.jsx index c04a87e9..b7cff0b1 100644 --- a/src/components/Board.jsx +++ b/src/components/Board.jsx @@ -9,7 +9,7 @@ import InfiniteScroll from 'react-infinite-scroller'; const Board = ({ setBodyStyle }) => { const [defaultSubplebbits, setDefaultSubplebbits] = useState([]); - const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress, selectedStyle, setSelectedStyle } = useContext(BoardContext); + const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress, selectedThread, setSelectedThread, selectedStyle, setSelectedStyle } = useContext(BoardContext); const [showPostFormLink, setShowPostFormLink] = useState(true); const [showPostForm, setShowPostForm] = useState(false); const [name, setName] = useState(''); @@ -124,6 +124,10 @@ const Board = ({ setBodyStyle }) => { setShowPostForm(true); navigate(`/${selectedAddress}/post`); }; + + const handleClickThread = (thread) => { + setSelectedThread(thread); + } const handlePublishComment = async () => { // Event.preventDefault(); @@ -330,10 +334,9 @@ const Board = ({ setBodyStyle }) => { hasMore={hasMore} loader={
Loading...
} > - {feed.map(object => { + {feed.map(thread => { let counter = 1; - const thread = object; - const { replies: { pages: { topAll: { comments } } } } = object; + const { replies: { pages: { topAll: { comments } } } } = thread; const renderedComments = renderComments(comments); return ( <> @@ -358,7 +361,7 @@ const Board = ({ setBodyStyle }) => {     [ - Reply + handleClickThread(thread.cid)} className="reply-link" >Reply ] diff --git a/src/components/Catalog.jsx b/src/components/Catalog.jsx index 30c14157..31251d35 100644 --- a/src/components/Catalog.jsx +++ b/src/components/Catalog.jsx @@ -10,7 +10,7 @@ import InfiniteScroll from 'react-infinite-scroller'; const Catalog = ({ setBodyStyle }) => { const [defaultSubplebbits, setDefaultSubplebbits] = useState([]); - const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress, selectedStyle, setSelectedStyle } = useContext(BoardContext); + const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress, selectedThread, setSelectedThread, selectedStyle, setSelectedStyle } = useContext(BoardContext); const [showPostFormLink, setShowPostFormLink] = useState(true); const [showPostForm, setShowPostForm] = useState(false); const [name, setName] = useState(''); @@ -124,6 +124,10 @@ const Catalog = ({ setBodyStyle }) => { navigate(`/${selectedAddress}/catalog/post`); }; + const handleClickThread = (thread) => { + setSelectedThread(thread); + } + const handlePublishComment = async () => { // Event.preventDefault(); try { @@ -320,9 +324,9 @@ const Catalog = ({ setBodyStyle }) => { {feed.map(thread => { return (
- + handleClickThread(thread.cid)}> - +
@@ -332,7 +336,7 @@ const Catalog = ({ setBodyStyle }) => {
{thread.title ? `${thread.title}` : null} - {thread.content ? `${thread.content}` : null} + {thread.content ? `: ${thread.content}` : null}
)})} diff --git a/src/components/Thread.jsx b/src/components/Thread.jsx index 683c83f5..d58900d1 100644 --- a/src/components/Thread.jsx +++ b/src/components/Thread.jsx @@ -1,17 +1,19 @@ import React, { useState, useEffect, useContext } from 'react'; import { Link, useNavigate } from 'react-router-dom'; -import { Container, NavBar, Header, Break, PostForm } from './styles/Board.styled'; +import { Container, NavBar, Header, Break, PostForm, BoardForm } from './styles/Board.styled'; import { ReplyFormTable, ReplyFormLink, TopBar } from './styles/Thread.styled'; import { BoardContext } from '../App'; +import { useComment, useAccountsActions } from '@plebbit/plebbit-react-hooks'; import ImageBanner from './ImageBanner'; const Thread = ({ setBodyStyle }) => { const [defaultSubplebbits, setDefaultSubplebbits] = useState([]); - const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress, selectedStyle, setSelectedStyle } = useContext(BoardContext); + const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress, selectedThread, setSelectedThread, selectedStyle, setSelectedStyle } = useContext(BoardContext); const [showReplyFormLink, setShowReplyFormLink] = useState(true); const [showReplyForm, setShowReplyForm] = useState(false); - const navigate = useNavigate(); + + const comment = useComment(`${selectedThread}`); useEffect(() => { let didCancel = false; @@ -44,7 +46,7 @@ const Thread = ({ setBodyStyle }) => { const handleClickForm = () => { setShowReplyFormLink(false); setShowReplyForm(true); - navigate(`/${selectedAddress}/thread/post`); + navigate(`/${selectedAddress}/thread/${selectedThread}/post`); }; const handleStyleChange = (event) => { @@ -113,6 +115,19 @@ const Thread = ({ setBodyStyle }) => { } } + function renderComments(comments) { + return comments.map(comment => { + const { replyCount, replies: { pages: { topAll: { comments: nestedComments } } } } = comment; + + if (replyCount > 0 && nestedComments.length > 0) { + const renderedNestedComments = renderComments(nestedComments); + return [comment, ...renderedNestedComments]; + } + + return [comment]; + }).flat(); + } + return ( @@ -210,6 +225,110 @@ const Thread = ({ setBodyStyle }) => {
+ + {comment ? ( + <> +
+
+
+
+   + + {comment.author.displayName || "Anonymous"} +   + + (User: {comment.author.address}) + + +   + 2 weeks ago +   + + No. + 00000001 + + ▶ + +
+ {comment.title ? + <> + {comment.title} +
+
+ + : null} + {comment.content ? ( + <> + {comment.content} + + ) : null} +
+
+
+
+ {comment.replyCount > 0 ? ( +
there are {comment.replyCount} replies
+ ) : ( +
No replies yet
+ )} + {/* {comment ? ( + comment.map(thread => { + let counter = 1; + const { replies: { pages: { topAll: { comments } } } } = thread; + const renderedComments = renderComments(comments); + return ( + <> + {renderedComments.map(reply => { + counter++; + const counterString = counter.toString().padStart(8, '0'); + return ( +
+
{'>>'}
+
+
+   + + {reply.author.displayName || "Anonymous"} +   + + (User: {reply.author.address}) + + +   + 2 weeks ago +   + + No. + {counterString} + + ▶ +
+
+ + {`>>${counterString}`}{
} + + {reply.content} +
+
+
+ ) + })} + + ) + }) + ) : ( +
Loading...
+ )} */} +
+ + ) : ( +
Loading...
+ )} + ); }