diff --git a/src/app.tsx b/src/app.tsx index 7112215a..7d9ee195 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -18,18 +18,24 @@ import PostForm from './components/post-form'; const BoardLayout = () => { const { subplebbitAddress } = useParams(); + const location = useLocation(); + + // force rerender of post form when navigating between pages + const key = `${subplebbitAddress}-${location.pathname}`; + return ( <> - + ); }; + const App = () => { const location = useLocation(); const isInHomeView = isHomeView(location.pathname); diff --git a/src/components/post-form/post-form.tsx b/src/components/post-form/post-form.tsx index b00e0454..5c6fcce0 100644 --- a/src/components/post-form/post-form.tsx +++ b/src/components/post-form/post-form.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from 'react'; +import { useEffect, useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useLocation, useNavigate, useParams } from 'react-router-dom'; import { PublishCommentOptions, setAccount, useAccount, useAccountComment, useComment, usePublishComment } from '@plebbit/plebbit-react-hooks'; @@ -9,6 +9,7 @@ import { getLinkMediaInfo } from '../../lib/utils/media-utils'; import { isValidURL } from '../../lib/utils/url-utils'; import { isDescriptionView, isPostPageView, isRulesView } from '../../lib/utils/view-utils'; import challengesStore from '../../hooks/use-challenges'; +import useReply from '../../hooks/use-reply'; type SubmitState = { subplebbitAddress: string | undefined; @@ -66,7 +67,7 @@ const PostFormTable = () => { const { index, publishComment } = usePublishComment(publishCommentOptions); - const onPublish = () => { + const onPublishPost = () => { if (!title && !content && !link) { alert(`Cannot post empty comment`); return; @@ -97,6 +98,38 @@ const PostFormTable = () => { } }, [index, resetSubmitStore, navigate]); + // in post page, publish a reply to the post + const location = useLocation(); + const isInPostPage = isPostPageView(location.pathname, params); + const cid = params?.commentCid as string; + const { setContent, resetContent, replyIndex, publishReply } = useReply({ cid, subplebbitAddress }); + + const textRef = useRef(null); + const urlRef = useRef(null); + + const onPublishReply = () => { + const currentContent = textRef.current?.value || ''; + const currentUrl = urlRef.current?.value || ''; + + if (!currentContent.trim() && !currentUrl) { + alert(`Cannot post empty comment`); + return; + } + + if (currentUrl && !isValidURL(currentUrl)) { + alert('The provided link is not a valid URL.'); + return; + } + publishReply(); + }; + + useEffect(() => { + if (typeof replyIndex === 'number') { + resetContent(); + window.scrollTo(0, document.body.scrollHeight); + } + }, [replyIndex, resetContent]); + return ( @@ -109,19 +142,35 @@ const PostFormTable = () => { defaultValue={displayName || undefined} onChange={(e) => setAccount({ ...account, author: { ...account?.author, displayName: e.target.value } })} /> + - - - - + {!isInPostPage && ( + + + + + )}
Subject - setSubmitStore({ title: e.target.value })} /> - -
Subject + { + setSubmitStore({ title: e.target.value }); + }} + /> + +
Comment -