diff --git a/src/App.js b/src/App.js index 6314fb62..fe6e077a 100644 --- a/src/App.js +++ b/src/App.js @@ -11,6 +11,7 @@ import Board from './components/views/Board'; import Thread from './components/views/Thread'; import Catalog from './components/views/Catalog'; import NotFound from './components/views/NotFound'; +import Pending from './components/views/Pending'; import CaptchaModal from './components/CaptchaModal'; import { importAll } from './components/ImageBanner'; import preloadImages from './utils/preloadImages'; @@ -177,6 +178,7 @@ export default function App() { } /> } /> + } /> } /> diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx index d907d2eb..53571d96 100644 --- a/src/components/views/Board.jsx +++ b/src/components/views/Board.jsx @@ -108,6 +108,7 @@ const Board = () => { const onChallenge = async (challenges, comment) => { setPendingComment(comment); let challengeAnswers = []; + navigate(`/p/${selectedAddress}/c/pending`) try { challengeAnswers = await getChallengeAnswersFromUser(challenges) diff --git a/src/components/views/NotFound.jsx b/src/components/views/NotFound.jsx index 645df588..fa513bdd 100644 --- a/src/components/views/NotFound.jsx +++ b/src/components/views/NotFound.jsx @@ -5,7 +5,6 @@ import { Container, Header, Logo, Page, Boards, BoardsTitle } from '../styled/Ho const NotFound = ({ setBodyStyle }) => { - const { setSelectedStyle } = useGeneralStore(state => state); useEffect(() => { @@ -31,7 +30,7 @@ const NotFound = ({ setBodyStyle }) => {

404 Not Found

 - plebchan { + const { + defaultSubplebbits, + isSettingsOpen, setIsSettingsOpen, + pendingComment, + selectedStyle, + selectedThread, setSelectedThread, + showPostFormLink + } = useGeneralStore(state => state); + + const comment = pendingComment; + + const [visible] = useState(true); + const [errorMessage] = useState(null); + const [successMessage] = useState(null); + useError(errorMessage, [errorMessage]); + useSuccess(successMessage, [successMessage]); + const { subplebbitAddress, threadCid } = useParams(); + const navigate = useNavigate(); + const commentMediaInfo = getCommentMediaInfo(comment); + const fallbackImgUrl = "/assets/filedeleted-res.gif"; + + + const [selectedAddress, setSelectedAddress] = useState(comment.subplebbitAddress); + const [selectedTitle, setSelectedTitle] = useState(null); + + // temporary title from JSON, gets subplebbitAddress and threadCid from URL + useEffect(() => { + setSelectedAddress(subplebbitAddress); + setSelectedThread(threadCid); + const selectedSubplebbit = defaultSubplebbits.find((subplebbit) => subplebbit.address === subplebbitAddress); + if (selectedSubplebbit) { + setSelectedTitle(selectedSubplebbit.title); + } + }, [subplebbitAddress, setSelectedAddress, setSelectedTitle, defaultSubplebbits]); + + // mobile navbar board select functionality + const handleSelectChange = (event) => { + const selected = event.target.value; + const selectedTitle = defaultSubplebbits.find((subplebbit) => subplebbit.address === selected).title; + setSelectedTitle(selectedTitle); + setSelectedAddress(selected); + navigate(`/p/${selected}`); + }; + + + return ( + + setIsSettingsOpen(false)} /> + + <> + {defaultSubplebbits.map(subplebbit => ( + + [ + { + setSelectedTitle(subplebbit.title); + setSelectedAddress(subplebbit.address); + }} + >{subplebbit.title ? subplebbit.title : subplebbit.address} + ]  + + ))} + + [ + setIsSettingsOpen(true)}>Settings + ] + [ + handleStyleChange({target: {value: "Yotsuba"}} + )}>Home + ] + +
+
+ Board +   + +
+
+ setIsSettingsOpen(true)}>Settings +   + handleStyleChange({target: {value: "Yotsuba"}} + )}>Home +
+
+
 
+
 
+ + +
+ <> +
+ +
+ <> +
{selectedTitle}
+
p/{selectedAddress}
+ + +
+ + + +
+ + Return + +
+
+ + Catalog + +
+
 
+ + + +
+ + Style: +   + + + + [ + Return + ] + + + [ + Catalog + ] + + {comment ? ( + Preview + ) : ( + Fetching IPFS... + )} +
+ + + + {comment !== undefined ? ( + <> +
+
+
+
+ {commentMediaInfo?.url ? ( +
+ + {commentMediaInfo?.type === "webpage" ? ( + + thumbnail e.target.src = fallbackImgUrl} /> + + ) : null} + {commentMediaInfo?.type === "image" ? ( + + {commentMediaInfo.type} e.target.src = fallbackImgUrl} /> + + ) : null} + {commentMediaInfo?.type === "video" ? ( + + + ) : null} + {commentMediaInfo?.type === "audio" ? ( + + + ) : null} +
+ ) : null} + + {comment.title ? ( + comment.title.length > 75 ? + <> + + {comment.title.slice(0, 75) + " (...)"} + + + : + {comment.title} + ) + : null} +   + {comment.author?.displayName + ? comment.author?.displayName.length > 20 + ? <> + + {comment.author?.displayName.slice(0, 20) + " (...)"} + + + : + {comment.author?.displayName} + : + Anonymous} +   +   + + (u/ + + {comment.author?.shortAddress} + ) + +   + {getDate(comment?.timestamp)} +   + + {}} title="Link to this post">c/ +   + Pending +    + + +
+ +
+
+
+
+
+
+
+
+
+
+ + + {comment.author?.displayName + ? comment.author?.displayName.length > 15 + ? <> + + {comment.author?.displayName.slice(0, 15) + " (...)"} + + + : + {comment.author?.displayName} + : + Anonymous} +   + + (u/ + + {comment.author?.shortAddress} + + )  + +
+ {comment.title ? ( + comment.title.length > 30 ? + <> + + {comment.title.slice(0, 30) + " (...)"} + + + : + {comment.title} + ) : null} + + + {getDate(comment?.timestamp)} +   + +   + Pending + +
+ {commentMediaInfo?.url ? ( + commentMediaInfo.type === "webpage" ? ( +
+ + thumbnail e.target.src = fallbackImgUrl} /> +
{commentMediaInfo.type}
+ +
+ ) : commentMediaInfo.type === "image" ? ( +
+ + {commentMediaInfo.type} e.target.src = fallbackImgUrl} /> +
{commentMediaInfo.type}
+ +
+ ) : commentMediaInfo.type === "video" ? ( +
+ + +
+ ) : commentMediaInfo.type === "audio" ? ( +
+ + +
+ ) : null + ) : null} +
+ {comment.content ? ( + <> + + + ) : null} +
+
+
+
+ +
+
+
+ + + ) : ( + + )} + + + ); +} + +export default Pending; \ No newline at end of file