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

implement VirtuosoGrid in catalog views

Browse Source
This commit is contained in:
plebeius.eth
2023-07-25 21:10:22 +02:00
parent a6dd7b2dfa
commit 6241772016
4 changed files with 385 additions and 357 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/styled/views/Catalog.styled.jsx
+8 -1
View File
@@ -1,5 +1,12 @@
import styled from 'styled-components'; import styled from 'styled-components';
export const GridContainer = styled.div`
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
`;
export const Threads = styled.div` export const Threads = styled.div`
padding: 20px 0; padding: 20px 0;
text-align: center; text-align: center;
@@ -7,7 +14,7 @@ export const Threads = styled.div`
.thread { .thread {
width: 180px; width: 180px;
max-height: 320px; height: 320px;
vertical-align: top; vertical-align: top;
display: inline-block; display: inline-block;
word-wrap: break-word; word-wrap: break-word;
src/components/views/AllCatalog.jsx
+22 -20
View File
@@ -1,14 +1,14 @@
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 InfiniteScroll from 'react-infinite-scroller';
import { Link, useNavigate} from 'react-router-dom'; import { Link, useNavigate} from 'react-router-dom';
import { confirmAlert } from 'react-confirm-alert'; import { confirmAlert } from 'react-confirm-alert';
import { Tooltip } from 'react-tooltip'; 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 { Container, NavBar, Header, Break, PostMenu, BoardForm } from '../styled/views/Board.styled'; import { Container, NavBar, Header, Break, PostMenu, BoardForm } from '../styled/views/Board.styled';
import { Threads, PostMenuCatalog } from '../styled/views/Catalog.styled'; import { Threads, PostMenuCatalog, GridContainer } from '../styled/views/Catalog.styled';
import { TopBar, Footer, AuthorDeleteAlert } from '../styled/views/Thread.styled'; import { TopBar, Footer, AuthorDeleteAlert } from '../styled/views/Thread.styled';
import CatalogLoader from '../CatalogLoader'; import CatalogLoader from '../CatalogLoader';
import EditModal from '../modals/EditModal'; import EditModal from '../modals/EditModal';
@@ -74,7 +74,7 @@ const AllCatalog = () => {
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, hasMore, loadMore } = useFeed({subplebbitAddresses: addresses, sortType: 'active'}); const { feed, 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));
@@ -467,18 +467,18 @@ const AllCatalog = () => {
</TopBar> </TopBar>
<Tooltip id="tooltip" className="tooltip" /> <Tooltip id="tooltip" className="tooltip" />
<Threads selectedStyle={selectedStyle}> <Threads selectedStyle={selectedStyle}>
{feed ? ( {feed.length > 1 ? (
<InfiniteScroll <VirtuosoGrid
pageStart={0} style={{width: '100%', height: '100%'}}
loadMore={tryLoadMore} data={feed}
hasMore={hasMore} increaseViewportBy={{bottom: 600, top: 600}}
> itemContent={(index) => {
{feed.map((thread, index) => { const thread = feed[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('')}}>
@@ -662,11 +662,13 @@ const AllCatalog = () => {
</div> </div>
</Link> </Link>
</div> </div>
)})} )
</InfiniteScroll> }}
) : ( endReached={tryLoadMore}
<CatalogLoader /> useWindowScroll={true}
)} components={{List: GridContainer}}
/>
) : (<CatalogLoader />)}
</Threads> </Threads>
<Footer selectedStyle={selectedStyle}> <Footer selectedStyle={selectedStyle}>
<Break id="break" selectedStyle={selectedStyle} style={{ <Break id="break" selectedStyle={selectedStyle} style={{
src/components/views/Catalog.jsx
+332 -315
View File
@@ -1,14 +1,14 @@
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import React, { useCallback, useEffect, useMemo, 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 InfiniteScroll from 'react-infinite-scroller';
import { Link, useNavigate, useParams } from 'react-router-dom'; import { Link, useNavigate, useParams } from 'react-router-dom';
import { confirmAlert } from 'react-confirm-alert'; import { confirmAlert } from 'react-confirm-alert';
import { Tooltip } from 'react-tooltip'; import { Tooltip } from 'react-tooltip';
import { VirtuosoGrid } from 'react-virtuoso';
import { useAccount, useFeed, usePublishComment, usePublishCommentEdit, useSubplebbit, useSubscribe } from '@plebbit/plebbit-react-hooks'; import { useAccount, useFeed, usePublishComment, usePublishCommentEdit, useSubplebbit, useSubscribe } from '@plebbit/plebbit-react-hooks';
import { debounce } from 'lodash'; import { debounce } from 'lodash';
import { Container, NavBar, Header, Break, PostForm, PostFormLink, PostFormTable, PostMenu, BoardForm } from '../styled/views/Board.styled'; import { Container, NavBar, Header, Break, PostForm, PostFormLink, PostFormTable, PostMenu, BoardForm } from '../styled/views/Board.styled';
import { Threads, PostMenuCatalog } from '../styled/views/Catalog.styled'; import { Threads, PostMenuCatalog, GridContainer } from '../styled/views/Catalog.styled';
import { TopBar, Footer, AuthorDeleteAlert } from '../styled/views/Thread.styled'; import { TopBar, Footer, AuthorDeleteAlert } from '../styled/views/Thread.styled';
import CatalogLoader from '../CatalogLoader'; import CatalogLoader from '../CatalogLoader';
import EditModal from '../modals/EditModal'; import EditModal from '../modals/EditModal';
@@ -87,16 +87,25 @@ const Catalog = () => {
const [executeAnonMode, setExecuteAnonMode] = useState(false); const [executeAnonMode, setExecuteAnonMode] = useState(false);
const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false); const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);
const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'active'}); const account = useAccount();
const { feed, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'active'});
const { subplebbitAddress } = useParams(); const { subplebbitAddress } = useParams();
const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress}); const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress});
const account = useAccount();
const stateString = useStateString(subplebbit); const stateString = useStateString(subplebbit);
let feedWithDescriptionAndRules = [];
useAnonModeRef(selectedThreadCidRef, anonymousMode && executeAnonMode); useAnonModeRef(selectedThreadCidRef, anonymousMode && executeAnonMode);
if (subplebbit.rules) {
feedWithDescriptionAndRules.push({type: 'rules', content: subplebbit.rules});
}
if (subplebbit.description) {
feedWithDescriptionAndRules.push({type: 'description', content: subplebbit.description});
}
useEffect(() => { useEffect(() => {
if (subplebbit.roles !== undefined) { if (subplebbit.roles !== undefined) {
const role = subplebbit.roles[account?.author.address]?.role; const role = subplebbit.roles[account?.author.address]?.role;
@@ -716,16 +725,20 @@ const Catalog = () => {
</TopBar> </TopBar>
<Tooltip id="tooltip" className="tooltip" /> <Tooltip id="tooltip" className="tooltip" />
<Threads selectedStyle={selectedStyle}> <Threads selectedStyle={selectedStyle}>
{subplebbit?.state === "failed" ? ( {subplebbit?.state !== "failed" && subplebbit.state === "succeeded" ? (
null <VirtuosoGrid
) : ( style={{width: '100%', height: '100%'}}
subplebbit.state === "succeeded" ? ( data={feed}
<InfiniteScroll increaseViewportBy={{bottom: 600, top: 600}}
pageStart={0} itemContent={(index) => {
loadMore={tryLoadMore} const thread = feed[index];
hasMore={hasMore} const commentMediaInfo = getCommentMediaInfo(thread);
> const linkCount = countLinks(thread);
{subplebbit.rules ? ( const fallbackImgUrl = "assets/filedeleted-res.gif";
const item = feedWithDescriptionAndRules[index];
if (item?.type === 'rules') {
return (
<div className='thread' <div className='thread'
onMouseOver={() => setIsHoveringOnThread('rules')} onMouseOver={() => setIsHoveringOnThread('rules')}
onMouseLeave={() => setIsHoveringOnThread('')}> onMouseLeave={() => setIsHoveringOnThread('')}>
@@ -792,62 +805,234 @@ const Catalog = () => {
</div> </div>
</Link> </Link>
</div> </div>
) : null} )
{subplebbit.description ? ( } else if (item?.type === 'description') {
<div className='thread' return (
onMouseOver={() => setIsHoveringOnThread('description')} <>
onMouseLeave={() => setIsHoveringOnThread('')}> <div className='thread'
<Link style={{all: 'unset', cursor: 'pointer'}} to={`/p/${selectedAddress}/description`}> onMouseOver={() => setIsHoveringOnThread('description')}
onMouseLeave={() => setIsHoveringOnThread('')}>
<Link style={{all: 'unset', cursor: 'pointer'}} to={`/p/${selectedAddress}/description`}>
{subplebbit.suggested?.avatarUrl ? (
<img className='card'
src={subplebbit.suggested.avatarUrl} alt="board avatar" />
) : null}
</Link>
{subplebbit.suggested?.avatarUrl ? ( {subplebbit.suggested?.avatarUrl ? (
<img className='card' <div className='thread-icons'>
src={subplebbit.suggested.avatarUrl} alt="board avatar" /> <span className="thread-icon sticky-icon" title="Sticky"
style={{
imageRendering: "pixelated",}} />
<span className="thread-icon closed-icon" title="Closed"
style={{
imageRendering: "pixelated",}} />
</div>
) : null}
<BoardForm selectedStyle={selectedStyle} style={{all: 'unset'}}>
<div className='meta' title="(R)eplies / (L)ink Replies">
R:&nbsp;<b>0</b>&nbsp;/&nbsp;L:&nbsp;<b>0</b>
{subplebbit.suggested?.avatarUrl ? null : (
<div className='thread-icons'
style={{position: 'absolute', top: '-2px', right: '15px'}}>
<span className="thread-icon sticky-icon" title="Sticky"
style={{
imageRendering: "pixelated",}} />
<span className="thread-icon closed-icon" title="Closed"
style={{
imageRendering: "pixelated",}} />
</div>
)}
<PostMenu
style={{ display: isHoveringOnThread === "description" ? 'inline-block' : 'none',
position: 'absolute', lineHeight: '1em', marginTop: '-1px', outline: 'none',
zIndex: '999'}}
title="Post menu"
ref={el => {
threadMenuRefs.current["description"] = el;
postMenuRef.current = el;
}}
className='post-menu-button'
id='post-menu-button-catalog'
rotated={openMenuCid === "description"}
onClick={(event) => {
event.stopPropagation();
const rect = threadMenuRefs.current["description"].getBoundingClientRect();
setMenuPosition({top: rect.top + window.scrollY, left: rect.left});
setOpenMenuCid(prevCid => (prevCid === "description" ? null : "description"));
}}
>
▶
</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-${"description"}`}
style={{ display: openMenuCid === "description" ? 'block' : 'none' }}
>
<ul className="post-menu-catalog">
<li onClick={() => handleOptionClick("description")}>Hide thread</li>
{/* {isModerator ? (
<>
change description
</>
) : null} */}
{subplebbit.suggested?.avatarUrl ? (
<li
onMouseOver={() => {setIsImageSearchOpen(true)}}
onMouseLeave={() => {setIsImageSearchOpen(false)}}>
Image search »
<ul className="dropdown-menu post-menu-catalog"
style={{display: isImageSearchOpen ? 'block': 'none'}}>
<li onClick={() => handleOptionClick("description")}>
<a
href={`https://lens.google.com/uploadbyurl?url=${subplebbit.suggested.avatarUrl}`}
target="_blank" rel="noreferrer"
>Google</a>
</li>
<li onClick={() => handleOptionClick("description")}>
<a
href={`https://yandex.com/images/search?url=${subplebbit.suggested.avatarUrl}`}
target="_blank" rel="noreferrer"
>Yandex</a>
</li>
<li onClick={() => handleOptionClick("description")}>
<a
href={`https://saucenao.com/search.php?url=${subplebbit.suggested.avatarUrl}`}
target="_blank" rel="noreferrer"
>SauceNAO</a>
</li>
</ul>
</li>
) : null}
</ul>
</div>
</PostMenuCatalog>, document.body
)}
</BoardForm>
<Link style={{all: "unset", cursor: "pointer"}} to={`/p/${selectedAddress}/description`}
onClick={() => setSelectedThread("description")}>
<div className="teaser">
<b>Welcome to {subplebbit.title || subplebbit.address}</b>
{": " + subplebbit.description}
</div>
</Link>
</div>
</>
)
} else {
return (
<div key={`thread-${index}`} className="thread"
onMouseOver={() => {setIsHoveringOnThread(thread.cid)}}
onMouseLeave={() => {setIsHoveringOnThread('')}}>
{commentMediaInfo?.url ? (
<Link style={{all: "unset", cursor: "pointer"}} key={`link-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`}
onClick={() => setSelectedThread(thread.cid)}>
{commentMediaInfo?.type === "webpage" ? (
thread.thumbnailUrl ? (
<img className="card" key={`img-${index}`}
src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
onError={(e) => {
e.target.src = fallbackImgUrl
e.target.onerror = null;
}} />
) : null
) : null}
{commentMediaInfo?.type === "image" ? (
<img className="card" key={`img-${index}`}
src={commentMediaInfo.url} alt={commentMediaInfo.type}
onError={(e) => {
e.target.src = fallbackImgUrl
e.target.onerror = null;}} />
) : null}
{commentMediaInfo?.type === "video" ? (
<video className="card" key={`fti-${index}`}
src={commentMediaInfo.url}
alt={commentMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} />
) : null}
{commentMediaInfo?.type === "audio" ? (
<audio className="card" controls
key={`fti-${index}`}
src={commentMediaInfo.url}
alt={commentMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} />
) : null}
</Link>
) : null}
{(commentMediaInfo && (
commentMediaInfo.type === 'image' ||
commentMediaInfo.type === 'video' ||
(commentMediaInfo.type === 'webpage' &&
commentMediaInfo.thumbnail))) ? (
<div key={`ti-${index}`} className="thread-icons" >
{thread.pinned ? (
<span key={`si-${index}`} className="thread-icon sticky-icon" title="Sticky"
style={{
imageRendering: "pixelated",}} />
) : null}
{thread.locked ? (
<span key={`li-${index}`} className="thread-icon closed-icon" title="Closed"
style={{
imageRendering: "pixelated",}} />
) : null} ) : null}
</Link>
{subplebbit.suggested?.avatarUrl ? (
<div className='thread-icons'>
<span className="thread-icon sticky-icon" title="Sticky"
style={{
imageRendering: "pixelated",}} />
<span className="thread-icon closed-icon" title="Closed"
style={{
imageRendering: "pixelated",}} />
</div> </div>
) : null} ) : null}
<BoardForm selectedStyle={selectedStyle} style={{all: 'unset'}}> <BoardForm selectedStyle={selectedStyle}
<div className='meta' title="(R)eplies / (L)ink Replies"> style={{ all: "unset"}}>
R:&nbsp;<b>0</b>&nbsp;/&nbsp;L:&nbsp;<b>0</b> <div key={`meta-${index}`} className="meta" title="(R)eplies / (L)ink Replies" >
{subplebbit.suggested?.avatarUrl ? null : ( R:&nbsp;<b key={`b-${index}`}>{thread.replyCount}</b>
{linkCount > 0 ? (
<>
&nbsp;/
L:&nbsp;<b key={`i-${index}`}>{linkCount}</b>
</>
) : null}
{(commentMediaInfo && (
commentMediaInfo.type === 'image' ||
commentMediaInfo.type === 'video' ||
(commentMediaInfo.type === 'webpage' &&
commentMediaInfo.thumbnail))) ? null : (
<div className='thread-icons' <div className='thread-icons'
style={{position: 'absolute', top: '-2px', right: '15px'}}> style={{position: 'absolute', top: '-2px', right: '15px'}}>
<span className="thread-icon sticky-icon" title="Sticky" {thread.pinned ? (
style={{ <span key={`si-${index}`} className="thread-icon sticky-icon" title="Sticky"
imageRendering: "pixelated",}} /> style={{
<span className="thread-icon closed-icon" title="Closed" imageRendering: "pixelated",}} />
style={{ ) : null}
imageRendering: "pixelated",}} /> {thread.locked ? (
<span key={`li-${index}`} className="thread-icon closed-icon" title="Closed"
style={{
imageRendering: "pixelated",}} />
) : null}
</div> </div>
)} )}
<PostMenu <PostMenu
style={{ display: isHoveringOnThread === "description" ? 'inline-block' : 'none', style={{ display: isHoveringOnThread === thread.cid ? 'inline-block' : 'none',
position: 'absolute', lineHeight: '1em', marginTop: '-1px', outline: 'none', position: 'absolute', lineHeight: '1em', marginTop: '-1px', outline: 'none',
zIndex: '999'}} zIndex: '999'}}
title="Post menu" key={`pmb-${index}`}
ref={el => { title="Post menu"
threadMenuRefs.current["description"] = el; ref={el => {
postMenuRef.current = el; threadMenuRefs.current[thread.cid] = el;
}} postMenuRef.current = el;
className='post-menu-button' }}
id='post-menu-button-catalog' className='post-menu-button'
rotated={openMenuCid === "description"} id='post-menu-button-catalog'
onClick={(event) => { rotated={openMenuCid === thread.cid}
event.stopPropagation(); onClick={(event) => {
const rect = threadMenuRefs.current["description"].getBoundingClientRect(); event.stopPropagation();
setMenuPosition({top: rect.top + window.scrollY, left: rect.left}); const rect = threadMenuRefs.current[thread.cid].getBoundingClientRect();
setOpenMenuCid(prevCid => (prevCid === "description" ? null : "description")); 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}
@@ -856,268 +1041,100 @@ const Catalog = () => {
style={{position: "absolute", style={{position: "absolute",
top: menuPosition.top + 7, top: menuPosition.top + 7,
left: menuPosition.left}}> left: menuPosition.left}}>
<div className={`post-menu-thread post-menu-thread-${"description"}`} <div className={`post-menu-thread post-menu-thread-${thread.cid}`}
style={{ display: openMenuCid === "description" ? 'block' : 'none' }} style={{ display: openMenuCid === thread.cid ? 'block' : 'none' }}
> >
<ul className="post-menu-catalog"> <ul className="post-menu-catalog">
<li onClick={() => handleOptionClick("description")}>Hide thread</li> <li onClick={() => handleOptionClick(thread.cid)}>Hide thread</li>
{/* {isModerator ? ( <VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (
<> <>
change description {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={() => {
setModeratingCommentCid(thread.cid)
setIsModerationOpen(true);
handleOptionClick(thread.cid);
setDeletePost(true);
}}>
Delete post
</li>
)}
<li
onClick={() => {
setModeratingCommentCid(thread.cid)
setIsModerationOpen(true);
handleOptionClick(thread.cid);
}}>
Mod tools
</li>
</>
) : null}
</> </>
) : null} */} )}</VerifiedAuthor>
{subplebbit.suggested?.avatarUrl ? ( {(commentMediaInfo && (
<li commentMediaInfo.type === 'image' ||
onMouseOver={() => {setIsImageSearchOpen(true)}} (commentMediaInfo.type === 'webpage' &&
onMouseLeave={() => {setIsImageSearchOpen(false)}}> commentMediaInfo.thumbnail))) ? (
Image search » <li
<ul className="dropdown-menu post-menu-catalog" onMouseOver={() => {setIsImageSearchOpen(true)}}
style={{display: isImageSearchOpen ? 'block': 'none'}}> onMouseLeave={() => {setIsImageSearchOpen(false)}}>
<li onClick={() => handleOptionClick("description")}> Image search »
<a <ul className="dropdown-menu post-menu-catalog"
href={`https://lens.google.com/uploadbyurl?url=${subplebbit.suggested.avatarUrl}`} style={{display: isImageSearchOpen ? 'block': 'none'}}>
target="_blank" rel="noreferrer" <li onClick={() => handleOptionClick(thread.cid)}>
>Google</a> <a
</li> href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
<li onClick={() => handleOptionClick("description")}> target="_blank" rel="noreferrer"
<a >Google</a>
href={`https://yandex.com/images/search?url=${subplebbit.suggested.avatarUrl}`} </li>
target="_blank" rel="noreferrer" <li onClick={() => handleOptionClick(thread.cid)}>
>Yandex</a> <a
</li> href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
<li onClick={() => handleOptionClick("description")}> target="_blank" rel="noreferrer"
<a >Yandex</a>
href={`https://saucenao.com/search.php?url=${subplebbit.suggested.avatarUrl}`} </li>
target="_blank" rel="noreferrer" <li onClick={() => handleOptionClick(thread.cid)}>
>SauceNAO</a> <a
</li> href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
</ul> target="_blank" rel="noreferrer"
</li> >SauceNAO</a>
) : null} </li>
</ul>
</li>
) : null
}
</ul> </ul>
</div> </div>
</PostMenuCatalog>, document.body </PostMenuCatalog>, document.body
)} )}
</BoardForm> </BoardForm>
<Link style={{all: "unset", cursor: "pointer"}} to={`/p/${selectedAddress}/description`} <Link style={{all: "unset", cursor: "pointer"}} key={`link2-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`}
onClick={() => setSelectedThread("description")}> onClick={() => setSelectedThread(thread.cid)}>
<div className="teaser"> <div key={`t-${index}`} className="teaser">
<b>Welcome to {subplebbit.title || subplebbit.address}</b> <b key={`b2-${index}`}>{thread.title ? `${thread.title}` : null}</b>
{": " + subplebbit.description} {thread.content ? `: ${thread.content}` : null}
</div>
</Link>
</div>
) : null}
{feed.map((thread, index) => {
const commentMediaInfo = getCommentMediaInfo(thread);
const fallbackImgUrl = "assets/filedeleted-res.gif";
const linkCount = countLinks(thread);
return (
<div key={`thread-${index}`} className="thread"
onMouseOver={() => {setIsHoveringOnThread(thread.cid)}}
onMouseLeave={() => {setIsHoveringOnThread('')}}>
{commentMediaInfo?.url ? (
<Link style={{all: "unset", cursor: "pointer"}} key={`link-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`}
onClick={() => setSelectedThread(thread.cid)}>
{commentMediaInfo?.type === "webpage" ? (
thread.thumbnailUrl ? (
<img className="card" key={`img-${index}`}
src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
onError={(e) => {
e.target.src = fallbackImgUrl
e.target.onerror = null;
}} />
) : null
) : null}
{commentMediaInfo?.type === "image" ? (
<img className="card" key={`img-${index}`}
src={commentMediaInfo.url} alt={commentMediaInfo.type}
onError={(e) => {
e.target.src = fallbackImgUrl
e.target.onerror = null;}} />
) : null}
{commentMediaInfo?.type === "video" ? (
<video className="card" key={`fti-${index}`}
src={commentMediaInfo.url}
alt={commentMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} />
) : null}
{commentMediaInfo?.type === "audio" ? (
<audio className="card" controls
key={`fti-${index}`}
src={commentMediaInfo.url}
alt={commentMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} />
) : null}
</Link>
) : null}
{(commentMediaInfo && (
commentMediaInfo.type === 'image' ||
commentMediaInfo.type === 'video' ||
(commentMediaInfo.type === 'webpage' &&
commentMediaInfo.thumbnail))) ? (
<div key={`ti-${index}`} className="thread-icons" >
{thread.pinned ? (
<span key={`si-${index}`} className="thread-icon sticky-icon" title="Sticky"
style={{
imageRendering: "pixelated",}} />
) : null}
{thread.locked ? (
<span key={`li-${index}`} className="thread-icon closed-icon" title="Closed"
style={{
imageRendering: "pixelated",}} />
) : null}
</div>
) : null}
<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}
{(commentMediaInfo && (
commentMediaInfo.type === 'image' ||
commentMediaInfo.type === 'video' ||
(commentMediaInfo.type === 'webpage' &&
commentMediaInfo.thumbnail))) ? null : (
<div className='thread-icons'
style={{position: 'absolute', top: '-2px', right: '15px'}}>
{thread.pinned ? (
<span key={`si-${index}`} className="thread-icon sticky-icon" title="Sticky"
style={{
imageRendering: "pixelated",}} />
) : null}
{thread.locked ? (
<span key={`li-${index}`} className="thread-icon closed-icon" title="Closed"
style={{
imageRendering: "pixelated",}} />
) : null}
</div>
)}
<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={() => {
setModeratingCommentCid(thread.cid)
setIsModerationOpen(true);
handleOptionClick(thread.cid);
setDeletePost(true);
}}>
Delete post
</li>
)}
<li
onClick={() => {
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/${selectedAddress}/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> </div>
)})} </Link>
</InfiniteScroll> </div>
) : (<CatalogLoader />) )
)} }
}}
endReached={tryLoadMore}
useWindowScroll={true}
components={{List: GridContainer}}
/>
) : (<CatalogLoader />)}
</Threads> </Threads>
<Footer selectedStyle={selectedStyle}> <Footer selectedStyle={selectedStyle}>
<Break id="break" selectedStyle={selectedStyle} style={{ <Break id="break" selectedStyle={selectedStyle} style={{
src/components/views/SubscriptionsCatalog.jsx
+23 -21
View File
@@ -1,15 +1,15 @@
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 InfiniteScroll from 'react-infinite-scroller';
import { Link, useNavigate} from 'react-router-dom'; import { Link, useNavigate} from 'react-router-dom';
import { confirmAlert } from 'react-confirm-alert'; import { confirmAlert } from 'react-confirm-alert';
import { Tooltip } from 'react-tooltip'; 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 useGeneralStore from '../../hooks/stores/useGeneralStore'; import useGeneralStore from '../../hooks/stores/useGeneralStore';
import { Container, NavBar, Header, Break, PostMenu, BoardForm } from '../styled/views/Board.styled'; import { Container, NavBar, Header, Break, PostMenu, BoardForm } from '../styled/views/Board.styled';
import { Threads, PostMenuCatalog } from '../styled/views/Catalog.styled'; import { Threads, PostMenuCatalog, GridContainer } from '../styled/views/Catalog.styled';
import { TopBar, Footer, AuthorDeleteAlert } from '../styled/views/Thread.styled'; import { TopBar, Footer, AuthorDeleteAlert } from '../styled/views/Thread.styled';
import CatalogLoader from '../CatalogLoader'; import CatalogLoader from '../CatalogLoader';
import EditModal from '../modals/EditModal'; import EditModal from '../modals/EditModal';
@@ -72,7 +72,7 @@ const SubscriptionsCatalog = () => {
const [moderatorPermissions, setModeratorPermissions] = useState({}); const [moderatorPermissions, setModeratorPermissions] = useState({});
const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false); const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);
const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: account?.subscriptions, sortType: 'active'}); const { feed, loadMore } = useFeed({subplebbitAddresses: account?.subscriptions, sortType: 'active'});
const [selectedFeed, setSelectedFeed] = useState(feed.sort((a, b) => b.timestamp - a.timestamp)); const [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'});
@@ -471,18 +471,18 @@ const SubscriptionsCatalog = () => {
</TopBar> </TopBar>
<Tooltip id="tooltip" className="tooltip" /> <Tooltip id="tooltip" className="tooltip" />
<Threads selectedStyle={selectedStyle}> <Threads selectedStyle={selectedStyle}>
{feed ? ( {feed.length > 1 ? (
<InfiniteScroll <VirtuosoGrid
pageStart={0} style={{width: '100%', height: '100%'}}
loadMore={tryLoadMore} data={feed}
hasMore={hasMore} increaseViewportBy={{bottom: 600, top: 600}}
> itemContent={(index) => {
{feed.map((thread, index) => { const thread = feed[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('')}}>
@@ -665,12 +665,14 @@ const SubscriptionsCatalog = () => {
{thread.content ? `: ${thread.content}` : null} {thread.content ? `: ${thread.content}` : null}
</div> </div>
</Link> </Link>
</div> </div>
)})} )
</InfiniteScroll> }}
) : ( endReached={tryLoadMore}
<CatalogLoader /> useWindowScroll={true}
)} components={{List: GridContainer}}
/>
) : (<CatalogLoader />)}
</Threads> </Threads>
<Footer selectedStyle={selectedStyle}> <Footer selectedStyle={selectedStyle}>
<Break id="break" selectedStyle={selectedStyle} style={{ <Break id="break" selectedStyle={selectedStyle} style={{