External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

add refresh button

Browse Source
This commit is contained in:
Doxometrist
2023-07-31 08:57:55 +02:00
committed by plebeius.eth
parent be80c0398e
commit 9057256571
6 changed files with 2301 additions and 2247 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/views/AllCatalog.jsx
+376 -361
View File
@@ -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 React, { useCallback, useEffect, useRef, useState } from 'react';
import { confirmAlert } from 'react-confirm-alert';
import { createPortal } from 'react-dom'; import { createPortal } from 'react-dom';
import { Helmet } from 'react-helmet-async'; 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 { Tooltip } from 'react-tooltip';
import { VirtuosoGrid } from 'react-virtuoso'; import packageJson from '../../../package.json';
import { useAccount, useFeed, usePublishCommentEdit, useSubplebbits } from '@plebbit/plebbit-react-hooks'; import useGeneralStore from '../../hooks/stores/useGeneralStore';
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 useError from '../../hooks/useError'; import useError from '../../hooks/useError';
import useFeedStateString from '../../hooks/useFeedStateString'; import useFeedStateString from '../../hooks/useFeedStateString';
import useSuccess from '../../hooks/useSuccess'; import useSuccess from '../../hooks/useSuccess';
import useGeneralStore from '../../hooks/stores/useGeneralStore'; import countLinks from '../../utils/countLinks';
import packageJson from '../../../package.json' import getCommentMediaInfo from '../../utils/getCommentMediaInfo';
const {version} = packageJson 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
const AllCatalog = () => { const AllCatalog = () => {
@@ -68,14 +68,14 @@ const AllCatalog = () => {
const [deletePost, setDeletePost] = useState(false); const [deletePost, setDeletePost] = useState(false);
const [isImageSearchOpen, setIsImageSearchOpen] = useState(false); const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
const [commentCid, setCommentCid] = useState(null); 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 [openMenuCid, setOpenMenuCid] = useState(null);
const [moderatorPermissions, setModeratorPermissions] = useState({}); const [moderatorPermissions, setModeratorPermissions] = useState({});
const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false); const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);
const addresses = defaultSubplebbits.map(subplebbit => subplebbit.address); const addresses = defaultSubplebbits.map(subplebbit => subplebbit.address);
const { feed, loadMore } = useFeed({subplebbitAddresses: addresses, sortType: 'active'}); const { feed, hasMore, loadMore } = useFeed({ subplebbitAddresses: addresses, sortType: 'active' });
const {subplebbits} = useSubplebbits({subplebbitAddresses: addresses, sortType: 'active'}); const { subplebbits } = useSubplebbits({ subplebbitAddresses: addresses, sortType: 'active' });
const [selectedFeed, setSelectedFeed] = useState(feed.sort((a, b) => b.timestamp - a.timestamp)); const [selectedFeed, setSelectedFeed] = useState(feed.sort((a, b) => b.timestamp - a.timestamp));
const stateString = useFeedStateString(subplebbits); const stateString = useFeedStateString(subplebbits);
@@ -142,15 +142,14 @@ const AllCatalog = () => {
const tryLoadMore = async () => { const tryLoadMore = async () => {
try {loadMore()} try { loadMore() }
catch (e) catch (e) { await new Promise(resolve => setTimeout(resolve, 1000)) }
{await new Promise(resolve => setTimeout(resolve, 1000))}
}; };
const onChallengeVerification = (challengeVerification) => { const onChallengeVerification = (challengeVerification) => {
if (challengeVerification.challengeSuccess === true) { if (challengeVerification.challengeSuccess === true) {
setNewSuccessMessage('Challenge Success'); setNewSuccessMessage('Challenge Success');
} }
else if (challengeVerification.challengeSuccess === false) { else if (challengeVerification.challengeSuccess === false) {
setNewErrorMessage(`Challenge Failed, reason: ${challengeVerification.reason}. Errors: ${challengeVerification.errors}`); setNewErrorMessage(`Challenge Failed, reason: ${challengeVerification.reason}. Errors: ${challengeVerification.errors}`);
@@ -329,69 +328,69 @@ const AllCatalog = () => {
return ( return (
<> <>
<Helmet> <Helmet>
<title>p/All - Catalog - plebchan</title> <title>p/All - Catalog - plebchan</title>
</Helmet> </Helmet>
<Container> <Container>
<CreateBoardModal <CreateBoardModal
selectedStyle={selectedStyle} selectedStyle={selectedStyle}
isOpen={isCreateBoardOpen} isOpen={isCreateBoardOpen}
closeModal={() => setIsCreateBoardOpen(false)} /> closeModal={() => setIsCreateBoardOpen(false)} />
<SettingsModal <SettingsModal
selectedStyle={selectedStyle} selectedStyle={selectedStyle}
isOpen={isSettingsOpen} isOpen={isSettingsOpen}
closeModal={() => setIsSettingsOpen(false)} /> closeModal={() => setIsSettingsOpen(false)} />
<ModerationModal <ModerationModal
selectedStyle={selectedStyle} selectedStyle={selectedStyle}
isOpen={isModerationOpen} isOpen={isModerationOpen}
closeModal={() => {setIsModerationOpen(false); setDeletePost(false)}} closeModal={() => { setIsModerationOpen(false); setDeletePost(false) }}
deletePost={deletePost} /> deletePost={deletePost} />
<EditModal <EditModal
selectedStyle={selectedStyle} selectedStyle={selectedStyle}
isOpen={isEditModalOpen} isOpen={isEditModalOpen}
closeModal={() => setIsEditModalOpen(false)} closeModal={() => setIsEditModalOpen(false)}
originalCommentContent={originalCommentContent} /> originalCommentContent={originalCommentContent} />
<NavBar selectedStyle={selectedStyle}> <NavBar selectedStyle={selectedStyle}>
<> <>
<span className="boardList"> <span className="boardList">
[ [
<Link to={`/p/all`} onClick={() => window.scrollTo(0, 0)}>All</Link> <Link to={`/p/all`} onClick={() => window.scrollTo(0, 0)}>All</Link>
 /  /
<Link to={`/p/subscriptions`} onClick={() => window.scrollTo(0, 0)}>Subscriptions</Link> <Link to={`/p/subscriptions`} onClick={() => window.scrollTo(0, 0)}>Subscriptions</Link>
]&nbsp;[ ]&nbsp;[
{defaultSubplebbits.map((subplebbit, index) => ( {defaultSubplebbits.map((subplebbit, index) => (
<span className="boardList" key={`span-${subplebbit.address}`}> <span className="boardList" key={`span-${subplebbit.address}`}>
{index === 0 ? null : "\u00a0"} {index === 0 ? null : "\u00a0"}
<Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => { <Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => {
setSelectedTitle(subplebbit.title); setSelectedTitle(subplebbit.title);
setSelectedAddress(subplebbit.address); setSelectedAddress(subplebbit.address);
}} }}
>{subplebbit.title ? subplebbit.title : subplebbit.address}</Link> >{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
{index !== defaultSubplebbits.length - 1 ? " /" : null} {index !== defaultSubplebbits.length - 1 ? " /" : null}
</span> </span>
))} ))}
]
</span>
<span className="nav">
[
<span id="button-span" style={{cursor: 'pointer'}} onClick={
() => {
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</span>
]
[
<Link to={`/p/all/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
]
[
<Link to="/">Home</Link>
] ]
</span> </span>
<span className="nav">
[
<span id="button-span" style={{ cursor: 'pointer' }} onClick={
() => {
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</span>
]
[
<Link to={`/p/all/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
]
[
<Link to="/">Home</Link>
]
</span >
<div id="board-nav-mobile" style={{ top: visible ? 0 : '-23px' }}> <div id="board-nav-mobile" style={{ top: visible ? 0 : '-23px' }}>
<div className="nav-container"> <div className="nav-container">
<div className="board-select"> <div className="board-select">
@@ -401,27 +400,27 @@ const AllCatalog = () => {
<option value="all">All</option> <option value="all">All</option>
<option value="subscriptions">Subscriptions</option> <option value="subscriptions">Subscriptions</option>
{defaultSubplebbits.map(subplebbit => ( {defaultSubplebbits.map(subplebbit => (
<option key={`option-${subplebbit.address}`} value={subplebbit.address} <option key={`option-${subplebbit.address}`} value={subplebbit.address}
>{subplebbit.title ? subplebbit.title : subplebbit.address}</option> >{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
))} ))}
</select>  </select>
<span id="button-span" style={{cursor: 'pointer'}} onClick={ <span id="button-span" style={{ cursor: 'pointer' }} onClick={
() => alert( () => 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' '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</span> }>Create Board</span>
</div> </div>
<div className="page-jump"> <div className="page-jump">
<Link to={`/p/all/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link> <Link to={`/p/all/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
&nbsp; &nbsp;
<Link to="/" onClick={() => {handleStyleChange({target: {value: "Yotsuba"}}); window.scrollTo(0, 0);}}>Home</Link> <Link to="/" onClick={() => { handleStyleChange({ target: { value: "Yotsuba" } }); window.scrollTo(0, 0); }}>Home</Link>
</div> </div>
</div> </div>
</div> </div>
<div id="separator-mobile">&nbsp;</div> <div id="separator-mobile">&nbsp;</div>
<div id="separator-mobile">&nbsp;</div> <div id="separator-mobile">&nbsp;</div>
</> </>
</NavBar> </NavBar >
<Header selectedStyle={selectedStyle}> <Header selectedStyle={selectedStyle}>
<> <>
<div className="banner"> <div className="banner">
@@ -436,7 +435,7 @@ const AllCatalog = () => {
<hr /> <hr />
<span className="style-changer"> <span className="style-changer">
Style: Style:
 
<select id="style-selector" onChange={handleStyleChange} value={selectedStyle}> <select id="style-selector" onChange={handleStyleChange} value={selectedStyle}>
<option value="Yotsuba">Yotsuba</option> <option value="Yotsuba">Yotsuba</option>
<option value="Yotsuba-B">Yotsuba B</option> <option value="Yotsuba-B">Yotsuba B</option>
@@ -451,15 +450,27 @@ const AllCatalog = () => {
<Link to={`/p/all`}>Return</Link> <Link to={`/p/all`}>Return</Link>
] ]
</div> </div>
<span className="return-button catalog-button" id="refresh-button-desktop">
[
<span id="button" style={{ cursor: 'pointer' }} onClick={() => window.location.reload()}
onMouseOver={(event) => event.target.style.cursor = 'pointer'}
onTouchStart={() => window.location.reload()}>Refresh</span>
]
</span>
<div id="return-button-mobile"> <div id="return-button-mobile">
<span className="btn-wrap-catalog btn-wrap"> <span className="btn-wrap-catalog btn-wrap">
<Link to={`/p/all`}>Return</Link> <Link to={`/p/all`}>Return</Link>
</span> </span>
</div> </div>
<div id="refresh-button-mobile">
<span className="btn-wrap-catalog btn-wrap">
<Link to={`/p/all/catalog`}>Refresh</Link>
</span>
</div>
{subplebbits.state === "succeeded" ? ( {subplebbits.state === "succeeded" ? (
null null
) : ( ) : (
<div id="stats" style={{float: "right", marginTop: "5px"}}> <div id="stats" style={{ float: "right", marginTop: "5px" }}>
<span className={stateString ? "ellipsis" : ""}>{stateString}</span> <span className={stateString ? "ellipsis" : ""}>{stateString}</span>
</div> </div>
)} )}
@@ -467,276 +478,280 @@ const AllCatalog = () => {
</TopBar> </TopBar>
<Tooltip id="tooltip" className="tooltip" /> <Tooltip id="tooltip" className="tooltip" />
<Threads selectedStyle={selectedStyle}> <Threads selectedStyle={selectedStyle}>
{feed.length > 1 ? ( {feed ? (
<VirtuosoGrid <InfiniteScroll
style={{width: '100%', height: '100%'}} pageStart={0}
data={feed} loadMore={tryLoadMore}
increaseViewportBy={{bottom: 600, top: 600}} hasMore={hasMore}
itemContent={(index) => { >
const thread = feed[index]; {feed.map((thread, index) => {
const commentMediaInfo = getCommentMediaInfo(thread); const commentMediaInfo = getCommentMediaInfo(thread);
const fallbackImgUrl = "assets/filedeleted-res.gif"; const fallbackImgUrl = "assets/filedeleted-res.gif";
const isModerator = moderatorPermissions[thread.subplebbitAddress]; const isModerator = moderatorPermissions[thread.subplebbitAddress];
const linkCount = countLinks(thread); const linkCount = countLinks(thread);
return ( return (
<div key={`thread-${index}`} className="thread" <div key={`thread-${index}`} className="thread"
onMouseOver={() => {setIsHoveringOnThread(thread.cid)}} onMouseOver={() => { setIsHoveringOnThread(thread.cid) }}
onMouseLeave={() => {setIsHoveringOnThread('')}}> onMouseLeave={() => { setIsHoveringOnThread('') }}>
{commentMediaInfo?.url ? ( {commentMediaInfo?.url ? (
<Link style={{all: "unset", cursor: "pointer"}} key={`link-${index}`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`} <Link style={{ all: "unset", cursor: "pointer" }} key={`link-${index}`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`}
onClick={() => setSelectedThread(thread.cid)}> onClick={() => setSelectedThread(thread.cid)}>
{commentMediaInfo?.type === "webpage" ? ( {commentMediaInfo?.type === "webpage" ? (
thread.thumbnailUrl ? ( thread.thumbnailUrl ? (
<img className="card" key={`img-${index}`} <img className="card" key={`img-${index}`}
src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type} src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
onError={(e) => { onError={(e) => {
e.target.src = fallbackImgUrl e.target.src = fallbackImgUrl
e.target.onerror = null; e.target.onerror = null;
}} /> }} />
) : null ) : null
) : null} ) : null}
{commentMediaInfo?.type === "image" ? ( {commentMediaInfo?.type === "image" ? (
<img className="card" key={`img-${index}`} <img className="card" key={`img-${index}`}
src={commentMediaInfo.url} alt={commentMediaInfo.type} src={commentMediaInfo.url} alt={commentMediaInfo.type}
onError={(e) => { onError={(e) => {
e.target.src = fallbackImgUrl e.target.src = fallbackImgUrl
e.target.onerror = null;}} /> e.target.onerror = null;
) : null} }} />
{commentMediaInfo?.type === "video" ? ( ) : null}
<video className="card" key={`fti-${index}`} {commentMediaInfo?.type === "video" ? (
src={commentMediaInfo.url} <video className="card" key={`fti-${index}`}
alt={commentMediaInfo.type} src={commentMediaInfo.url}
onError={(e) => e.target.src = fallbackImgUrl} /> alt={commentMediaInfo.type}
) : null} onError={(e) => e.target.src = fallbackImgUrl} />
{commentMediaInfo?.type === "audio" ? ( ) : null}
<audio className="card" controls {commentMediaInfo?.type === "audio" ? (
key={`fti-${index}`} <audio className="card" controls
src={commentMediaInfo.url} key={`fti-${index}`}
alt={commentMediaInfo.type} src={commentMediaInfo.url}
onError={(e) => e.target.src = fallbackImgUrl} /> alt={commentMediaInfo.type}
) : null} onError={(e) => e.target.src = fallbackImgUrl} />
</Link> ) : null}
) : null} </Link>
<div key={`ti-${index}`} className="thread-icons" > ) : null}
{(commentMediaInfo && ( <div key={`ti-${index}`} className="thread-icons" >
commentMediaInfo.type === 'image' || {(commentMediaInfo && (
commentMediaInfo.type === 'video' || commentMediaInfo.type === 'image' ||
(commentMediaInfo.type === 'webpage' && commentMediaInfo.type === 'video' ||
commentMediaInfo.thumbnail))) ? ( (commentMediaInfo.type === 'webpage' &&
<OfflineIndicator commentMediaInfo.thumbnail))) ? (
address={thread.subplebbitAddress} <OfflineIndicator
className="thread-icon offline-icon" address={thread.subplebbitAddress}
tooltipPlace="top" /> className="thread-icon offline-icon"
) : ( tooltipPlace="top" />
<OfflineIndicator
address={thread.subplebbitAddress}
className="thread-icon offline-icon-no-link"
tooltipPlace="top" />
)}
</div>
<BoardForm selectedStyle={selectedStyle}
style={{ all: "unset"}}>
<div key={`meta-${index}`} className="meta" title="(R)eplies / (L)ink Replies" >
R:&nbsp;<b key={`b-${index}`}>{thread.replyCount}</b>
{linkCount > 0 ? (
<>
&nbsp;/
L:&nbsp;<b key={`i-${index}`}>{linkCount}</b>
</>
) : null}
<PostMenu
style={{ display: isHoveringOnThread === thread.cid ? 'inline-block' : 'none',
position: 'absolute', lineHeight: '1em', marginTop: '-1px', outline: 'none',
zIndex: '999'}}
key={`pmb-${index}`}
title="Post menu"
ref={el => {
threadMenuRefs.current[thread.cid] = el;
postMenuRef.current = el;
}}
className='post-menu-button'
id='post-menu-button-catalog'
rotated={openMenuCid === thread.cid}
onClick={(event) => {
event.stopPropagation();
const rect = threadMenuRefs.current[thread.cid].getBoundingClientRect();
setMenuPosition({top: rect.top + window.scrollY, left: rect.left});
setOpenMenuCid(prevCid => (prevCid === thread.cid ? null : thread.cid));
}}
>
▶
</PostMenu>
</div>
{createPortal(
<PostMenuCatalog selectedStyle={selectedStyle}
ref={el => {postMenuCatalogRef.current = el}}
onClick={(event) => event.stopPropagation()}
style={{position: "absolute",
top: menuPosition.top + 7,
left: menuPosition.left}}>
<div className={`post-menu-thread post-menu-thread-${thread.cid}`}
style={{ display: openMenuCid === thread.cid ? 'block' : 'none' }}
>
<ul className="post-menu-catalog">
<li onClick={() => handleOptionClick(thread.cid)}>Hide thread</li>
<VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (
<>
{authorAddress === account?.author.address ||
authorAddress === account?.signer.address ? (
<>
<li onClick={() => handleAuthorEditClick(thread)}>Edit post</li>
<li onClick={() => handleAuthorDeleteClick(thread)}>Delete post</li>
</>
) : null}
{isModerator ? (
<>
{authorAddress === account?.author.address ||
authorAddress === account?.signer.address ? (
null
) : (
<li onClick={() => {
setSelectedAddress(thread.subplebbitAddress);
setModeratingCommentCid(thread.cid)
setIsModerationOpen(true);
handleOptionClick(thread.cid);
setDeletePost(true);
}}>
Delete post
</li>
)}
<li
onClick={() => {
setSelectedAddress(thread.subplebbitAddress);
setModeratingCommentCid(thread.cid)
setIsModerationOpen(true);
handleOptionClick(thread.cid);
}}>
Mod tools
</li>
</>
) : null}
</>
)}</VerifiedAuthor>
{(commentMediaInfo && (
commentMediaInfo.type === 'image' ||
(commentMediaInfo.type === 'webpage' &&
commentMediaInfo.thumbnail))) ? (
<li
onMouseOver={() => {setIsImageSearchOpen(true)}}
onMouseLeave={() => {setIsImageSearchOpen(false)}}>
Image search »
<ul className="dropdown-menu post-menu-catalog"
style={{display: isImageSearchOpen ? 'block': 'none'}}>
<li onClick={() => handleOptionClick(thread.cid)}>
<a
href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
target="_blank" rel="noreferrer"
>Google</a>
</li>
<li onClick={() => handleOptionClick(thread.cid)}>
<a
href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
target="_blank" rel="noreferrer"
>Yandex</a>
</li>
<li onClick={() => handleOptionClick(thread.cid)}>
<a
href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
target="_blank" rel="noreferrer"
>SauceNAO</a>
</li>
</ul>
</li>
) : null
}
</ul>
</div>
</PostMenuCatalog>, document.body
)}
</BoardForm>
<Link style={{all: "unset", cursor: "pointer"}} key={`link2-${index}`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`}
onClick={() => setSelectedThread(thread.cid)}>
<div key={`t-${index}`} className="teaser">
<b key={`b2-${index}`}>{thread.title ? `${thread.title}` : null}</b>
{thread.content ? `: ${thread.content}` : null}
</div>
</Link>
</div>
)
}}
endReached={tryLoadMore}
useWindowScroll={true}
components={{List: GridContainer}}
/>
) : (<CatalogLoader />)}
</Threads>
<Footer selectedStyle={selectedStyle}>
<Break id="break" selectedStyle={selectedStyle} style={{
marginTop: "-36px",
width: "100%",
}} />
<Break selectedStyle={selectedStyle} style={{
width: "100%",
}} />
<span className="style-changer" style={{
float: "right",
marginTop: "2px",
}}>
Style:
 
<select id="style-selector" onChange={handleStyleChange} value={selectedStyle}>
<option value="Yotsuba">Yotsuba</option>
<option value="Yotsuba-B">Yotsuba B</option>
<option value="Futaba">Futaba</option>
<option value="Burichan">Burichan</option>
<option value="Tomorrow">Tomorrow</option>
<option value="Photon">Photon</option>
</select>
</span>
<NavBar selectedStyle={selectedStyle} style={{
marginTop: "42px",
}}>
<>
<span className="boardList">
[
<Link to={`/p/all`} onClick={() => window.scrollTo(0, 0)}>All</Link>
 / 
<Link to={`/p/subscriptions`} onClick={() => window.scrollTo(0, 0)}>Subscriptions</Link>
]&nbsp;[
{defaultSubplebbits.map((subplebbit, index) => (
<span className="boardList" key={`span-${subplebbit.address}`}>
{index === 0 ? null : "\u00a0"}
<Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => handleClickTitle(subplebbit.title, subplebbit.address)}
>{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
{index !== defaultSubplebbits.length - 1 ? " /" : null}
</span>
))}
]
</span>
<span className="nav">
[
<span id="button-span" style={{cursor: 'pointer'}} onClick={
() => {
window.electron && window.electron.isElectron ? (
setIsCreateBoardOpen(true)
) : ( ) : (
alert( <OfflineIndicator
'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' address={thread.subplebbitAddress}
) className="thread-icon offline-icon-no-link"
tooltipPlace="top" />
)}
</div>
<BoardForm selectedStyle={selectedStyle}
style={{ all: "unset" }}>
<div key={`meta-${index}`} className="meta" title="(R)eplies / (L)ink Replies" >
R:&nbsp;<b key={`b-${index}`}>{thread.replyCount}</b>
{linkCount > 0 ? (
<>
&nbsp;/
L:&nbsp;<b key={`i-${index}`}>{linkCount}</b>
</>
) : null}
<PostMenu
style={{
display: isHoveringOnThread === thread.cid ? 'inline-block' : 'none',
position: 'absolute', lineHeight: '1em', marginTop: '-1px', outline: 'none',
zIndex: '999'
}}
key={`pmb-${index}`}
title="Post menu"
ref={el => {
threadMenuRefs.current[thread.cid] = el;
postMenuRef.current = el;
}}
className='post-menu-button'
id='post-menu-button-catalog'
rotated={openMenuCid === thread.cid}
onClick={(event) => {
event.stopPropagation();
const rect = threadMenuRefs.current[thread.cid].getBoundingClientRect();
setMenuPosition({ top: rect.top + window.scrollY, left: rect.left });
setOpenMenuCid(prevCid => (prevCid === thread.cid ? null : thread.cid));
}}
>
▶
</PostMenu>
</div>
{createPortal(
<PostMenuCatalog selectedStyle={selectedStyle}
ref={el => { postMenuCatalogRef.current = el }}
onClick={(event) => event.stopPropagation()}
style={{
position: "absolute",
top: menuPosition.top + 7,
left: menuPosition.left
}}>
<div className={`post-menu-thread post-menu-thread-${thread.cid}`}
style={{ display: openMenuCid === thread.cid ? 'block' : 'none' }}
>
<ul className="post-menu-catalog">
<li onClick={() => handleOptionClick(thread.cid)}>Hide thread</li>
<VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (
<>
{authorAddress === account?.author.address ||
authorAddress === account?.signer.address ? (
<>
<li onClick={() => handleAuthorEditClick(thread)}>Edit post</li>
<li onClick={() => handleAuthorDeleteClick(thread)}>Delete post</li>
</>
) : null}
{isModerator ? (
<>
{authorAddress === account?.author.address ||
authorAddress === account?.signer.address ? (
null
) : (
<li onClick={() => {
setSelectedAddress(thread.subplebbitAddress);
setModeratingCommentCid(thread.cid)
setIsModerationOpen(true);
handleOptionClick(thread.cid);
setDeletePost(true);
}}>
Delete post
</li>
)}
<li
onClick={() => {
setSelectedAddress(thread.subplebbitAddress);
setModeratingCommentCid(thread.cid)
setIsModerationOpen(true);
handleOptionClick(thread.cid);
}}>
Mod tools
</li>
</>
) : null}
</>
)}</VerifiedAuthor>
{(commentMediaInfo && (
commentMediaInfo.type === 'image' ||
(commentMediaInfo.type === 'webpage' &&
commentMediaInfo.thumbnail))) ? (
<li
onMouseOver={() => { setIsImageSearchOpen(true) }}
onMouseLeave={() => { setIsImageSearchOpen(false) }}>
Image search »
<ul className="dropdown-menu post-menu-catalog"
style={{ display: isImageSearchOpen ? 'block' : 'none' }}>
<li onClick={() => handleOptionClick(thread.cid)}>
<a
href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
target="_blank" rel="noreferrer"
>Google</a>
</li>
<li onClick={() => handleOptionClick(thread.cid)}>
<a
href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
target="_blank" rel="noreferrer"
>Yandex</a>
</li>
<li onClick={() => handleOptionClick(thread.cid)}>
<a
href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
target="_blank" rel="noreferrer"
>SauceNAO</a>
</li>
</ul>
</li>
) : null
}
</ul>
</div>
</PostMenuCatalog>, document.body
)}
</BoardForm>
<Link style={{ all: "unset", cursor: "pointer" }} key={`link2-${index}`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`}
onClick={() => setSelectedThread(thread.cid)}>
<div key={`t-${index}`} className="teaser">
<b key={`b2-${index}`}>{thread.title ? `${thread.title}` : null}</b>
{thread.content ? `: ${thread.content}` : null}
</div>
</Link>
</div>
) )
} })}
}>Create Board</span> </InfiniteScroll>
] ) : (
<CatalogLoader />
)}
</Threads >
<Footer selectedStyle={selectedStyle}>
<Break id="break" selectedStyle={selectedStyle} style={{
marginTop: "-36px",
width: "100%",
}} />
<Break selectedStyle={selectedStyle} style={{
width: "100%",
}} />
<span className="style-changer" style={{
float: "right",
marginTop: "2px",
}}>
Style:
<select id="style-selector" onChange={handleStyleChange} value={selectedStyle}>
<option value="Yotsuba">Yotsuba</option>
<option value="Yotsuba-B">Yotsuba B</option>
<option value="Futaba">Futaba</option>
<option value="Burichan">Burichan</option>
<option value="Tomorrow">Tomorrow</option>
<option value="Photon">Photon</option>
</select>
</span>
<NavBar selectedStyle={selectedStyle} style={{
marginTop: "42px",
}}>
<>
<span className="boardList">
[
<Link to={`/p/all`} onClick={() => window.scrollTo(0, 0)}>All</Link>
/
<Link to={`/p/subscriptions`} onClick={() => window.scrollTo(0, 0)}>Subscriptions</Link>
]&nbsp;[
{defaultSubplebbits.map((subplebbit, index) => (
<span className="boardList" key={`span-${subplebbit.address}`}>
{index === 0 ? null : "\u00a0"}
<Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => handleClickTitle(subplebbit.title, subplebbit.address)}
>{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
{index !== defaultSubplebbits.length - 1 ? " /" : null}
</span>
))}
]
</span>
<span className="nav">
[ [
<Link to={`/p/all/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link> <span id="button-span" style={{ cursor: 'pointer' }} onClick={
() => {
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</span>
] ]
[ [
<Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}} <Link to={`/p/all/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
)}>Home</Link> ]
] [
</span> <Link to="/" onClick={() => handleStyleChange({ target: { value: "Yotsuba" } }
)}>Home</Link>
]
</span >
</> </>
</NavBar> </NavBar >
<div id="version"> <div id="version">
plebchan v{version}. GPL-2.0 plebchan v{version}. GPL-2.0
</div> </div>
@@ -748,16 +763,16 @@ const AllCatalog = () => {
marginTop: "5px", marginTop: "5px",
marginBottom: "15px", marginBottom: "15px",
}}> }}>
<a style={{textDecoration: 'underline'}} href="https://plebbit.com" target="_blank" rel="noopener noreferrer">About</a> <a style={{ textDecoration: 'underline' }} href="https://plebbit.com" target="_blank" rel="noopener noreferrer">About</a>
&nbsp;•&nbsp; &nbsp;•&nbsp;
<a style={{textDecoration: 'underline'}} href="https://github.com/plebbit/plebchan/releases/latest" target="_blank" rel="noopener noreferrer">App</a> <a style={{ textDecoration: 'underline' }} href="https://github.com/plebbit/plebchan/releases/latest" target="_blank" rel="noopener noreferrer">App</a>
&nbsp;•&nbsp; &nbsp;•&nbsp;
<a style={{textDecoration: 'underline'}} href="https://twitter.com/plebchan_eth" target="_blank" rel="noopener noreferrer">Twitter</a> <a style={{ textDecoration: 'underline' }} href="https://twitter.com/plebchan_eth" target="_blank" rel="noopener noreferrer">Twitter</a>
&nbsp;•&nbsp; &nbsp;•&nbsp;
<a style={{textDecoration: 'underline'}} href="https://t.me/plebbit" target="_blank" rel="noopener noreferrer">Telegram</a> <a style={{ textDecoration: 'underline' }} href="https://t.me/plebbit" target="_blank" rel="noopener noreferrer">Telegram</a>
</div> </div>
</Footer> </Footer >
</Container> </Container >
</> </>
); );
} }
src/components/views/Catalog.jsx
+426 -402
View File
File diff suppressed because it is too large Load Diff
src/components/views/Description.jsx
+174 -155
View File
@@ -1,25 +1,25 @@
import { useSubplebbit } from '@plebbit/plebbit-react-hooks';
import { debounce } from 'lodash';
import React, { useCallback, useEffect, useRef, useState } from 'react'; import React, { useCallback, useEffect, useRef, useState } from 'react';
import { createPortal } from 'react-dom'; import { createPortal } from 'react-dom';
import { Helmet } from 'react-helmet-async'; import { Helmet } from 'react-helmet-async';
import { Link, useNavigate, useParams } from 'react-router-dom'; import { Link, useNavigate, useParams } from 'react-router-dom';
import { Tooltip } from 'react-tooltip'; import { Tooltip } from 'react-tooltip';
import { useSubplebbit } from '@plebbit/plebbit-react-hooks'; import packageJson from '../../../package.json';
import { debounce } from 'lodash'; import useGeneralStore from '../../hooks/stores/useGeneralStore';
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 getDate from '../../utils/getDate';
import handleImageClick from '../../utils/handleImageClick'; import handleImageClick from '../../utils/handleImageClick';
import handleStyleChange from '../../utils/handleStyleChange'; import handleStyleChange from '../../utils/handleStyleChange';
import useGeneralStore from '../../hooks/stores/useGeneralStore'; import ImageBanner from '../ImageBanner';
import packageJson from '../../../package.json' import OfflineIndicator from '../OfflineIndicator';
const {version} = packageJson 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
const Description = () => { const Description = () => {
@@ -41,12 +41,12 @@ const Description = () => {
const [isAdminListOpen, setIsAdminListOpen] = useState(false); const [isAdminListOpen, setIsAdminListOpen] = useState(false);
const [prevScrollPos, setPrevScrollPos] = useState(0); const [prevScrollPos, setPrevScrollPos] = useState(0);
const [visible, setVisible] = useState(true); 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 [openMenuCid, setOpenMenuCid] = useState(null);
const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false); const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);
const { subplebbitAddress } = useParams(); const { subplebbitAddress, threadCid } = useParams();
const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress}); const subplebbit = useSubplebbit({ subplebbitAddress: selectedAddress });
const handleOptionClick = () => { const handleOptionClick = () => {
@@ -127,57 +127,57 @@ const Description = () => {
return ( return (
<> <>
<Helmet> <Helmet>
<title> <title>
{"Board Description - " + (subplebbit.title || subplebbit.address) + " - plebchan"} {"Board Description - " + (subplebbit.title || subplebbit.address) + " - plebchan"}
</title> </title>
</Helmet> </Helmet>
<Container> <Container>
<CreateBoardModal <CreateBoardModal
selectedStyle={selectedStyle} selectedStyle={selectedStyle}
isOpen={isCreateBoardOpen} isOpen={isCreateBoardOpen}
closeModal={() => setIsCreateBoardOpen(false)} /> closeModal={() => setIsCreateBoardOpen(false)} />
<AdminListModal <AdminListModal
selectedStyle={selectedStyle} selectedStyle={selectedStyle}
isOpen={isAdminListOpen} isOpen={isAdminListOpen}
closeModal={() => setIsAdminListOpen(false)} closeModal={() => setIsAdminListOpen(false)}
roles={subplebbit.roles} /> roles={subplebbit.roles} />
<SettingsModal <SettingsModal
selectedStyle={selectedStyle} selectedStyle={selectedStyle}
isOpen={isSettingsOpen} isOpen={isSettingsOpen}
closeModal={() => setIsSettingsOpen(false)} /> closeModal={() => setIsSettingsOpen(false)} />
<NavBar selectedStyle={selectedStyle}> <NavBar selectedStyle={selectedStyle}>
<> <>
<span className="boardList"> <span className="boardList">
[ [
<Link to={`/p/all`} onClick={() => window.scrollTo(0, 0)}>All</Link> <Link to={`/p/all`} onClick={() => window.scrollTo(0, 0)}>All</Link>
 /  /
<Link to={`/p/subscriptions`} onClick={() => window.scrollTo(0, 0)}>Subscriptions</Link> <Link to={`/p/subscriptions`} onClick={() => window.scrollTo(0, 0)}>Subscriptions</Link>
]&nbsp;[ ]&nbsp;[
{defaultSubplebbits.map((subplebbit, index) => ( {defaultSubplebbits.map((subplebbit, index) => (
<span className="boardList" key={`span-${subplebbit.address}`}> <span className="boardList" key={`span-${subplebbit.address}`}>
{index === 0 ? null : "\u00a0"} {index === 0 ? null : "\u00a0"}
<Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => { <Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => {
setSelectedTitle(subplebbit.title); setSelectedTitle(subplebbit.title);
setSelectedAddress(subplebbit.address); setSelectedAddress(subplebbit.address);
}} }}
>{subplebbit.title ? subplebbit.title : subplebbit.address}</Link> >{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
{index !== defaultSubplebbits.length - 1 ? " /" : null} {index !== defaultSubplebbits.length - 1 ? " /" : null}
</span> </span>
))} ))}
] ]
</span> </span>
<span className="nav"> <span className="nav">
[ [
<span id="button-span" style={{cursor: 'pointer'}} onClick={ <span id="button-span" style={{ cursor: 'pointer' }} onClick={
() => { () => {
window.electron && window.electron.isElectron ? ( window.electron && window.electron.isElectron ? (
setIsCreateBoardOpen(true) setIsCreateBoardOpen(true)
) : ( ) : (
alert( 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' '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</span> }>Create Board</span>
] ]
[ [
@@ -196,20 +196,20 @@ const Description = () => {
<option value="all">All</option> <option value="all">All</option>
<option value="subscriptions">Subscriptions</option> <option value="subscriptions">Subscriptions</option>
{defaultSubplebbits.map(subplebbit => ( {defaultSubplebbits.map(subplebbit => (
<option key={`option-${subplebbit.address}`} value={subplebbit.address} <option key={`option-${subplebbit.address}`} value={subplebbit.address}
>{subplebbit.title ? subplebbit.title : subplebbit.address}</option> >{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
))} ))}
</select>  </select>
<span id="button-span" style={{cursor: 'pointer'}} onClick={ <span id="button-span" style={{ cursor: 'pointer' }} onClick={
() => alert( () => 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' '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</span> }>Create Board</span>
</div> </div>
<div className="page-jump"> <div className="page-jump">
<Link to={`/p/${selectedAddress}/c/${selectedThread}/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link> <Link to={`/p/${selectedAddress}/c/${selectedThread}/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
&nbsp; &nbsp;
<Link to="/" onClick={() => {handleStyleChange({target: {value: "Yotsuba"}}); window.scrollTo(0, 0);}}>Home</Link> <Link to="/" onClick={() => { handleStyleChange({ target: { value: "Yotsuba" } }); window.scrollTo(0, 0); }}>Home</Link>
</div> </div>
</div> </div>
</div> </div>
@@ -222,33 +222,43 @@ const Description = () => {
<div className="banner"> <div className="banner">
<ImageBanner /> <ImageBanner />
</div> </div>
<> <>
<div className="board-title">{subplebbit.title ?? null}</div> <div className="board-title">{subplebbit.title ?? null}</div>
<div className="board-address">p/{subplebbit.address} <div className="board-address">p/{subplebbit.address}
<OfflineIndicator <OfflineIndicator
address={subplebbit.address} address={subplebbit.address}
className="offline" className="offline"
tooltipPlace="top" /> tooltipPlace="top" />
</div> </div>
</> </>
</> </>
</Header> </Header>
<Break selectedStyle={selectedStyle} /> <Break selectedStyle={selectedStyle} />
<PostForm selectedStyle={selectedStyle}> <PostForm selectedStyle={selectedStyle}>
<ReplyFormLink id="post-form-link" selectedStyle={selectedStyle} style={{marginBottom: '10px'}}> <ReplyFormLink id="post-form-link" selectedStyle={selectedStyle} style={{ marginBottom: '10px' }}>
<div id="return-button-mobile"> <div id="return-button-mobile">
<span className="btn-wrap" onClick={()=> {window.scrollTo(0, 0)}}> <span className="btn-wrap" onClick={() => { window.scrollTo(0, 0) }}>
<Link to={`/p/${selectedAddress}`}>Return</Link> <Link to={`/p/${selectedAddress}`}>Return</Link>
</span> </span>
</div> </div>
<div id="reload-button-mobile">
<span className="reload-button catalog-button" id="bottom-button-desktop-description">
[
<span id="button" style={{ cursor: 'pointer' }} onClick={() => window.location.reload()}
onMouseOver={(event) => event.target.style.cursor = 'pointer'}
onTouchStart={() => window.location.reload()}>Refresh</span>
]
</span>
</div>
<div id="catalog-button-mobile"> <div id="catalog-button-mobile">
<span className="btn-wrap"> <span className="btn-wrap">
<Link to={`/p/${selectedAddress}/catalog`} onClick={()=> {window.scrollTo(0, 0)}}>Catalog</Link> <Link to={`/p/${selectedAddress}/catalog`} onClick={() => { window.scrollTo(0, 0) }}>Catalog</Link>
</span> </span>
</div> </div>
<div id="bottom-button-mobile"> <div id="bottom-button-mobile">
<span className="btn-wrap"> <span className="btn-wrap">
<span style={{cursor: 'pointer'}} onClick={() => window.scrollTo(0, document.body.scrollHeight)} onMouseOver={(event) => event.target.style.cursor='pointer'}>Bottom</span> <span style={{ cursor: 'pointer' }} onClick={() => window.scrollTo(0, document.body.scrollHeight)} onMouseOver={(event) => event.target.style.cursor = 'pointer'}>Bottom</span>
</span> </span>
</div> </div>
</ReplyFormLink> </ReplyFormLink>
@@ -256,7 +266,7 @@ const Description = () => {
<TopBar selectedStyle={selectedStyle}> <TopBar selectedStyle={selectedStyle}>
<span className="style-changer"> <span className="style-changer">
Style: Style:
 
<select id="style-selector" onChange={handleStyleChange} value={selectedStyle}> <select id="style-selector" onChange={handleStyleChange} value={selectedStyle}>
<option value="Yotsuba">Yotsuba</option> <option value="Yotsuba">Yotsuba</option>
<option value="Yotsuba-B">Yotsuba B</option> <option value="Yotsuba-B">Yotsuba B</option>
@@ -271,6 +281,13 @@ const Description = () => {
<Link to={`/p/${selectedAddress}`}>Return</Link> <Link to={`/p/${selectedAddress}`}>Return</Link>
] ]
</span> </span>
<span className="return-button catalog-button" id="refresh-button-desktop">
[
<span id="button" style={{ cursor: 'pointer' }} onClick={() => window.location.reload()}
onMouseOver={(event) => event.target.style.cursor = 'pointer'}
onTouchStart={() => window.location.reload()}>Refresh</span>
]
</span>
<span className="return-button catalog-button" id="catalog-button-desktop"> <span className="return-button catalog-button" id="catalog-button-desktop">
[ [
<Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link> <Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link>
@@ -278,9 +295,9 @@ const Description = () => {
</span> </span>
<span className="return-button catalog-button" id="bottom-button-desktop"> <span className="return-button catalog-button" id="bottom-button-desktop">
[ [
<span id="button" style={{cursor: 'pointer'}} onClick={() => window.scrollTo(0, document.body.scrollHeight)} <span id="button" style={{ cursor: 'pointer' }} onClick={() => window.scrollTo(0, document.body.scrollHeight)}
onMouseOver={(event) => event.target.style.cursor='pointer'} onMouseOver={(event) => event.target.style.cursor = 'pointer'}
onTouchStart={() => window.scrollTo(0, document.body.scrollHeight)}>Bottom</span> onTouchStart={() => window.scrollTo(0, document.body.scrollHeight)}>Bottom</span>
] ]
</span> </span>
</TopBar> </TopBar>
@@ -289,50 +306,50 @@ const Description = () => {
<> <>
<div className="thread"> <div className="thread">
<div className="op-container" style={{ <div className="op-container" style={{
display: subplebbit.rules ? "grid" : "block", display: subplebbit.rules ? "grid" : "block",
marginBottom: '10px', marginBottom: '10px',
}}> }}>
<div className="post op op-desktop"> <div className="post op op-desktop">
<hr /> <hr />
<div className="post-info"> <div className="post-info">
{subplebbit.suggested?.avatarUrl ? ( {subplebbit.suggested?.avatarUrl ? (
<div className="file" style={{marginBottom: "5px"}}> <div className="file" style={{ marginBottom: "5px" }}>
<div className="file-text"> <div className="file-text">
Link:&nbsp; Link:&nbsp;
<a href={subplebbit.suggested?.avatarUrl} <a href={subplebbit.suggested?.avatarUrl}
target="_blank" rel="noopener noreferrer">{ target="_blank" rel="noopener noreferrer">{
subplebbit.suggested?.avatarUrl.length > 30 ? subplebbit.suggested?.avatarUrl.length > 30 ?
subplebbit.suggested?.avatarUrl.slice(0, 30) + "..." : subplebbit.suggested?.avatarUrl.slice(0, 30) + "..." :
subplebbit.suggested?.avatarUrl subplebbit.suggested?.avatarUrl
} }
</a>&nbsp;(image) </a>&nbsp;(image)
</div> </div>
<div className="img-container"> <div className="img-container">
<span className="file-thumb"> <span className="file-thumb">
<img src={subplebbit.suggested?.avatarUrl} alt="board avatar" <img src={subplebbit.suggested?.avatarUrl} alt="board avatar"
onClick={handleImageClick} onClick={handleImageClick}
style={{cursor: "pointer"}} /> style={{ cursor: "pointer" }} />
</span> </span>
</div> </div>
</div> </div>
) : null} ) : null}
<span className="name-block"> <span className="name-block">
<span className="title">Welcome to {subplebbit.title || subplebbit.address}</span> <span className="title">Welcome to {subplebbit.title || subplebbit.address}</span>
&nbsp; &nbsp;
<span className="name capcode" <span className="name capcode"
style={{cursor: 'pointer'}} style={{ cursor: 'pointer' }}
onClick={() => {setIsAdminListOpen(!isAdminListOpen)}} onClick={() => { setIsAdminListOpen(!isAdminListOpen) }}
>## Board Admins</span> >## Board Admins</span>
&nbsp; &nbsp;
<span className="date-time">{getDate(subplebbit.createdAt)}</span> <span className="date-time">{getDate(subplebbit.createdAt)}</span>
&nbsp; &nbsp;
<img src="assets/sticky.gif" alt="Sticky" title="Sticky" style={{marginBottom: "-1px", imageRendering: 'pixelated'}} /> <img src="assets/sticky.gif" alt="Sticky" title="Sticky" style={{ marginBottom: "-1px", imageRendering: 'pixelated' }} />
&nbsp; &nbsp;
<img src="assets/closed.gif" alt="Closed" title="Closed" style={{marginBottom: "-1px", imageRendering: 'pixelated'}} /> <img src="assets/closed.gif" alt="Closed" title="Closed" style={{ marginBottom: "-1px", imageRendering: 'pixelated' }} />
<span>&nbsp; <span>&nbsp;
[ [
<Link to={() => {}} style={{textDecoration: "none"}} className="reply-link">Reply</Link> <Link to={() => { }} style={{ textDecoration: "none" }} className="reply-link">Reply</Link>
] ]
</span> </span>
<PostMenu <PostMenu
title="Post menu" title="Post menu"
@@ -344,7 +361,7 @@ const Description = () => {
onClick={(event) => { onClick={(event) => {
event.stopPropagation(); event.stopPropagation();
const rect = threadMenuRefs.current[subplebbit.pubsubTopic].getBoundingClientRect(); const rect = threadMenuRefs.current[subplebbit.pubsubTopic].getBoundingClientRect();
setMenuPosition({top: rect.top + window.scrollY, left: rect.left}); setMenuPosition({ top: rect.top + window.scrollY, left: rect.left });
setOpenMenuCid(prevCid => (prevCid === subplebbit.pubsubTopic ? null : subplebbit.pubsubTopic)); setOpenMenuCid(prevCid => (prevCid === subplebbit.pubsubTopic ? null : subplebbit.pubsubTopic));
}} }}
> >
@@ -352,23 +369,25 @@ const Description = () => {
</PostMenu> </PostMenu>
{createPortal( {createPortal(
<PostMenuCatalog selectedStyle={selectedStyle} <PostMenuCatalog selectedStyle={selectedStyle}
ref={el => {postMenuCatalogRef.current = el}} ref={el => { postMenuCatalogRef.current = el }}
onClick={(event) => event.stopPropagation()} onClick={(event) => event.stopPropagation()}
style={{position: "absolute", style={{
top: menuPosition.top + 7, position: "absolute",
left: menuPosition.left}}> top: menuPosition.top + 7,
<div className={`post-menu-thread post-menu-thread-${subplebbit.pubsubTopic}`} left: menuPosition.left
style={{ display: openMenuCid === subplebbit.pubsubTopic ? 'block' : 'none' }} }}>
> <div className={`post-menu-thread post-menu-thread-${subplebbit.pubsubTopic}`}
<ul className="post-menu-catalog"> style={{ display: openMenuCid === subplebbit.pubsubTopic ? 'block' : 'none' }}
<li onClick={() => handleOptionClick(subplebbit.pubsubTopic)}>Hide thread</li> >
{/* {isModerator ? ( <ul className="post-menu-catalog">
<li onClick={() => handleOptionClick(subplebbit.pubsubTopic)}>Hide thread</li>
{/* {isModerator ? (
<> <>
change description change description
</> </>
) : null} */} ) : null} */}
</ul> </ul>
</div> </div>
</PostMenuCatalog>, document.body </PostMenuCatalog>, document.body
)} )}
</span> </span>
@@ -387,22 +406,22 @@ const Description = () => {
<div className="post op op-mobile"> <div className="post op op-mobile">
<div className="post-info-mobile"> <div className="post-info-mobile">
<button className="post-menu-button-mobile" <button className="post-menu-button-mobile"
style={{ all: 'unset', cursor: 'pointer' }}>...</button> style={{ all: 'unset', cursor: 'pointer' }}>...</button>
<span className="name-block-mobile"> <span className="name-block-mobile">
<span className="name-mobile capcode" <span className="name-mobile capcode"
style={{cursor: 'pointer'}} style={{ cursor: 'pointer' }}
onClick={() => {setIsAdminListOpen(!isAdminListOpen)}} onClick={() => { setIsAdminListOpen(!isAdminListOpen) }}
>## Board Admins</span> >## Board Admins</span>
&nbsp; &nbsp;
<span className="thread-icons-mobile" <span className="thread-icons-mobile"
style={{float: "right", marginRight: "18px"}}> style={{ float: "right", marginRight: "18px" }}>
<img src="assets/sticky.gif" alt="Sticky" title="Sticky" style={{marginTop: "-1px", marginRight: "2px", imageRendering: 'pixelated'}} /> <img src="assets/sticky.gif" alt="Sticky" title="Sticky" style={{ marginTop: "-1px", marginRight: "2px", imageRendering: 'pixelated' }} />
&nbsp; &nbsp;
<img src="assets/closed.gif" alt="Closed" title="Closed" style={{marginTop: "-1px", marginRight: "2px", imageRendering: 'pixelated'}} /> <img src="assets/closed.gif" alt="Closed" title="Closed" style={{ marginTop: "-1px", marginRight: "2px", imageRendering: 'pixelated' }} />
</span> </span>
<br /> <br />
<span className="subject-mobile" <span className="subject-mobile"
style={{marginBottom: "-15px"}}>Welcome to {subplebbit.title || subplebbit.address}</span> style={{ marginBottom: "-15px" }}>Welcome to {subplebbit.title || subplebbit.address}</span>
&nbsp; &nbsp;
</span> </span>
<span className="date-time-mobile post-number-mobile">{getDate(subplebbit.createdAt)}</span> <span className="date-time-mobile post-number-mobile">{getDate(subplebbit.createdAt)}</span>
@@ -413,8 +432,8 @@ const Description = () => {
<div className="img-container"> <div className="img-container">
<span className="file-thumb-mobile"> <span className="file-thumb-mobile">
<img src={subplebbit.suggested.avatarUrl} alt="board avatar" <img src={subplebbit.suggested.avatarUrl} alt="board avatar"
onClick={handleImageClick} onClick={handleImageClick}
style={{cursor: "pointer"}} /> style={{ cursor: "pointer" }} />
<div className="file-info-mobile">image</div> <div className="file-info-mobile">image</div>
</span> </span>
</div> </div>
@@ -427,7 +446,7 @@ const Description = () => {
</blockquote> </blockquote>
</div> </div>
<div className="post-link-mobile"> <div className="post-link-mobile">
<Link to={() => {}} className="button-mobile">View Thread</Link> <Link to={() => { }} className="button-mobile">View Thread</Link>
</div> </div>
</div> </div>
</div> </div>
@@ -446,7 +465,7 @@ const Description = () => {
marginTop: "2px", marginTop: "2px",
}}> }}>
Style: Style:
 
<select id="style-selector" onChange={handleStyleChange} value={selectedStyle}> <select id="style-selector" onChange={handleStyleChange} value={selectedStyle}>
<option value="Yotsuba">Yotsuba</option> <option value="Yotsuba">Yotsuba</option>
<option value="Yotsuba-B">Yotsuba B</option> <option value="Yotsuba-B">Yotsuba B</option>
@@ -460,43 +479,43 @@ const Description = () => {
marginTop: "42px", marginTop: "42px",
}}> }}>
<> <>
<span className="boardList"> <span className="boardList">
[ [
<Link to={`/p/all`} onClick={() => window.scrollTo(0, 0)}>All</Link> <Link to={`/p/all`} onClick={() => window.scrollTo(0, 0)}>All</Link>
 /  /
<Link to={`/p/subscriptions`} onClick={() => window.scrollTo(0, 0)}>Subscriptions</Link> <Link to={`/p/subscriptions`} onClick={() => window.scrollTo(0, 0)}>Subscriptions</Link>
]&nbsp; ]&nbsp;
</span>
{defaultSubplebbits.map((subplebbit, index) => (
<span className="boardList" key={`span-${subplebbit.address}`}>
{index === 0 ? null : "\u00a0"}
<Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => {
setSelectedTitle(subplebbit.title);
setSelectedAddress(subplebbit.address);
}}
>{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
{index !== defaultSubplebbits.length - 1 ? " /" : null}
</span> </span>
))} {defaultSubplebbits.map((subplebbit, index) => (
<span className="nav"> <span className="boardList" key={`span-${subplebbit.address}`}>
[ {index === 0 ? null : "\u00a0"}
<span id="button-span" style={{cursor: 'pointer'}} onClick={ <Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => {
() => { setSelectedTitle(subplebbit.title);
window.electron && window.electron.isElectron ? ( setSelectedAddress(subplebbit.address);
setIsCreateBoardOpen(true) }}
) : ( >{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
alert( {index !== defaultSubplebbits.length - 1 ? " /" : null}
'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' </span>
) ))}
) <span className="nav">
} [
}>Create Board</span> <span id="button-span" style={{ cursor: 'pointer' }} onClick={
] () => {
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</span>
]
[ [
<Link to={`/p/${selectedAddress}/c/${selectedThread}/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link> <Link to={`/p/${selectedAddress}/c/${selectedThread}/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
] ]
[ [
<Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}} <Link to="/" onClick={() => handleStyleChange({ target: { value: "Yotsuba" } }
)}>Home</Link> )}>Home</Link>
] ]
</span> </span>
@@ -513,13 +532,13 @@ const Description = () => {
marginTop: "5px", marginTop: "5px",
marginBottom: "15px", marginBottom: "15px",
}}> }}>
<a style={{textDecoration: 'underline'}} href="https://plebbit.com" target="_blank" rel="noopener noreferrer">About</a> <a style={{ textDecoration: 'underline' }} href="https://plebbit.com" target="_blank" rel="noopener noreferrer">About</a>
&nbsp;•&nbsp; &nbsp;•&nbsp;
<a style={{textDecoration: 'underline'}} href="https://github.com/plebbit/plebchan/releases/latest" target="_blank" rel="noopener noreferrer">App</a> <a style={{ textDecoration: 'underline' }} href="https://github.com/plebbit/plebchan/releases/latest" target="_blank" rel="noopener noreferrer">App</a>
&nbsp;•&nbsp; &nbsp;•&nbsp;
<a style={{textDecoration: 'underline'}} href="https://twitter.com/plebchan_eth" target="_blank" rel="noopener noreferrer">Twitter</a> <a style={{ textDecoration: 'underline' }} href="https://twitter.com/plebchan_eth" target="_blank" rel="noopener noreferrer">Twitter</a>
&nbsp;•&nbsp; &nbsp;•&nbsp;
<a style={{textDecoration: 'underline'}} href="https://t.me/plebbit" target="_blank" rel="noopener noreferrer">Telegram</a> <a style={{ textDecoration: 'underline' }} href="https://t.me/plebbit" target="_blank" rel="noopener noreferrer">Telegram</a>
</div> </div>
</Footer> </Footer>
</Container> </Container>
src/components/views/SubscriptionsCatalog.jsx
+234 -219
View File
@@ -1,32 +1,32 @@
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { createPortal } from 'react-dom';
import { Helmet } from 'react-helmet-async';
import { Link, useNavigate} from 'react-router-dom';
import { confirmAlert } from 'react-confirm-alert';
import { Tooltip } from 'react-tooltip';
import { VirtuosoGrid } from 'react-virtuoso';
import { useAccount, useFeed, usePublishCommentEdit, useSubplebbits } from '@plebbit/plebbit-react-hooks'; import { useAccount, useFeed, usePublishCommentEdit, useSubplebbits } from '@plebbit/plebbit-react-hooks';
import { debounce } from 'lodash'; 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 { Tooltip } from 'react-tooltip';
import packageJson from '../../../package.json';
import useGeneralStore from '../../hooks/stores/useGeneralStore'; import useGeneralStore from '../../hooks/stores/useGeneralStore';
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 useError from '../../hooks/useError'; import useError from '../../hooks/useError';
import useFeedStateString from '../../hooks/useFeedStateString'; import useFeedStateString from '../../hooks/useFeedStateString';
import useSuccess from '../../hooks/useSuccess'; import useSuccess from '../../hooks/useSuccess';
import packageJson from '../../../package.json' import countLinks from '../../utils/countLinks';
const {version} = packageJson 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
const SubscriptionsCatalog = () => { const SubscriptionsCatalog = () => {
@@ -67,14 +67,14 @@ const SubscriptionsCatalog = () => {
const [deletePost, setDeletePost] = useState(false); const [deletePost, setDeletePost] = useState(false);
const [isImageSearchOpen, setIsImageSearchOpen] = useState(false); const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
const [commentCid, setCommentCid] = useState(null); 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 [openMenuCid, setOpenMenuCid] = useState(null);
const [moderatorPermissions, setModeratorPermissions] = useState({}); const [moderatorPermissions, setModeratorPermissions] = useState({});
const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false); const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);
const { feed, loadMore } = useFeed({subplebbitAddresses: account?.subscriptions, sortType: 'active'}); const { feed, hasMore, loadMore } = useFeed({ subplebbitAddresses: account?.subscriptions, sortType: 'active' });
const [selectedFeed, setSelectedFeed] = useState(feed.sort((a, b) => b.timestamp - a.timestamp)); 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); const stateString = useFeedStateString(subplebbits);
@@ -139,15 +139,14 @@ const SubscriptionsCatalog = () => {
const tryLoadMore = async () => { const tryLoadMore = async () => {
try {loadMore()} try { loadMore() }
catch (e) catch (e) { await new Promise(resolve => setTimeout(resolve, 1000)) }
{await new Promise(resolve => setTimeout(resolve, 1000))}
}; };
const onChallengeVerification = (challengeVerification) => { const onChallengeVerification = (challengeVerification) => {
if (challengeVerification.challengeSuccess === true) { if (challengeVerification.challengeSuccess === true) {
setNewSuccessMessage('Challenge Success'); setNewSuccessMessage('Challenge Success');
} }
else if (challengeVerification.challengeSuccess === false) { else if (challengeVerification.challengeSuccess === false) {
setNewErrorMessage(`Challenge Failed, reason: ${challengeVerification.reason}. Errors: ${challengeVerification.errors}`); setNewErrorMessage(`Challenge Failed, reason: ${challengeVerification.reason}. Errors: ${challengeVerification.errors}`);
@@ -325,60 +324,60 @@ const SubscriptionsCatalog = () => {
return ( return (
<> <>
<Helmet> <Helmet>
<title>Subscriptions - Catalog - plebchan</title> <title>Subscriptions - Catalog - plebchan</title>
</Helmet> </Helmet>
<Container> <Container>
<CreateBoardModal <CreateBoardModal
selectedStyle={selectedStyle} selectedStyle={selectedStyle}
isOpen={isCreateBoardOpen} isOpen={isCreateBoardOpen}
closeModal={() => setIsCreateBoardOpen(false)} /> closeModal={() => setIsCreateBoardOpen(false)} />
<SettingsModal <SettingsModal
selectedStyle={selectedStyle} selectedStyle={selectedStyle}
isOpen={isSettingsOpen} isOpen={isSettingsOpen}
closeModal={() => setIsSettingsOpen(false)} /> closeModal={() => setIsSettingsOpen(false)} />
<ModerationModal <ModerationModal
selectedStyle={selectedStyle} selectedStyle={selectedStyle}
isOpen={isModerationOpen} isOpen={isModerationOpen}
closeModal={() => {setIsModerationOpen(false); setDeletePost(false)}} closeModal={() => { setIsModerationOpen(false); setDeletePost(false) }}
deletePost={deletePost} /> deletePost={deletePost} />
<EditModal <EditModal
selectedStyle={selectedStyle} selectedStyle={selectedStyle}
isOpen={isEditModalOpen} isOpen={isEditModalOpen}
closeModal={() => setIsEditModalOpen(false)} closeModal={() => setIsEditModalOpen(false)}
originalCommentContent={originalCommentContent} /> originalCommentContent={originalCommentContent} />
<NavBar selectedStyle={selectedStyle}> <NavBar selectedStyle={selectedStyle}>
<> <>
<span className="boardList"> <span className="boardList">
[ [
<Link to={`/p/all`} onClick={() => window.scrollTo(0, 0)}>All</Link> <Link to={`/p/all`} onClick={() => window.scrollTo(0, 0)}>All</Link>
 /  /
<Link to={`/p/subscriptions`} onClick={() => window.scrollTo(0, 0)}>Subscriptions</Link> <Link to={`/p/subscriptions`} onClick={() => window.scrollTo(0, 0)}>Subscriptions</Link>
]&nbsp;[ ]&nbsp;[
{defaultSubplebbits.map((subplebbit, index) => ( {defaultSubplebbits.map((subplebbit, index) => (
<span className="boardList" key={`span-${subplebbit.address}`}> <span className="boardList" key={`span-${subplebbit.address}`}>
{index === 0 ? null : "\u00a0"} {index === 0 ? null : "\u00a0"}
<Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => { <Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => {
setSelectedTitle(subplebbit.title); setSelectedTitle(subplebbit.title);
setSelectedAddress(subplebbit.address); setSelectedAddress(subplebbit.address);
}} }}
>{subplebbit.title ? subplebbit.title : subplebbit.address}</Link> >{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
{index !== defaultSubplebbits.length - 1 ? " /" : null} {index !== defaultSubplebbits.length - 1 ? " /" : null}
</span> </span>
))} ))}
] ]
</span> </span>
<span className="nav"> <span className="nav">
[ [
<span id="button-span" style={{cursor: 'pointer'}} onClick={ <span id="button-span" style={{ cursor: 'pointer' }} onClick={
() => { () => {
window.electron && window.electron.isElectron ? ( window.electron && window.electron.isElectron ? (
setIsCreateBoardOpen(true) setIsCreateBoardOpen(true)
) : ( ) : (
alert( 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' '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</span> }>Create Board</span>
] ]
[ [
@@ -397,20 +396,20 @@ const SubscriptionsCatalog = () => {
<option value="all">All</option> <option value="all">All</option>
<option value="subscriptions">Subscriptions</option> <option value="subscriptions">Subscriptions</option>
{defaultSubplebbits.map(subplebbit => ( {defaultSubplebbits.map(subplebbit => (
<option key={`option-${subplebbit.address}`} value={subplebbit.address} <option key={`option-${subplebbit.address}`} value={subplebbit.address}
>{subplebbit.title ? subplebbit.title : subplebbit.address}</option> >{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
))} ))}
</select>  </select>
<span id="button-span" style={{cursor: 'pointer'}} onClick={ <span id="button-span" style={{ cursor: 'pointer' }} onClick={
() => alert( () => 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' '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</span> }>Create Board</span>
</div> </div>
<div className="page-jump"> <div className="page-jump">
<Link to={`/p/subscriptions/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link> <Link to={`/p/subscriptions/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
&nbsp; &nbsp;
<Link to="/" onClick={() => {handleStyleChange({target: {value: "Yotsuba"}}); window.scrollTo(0, 0);}}>Home</Link> <Link to="/" onClick={() => { handleStyleChange({ target: { value: "Yotsuba" } }); window.scrollTo(0, 0); }}>Home</Link>
</div> </div>
</div> </div>
</div> </div>
@@ -423,7 +422,7 @@ const SubscriptionsCatalog = () => {
<div className="banner"> <div className="banner">
<ImageBanner /> <ImageBanner />
</div> </div>
<> <>
<div className="board-title">Subscriptions</div> <div className="board-title">Subscriptions</div>
{account?.subscriptions.length < 1 ? ( {account?.subscriptions.length < 1 ? (
<div className="board-address">You haven't subscribed to any board yet.</div> <div className="board-address">You haven't subscribed to any board yet.</div>
@@ -432,7 +431,7 @@ const SubscriptionsCatalog = () => {
You have subscribed to {account?.subscriptions.length} board{account?.subscriptions.length > 1 ? "s" : null}. You have subscribed to {account?.subscriptions.length} board{account?.subscriptions.length > 1 ? "s" : null}.
</div> </div>
)} )}
</> </>
</> </>
</Header> </Header>
<Break selectedStyle={selectedStyle} /> <Break selectedStyle={selectedStyle} />
@@ -440,7 +439,7 @@ const SubscriptionsCatalog = () => {
<hr /> <hr />
<span className="style-changer"> <span className="style-changer">
Style: Style:
 
<select id="style-selector" onChange={handleStyleChange} value={selectedStyle}> <select id="style-selector" onChange={handleStyleChange} value={selectedStyle}>
<option value="Yotsuba">Yotsuba</option> <option value="Yotsuba">Yotsuba</option>
<option value="Yotsuba-B">Yotsuba B</option> <option value="Yotsuba-B">Yotsuba B</option>
@@ -455,15 +454,27 @@ const SubscriptionsCatalog = () => {
<Link to={`/p/subscriptions`}>Return</Link> <Link to={`/p/subscriptions`}>Return</Link>
] ]
</div> </div>
<span className="return-button catalog-button" id="refresh-button-desktop">
[
<span id="button" style={{ cursor: 'pointer' }} onClick={() => window.location.reload()}
onMouseOver={(event) => event.target.style.cursor = 'pointer'}
onTouchStart={() => window.location.reload()}>Refresh</span>
]
</span>
<div id="return-button-mobile"> <div id="return-button-mobile">
<span className="btn-wrap-catalog btn-wrap"> <span className="btn-wrap-catalog btn-wrap">
<Link to={`/p/subscriptions`}>Return</Link> <Link to={`/p/subscriptions`}>Return</Link>
</span> </span>
</div> </div>
<div id="refresh-button-mobile">
<span className="btn-wrap-catalog btn-wrap">
<Link to={`/p/subscriptions/catalog`}>Refresh</Link>
</span>
</div>
{subplebbits.state === "succeeded" ? ( {subplebbits.state === "succeeded" ? (
null null
) : ( ) : (
<div id="stats" style={{float: "right", marginTop: "5px"}}> <div id="stats" style={{ float: "right", marginTop: "5px" }}>
<span className={stateString ? "ellipsis" : ""}>{stateString}</span> <span className={stateString ? "ellipsis" : ""}>{stateString}</span>
</div> </div>
)} )}
@@ -471,49 +482,50 @@ const SubscriptionsCatalog = () => {
</TopBar> </TopBar>
<Tooltip id="tooltip" className="tooltip" /> <Tooltip id="tooltip" className="tooltip" />
<Threads selectedStyle={selectedStyle}> <Threads selectedStyle={selectedStyle}>
{feed.length > 1 ? ( {feed ? (
<VirtuosoGrid <InfiniteScroll
style={{width: '100%', height: '100%'}} pageStart={0}
data={feed} loadMore={tryLoadMore}
increaseViewportBy={{bottom: 600, top: 600}} hasMore={hasMore}
itemContent={(index) => { >
const thread = feed[index]; {feed.map((thread, index) => {
const commentMediaInfo = getCommentMediaInfo(thread); const commentMediaInfo = getCommentMediaInfo(thread);
const fallbackImgUrl = "assets/filedeleted-res.gif"; const fallbackImgUrl = "assets/filedeleted-res.gif";
const isModerator = moderatorPermissions[thread.subplebbitAddress]; const isModerator = moderatorPermissions[thread.subplebbitAddress];
const linkCount = countLinks(thread); const linkCount = countLinks(thread);
return ( return (
<div key={`thread-${index}`} className="thread" <div key={`thread-${index}`} className="thread"
onMouseOver={() => {setIsHoveringOnThread(thread.cid)}} onMouseOver={() => { setIsHoveringOnThread(thread.cid) }}
onMouseLeave={() => {setIsHoveringOnThread('')}}> onMouseLeave={() => { setIsHoveringOnThread('') }}>
{commentMediaInfo?.url ? ( {commentMediaInfo?.url ? (
<Link style={{all: "unset", cursor: "pointer"}} key={`link-${index}`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`} <Link style={{ all: "unset", cursor: "pointer" }} key={`link-${index}`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`}
onClick={() => setSelectedThread(thread.cid)}> onClick={() => setSelectedThread(thread.cid)}>
{commentMediaInfo?.type === "webpage" ? ( {commentMediaInfo?.type === "webpage" ? (
thread.thumbnailUrl ? ( thread.thumbnailUrl ? (
<img className="card" key={`img-${index}`} <img className="card" key={`img-${index}`}
src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type} src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
onError={(e) => { onError={(e) => {
e.target.src = fallbackImgUrl e.target.src = fallbackImgUrl
e.target.onerror = null; e.target.onerror = null;
}} /> }} />
) : null ) : null
) : null} ) : null}
{commentMediaInfo?.type === "image" ? ( {commentMediaInfo?.type === "image" ? (
<img className="card" key={`img-${index}`} <img className="card" key={`img-${index}`}
src={commentMediaInfo.url} alt={commentMediaInfo.type} src={commentMediaInfo.url} alt={commentMediaInfo.type}
onError={(e) => { onError={(e) => {
e.target.src = fallbackImgUrl e.target.src = fallbackImgUrl
e.target.onerror = null;}} /> e.target.onerror = null;
}} />
) : null} ) : null}
{commentMediaInfo?.type === "video" ? ( {commentMediaInfo?.type === "video" ? (
<video className="card" key={`fti-${index}`} <video className="card" key={`fti-${index}`}
src={commentMediaInfo.url} src={commentMediaInfo.url}
alt={commentMediaInfo.type} alt={commentMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
) : null} ) : null}
{commentMediaInfo?.type === "audio" ? ( {commentMediaInfo?.type === "audio" ? (
<audio className="card" controls <audio className="card" controls
key={`fti-${index}`} key={`fti-${index}`}
src={commentMediaInfo.url} src={commentMediaInfo.url}
alt={commentMediaInfo.type} alt={commentMediaInfo.type}
@@ -522,24 +534,24 @@ const SubscriptionsCatalog = () => {
</Link> </Link>
) : null} ) : null}
<div key={`ti-${index}`} className="thread-icons" > <div key={`ti-${index}`} className="thread-icons" >
{(commentMediaInfo && ( {(commentMediaInfo && (
commentMediaInfo.type === 'image' || commentMediaInfo.type === 'image' ||
commentMediaInfo.type === 'video' || commentMediaInfo.type === 'video' ||
(commentMediaInfo.type === 'webpage' && (commentMediaInfo.type === 'webpage' &&
commentMediaInfo.thumbnail))) ? ( commentMediaInfo.thumbnail))) ? (
<OfflineIndicator <OfflineIndicator
address={thread.subplebbitAddress} address={thread.subplebbitAddress}
className="thread-icon offline-icon" className="thread-icon offline-icon"
tooltipPlace="top" /> tooltipPlace="top" />
) : ( ) : (
<OfflineIndicator <OfflineIndicator
address={thread.subplebbitAddress} address={thread.subplebbitAddress}
className="thread-icon offline-icon-no-link" className="thread-icon offline-icon-no-link"
tooltipPlace="top" /> tooltipPlace="top" />
)} )}
</div> </div>
<BoardForm selectedStyle={selectedStyle} <BoardForm selectedStyle={selectedStyle}
style={{ all: "unset"}}> style={{ all: "unset" }}>
<div key={`meta-${index}`} className="meta" title="(R)eplies / (L)ink Replies" > <div key={`meta-${index}`} className="meta" title="(R)eplies / (L)ink Replies" >
R:&nbsp;<b key={`b-${index}`}>{thread.replyCount}</b> R:&nbsp;<b key={`b-${index}`}>{thread.replyCount}</b>
{linkCount > 0 ? ( {linkCount > 0 ? (
@@ -548,45 +560,49 @@ const SubscriptionsCatalog = () => {
L:&nbsp;<b key={`i-${index}`}>{linkCount}</b> L:&nbsp;<b key={`i-${index}`}>{linkCount}</b>
</> </>
) : null} ) : null}
<PostMenu <PostMenu
style={{ display: isHoveringOnThread === thread.cid ? 'inline-block' : 'none', style={{
position: 'absolute', lineHeight: '1em', marginTop: '-1px', outline: 'none', display: isHoveringOnThread === thread.cid ? 'inline-block' : 'none',
zIndex: '999'}} position: 'absolute', lineHeight: '1em', marginTop: '-1px', outline: 'none',
key={`pmb-${index}`} zIndex: '999'
title="Post menu" }}
ref={el => { key={`pmb-${index}`}
threadMenuRefs.current[thread.cid] = el; title="Post menu"
postMenuRef.current = el; ref={el => {
}} threadMenuRefs.current[thread.cid] = el;
className='post-menu-button' postMenuRef.current = el;
id='post-menu-button-catalog' }}
rotated={openMenuCid === thread.cid} className='post-menu-button'
onClick={(event) => { id='post-menu-button-catalog'
event.stopPropagation(); rotated={openMenuCid === thread.cid}
const rect = threadMenuRefs.current[thread.cid].getBoundingClientRect(); onClick={(event) => {
setMenuPosition({top: rect.top + window.scrollY, left: rect.left}); event.stopPropagation();
setOpenMenuCid(prevCid => (prevCid === thread.cid ? null : thread.cid)); const rect = threadMenuRefs.current[thread.cid].getBoundingClientRect();
}} setMenuPosition({ top: rect.top + window.scrollY, left: rect.left });
> setOpenMenuCid(prevCid => (prevCid === thread.cid ? null : thread.cid));
▶ }}
</PostMenu> >
▶
</PostMenu>
</div> </div>
{createPortal( {createPortal(
<PostMenuCatalog selectedStyle={selectedStyle} <PostMenuCatalog selectedStyle={selectedStyle}
ref={el => {postMenuCatalogRef.current = el}} ref={el => { postMenuCatalogRef.current = el }}
onClick={(event) => event.stopPropagation()} onClick={(event) => event.stopPropagation()}
style={{position: "absolute", style={{
top: menuPosition.top + 7, position: "absolute",
left: menuPosition.left}}> top: menuPosition.top + 7,
left: menuPosition.left
}}>
<div className={`post-menu-thread post-menu-thread-${thread.cid}`} <div className={`post-menu-thread post-menu-thread-${thread.cid}`}
style={{ display: openMenuCid === thread.cid ? 'block' : 'none' }} style={{ display: openMenuCid === thread.cid ? 'block' : 'none' }}
> >
<ul className="post-menu-catalog"> <ul className="post-menu-catalog">
<li onClick={() => handleOptionClick(thread.cid)}>Hide thread</li> <li onClick={() => handleOptionClick(thread.cid)}>Hide thread</li>
<VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => ( <VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (
<> <>
{authorAddress === account?.author.address || {authorAddress === account?.author.address ||
authorAddress === account?.signer.address ? ( authorAddress === account?.signer.address ? (
<> <>
<li onClick={() => handleAuthorEditClick(thread)}>Edit post</li> <li onClick={() => handleAuthorEditClick(thread)}>Edit post</li>
<li onClick={() => handleAuthorDeleteClick(thread)}>Delete post</li> <li onClick={() => handleAuthorDeleteClick(thread)}>Delete post</li>
@@ -595,7 +611,7 @@ const SubscriptionsCatalog = () => {
{isModerator ? ( {isModerator ? (
<> <>
{authorAddress === account?.author.address || {authorAddress === account?.author.address ||
authorAddress === account?.signer.address ? ( authorAddress === account?.signer.address ? (
null null
) : ( ) : (
<li onClick={() => { <li onClick={() => {
@@ -605,16 +621,16 @@ const SubscriptionsCatalog = () => {
handleOptionClick(thread.cid); handleOptionClick(thread.cid);
setDeletePost(true); setDeletePost(true);
}}> }}>
Delete post Delete post
</li> </li>
)} )}
<li <li
onClick={() => { onClick={() => {
setSelectedAddress(thread.subplebbitAddress); setSelectedAddress(thread.subplebbitAddress);
setModeratingCommentCid(thread.cid) setModeratingCommentCid(thread.cid)
setIsModerationOpen(true); setIsModerationOpen(true);
handleOptionClick(thread.cid); handleOptionClick(thread.cid);
}}> }}>
Mod tools Mod tools
</li> </li>
</> </>
@@ -624,55 +640,54 @@ const SubscriptionsCatalog = () => {
{(commentMediaInfo && ( {(commentMediaInfo && (
commentMediaInfo.type === 'image' || commentMediaInfo.type === 'image' ||
(commentMediaInfo.type === 'webpage' && (commentMediaInfo.type === 'webpage' &&
commentMediaInfo.thumbnail))) ? ( commentMediaInfo.thumbnail))) ? (
<li <li
onMouseOver={() => {setIsImageSearchOpen(true)}} onMouseOver={() => { setIsImageSearchOpen(true) }}
onMouseLeave={() => {setIsImageSearchOpen(false)}}> onMouseLeave={() => { setIsImageSearchOpen(false) }}>
Image search » Image search »
<ul className="dropdown-menu post-menu-catalog" <ul className="dropdown-menu post-menu-catalog"
style={{display: isImageSearchOpen ? 'block': 'none'}}> style={{ display: isImageSearchOpen ? 'block' : 'none' }}>
<li onClick={() => handleOptionClick(thread.cid)}> <li onClick={() => handleOptionClick(thread.cid)}>
<a <a
href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`} href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
target="_blank" rel="noreferrer" target="_blank" rel="noreferrer"
>Google</a> >Google</a>
</li> </li>
<li onClick={() => handleOptionClick(thread.cid)}> <li onClick={() => handleOptionClick(thread.cid)}>
<a <a
href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`} href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
target="_blank" rel="noreferrer" target="_blank" rel="noreferrer"
>Yandex</a> >Yandex</a>
</li> </li>
<li onClick={() => handleOptionClick(thread.cid)}> <li onClick={() => handleOptionClick(thread.cid)}>
<a <a
href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`} href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
target="_blank" rel="noreferrer" target="_blank" rel="noreferrer"
>SauceNAO</a> >SauceNAO</a>
</li> </li>
</ul> </ul>
</li> </li>
) : null ) : null
} }
</ul> </ul>
</div> </div>
</PostMenuCatalog>, document.body </PostMenuCatalog>, document.body
)} )}
</BoardForm> </BoardForm>
<Link style={{all: "unset", cursor: "pointer"}} key={`link2-${index}`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`} <Link style={{ all: "unset", cursor: "pointer" }} key={`link2-${index}`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`}
onClick={() => setSelectedThread(thread.cid)}> onClick={() => setSelectedThread(thread.cid)}>
<div key={`t-${index}`} className="teaser"> <div key={`t-${index}`} className="teaser">
<b key={`b2-${index}`}>{thread.title ? `${thread.title}` : null}</b> <b key={`b2-${index}`}>{thread.title ? `${thread.title}` : null}</b>
{thread.content ? `: ${thread.content}` : null} {thread.content ? `: ${thread.content}` : null}
</div> </div>
</Link> </Link>
</div> </div>
) )
}} })}
endReached={tryLoadMore} </InfiniteScroll>
useWindowScroll={true} ) : (
components={{List: GridContainer}} <CatalogLoader />
/> )}
) : (<CatalogLoader />)}
</Threads> </Threads>
<Footer selectedStyle={selectedStyle}> <Footer selectedStyle={selectedStyle}>
<Break id="break" selectedStyle={selectedStyle} style={{ <Break id="break" selectedStyle={selectedStyle} style={{
@@ -687,7 +702,7 @@ const SubscriptionsCatalog = () => {
marginTop: "2px", marginTop: "2px",
}}> }}>
Style: Style:
 
<select id="style-selector" onChange={handleStyleChange} value={selectedStyle}> <select id="style-selector" onChange={handleStyleChange} value={selectedStyle}>
<option value="Yotsuba">Yotsuba</option> <option value="Yotsuba">Yotsuba</option>
<option value="Yotsuba-B">Yotsuba B</option> <option value="Yotsuba-B">Yotsuba B</option>
@@ -700,40 +715,40 @@ const SubscriptionsCatalog = () => {
<NavBar selectedStyle={selectedStyle} style={{ <NavBar selectedStyle={selectedStyle} style={{
marginTop: "42px", marginTop: "42px",
}}> }}>
<> <>
<span className="boardList"> <span className="boardList">
[ [
<Link to={`/p/subscriptions`} onClick={() => window.scrollTo(0, 0)}>Subscriptions</Link> <Link to={`/p/subscriptions`} onClick={() => window.scrollTo(0, 0)}>Subscriptions</Link>
]&nbsp;[ ]&nbsp;[
{defaultSubplebbits.map((subplebbit, index) => ( {defaultSubplebbits.map((subplebbit, index) => (
<span className="boardList" key={`span-${subplebbit.address}`}> <span className="boardList" key={`span-${subplebbit.address}`}>
{index === 0 ? null : "\u00a0"} {index === 0 ? null : "\u00a0"}
<Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => handleClickTitle(subplebbit.title, subplebbit.address)} <Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => handleClickTitle(subplebbit.title, subplebbit.address)}
>{subplebbit.title ? subplebbit.title : subplebbit.address}</Link> >{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
{index !== defaultSubplebbits.length - 1 ? " /" : null} {index !== defaultSubplebbits.length - 1 ? " /" : null}
</span> </span>
))} ))}
] ]
</span> </span>
<span className="nav"> <span className="nav">
[ [
<span id="button-span" style={{cursor: 'pointer'}} onClick={ <span id="button-span" style={{ cursor: 'pointer' }} onClick={
() => { () => {
window.electron && window.electron.isElectron ? ( window.electron && window.electron.isElectron ? (
setIsCreateBoardOpen(true) setIsCreateBoardOpen(true)
) : ( ) : (
alert( 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' '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</span> }>Create Board</span>
] ]
[ [
<Link to={`/p/subscriptions/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link> <Link to={`/p/subscriptions/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
] ]
[ [
<Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}} <Link to="/" onClick={() => handleStyleChange({ target: { value: "Yotsuba" } }
)}>Home</Link> )}>Home</Link>
] ]
</span> </span>
@@ -750,13 +765,13 @@ const SubscriptionsCatalog = () => {
marginTop: "5px", marginTop: "5px",
marginBottom: "15px", marginBottom: "15px",
}}> }}>
<a style={{textDecoration: 'underline'}} href="https://plebbit.com" target="_blank" rel="noopener noreferrer">About</a> <a style={{ textDecoration: 'underline' }} href="https://plebbit.com" target="_blank" rel="noopener noreferrer">About</a>
&nbsp;•&nbsp; &nbsp;•&nbsp;
<a style={{textDecoration: 'underline'}} href="https://github.com/plebbit/plebchan/releases/latest" target="_blank" rel="noopener noreferrer">App</a> <a style={{ textDecoration: 'underline' }} href="https://github.com/plebbit/plebchan/releases/latest" target="_blank" rel="noopener noreferrer">App</a>
&nbsp;•&nbsp; &nbsp;•&nbsp;
<a style={{textDecoration: 'underline'}} href="https://twitter.com/plebchan_eth" target="_blank" rel="noopener noreferrer">Twitter</a> <a style={{ textDecoration: 'underline' }} href="https://twitter.com/plebchan_eth" target="_blank" rel="noopener noreferrer">Twitter</a>
&nbsp;•&nbsp; &nbsp;•&nbsp;
<a style={{textDecoration: 'underline'}} href="https://t.me/plebbit" target="_blank" rel="noopener noreferrer">Telegram</a> <a style={{ textDecoration: 'underline' }} href="https://t.me/plebbit" target="_blank" rel="noopener noreferrer">Telegram</a>
</div> </div>
</Footer> </Footer>
</Container> </Container>
src/components/views/Thread.jsx
+888 -846
View File
File diff suppressed because it is too large Load Diff
yarn.lock
+2 -63
View File
@@ -2658,52 +2658,6 @@
mkdirp "^1.0.4" mkdirp "^1.0.4"
rimraf "^3.0.2" rimraf "^3.0.2"
"@plebbit/plebbit-js@https://github.com/plebbit/plebbit-js.git#77a05093408982086c02afea24e1d1923e1ae8a8":
version "0.0.3"
resolved "https://github.com/plebbit/plebbit-js.git#77a05093408982086c02afea24e1d1923e1ae8a8"
dependencies:
"@adraffy/ens-normalize" "1.8.3"
"@keyv/sqlite" "3.6.2"
"@plebbit/plebbit-logger" "github:plebbit/plebbit-logger"
"@types/node-fetch" "2.6.2"
"@types/proper-lockfile" "4.1.2"
"@types/uuid" "8.3.4"
assert "2.0.0"
async-wait-until "2.0.12"
buffer "6.0.3"
captcha-canvas "3.2.1"
err-code "3.0.1"
ethers "6.6.0"
file-type "16.5.4"
form-data "4.0.0"
hpagent "1.2.0"
ipfs-http-client "56.0.3"
ipfs-only-hash "4.0.0"
is-ipfs "6.0.2"
jose "4.11.0"
js-sha256 "0.9.0"
keyv "4.5.2"
knex "2.4.2"
libp2p-crypto "0.21.2"
limiter "2.1.0"
localforage "1.10.0"
lodash-es "4.17.21"
lru-cache "7.18.3"
open-graph-scraper "5.2.3"
p-limit "3.1.0"
peer-id "0.16.0"
proper-lockfile "github:plebbit/node-proper-lockfile"
retry "0.13.1"
safe-stable-stringify "2.4.1"
sha1-uint8array "0.10.3"
skia-canvas "1.0.0"
sqlite3 "5.1.6"
tiny-typed-emitter "2.1.0"
tinycache "1.1.2"
ts-custom-error "3.3.1"
uuid "9.0.0"
viem "1.0.7"
"@plebbit/plebbit-js@https://github.com/plebbit/plebbit-js.git#e0c04caa13c165a2c6cbcbb8bd71193b4062af22": "@plebbit/plebbit-js@https://github.com/plebbit/plebbit-js.git#e0c04caa13c165a2c6cbcbb8bd71193b4062af22":
version "0.0.3" version "0.0.3"
resolved "https://github.com/plebbit/plebbit-js.git#e0c04caa13c165a2c6cbcbb8bd71193b4062af22" resolved "https://github.com/plebbit/plebbit-js.git#e0c04caa13c165a2c6cbcbb8bd71193b4062af22"
@@ -2750,7 +2704,7 @@
uuid "9.0.0" uuid "9.0.0"
viem "1.0.7" viem "1.0.7"
"@plebbit/plebbit-logger@github:plebbit/plebbit-logger", "@plebbit/plebbit-logger@github:plebbit/plebbit-logger#9525ca9539479918931c3b334e8d490d1c87e507": "@plebbit/plebbit-logger@github:plebbit/plebbit-logger#9525ca9539479918931c3b334e8d490d1c87e507":
version "0.0.1" version "0.0.1"
uid "9525ca9539479918931c3b334e8d490d1c87e507" uid "9525ca9539479918931c3b334e8d490d1c87e507"
resolved "https://codeload.github.com/plebbit/plebbit-logger/tar.gz/9525ca9539479918931c3b334e8d490d1c87e507" resolved "https://codeload.github.com/plebbit/plebbit-logger/tar.gz/9525ca9539479918931c3b334e8d490d1c87e507"
@@ -2763,21 +2717,6 @@
dependencies: dependencies:
debug "4.3.3" debug "4.3.3"
"@plebbit/plebbit-react-hooks@https://github.com/plebbit/plebbit-react-hooks.git#1abe9497483d01f3afcb569dfe85e7395f998cc4":
version "0.0.1"
resolved "https://github.com/plebbit/plebbit-react-hooks.git#1abe9497483d01f3afcb569dfe85e7395f998cc4"
dependencies:
"@plebbit/plebbit-js" "https://github.com/plebbit/plebbit-js.git#77a05093408982086c02afea24e1d1923e1ae8a8"
"@plebbit/plebbit-logger" "https://github.com/plebbit/plebbit-logger.git"
assert "2.0.0"
ethers "5.6.9"
localforage "1.10.0"
lodash.isequal "4.5.0"
memoizee "0.4.15"
quick-lru "5.1.1"
uuid "8.3.2"
zustand "4.0.0"
"@plebbit/plebbit-react-hooks@https://github.com/plebbit/plebbit-react-hooks.git#d41d7a4f150cecd831aeda57c3ec9edf1c22f9f5": "@plebbit/plebbit-react-hooks@https://github.com/plebbit/plebbit-react-hooks.git#d41d7a4f150cecd831aeda57c3ec9edf1c22f9f5":
version "0.0.1" version "0.0.1"
resolved "https://github.com/plebbit/plebbit-react-hooks.git#d41d7a4f150cecd831aeda57c3ec9edf1c22f9f5" resolved "https://github.com/plebbit/plebbit-react-hooks.git#d41d7a4f150cecd831aeda57c3ec9edf1c22f9f5"
@@ -12112,7 +12051,7 @@ prop-types@^15.0.0, prop-types@^15.5.8, prop-types@^15.7.2, prop-types@^15.8.1:
object-assign "^4.1.1" object-assign "^4.1.1"
react-is "^16.13.1" react-is "^16.13.1"
"proper-lockfile@github:plebbit/node-proper-lockfile", "proper-lockfile@github:plebbit/node-proper-lockfile#d8b63817f9ea3304d3e048976d72b3108ec076ff": "proper-lockfile@github:plebbit/node-proper-lockfile#d8b63817f9ea3304d3e048976d72b3108ec076ff":
version "4.1.2" version "4.1.2"
resolved "https://codeload.github.com/plebbit/node-proper-lockfile/tar.gz/d8b63817f9ea3304d3e048976d72b3108ec076ff" resolved "https://codeload.github.com/plebbit/node-proper-lockfile/tar.gz/d8b63817f9ea3304d3e048976d72b3108ec076ff"
dependencies: dependencies: