From f7ae7e78dfb36391f39a28f444b86f90ddc1996e Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Mon, 31 Jul 2023 08:59:17 +0200 Subject: [PATCH] Revert "add refresh button" This reverts commit 9057256571e7fa4e44df1fb36077198f78d78e3b. --- src/components/views/AllCatalog.jsx | 783 ++++--- src/components/views/Catalog.jsx | 944 ++++---- src/components/views/Description.jsx | 357 ++-- src/components/views/SubscriptionsCatalog.jsx | 523 +++-- src/components/views/Thread.jsx | 1892 ++++++++--------- yarn.lock | 65 +- 6 files changed, 2255 insertions(+), 2309 deletions(-) diff --git a/src/components/views/AllCatalog.jsx b/src/components/views/AllCatalog.jsx index fa43eaad..76fc0cff 100755 --- a/src/components/views/AllCatalog.jsx +++ b/src/components/views/AllCatalog.jsx @@ -1,32 +1,32 @@ -import { useAccount, useFeed, usePublishCommentEdit, useSubplebbits } from '@plebbit/plebbit-react-hooks'; -import InfiniteScroll from 'react-infinite-scroller'; -import { debounce } from 'lodash'; import React, { useCallback, useEffect, useRef, useState } from 'react'; -import { confirmAlert } from 'react-confirm-alert'; import { createPortal } from 'react-dom'; import { Helmet } from 'react-helmet-async'; -import { Link, useNavigate } from 'react-router-dom'; +import { Link, useNavigate} from 'react-router-dom'; +import { confirmAlert } from 'react-confirm-alert'; import { Tooltip } from 'react-tooltip'; -import packageJson from '../../../package.json'; -import useGeneralStore from '../../hooks/stores/useGeneralStore'; -import useError from '../../hooks/useError'; -import useFeedStateString from '../../hooks/useFeedStateString'; -import useSuccess from '../../hooks/useSuccess'; +import { VirtuosoGrid } from 'react-virtuoso'; +import { useAccount, useFeed, usePublishCommentEdit, useSubplebbits } from '@plebbit/plebbit-react-hooks'; +import { debounce } from 'lodash'; +import { Container, NavBar, Header, Break, PostMenu, BoardForm } from '../styled/views/Board.styled'; +import { Threads, PostMenuCatalog, GridContainer } from '../styled/views/Catalog.styled'; +import { TopBar, Footer, AuthorDeleteAlert } from '../styled/views/Thread.styled'; +import CatalogLoader from '../CatalogLoader'; +import EditModal from '../modals/EditModal'; +import ImageBanner from '../ImageBanner'; +import VerifiedAuthor from '../VerifiedAuthor'; +import CreateBoardModal from '../modals/CreateBoardModal'; +import ModerationModal from '../modals/ModerationModal'; +import OfflineIndicator from '../OfflineIndicator'; +import SettingsModal from '../modals/SettingsModal'; import countLinks from '../../utils/countLinks'; import getCommentMediaInfo from '../../utils/getCommentMediaInfo'; import handleStyleChange from '../../utils/handleStyleChange'; -import CatalogLoader from '../CatalogLoader'; -import ImageBanner from '../ImageBanner'; -import OfflineIndicator from '../OfflineIndicator'; -import VerifiedAuthor from '../VerifiedAuthor'; -import CreateBoardModal from '../modals/CreateBoardModal'; -import EditModal from '../modals/EditModal'; -import ModerationModal from '../modals/ModerationModal'; -import SettingsModal from '../modals/SettingsModal'; -import { BoardForm, Break, Container, Header, NavBar, PostMenu } from '../styled/views/Board.styled'; -import { PostMenuCatalog, Threads } from '../styled/views/Catalog.styled'; -import { AuthorDeleteAlert, Footer, TopBar } from '../styled/views/Thread.styled'; -const { version } = packageJson +import useError from '../../hooks/useError'; +import useFeedStateString from '../../hooks/useFeedStateString'; +import useSuccess from '../../hooks/useSuccess'; +import useGeneralStore from '../../hooks/stores/useGeneralStore'; +import packageJson from '../../../package.json' +const {version} = packageJson const AllCatalog = () => { @@ -47,7 +47,7 @@ const AllCatalog = () => { setSelectedThread, setSelectedTitle, } = useGeneralStore(state => state); - + const threadMenuRefs = useRef({}); const postMenuRef = useRef(null); @@ -57,7 +57,7 @@ const AllCatalog = () => { const navigate = useNavigate(); const [, setNewErrorMessage] = useError(); const [, setNewSuccessMessage] = useSuccess(); - + const [prevScrollPos, setPrevScrollPos] = useState(0); const [visible, setVisible] = useState(true); const [isHoveringOnThread, setIsHoveringOnThread] = useState(false); @@ -68,14 +68,14 @@ const AllCatalog = () => { const [deletePost, setDeletePost] = useState(false); const [isImageSearchOpen, setIsImageSearchOpen] = useState(false); const [commentCid, setCommentCid] = useState(null); - const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 }); + const [menuPosition, setMenuPosition] = useState({top: 0, left: 0}); const [openMenuCid, setOpenMenuCid] = useState(null); const [moderatorPermissions, setModeratorPermissions] = useState({}); const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false); const addresses = defaultSubplebbits.map(subplebbit => subplebbit.address); - const { feed, hasMore, loadMore } = useFeed({ subplebbitAddresses: addresses, sortType: 'active' }); - const { subplebbits } = useSubplebbits({ subplebbitAddresses: addresses, sortType: 'active' }); + const { feed, loadMore } = useFeed({subplebbitAddresses: addresses, sortType: 'active'}); + const {subplebbits} = useSubplebbits({subplebbitAddresses: addresses, sortType: 'active'}); const [selectedFeed, setSelectedFeed] = useState(feed.sort((a, b) => b.timestamp - a.timestamp)); const stateString = useFeedStateString(subplebbits); @@ -83,13 +83,13 @@ const AllCatalog = () => { useEffect(() => { let permissions = {}; - + selectedFeed.forEach(thread => { const subplebbit = subplebbits.find(s => s && s.address === thread.subplebbitAddress); - - if (subplebbit && subplebbit.roles) { + + if (subplebbit && subplebbit.roles) { const role = subplebbit.roles[account?.author.address]?.role; - + if (role === 'moderator' || role === 'admin' || role === 'owner') { permissions[thread.subplebbitAddress] = true; } else { @@ -97,9 +97,9 @@ const AllCatalog = () => { } } }); - + setModeratorPermissions(permissions); - }, [account?.author.address, selectedFeed, subplebbits]); + }, [account?.author.address, selectedFeed, subplebbits]); const handleOptionClick = () => { @@ -120,7 +120,7 @@ const AllCatalog = () => { } else { document.removeEventListener('click', handleOutsideClick); } - + return () => { document.removeEventListener('click', handleOutsideClick); }; @@ -134,23 +134,24 @@ const AllCatalog = () => { setVisible(prevScrollPos > currentScrollPos || currentScrollPos < 10); setPrevScrollPos(currentScrollPos); }, 50); - + window.addEventListener('scroll', debouncedHandleScroll); - + return () => window.removeEventListener('scroll', debouncedHandleScroll); }, [prevScrollPos, visible]); const tryLoadMore = async () => { - try { loadMore() } - catch (e) { await new Promise(resolve => setTimeout(resolve, 1000)) } + try {loadMore()} + catch (e) + {await new Promise(resolve => setTimeout(resolve, 1000))} }; const onChallengeVerification = (challengeVerification) => { if (challengeVerification.challengeSuccess === true) { - setNewSuccessMessage('Challenge Success'); - } + setNewSuccessMessage('Challenge Success'); + } else if (challengeVerification.challengeSuccess === false) { setNewErrorMessage(`Challenge Failed, reason: ${challengeVerification.reason}. Errors: ${challengeVerification.errors}`); console.log('challenge failed', challengeVerification); @@ -174,16 +175,16 @@ const AllCatalog = () => { const getChallengeAnswersFromUser = async (challenges) => { setChallengesArray(challenges); - + return new Promise((resolve, reject) => { const imageString = challenges?.challenges[0].challenge; const imageSource = `data:image/png;base64,${imageString}`; const challengeImg = new Image(); challengeImg.src = imageSource; - + challengeImg.onload = () => { setIsCaptchaOpen(true); - + const handleKeyDown = async (event) => { if (event.key === 'Enter') { const currentCaptchaResponse = useGeneralStore.getState().captchaResponse; @@ -199,7 +200,7 @@ const AllCatalog = () => { setResolveCaptchaPromise(resolve); }; - + challengeImg.onerror = () => { reject(setNewErrorMessage('Could not load challenges')); }; @@ -216,8 +217,8 @@ const AllCatalog = () => { setNewErrorMessage(error.message); console.log(error); }, }); - - + + const { publishCommentEdit } = usePublishCommentEdit(publishCommentEditOptions); @@ -264,8 +265,8 @@ const AllCatalog = () => { setOriginalCommentContent(comment.content); setIsEditModalOpen(true); } - - + + useEffect(() => { setPublishCommentEditOptions((prevOptions) => ({ ...prevOptions, @@ -281,7 +282,7 @@ const AllCatalog = () => { } }, [editedComment, setIsAuthorEdit]); - + useEffect(() => { let isActive = true; if (publishCommentEditOptions && triggerPublishCommentEdit) { @@ -328,69 +329,69 @@ const AllCatalog = () => { return ( <> - p/All - Catalog - plebchan + p/All - Catalog - plebchan setIsCreateBoardOpen(false)} /> + selectedStyle={selectedStyle} + isOpen={isCreateBoardOpen} + closeModal={() => setIsCreateBoardOpen(false)} /> setIsSettingsOpen(false)} /> - { setIsModerationOpen(false); setDeletePost(false) }} - deletePost={deletePost} /> + selectedStyle={selectedStyle} + isOpen={isSettingsOpen} + closeModal={() => setIsSettingsOpen(false)} /> + {setIsModerationOpen(false); setDeletePost(false)}} + deletePost={deletePost} /> setIsEditModalOpen(false)} - originalCommentContent={originalCommentContent} /> + selectedStyle={selectedStyle} + isOpen={isEditModalOpen} + closeModal={() => setIsEditModalOpen(false)} + originalCommentContent={originalCommentContent} /> <> - - [ + + [ window.scrollTo(0, 0)}>All - / +  /  window.scrollTo(0, 0)}>Subscriptions - ] [ - {defaultSubplebbits.map((subplebbit, index) => ( - - {index === 0 ? null : "\u00a0"} - { - setSelectedTitle(subplebbit.title); - setSelectedAddress(subplebbit.address); - }} - >{subplebbit.title ? subplebbit.title : subplebbit.address} - {index !== defaultSubplebbits.length - 1 ? " /" : null} - - ))} - ] - + ] [ + {defaultSubplebbits.map((subplebbit, index) => ( + + {index === 0 ? null : "\u00a0"} + { + setSelectedTitle(subplebbit.title); + setSelectedAddress(subplebbit.address); + }} + >{subplebbit.title ? subplebbit.title : subplebbit.address} + {index !== defaultSubplebbits.length - 1 ? " /" : null} + + ))} + ] + [ - { - window.electron && window.electron.isElectron ? ( - setIsCreateBoardOpen(true) - ) : ( - alert( - 'You can create a board with the desktop version of plebchan, which you can download from here: https://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, you can also run a board (called "subplebbit") using plebbit-cli: https://github.com/plebbit/plebbit-cli\n\n' - ) - ) - } - }>Create Board + { + window.electron && window.electron.isElectron ? ( + setIsCreateBoardOpen(true) + ) : ( + alert( + 'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n' + ) + ) + } + }>Create Board ] -[ - setIsSettingsOpen(true)}>Settings -] -[ - Home -] - + [ + setIsSettingsOpen(true)}>Settings + ] + [ + Home + ] +
@@ -400,27 +401,27 @@ const AllCatalog = () => { {defaultSubplebbits.map(subplebbit => ( - - ))} - - alert( - 'You can create a board with the desktop version of plebchan, which you can download from here: https://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, you can also run a board (called "subplebbit") using plebbit-cli: https://github.com/plebbit/plebbit-cli\n\n' + + ))} +   + alert( + 'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n' ) }>Create Board
setIsSettingsOpen(true)}>Settings   - { handleStyleChange({ target: { value: "Yotsuba" } }); window.scrollTo(0, 0); }}>Home + {handleStyleChange({target: {value: "Yotsuba"}}); window.scrollTo(0, 0);}}>Home
 
 
- +
<>
@@ -435,7 +436,7 @@ const AllCatalog = () => {
Style: - +   - - - - - - - - - - <> - - [ - window.scrollTo(0, 0)}>All - / - window.scrollTo(0, 0)}>Subscriptions - ] [ - {defaultSubplebbits.map((subplebbit, index) => ( - - {index === 0 ? null : "\u00a0"} - handleClickTitle(subplebbit.title, subplebbit.address)} - >{subplebbit.title ? subplebbit.title : subplebbit.address} - {index !== defaultSubplebbits.length - 1 ? " /" : null} + }} + endReached={tryLoadMore} + useWindowScroll={true} + components={{List: GridContainer}} + /> + ) : ()} + +
+ + + + Style: +   + + + + <> + + [ + window.scrollTo(0, 0)}>All +  /  + window.scrollTo(0, 0)}>Subscriptions + ] [ + {defaultSubplebbits.map((subplebbit, index) => ( + + {index === 0 ? null : "\u00a0"} + handleClickTitle(subplebbit.title, subplebbit.address)} + >{subplebbit.title ? subplebbit.title : subplebbit.address} + {index !== defaultSubplebbits.length - 1 ? " /" : null} + + ))} + ] - ))} - ] - - + + [ + { + window.electron && window.electron.isElectron ? ( + setIsCreateBoardOpen(true) + ) : ( + alert( + 'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n' + ) + ) + } + }>Create Board + ] [ - { - window.electron && window.electron.isElectron ? ( - setIsCreateBoardOpen(true) - ) : ( - alert( - 'You can create a board with the desktop version of plebchan, which you can download from here: https://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, you can also run a board (called "subplebbit") using plebbit-cli: https://github.com/plebbit/plebbit-cli\n\n' - ) - ) - } - }>Create Board + setIsSettingsOpen(true)}>Settings ] -[ - setIsSettingsOpen(true)}>Settings -] -[ - handleStyleChange({ target: { value: "Yotsuba" } } - )}>Home -] - + [ + handleStyleChange({target: {value: "Yotsuba"}} + )}>Home + ] + - +
plebchan v{version}. GPL-2.0
@@ -763,16 +748,16 @@ const AllCatalog = () => { marginTop: "5px", marginBottom: "15px", }}> - About + About +  •  + App  •  - App -  •  - Twitter -  •  - Telegram + Twitter +  •  + Telegram
- - + + ); } diff --git a/src/components/views/Catalog.jsx b/src/components/views/Catalog.jsx index 1f585d69..029a9dc3 100755 --- a/src/components/views/Catalog.jsx +++ b/src/components/views/Catalog.jsx @@ -1,5 +1,4 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; -import InfiniteScroll from 'react-infinite-scroller'; import { createPortal } from 'react-dom'; import { Helmet } from 'react-helmet-async'; import { Link, useNavigate, useParams } from 'react-router-dom'; @@ -30,7 +29,7 @@ import useSuccess from '../../hooks/useSuccess'; import useAnonModeStore from '../../hooks/stores/useAnonModeStore'; import useGeneralStore from '../../hooks/stores/useGeneralStore'; import packageJson from '../../../package.json' -const { version } = packageJson +const {version} = packageJson const Catalog = () => { @@ -57,7 +56,7 @@ const Catalog = () => { } = useGeneralStore(state => state); const { anonymousMode } = useAnonModeStore(); - + const nameRef = useRef(); const subjectRef = useRef(); const commentRef = useRef(); @@ -68,10 +67,10 @@ const Catalog = () => { const selectedThreadCidRef = useRef(null); const navigate = useNavigate(); - + const [, setNewErrorMessage] = useError(); const [, setNewSuccessMessage] = useSuccess(); - + const [triggerPublishComment, setTriggerPublishComment] = useState(false); const [prevScrollPos, setPrevScrollPos] = useState(0); const [visible, setVisible] = useState(true); @@ -83,16 +82,15 @@ const Catalog = () => { const [deletePost, setDeletePost] = useState(false); const [isImageSearchOpen, setIsImageSearchOpen] = useState(false); const [commentCid, setCommentCid] = useState(null); - const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 }); + const [menuPosition, setMenuPosition] = useState({top: 0, left: 0}); const [openMenuCid, setOpenMenuCid] = useState(null); const [executeAnonMode, setExecuteAnonMode] = useState(false); const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false); - const { feed, hasMore, loadMore } = useFeed({ subplebbitAddresses: [`${selectedAddress}`], sortType: 'active' }); - const { subplebbitAddress } = useParams(); - const subplebbit = useSubplebbit({ subplebbitAddress: selectedAddress }); const account = useAccount(); - + const { feed, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'active'}); + const { subplebbitAddress } = useParams(); + const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress}); const stateString = useStateString(subplebbit); let feedWithDescriptionAndRules = []; @@ -100,18 +98,18 @@ const Catalog = () => { if (subplebbit.rules) { - feedWithDescriptionAndRules.push({ type: 'rules', content: subplebbit.rules }); + feedWithDescriptionAndRules.push({type: 'rules', content: subplebbit.rules}); } if (subplebbit.description) { - feedWithDescriptionAndRules.push({ type: 'description', content: subplebbit.description }); - } + feedWithDescriptionAndRules.push({type: 'description', content: subplebbit.description}); +} useEffect(() => { - if (subplebbit.roles !== undefined) { + if (subplebbit.roles !== undefined) { const role = subplebbit.roles[account?.author.address]?.role; - + if (role === 'moderator' || role === 'admin' || role === 'owner') { setIsModerator(true); } else { @@ -137,12 +135,12 @@ const Catalog = () => { } else { document.removeEventListener('click', handleOutsideClick); } - + return () => { document.removeEventListener('click', handleOutsideClick); }; }, [openMenuCid, handleOutsideClick]); - + useEffect(() => { @@ -167,8 +165,8 @@ const Catalog = () => { } }, [errorString, setNewErrorMessage]); - - const { subscribed, subscribe, unsubscribe } = useSubscribe({ subplebbitAddress: selectedAddress }); + + const { subscribed, subscribe, unsubscribe } = useSubscribe({subplebbitAddress: selectedAddress}); useEffect(() => { @@ -192,16 +190,17 @@ const Catalog = () => { setVisible(prevScrollPos > currentScrollPos || currentScrollPos < 10); setPrevScrollPos(currentScrollPos); }, 50); - + window.addEventListener('scroll', debouncedHandleScroll); - + return () => window.removeEventListener('scroll', debouncedHandleScroll); }, [prevScrollPos, visible]); const tryLoadMore = async () => { - try { loadMore() } - catch (e) { await new Promise(resolve => setTimeout(resolve, 1000)) } + try {loadMore()} + catch (e) + {await new Promise(resolve => setTimeout(resolve, 1000))} }; @@ -224,7 +223,7 @@ const Catalog = () => { const onChallenge = async (challenges, comment) => { setPendingComment(comment); let challengeAnswers = []; - + try { challengeAnswers = await getChallengeAnswersFromUser(challenges) } @@ -235,7 +234,7 @@ const Catalog = () => { await comment.publishChallengeAnswers(challengeAnswers) } }; - + useEffect(() => { setPublishCommentOptions((prevPublishCommentOptions) => ({ @@ -243,7 +242,7 @@ const Catalog = () => { subplebbitAddress: selectedAddress, })); }, [selectedAddress]); - + const [publishCommentOptions, setPublishCommentOptions] = useState({ subplebbitAddress: selectedAddress, @@ -253,7 +252,7 @@ const Catalog = () => { setNewErrorMessage(error.message); console.log(error); }, }); - + const { publishComment, index } = usePublishComment(publishCommentOptions); @@ -264,7 +263,7 @@ const Catalog = () => { } }, [index, navigate, setPendingCommentIndex]); - + const resetFields = useCallback(() => { if (nameRef.current) { nameRef.current.value = ''; @@ -283,7 +282,7 @@ const Catalog = () => { const handleSubmit = async (event) => { event.preventDefault(); - + if (subjectRef.current.value === "") { setNewErrorMessage('Subject field is mandatory'); return; @@ -306,24 +305,24 @@ const Catalog = () => { const updateSigner = useCallback(async () => { if (anonymousMode) { setExecuteAnonMode(true); - + let storedSigners = JSON.parse(localStorage.getItem('storedSigners')) || {}; let signer; - + if (!storedSigners[selectedThreadCidRef]) { signer = await account?.plebbit.createSigner(); storedSigners[selectedThreadCidRef] = { privateKey: signer?.privateKey, address: signer?.address }; localStorage.setItem('storedSigners', JSON.stringify(storedSigners)); } else { const signerPrivateKey = storedSigners[selectedThreadCidRef].privateKey; - + try { - signer = await account?.plebbit.createSigner({ type: 'ed25519', privateKey: signerPrivateKey }); + signer = await account?.plebbit.createSigner({type: 'ed25519', privateKey: signerPrivateKey}); } catch (error) { console.log(error); } } - + setPublishCommentOptions(prevPublishCommentOptions => { const newPublishCommentOptions = { ...prevPublishCommentOptions, @@ -333,16 +332,16 @@ const Catalog = () => { address: signer?.address }, }; - + if (JSON.stringify(prevPublishCommentOptions) !== JSON.stringify(newPublishCommentOptions)) { return newPublishCommentOptions; } - + return prevPublishCommentOptions; }); } }, [selectedThreadCidRef, anonymousMode, account]); - + useEffect(() => { updateSigner(); }, [updateSigner]); @@ -358,20 +357,20 @@ const Catalog = () => { setExecuteAnonMode(false); } }, [publishCommentOptions, triggerPublishComment, publishComment, resetFields]); - - + + const getChallengeAnswersFromUser = async (challenges) => { setChallengesArray(challenges); - + return new Promise((resolve, reject) => { const imageString = challenges?.challenges[0].challenge; const imageSource = `data:image/png;base64,${imageString}`; const challengeImg = new Image(); challengeImg.src = imageSource; - + challengeImg.onload = () => { setIsCaptchaOpen(true); - + const handleKeyDown = async (event) => { if (event.key === 'Enter') { const currentCaptchaResponse = captchaResponse; @@ -384,10 +383,10 @@ const Catalog = () => { setCaptchaResponse(''); document.addEventListener('keydown', handleKeyDown); - + setResolveCaptchaPromise(resolve); }; - + challengeImg.onerror = () => { reject(setNewErrorMessage('Could not load challenges')); }; @@ -405,8 +404,8 @@ const Catalog = () => { setNewErrorMessage(error.message); console.log(error); }, }); - - + + const { publishCommentEdit } = usePublishCommentEdit(publishCommentEditOptions); @@ -454,8 +453,8 @@ const Catalog = () => { setOriginalCommentContent(comment.content); setIsEditModalOpen(true); } - - + + useEffect(() => { setPublishCommentEditOptions((prevOptions) => ({ ...prevOptions, @@ -471,7 +470,7 @@ const Catalog = () => { } }, [editedComment]); - + useEffect(() => { if (publishCommentEditOptions && triggerPublishCommentEdit) { (async () => { @@ -519,56 +518,56 @@ const Catalog = () => { setIsCreateBoardOpen(false)} /> + selectedStyle={selectedStyle} + isOpen={isCreateBoardOpen} + closeModal={() => setIsCreateBoardOpen(false)} /> setIsSettingsOpen(false)} /> - { setIsModerationOpen(false); setDeletePost(false) }} - deletePost={deletePost} /> + selectedStyle={selectedStyle} + isOpen={isSettingsOpen} + closeModal={() => setIsSettingsOpen(false)} /> + {setIsModerationOpen(false); setDeletePost(false)}} + deletePost={deletePost} /> setIsEditModalOpen(false)} - originalCommentContent={originalCommentContent} /> + selectedStyle={selectedStyle} + isOpen={isEditModalOpen} + closeModal={() => setIsEditModalOpen(false)} + originalCommentContent={originalCommentContent} /> <> - - [ + + [ window.scrollTo(0, 0)}>All - / +  /  window.scrollTo(0, 0)}>Subscriptions - ] [ - {defaultSubplebbits.map((subplebbit, index) => ( - - {index === 0 ? null : "\u00a0"} - { - setSelectedTitle(subplebbit.title); - setSelectedAddress(subplebbit.address); - }} - >{subplebbit.title ? subplebbit.title : subplebbit.address} - {index !== defaultSubplebbits.length - 1 ? " /" : null} - - ))} - ] - + ] [ + {defaultSubplebbits.map((subplebbit, index) => ( + + {index === 0 ? null : "\u00a0"} + { + setSelectedTitle(subplebbit.title); + setSelectedAddress(subplebbit.address); + }} + >{subplebbit.title ? subplebbit.title : subplebbit.address} + {index !== defaultSubplebbits.length - 1 ? " /" : null} + + ))} + ] + [ - { - window.electron && window.electron.isElectron ? ( - setIsCreateBoardOpen(true) - ) : ( - alert( - 'You can create a board with the desktop version of plebchan, which you can download from here: https://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, you can also run a board (called "subplebbit") using plebbit-cli: https://github.com/plebbit/plebbit-cli\n\n' - ) + { + window.electron && window.electron.isElectron ? ( + setIsCreateBoardOpen(true) + ) : ( + alert( + 'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n' ) - } + ) + } }>Create Board ] [ @@ -587,20 +586,20 @@ const Catalog = () => { {defaultSubplebbits.map(subplebbit => ( - - ))} - - alert( - 'You can create a board with the desktop version of plebchan, which you can download from here: https://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, you can also run a board (called "subplebbit") using plebbit-cli: https://github.com/plebbit/plebbit-cli\n\n' + + ))} +   + alert( + 'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n' ) }>Create Board
setIsSettingsOpen(true)}>Settings   - { handleStyleChange({ target: { value: "Yotsuba" } }); window.scrollTo(0, 0); }}>Home + {handleStyleChange({target: {value: "Yotsuba"}}); window.scrollTo(0, 0);}}>Home
@@ -613,15 +612,15 @@ const Catalog = () => {
- <> + <>
{subplebbit.title ?? null}
p/{subplebbit.address} - +
- +
@@ -629,12 +628,12 @@ const Catalog = () => {
[ - event.target.style.cursor = 'pointer'}>Start a New Thread + event.target.style.cursor='pointer'}>Start a New Thread ]
- event.target.style.cursor = 'pointer'}>Start a New Thread + event.target.style.cursor='pointer'}>Start a New Thread
@@ -653,9 +652,9 @@ const Catalog = () => { Subject - - + + @@ -680,7 +679,7 @@ const Catalog = () => {
Style: - +   @@ -1187,43 +1163,43 @@ const Catalog = () => { marginTop: "42px", }}> <> - - [ + + [ window.scrollTo(0, 0)}>All - / +  /  window.scrollTo(0, 0)}>Subscriptions - ]  + ]  + + {defaultSubplebbits.map((subplebbit, index) => ( + + {index === 0 ? null : "\u00a0"} + { + setSelectedTitle(subplebbit.title); + setSelectedAddress(subplebbit.address); + }} + >{subplebbit.title ? subplebbit.title : subplebbit.address} + {index !== defaultSubplebbits.length - 1 ? " /" : null} - {defaultSubplebbits.map((subplebbit, index) => ( - - {index === 0 ? null : "\u00a0"} - { - setSelectedTitle(subplebbit.title); - setSelectedAddress(subplebbit.address); - }} - >{subplebbit.title ? subplebbit.title : subplebbit.address} - {index !== defaultSubplebbits.length - 1 ? " /" : null} - - ))} + ))} - [ - { - window.electron && window.electron.isElectron ? ( - setIsCreateBoardOpen(true) - ) : ( - alert( - 'You can create a board with the desktop version of plebchan, which you can download from here: https://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, you can also run a board (called "subplebbit") using plebbit-cli: https://github.com/plebbit/plebbit-cli\n\n' - ) - ) - } - }>Create Board - ] + [ + { + window.electron && window.electron.isElectron ? ( + setIsCreateBoardOpen(true) + ) : ( + alert( + 'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n' + ) + ) + } + }>Create Board + ] [ setIsSettingsOpen(true)}>Settings ] [ - handleStyleChange({ target: { value: "Yotsuba" } } + handleStyleChange({target: {value: "Yotsuba"}} )}>Home ] @@ -1240,13 +1216,13 @@ const Catalog = () => { marginTop: "5px", marginBottom: "15px", }}> - About + About +  •  + App  •  - App -  •  - Twitter -  •  - Telegram + Twitter +  •  + Telegram diff --git a/src/components/views/Description.jsx b/src/components/views/Description.jsx index f322a0dc..322ac86c 100644 --- a/src/components/views/Description.jsx +++ b/src/components/views/Description.jsx @@ -1,25 +1,25 @@ -import { useSubplebbit } from '@plebbit/plebbit-react-hooks'; -import { debounce } from 'lodash'; import React, { useCallback, useEffect, useRef, useState } from 'react'; import { createPortal } from 'react-dom'; import { Helmet } from 'react-helmet-async'; import { Link, useNavigate, useParams } from 'react-router-dom'; import { Tooltip } from 'react-tooltip'; -import packageJson from '../../../package.json'; -import useGeneralStore from '../../hooks/stores/useGeneralStore'; +import { useSubplebbit } from '@plebbit/plebbit-react-hooks'; +import { debounce } from 'lodash'; +import { Container, NavBar, Header, Break, PostMenu, PostForm } from '../styled/views/Board.styled'; +import { TopBar, BoardForm, Footer, ReplyFormLink} from '../styled/views/Thread.styled'; +import { PostMenuCatalog } from '../styled/views/Catalog.styled'; +import ImageBanner from '../ImageBanner'; +import Post from '../Post'; +import CreateBoardModal from '../modals/CreateBoardModal'; +import AdminListModal from '../modals/AdminListModal'; +import OfflineIndicator from '../OfflineIndicator'; +import SettingsModal from '../modals/SettingsModal'; import getDate from '../../utils/getDate'; import handleImageClick from '../../utils/handleImageClick'; import handleStyleChange from '../../utils/handleStyleChange'; -import ImageBanner from '../ImageBanner'; -import OfflineIndicator from '../OfflineIndicator'; -import Post from '../Post'; -import AdminListModal from '../modals/AdminListModal'; -import CreateBoardModal from '../modals/CreateBoardModal'; -import SettingsModal from '../modals/SettingsModal'; -import { Break, Container, Header, NavBar, PostForm, PostMenu } from '../styled/views/Board.styled'; -import { PostMenuCatalog } from '../styled/views/Catalog.styled'; -import { BoardForm, Footer, ReplyFormLink, TopBar } from '../styled/views/Thread.styled'; -const { version } = packageJson +import useGeneralStore from '../../hooks/stores/useGeneralStore'; +import packageJson from '../../../package.json' +const {version} = packageJson const Description = () => { @@ -31,7 +31,7 @@ const Description = () => { selectedThread, setSelectedTitle, } = useGeneralStore(state => state); - + const navigate = useNavigate(); const threadMenuRefs = useRef({}); @@ -41,13 +41,13 @@ const Description = () => { const [isAdminListOpen, setIsAdminListOpen] = useState(false); const [prevScrollPos, setPrevScrollPos] = useState(0); const [visible, setVisible] = useState(true); - const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 }); + const [menuPosition, setMenuPosition] = useState({top: 0, left: 0}); const [openMenuCid, setOpenMenuCid] = useState(null); const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false); - const { subplebbitAddress, threadCid } = useParams(); - const subplebbit = useSubplebbit({ subplebbitAddress: selectedAddress }); - + const { subplebbitAddress } = useParams(); + const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress}); + const handleOptionClick = () => { setOpenMenuCid(null); @@ -66,13 +66,13 @@ const Description = () => { } else { document.removeEventListener('click', handleOutsideClick); } - + return () => { document.removeEventListener('click', handleOutsideClick); }; }, [openMenuCid, handleOutsideClick]); - + useEffect(() => { window.scrollTo(0, 0); }, []); @@ -99,9 +99,9 @@ const Description = () => { setVisible(prevScrollPos > currentScrollPos || currentScrollPos < 10); setPrevScrollPos(currentScrollPos); }, 50); - + window.addEventListener('scroll', debouncedHandleScroll); - + return () => window.removeEventListener('scroll', debouncedHandleScroll); }, [prevScrollPos, visible]); @@ -127,57 +127,57 @@ const Description = () => { return ( <> - + <title> {"Board Description - " + (subplebbit.title || subplebbit.address) + " - plebchan"} - - + + setIsCreateBoardOpen(false)} /> + selectedStyle={selectedStyle} + isOpen={isCreateBoardOpen} + closeModal={() => setIsCreateBoardOpen(false)} /> setIsAdminListOpen(false)} - roles={subplebbit.roles} /> + selectedStyle={selectedStyle} + isOpen={isAdminListOpen} + closeModal={() => setIsAdminListOpen(false)} + roles={subplebbit.roles} /> setIsSettingsOpen(false)} /> + selectedStyle={selectedStyle} + isOpen={isSettingsOpen} + closeModal={() => setIsSettingsOpen(false)} /> <> - - [ + + [ window.scrollTo(0, 0)}>All - / +  /  window.scrollTo(0, 0)}>Subscriptions - ] [ - {defaultSubplebbits.map((subplebbit, index) => ( - - {index === 0 ? null : "\u00a0"} - { - setSelectedTitle(subplebbit.title); - setSelectedAddress(subplebbit.address); - }} - >{subplebbit.title ? subplebbit.title : subplebbit.address} - {index !== defaultSubplebbits.length - 1 ? " /" : null} - - ))} - ] - + ] [ + {defaultSubplebbits.map((subplebbit, index) => ( + + {index === 0 ? null : "\u00a0"} + { + setSelectedTitle(subplebbit.title); + setSelectedAddress(subplebbit.address); + }} + >{subplebbit.title ? subplebbit.title : subplebbit.address} + {index !== defaultSubplebbits.length - 1 ? " /" : null} + + ))} + ] + [ - { - window.electron && window.electron.isElectron ? ( - setIsCreateBoardOpen(true) - ) : ( - alert( - 'You can create a board with the desktop version of plebchan, which you can download from here: https://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, you can also run a board (called "subplebbit") using plebbit-cli: https://github.com/plebbit/plebbit-cli\n\n' - ) + { + window.electron && window.electron.isElectron ? ( + setIsCreateBoardOpen(true) + ) : ( + alert( + 'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n' ) - } + ) + } }>Create Board ] [ @@ -196,20 +196,20 @@ const Description = () => { {defaultSubplebbits.map(subplebbit => ( - - ))} - - alert( - 'You can create a board with the desktop version of plebchan, which you can download from here: https://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, you can also run a board (called "subplebbit") using plebbit-cli: https://github.com/plebbit/plebbit-cli\n\n' + + ))} +   + alert( + 'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n' ) }>Create Board
setIsSettingsOpen(true)}>Settings   - { handleStyleChange({ target: { value: "Yotsuba" } }); window.scrollTo(0, 0); }}>Home + {handleStyleChange({target: {value: "Yotsuba"}}); window.scrollTo(0, 0);}}>Home
@@ -222,43 +222,33 @@ const Description = () => {
- <> + <>
{subplebbit.title ?? null}
p/{subplebbit.address} - +
- + - -
- { window.scrollTo(0, 0) }}> + +
+ {window.scrollTo(0, 0)}}> Return
-
- - - [ - window.location.reload()} - onMouseOver={(event) => event.target.style.cursor = 'pointer'} - onTouchStart={() => window.location.reload()}>Refresh - ] - -
- { window.scrollTo(0, 0) }}>Catalog + {window.scrollTo(0, 0)}}>Catalog
- window.scrollTo(0, document.body.scrollHeight)} onMouseOver={(event) => event.target.style.cursor = 'pointer'}>Bottom + window.scrollTo(0, document.body.scrollHeight)} onMouseOver={(event) => event.target.style.cursor='pointer'}>Bottom
@@ -266,7 +256,7 @@ const Description = () => { Style: - +   @@ -479,43 +460,43 @@ const Description = () => { marginTop: "42px", }}> <> - - [ + + [ window.scrollTo(0, 0)}>All - / +  /  window.scrollTo(0, 0)}>Subscriptions - ]  + ]  + + {defaultSubplebbits.map((subplebbit, index) => ( + + {index === 0 ? null : "\u00a0"} + { + setSelectedTitle(subplebbit.title); + setSelectedAddress(subplebbit.address); + }} + >{subplebbit.title ? subplebbit.title : subplebbit.address} + {index !== defaultSubplebbits.length - 1 ? " /" : null} - {defaultSubplebbits.map((subplebbit, index) => ( - - {index === 0 ? null : "\u00a0"} - { - setSelectedTitle(subplebbit.title); - setSelectedAddress(subplebbit.address); - }} - >{subplebbit.title ? subplebbit.title : subplebbit.address} - {index !== defaultSubplebbits.length - 1 ? " /" : null} - - ))} - - [ - { - window.electron && window.electron.isElectron ? ( - setIsCreateBoardOpen(true) - ) : ( - alert( - 'You can create a board with the desktop version of plebchan, which you can download from here: https://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, you can also run a board (called "subplebbit") using plebbit-cli: https://github.com/plebbit/plebbit-cli\n\n' - ) - ) - } - }>Create Board - ] + ))} + + [ + { + window.electron && window.electron.isElectron ? ( + setIsCreateBoardOpen(true) + ) : ( + alert( + 'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n' + ) + ) + } + }>Create Board + ] [ setIsSettingsOpen(true)}>Settings ] [ - handleStyleChange({ target: { value: "Yotsuba" } } + handleStyleChange({target: {value: "Yotsuba"}} )}>Home ] @@ -532,13 +513,13 @@ const Description = () => { marginTop: "5px", marginBottom: "15px", }}> - About + About +  •  + App  •  - App -  •  - Twitter -  •  - Telegram + Twitter +  •  + Telegram
diff --git a/src/components/views/SubscriptionsCatalog.jsx b/src/components/views/SubscriptionsCatalog.jsx index f67619dc..a3d6404e 100755 --- a/src/components/views/SubscriptionsCatalog.jsx +++ b/src/components/views/SubscriptionsCatalog.jsx @@ -1,32 +1,32 @@ -import { useAccount, useFeed, usePublishCommentEdit, useSubplebbits } from '@plebbit/plebbit-react-hooks'; -import { debounce } from 'lodash'; import React, { useCallback, useEffect, useRef, useState } from 'react'; -import { confirmAlert } from 'react-confirm-alert'; import { createPortal } from 'react-dom'; import { Helmet } from 'react-helmet-async'; -import InfiniteScroll from 'react-infinite-scroller'; -import { Link, useNavigate } from 'react-router-dom'; +import { Link, useNavigate} from 'react-router-dom'; +import { confirmAlert } from 'react-confirm-alert'; import { Tooltip } from 'react-tooltip'; -import packageJson from '../../../package.json'; +import { VirtuosoGrid } from 'react-virtuoso'; +import { useAccount, useFeed, usePublishCommentEdit, useSubplebbits } from '@plebbit/plebbit-react-hooks'; +import { debounce } from 'lodash'; import useGeneralStore from '../../hooks/stores/useGeneralStore'; -import useError from '../../hooks/useError'; -import useFeedStateString from '../../hooks/useFeedStateString'; -import useSuccess from '../../hooks/useSuccess'; +import { Container, NavBar, Header, Break, PostMenu, BoardForm } from '../styled/views/Board.styled'; +import { Threads, PostMenuCatalog, GridContainer } from '../styled/views/Catalog.styled'; +import { TopBar, Footer, AuthorDeleteAlert } from '../styled/views/Thread.styled'; +import CatalogLoader from '../CatalogLoader'; +import EditModal from '../modals/EditModal'; +import ImageBanner from '../ImageBanner'; +import VerifiedAuthor from '../VerifiedAuthor'; +import CreateBoardModal from '../modals/CreateBoardModal'; +import ModerationModal from '../modals/ModerationModal'; +import OfflineIndicator from '../OfflineIndicator'; +import SettingsModal from '../modals/SettingsModal'; import countLinks from '../../utils/countLinks'; import getCommentMediaInfo from '../../utils/getCommentMediaInfo'; import handleStyleChange from '../../utils/handleStyleChange'; -import CatalogLoader from '../CatalogLoader'; -import ImageBanner from '../ImageBanner'; -import OfflineIndicator from '../OfflineIndicator'; -import VerifiedAuthor from '../VerifiedAuthor'; -import CreateBoardModal from '../modals/CreateBoardModal'; -import EditModal from '../modals/EditModal'; -import ModerationModal from '../modals/ModerationModal'; -import SettingsModal from '../modals/SettingsModal'; -import { BoardForm, Break, Container, Header, NavBar, PostMenu } from '../styled/views/Board.styled'; -import { PostMenuCatalog, Threads } from '../styled/views/Catalog.styled'; -import { AuthorDeleteAlert, Footer, TopBar } from '../styled/views/Thread.styled'; -const { version } = packageJson +import useError from '../../hooks/useError'; +import useFeedStateString from '../../hooks/useFeedStateString'; +import useSuccess from '../../hooks/useSuccess'; +import packageJson from '../../../package.json' +const {version} = packageJson const SubscriptionsCatalog = () => { @@ -67,27 +67,27 @@ const SubscriptionsCatalog = () => { const [deletePost, setDeletePost] = useState(false); const [isImageSearchOpen, setIsImageSearchOpen] = useState(false); const [commentCid, setCommentCid] = useState(null); - const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 }); + const [menuPosition, setMenuPosition] = useState({top: 0, left: 0}); const [openMenuCid, setOpenMenuCid] = useState(null); const [moderatorPermissions, setModeratorPermissions] = useState({}); const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false); - const { feed, hasMore, loadMore } = useFeed({ subplebbitAddresses: account?.subscriptions, sortType: 'active' }); + const { feed, loadMore } = useFeed({subplebbitAddresses: account?.subscriptions, sortType: 'active'}); const [selectedFeed, setSelectedFeed] = useState(feed.sort((a, b) => b.timestamp - a.timestamp)); - const { subplebbits } = useSubplebbits({ subplebbitAddresses: account?.subscriptions, sortType: 'active' }); + const {subplebbits} = useSubplebbits({subplebbitAddresses: account?.subscriptions, sortType: 'active'}); const stateString = useFeedStateString(subplebbits); useEffect(() => { let permissions = {}; - + selectedFeed.forEach(thread => { const subplebbit = subplebbits.find(s => s && s.address === thread.subplebbitAddress); - - if (subplebbit && subplebbit.roles) { + + if (subplebbit && subplebbit.roles) { const role = subplebbit.roles[account?.author.address]?.role; - + if (role === 'moderator' || role === 'admin' || role === 'owner') { permissions[thread.subplebbitAddress] = true; } else { @@ -95,9 +95,9 @@ const SubscriptionsCatalog = () => { } } }); - + setModeratorPermissions(permissions); - }, [account?.author.address, selectedFeed, subplebbits]); + }, [account?.author.address, selectedFeed, subplebbits]); const handleOptionClick = () => { @@ -118,7 +118,7 @@ const SubscriptionsCatalog = () => { } else { document.removeEventListener('click', handleOutsideClick); } - + return () => { document.removeEventListener('click', handleOutsideClick); }; @@ -131,23 +131,24 @@ const SubscriptionsCatalog = () => { setVisible(prevScrollPos > currentScrollPos || currentScrollPos < 10); setPrevScrollPos(currentScrollPos); }, 50); - + window.addEventListener('scroll', debouncedHandleScroll); - + return () => window.removeEventListener('scroll', debouncedHandleScroll); }, [prevScrollPos, visible]); const tryLoadMore = async () => { - try { loadMore() } - catch (e) { await new Promise(resolve => setTimeout(resolve, 1000)) } + try {loadMore()} + catch (e) + {await new Promise(resolve => setTimeout(resolve, 1000))} }; const onChallengeVerification = (challengeVerification) => { if (challengeVerification.challengeSuccess === true) { - setNewSuccessMessage('Challenge Success'); - } + setNewSuccessMessage('Challenge Success'); + } else if (challengeVerification.challengeSuccess === false) { setNewErrorMessage(`Challenge Failed, reason: ${challengeVerification.reason}. Errors: ${challengeVerification.errors}`); console.log('challenge failed', challengeVerification); @@ -171,16 +172,16 @@ const SubscriptionsCatalog = () => { const getChallengeAnswersFromUser = async (challenges) => { setChallengesArray(challenges); - + return new Promise((resolve, reject) => { const imageString = challenges?.challenges[0].challenge; const imageSource = `data:image/png;base64,${imageString}`; const challengeImg = new Image(); challengeImg.src = imageSource; - + challengeImg.onload = () => { setIsCaptchaOpen(true); - + const handleKeyDown = async (event) => { if (event.key === 'Enter') { const currentCaptchaResponse = useGeneralStore.getState().captchaResponse; @@ -196,7 +197,7 @@ const SubscriptionsCatalog = () => { setResolveCaptchaPromise(resolve); }; - + challengeImg.onerror = () => { reject(setNewErrorMessage('Could not load challenges')); }; @@ -213,8 +214,8 @@ const SubscriptionsCatalog = () => { setNewErrorMessage(error.message); console.log(error); }, }); - - + + const { publishCommentEdit } = usePublishCommentEdit(publishCommentEditOptions); @@ -261,8 +262,8 @@ const SubscriptionsCatalog = () => { setOriginalCommentContent(comment.content); setIsEditModalOpen(true); } - - + + useEffect(() => { setPublishCommentEditOptions((prevOptions) => ({ ...prevOptions, @@ -278,7 +279,7 @@ const SubscriptionsCatalog = () => { } }, [editedComment, setIsAuthorEdit]); - + useEffect(() => { let isActive = true; if (publishCommentEditOptions && triggerPublishCommentEdit) { @@ -324,60 +325,60 @@ const SubscriptionsCatalog = () => { return ( <> - Subscriptions - Catalog - plebchan + Subscriptions - Catalog - plebchan setIsCreateBoardOpen(false)} /> + selectedStyle={selectedStyle} + isOpen={isCreateBoardOpen} + closeModal={() => setIsCreateBoardOpen(false)} /> setIsSettingsOpen(false)} /> - { setIsModerationOpen(false); setDeletePost(false) }} - deletePost={deletePost} /> + selectedStyle={selectedStyle} + isOpen={isSettingsOpen} + closeModal={() => setIsSettingsOpen(false)} /> + {setIsModerationOpen(false); setDeletePost(false)}} + deletePost={deletePost} /> setIsEditModalOpen(false)} - originalCommentContent={originalCommentContent} /> + selectedStyle={selectedStyle} + isOpen={isEditModalOpen} + closeModal={() => setIsEditModalOpen(false)} + originalCommentContent={originalCommentContent} /> <> - - [ + + [ window.scrollTo(0, 0)}>All - / +  /  window.scrollTo(0, 0)}>Subscriptions - ] [ - {defaultSubplebbits.map((subplebbit, index) => ( - - {index === 0 ? null : "\u00a0"} - { - setSelectedTitle(subplebbit.title); - setSelectedAddress(subplebbit.address); - }} - >{subplebbit.title ? subplebbit.title : subplebbit.address} - {index !== defaultSubplebbits.length - 1 ? " /" : null} - - ))} - ] - + ] [ + {defaultSubplebbits.map((subplebbit, index) => ( + + {index === 0 ? null : "\u00a0"} + { + setSelectedTitle(subplebbit.title); + setSelectedAddress(subplebbit.address); + }} + >{subplebbit.title ? subplebbit.title : subplebbit.address} + {index !== defaultSubplebbits.length - 1 ? " /" : null} + + ))} + ] + [ - { - window.electron && window.electron.isElectron ? ( - setIsCreateBoardOpen(true) - ) : ( - alert( - 'You can create a board with the desktop version of plebchan, which you can download from here: https://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, you can also run a board (called "subplebbit") using plebbit-cli: https://github.com/plebbit/plebbit-cli\n\n' - ) + { + window.electron && window.electron.isElectron ? ( + setIsCreateBoardOpen(true) + ) : ( + alert( + 'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n' ) - } + ) + } }>Create Board ] [ @@ -396,20 +397,20 @@ const SubscriptionsCatalog = () => { {defaultSubplebbits.map(subplebbit => ( - - ))} - - alert( - 'You can create a board with the desktop version of plebchan, which you can download from here: https://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, you can also run a board (called "subplebbit") using plebbit-cli: https://github.com/plebbit/plebbit-cli\n\n' + + ))} +   + alert( + 'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n' ) }>Create Board
setIsSettingsOpen(true)}>Settings   - { handleStyleChange({ target: { value: "Yotsuba" } }); window.scrollTo(0, 0); }}>Home + {handleStyleChange({target: {value: "Yotsuba"}}); window.scrollTo(0, 0);}}>Home
@@ -422,7 +423,7 @@ const SubscriptionsCatalog = () => {
- <> + <>
Subscriptions
{account?.subscriptions.length < 1 ? (
You haven't subscribed to any board yet.
@@ -431,7 +432,7 @@ const SubscriptionsCatalog = () => { You have subscribed to {account?.subscriptions.length} board{account?.subscriptions.length > 1 ? "s" : null}. )} - + @@ -439,7 +440,7 @@ const SubscriptionsCatalog = () => {
Style: - +   @@ -715,40 +700,40 @@ const SubscriptionsCatalog = () => { - <> - - [ + <> + + [ window.scrollTo(0, 0)}>Subscriptions - ] [ - {defaultSubplebbits.map((subplebbit, index) => ( - - {index === 0 ? null : "\u00a0"} - handleClickTitle(subplebbit.title, subplebbit.address)} - >{subplebbit.title ? subplebbit.title : subplebbit.address} - {index !== defaultSubplebbits.length - 1 ? " /" : null} - - ))} - ] - + ] [ + {defaultSubplebbits.map((subplebbit, index) => ( + + {index === 0 ? null : "\u00a0"} + handleClickTitle(subplebbit.title, subplebbit.address)} + >{subplebbit.title ? subplebbit.title : subplebbit.address} + {index !== defaultSubplebbits.length - 1 ? " /" : null} + + ))} + ] + - [ - { - window.electron && window.electron.isElectron ? ( - setIsCreateBoardOpen(true) - ) : ( - alert( - 'You can create a board with the desktop version of plebchan, which you can download from here: https://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, you can also run a board (called "subplebbit") using plebbit-cli: https://github.com/plebbit/plebbit-cli\n\n' - ) - ) - } - }>Create Board - ] + [ + { + window.electron && window.electron.isElectron ? ( + setIsCreateBoardOpen(true) + ) : ( + alert( + 'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n' + ) + ) + } + }>Create Board + ] [ setIsSettingsOpen(true)}>Settings ] [ - handleStyleChange({ target: { value: "Yotsuba" } } + handleStyleChange({target: {value: "Yotsuba"}} )}>Home ] @@ -765,13 +750,13 @@ const SubscriptionsCatalog = () => { marginTop: "5px", marginBottom: "15px", }}> - About + About +  •  + App  •  - App -  •  - Twitter -  •  - Telegram + Twitter +  •  + Telegram diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx index c4e1d53a..a3988d30 100755 --- a/src/components/views/Thread.jsx +++ b/src/components/views/Thread.jsx @@ -41,7 +41,7 @@ import useSuccess from '../../hooks/useSuccess'; import useAnonModeStore from '../../hooks/stores/useAnonModeStore'; import useGeneralStore from '../../hooks/stores/useGeneralStore'; import packageJson from '../../../package.json' -const { version } = packageJson +const {version} = packageJson const Thread = () => { @@ -73,7 +73,7 @@ const Thread = () => { } = useGeneralStore(state => state); const { anonymousMode } = useAnonModeStore(); - + const account = useAccount(); const navigate = useNavigate(); const handleClickForm = useClickForm(); @@ -106,10 +106,10 @@ const Thread = () => { const [isImageSearchOpen, setIsImageSearchOpen] = useState(false); const [isModerator, setIsModerator] = useState(false); const [commentCid, setCommentCid] = useState(null); - const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 }); + const [menuPosition, setMenuPosition] = useState({top: 0, left: 0}); const [openMenuCid, setOpenMenuCid] = useState(null); const [outOfViewCid, setOutOfViewCid] = useState(null); - const [outOfViewPosition, setOutOfViewPosition] = useState({ top: 0, left: 0 }); + const [outOfViewPosition, setOutOfViewPosition] = useState({top: 0, left: 0}); const [postOnHoverHeight, setPostOnHoverHeight] = useState(0); const [executeAnonMode, setExecuteAnonMode] = useState(false); const [cidTracker, setCidTracker] = useState({}); @@ -121,9 +121,9 @@ const Thread = () => { useAnonMode(selectedThread, anonymousMode && executeAnonMode); - const comment = useComment({ commentCid: selectedThread }); + const comment = useComment({commentCid: selectedThread}); const { subplebbitAddress, threadCid } = useParams(); - const subplebbit = useSubplebbit({ subplebbitAddress: comment.subplebbitAddress }); + const subplebbit = useSubplebbit({subplebbitAddress: comment.subplebbitAddress}); const selectedAddress = subplebbit.address; const stateString = useStateString(comment); @@ -159,17 +159,17 @@ const Thread = () => { useEffect(() => { - if (subplebbit.roles !== undefined) { + if (subplebbit.roles !== undefined) { const role = subplebbit.roles[account?.author?.address]?.role; - + if (role === 'moderator' || role === 'admin' || role === 'owner') { setIsModerator(true); } else { setIsModerator(false); } } - }, [account?.author.address, subplebbit.roles]); - + }, [account?.author.address, subplebbit.roles]); + const handleOptionClick = () => { setOpenMenuCid(null); @@ -187,7 +187,7 @@ const Thread = () => { } else { document.removeEventListener('click', handleOutsideClick); } - + return () => { document.removeEventListener('click', handleOutsideClick); }; @@ -201,14 +201,14 @@ const Thread = () => { } }, [outOfViewCid]); - + useEffect(() => { window.scrollTo(0, 0); }, []); useEffect(() => { - if (comment.state === "failed" && selectedAddress === undefined) { + if ( comment.state === "failed" && selectedAddress === undefined) { navigate('/404'); } }, [selectedAddress, navigate, comment.state]); @@ -232,7 +232,7 @@ const Thread = () => { }, [errorString, setNewErrorMessage]); - const flattenedReplies = useMemo(() => + const flattenedReplies = useMemo(() => flattenCommentsPages(comment.replies), [comment.replies] ); @@ -244,7 +244,7 @@ const Thread = () => { }), [flattenedReplies, selectedThread]); - const { accountComments } = useAccountComments({ filter }); + const { accountComments } = useAccountComments({filter}); const accountRepliesNotYetInCommentReplies = useMemo(() => { @@ -255,7 +255,7 @@ const Thread = () => { const sortedReplies = useMemo(() => [ ...accountRepliesNotYetInCommentReplies, ...flattenedReplies - ].sort((a, b) => a.timestamp - b.timestamp + ].sort((a, b) => a.timestamp - b.timestamp ), [accountRepliesNotYetInCommentReplies, flattenedReplies]); // let post.jsx access full cid of user-typed short cid @@ -292,13 +292,13 @@ const Thread = () => { setVisible(prevScrollPos > currentScrollPos || currentScrollPos < 10); setPrevScrollPos(currentScrollPos); }, 50); - + window.addEventListener('scroll', debouncedHandleScroll); - + return () => window.removeEventListener('scroll', debouncedHandleScroll); }, [prevScrollPos, visible]); - + const onChallengeVerification = (challengeVerification) => { if (challengeVerification.challengeSuccess === true) { if (challengeVerification.publication?.cid !== undefined) { @@ -316,7 +316,7 @@ const Thread = () => { const onChallenge = async (challenges, comment) => { setPendingComment(comment); let challengeAnswers = []; - + try { challengeAnswers = await getChallengeAnswersFromUser(challenges) } @@ -328,7 +328,7 @@ const Thread = () => { } }; - + useEffect(() => { setPublishCommentOptions((prevPublishCommentOptions) => ({ ...prevPublishCommentOptions, @@ -336,7 +336,7 @@ const Thread = () => { })); }, [comment.subplebbitAddress]); - + const [publishCommentOptions, setPublishCommentOptions] = useState({ subplebbitAddress: comment.subplebbitAddress, onChallenge, @@ -356,7 +356,7 @@ const Thread = () => { } }, [index, setPendingCommentIndex]); - + const resetFields = useCallback(() => { if (nameRef.current) { nameRef.current.value = ''; @@ -380,8 +380,8 @@ const Thread = () => { setNewErrorMessage("Please enter a comment or link."); return; } - - + + setPublishCommentOptions((prevPublishCommentOptions) => ({ ...prevPublishCommentOptions, author: { @@ -395,28 +395,28 @@ const Thread = () => { setTriggerPublishComment(true); }; - + const updateSigner = useCallback(async () => { if (anonymousMode) { setExecuteAnonMode(true); - + let storedSigners = JSON.parse(localStorage.getItem('storedSigners')) || {}; let signer; - + if (!storedSigners[selectedThread]) { signer = await account?.plebbit.createSigner(); storedSigners[selectedThread] = { privateKey: signer?.privateKey, address: signer?.address }; localStorage.setItem('storedSigners', JSON.stringify(storedSigners)); } else { const signerPrivateKey = storedSigners[selectedThread].privateKey; - + try { - signer = await account?.plebbit.createSigner({ type: 'ed25519', privateKey: signerPrivateKey }); + signer = await account?.plebbit.createSigner({type: 'ed25519', privateKey: signerPrivateKey}); } catch (error) { console.log(error); } } - + setPublishCommentOptions(prevPublishCommentOptions => { const newPublishCommentOptions = { ...prevPublishCommentOptions, @@ -426,23 +426,23 @@ const Thread = () => { address: signer?.address }, }; - + if (JSON.stringify(prevPublishCommentOptions) !== JSON.stringify(newPublishCommentOptions)) { return newPublishCommentOptions; } - + return prevPublishCommentOptions; }); } }, [selectedThread, anonymousMode, account]); - + useEffect(() => { if (anonymousMode) { updateSigner(); } }, [updateSigner, anonymousMode]); - - + + useEffect(() => { if (publishCommentOptions && triggerPublishComment) { (async () => { @@ -457,16 +457,16 @@ const Thread = () => { const getChallengeAnswersFromUser = async (challenges) => { setChallengesArray(challenges); - + return new Promise((resolve, reject) => { const imageString = challenges?.challenges[0].challenge; const imageSource = `data:image/png;base64,${imageString}`; const challengeImg = new Image(); challengeImg.src = imageSource; - + challengeImg.onload = () => { setIsCaptchaOpen(true); - + const handleKeyDown = async (event) => { if (event.key === 'Enter') { const currentCaptchaResponse = captchaResponse; @@ -482,7 +482,7 @@ const Thread = () => { setResolveCaptchaPromise(resolve); }; - + challengeImg.onerror = () => { reject(setNewErrorMessage('Could not load challenges')); }; @@ -500,8 +500,8 @@ const Thread = () => { setNewErrorMessage(error.message); console.log(error); }, }); - - + + const { publishCommentEdit } = usePublishCommentEdit(publishCommentEditOptions); @@ -548,8 +548,8 @@ const Thread = () => { setOriginalCommentContent(comment.content); setIsEditModalOpen(true); } - - + + useEffect(() => { setPublishCommentEditOptions((prevOptions) => ({ ...prevOptions, @@ -565,7 +565,7 @@ const Thread = () => { } }, [editedComment]); - + useEffect(() => { let isActive = true; if (publishCommentEditOptions && triggerPublishCommentEdit) { @@ -604,70 +604,70 @@ const Thread = () => { return ( <> - - {( - (comment.content?.slice(0, 40) ?? comment.title?.slice(0, 40) ?? "Thread") + " - " - + (selectedTitle ? selectedTitle : selectedAddress) - + " - plebchan" - )} - - + + {( + (comment.content?.slice(0, 40) ?? comment.title?.slice(0, 40) ?? "Thread") + " - " + + (selectedTitle ? selectedTitle : selectedAddress) + + " - plebchan" + )} + + setIsCreateBoardOpen(false)} /> - setIsReplyOpen(false)} /> + selectedStyle={selectedStyle} + isOpen={isCreateBoardOpen} + closeModal={() => setIsCreateBoardOpen(false)} /> + setIsReplyOpen(false)} /> setIsSettingsOpen(false)} /> - { setIsModerationOpen(false); setDeletePost(false) }} - deletePost={deletePost} /> + selectedStyle={selectedStyle} + isOpen={isSettingsOpen} + closeModal={() => setIsSettingsOpen(false)} /> + {setIsModerationOpen(false); setDeletePost(false)}} + deletePost={deletePost} /> setIsEditModalOpen(false)} - originalCommentContent={originalCommentContent} /> + selectedStyle={selectedStyle} + isOpen={isEditModalOpen} + closeModal={() => setIsEditModalOpen(false)} + originalCommentContent={originalCommentContent} /> <> - - [ + + [ window.scrollTo(0, 0)}>All - / +  /  window.scrollTo(0, 0)}>Subscriptions - ] [ - {defaultSubplebbits.map((subplebbit, index) => ( - - {index === 0 ? null : "\u00a0"} - { - setSelectedTitle(subplebbit.title); - setSelectedAddress(subplebbit.address); - }} - >{subplebbit.title ? subplebbit.title : subplebbit.address} - {index !== defaultSubplebbits.length - 1 ? " /" : null} - - ))} - ] - + ] [ + {defaultSubplebbits.map((subplebbit, index) => ( + + {index === 0 ? null : "\u00a0"} + { + setSelectedTitle(subplebbit.title); + setSelectedAddress(subplebbit.address); + }} + >{subplebbit.title ? subplebbit.title : subplebbit.address} + {index !== defaultSubplebbits.length - 1 ? " /" : null} + + ))} + ] + [ - { - window.electron && window.electron.isElectron ? ( - setIsCreateBoardOpen(true) - ) : ( - alert( - 'You can create a board with the desktop version of plebchan, which you can download from here: https://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, you can also run a board (called "subplebbit") using plebbit-cli: https://github.com/plebbit/plebbit-cli\n\n' - ) + { + window.electron && window.electron.isElectron ? ( + setIsCreateBoardOpen(true) + ) : ( + alert( + 'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n' ) - } + ) + } }>Create Board ] [ @@ -686,20 +686,20 @@ const Thread = () => { {defaultSubplebbits.map(subplebbit => ( - - ))} - - alert( - 'You can create a board with the desktop version of plebchan, which you can download from here: https://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, you can also run a board (called "subplebbit") using plebbit-cli: https://github.com/plebbit/plebbit-cli\n\n' + + ))} +   + alert( + 'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n' ) }>Create Board
setIsSettingsOpen(true)}>Settings   - { handleStyleChange({ target: { value: "Yotsuba" } }); window.scrollTo(0, 0); }}>Home + {handleStyleChange({target: {value: "Yotsuba"}}); window.scrollTo(0, 0);}}>Home
@@ -712,43 +712,43 @@ const Thread = () => {
- <> + <>
{subplebbit.title ?? null}
p/{subplebbit.address} - +
- +
- { window.scrollTo(0, 0) }}> + {window.scrollTo(0, 0)}}> Return
- { window.scrollTo(0, 0) }}>Catalog + {window.scrollTo(0, 0)}}>Catalog
- window.scrollTo(0, document.body.scrollHeight)} onMouseOver={(event) => event.target.style.cursor = 'pointer'}>Bottom + window.scrollTo(0, document.body.scrollHeight)} onMouseOver={(event) => event.target.style.cursor='pointer'}>Bottom
[ - { handleClickForm(); setSelectedShortCid(comment.shortCid) }} onMouseOver={(event) => event.target.style.cursor = 'pointer'}>Post a Reply + {handleClickForm(); setSelectedShortCid(comment.shortCid)}} onMouseOver={(event) => event.target.style.cursor='pointer'}>Post a Reply ]
- { handleClickForm(); setSelectedShortCid(comment.shortCid) }} onMouseOver={(event) => event.target.style.cursor = 'pointer'}>Post a Reply + {handleClickForm(); setSelectedShortCid(comment.shortCid)}} onMouseOver={(event) => event.target.style.cursor='pointer'}>Post a Reply
@@ -762,8 +762,8 @@ const Thread = () => { ) : ( )} - + @@ -789,7 +789,7 @@ const Thread = () => {
Style: - +   @@ -2239,7 +2197,7 @@ const Thread = () => {
- { setIsReplyOpen(true); setSelectedParentCid(comment.cid); setSelectedShortCid(comment.shortCid); }} onMouseOver={(event) => event.target.style.cursor = 'pointer'}>Post a Reply + {setIsReplyOpen(true); setSelectedParentCid(comment.cid); setSelectedShortCid(comment.shortCid);}} onMouseOver={(event) => event.target.style.cursor='pointer'}>Post a Reply
@@ -2248,17 +2206,17 @@ const Thread = () => { Return
-
+
Catalog
- window.scrollTo(0, 0)} - onMouseOver={(event) => event.target.style.cursor = 'pointer'} - onTouchStart={() => window.scrollTo(0, 0)} - style={{ cursor: 'pointer', marginRight: "10px", marginLeft: "10px" }} + window.scrollTo(0, 0)} + onMouseOver={(event) => event.target.style.cursor='pointer'} + onTouchStart={() => window.scrollTo(0, 0)} + style={{cursor: 'pointer', marginRight: "10px", marginLeft: "10px"}} >Top @@ -2266,8 +2224,8 @@ const Thread = () => {
) : (null)} - - )) : null} + + )) : null} {outOfViewCid && outOfViewPosition && createPortal(
{ feed={comment} />
- , document.body)} + , document.body)}