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

update catalog loadMore

Browse Source
This commit is contained in:
plebbitor
2023-03-25 15:22:03 +01:00
parent 39e5851e12
commit baf0ff2465
1 changed files with 65 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/views/Catalog.jsx
+65 -60
View File
@@ -45,7 +45,9 @@ const Catalog = () => {
const { subplebbitAddress } = useParams(); const { subplebbitAddress } = useParams();
const handleClickForm = useClickForm(); const handleClickForm = useClickForm();
useEffect(() => {
console.log(feed);
}, [feed]);
useEffect(() => { useEffect(() => {
setSelectedAddress(subplebbitAddress); setSelectedAddress(subplebbitAddress);
@@ -330,66 +332,69 @@ const Catalog = () => {
<hr /> <hr />
</TopBar> </TopBar>
<Threads selectedStyle={selectedStyle}> <Threads selectedStyle={selectedStyle}>
<InfiniteScroll {feed.length < 1 ? (
pageStart={0} <CatalogLoader />
loadMore={tryLoadMore} ) : (
hasMore={hasMore} <InfiniteScroll
loader={<CatalogLoader key="loader" />} pageStart={0}
> loadMore={tryLoadMore}
{feed.map(thread => { hasMore={hasMore}
const commentMediaInfo = getCommentMediaInfo(thread); >
const fallbackImgUrl = "/assets/filedeleted-res.gif"; {feed.map(thread => {
return ( const commentMediaInfo = getCommentMediaInfo(thread);
<div key={`thread-${thread.cid}`} className="thread"> const fallbackImgUrl = "/assets/filedeleted-res.gif";
<Link key={`a-${thread.cid}`} to={`/${selectedAddress}/thread/${thread.cid}`} onClick={() => handleClickThread(thread.cid)}> return (
{commentMediaInfo?.url ? ( <div key={`thread-${thread.cid}`} className="thread">
<Fragment key="f-catalog"> <Link key={`a-${thread.cid}`} to={`/${selectedAddress}/thread/${thread.cid}`} onClick={() => handleClickThread(thread.cid)}>
{commentMediaInfo?.type === "webpage" ? ( {commentMediaInfo?.url ? (
<img key={`img-${thread.cid}`} alt="thread" src={commentMediaInfo.url} <Fragment key="f-catalog">
onError={(e) => { {commentMediaInfo?.type === "webpage" ? (
e.target.src = fallbackImgUrl <img key={`img-${thread.cid}`} alt="thread" src={commentMediaInfo.url}
e.target.onerror = null;}} /> onError={(e) => {
) : null} e.target.src = fallbackImgUrl
{commentMediaInfo?.type === "image" ? ( e.target.onerror = null;}} />
<img key={`img-${thread.cid}`} alt="thread" src={commentMediaInfo.url} ) : null}
onError={(e) => { {commentMediaInfo?.type === "image" ? (
e.target.src = fallbackImgUrl <img key={`img-${thread.cid}`} alt="thread" src={commentMediaInfo.url}
e.target.onerror = null;}} /> onError={(e) => {
) : null} e.target.src = fallbackImgUrl
{commentMediaInfo?.type === "video" ? ( e.target.onerror = null;}} />
<VideoThumbnail ) : null}
videoUrl={commentMediaInfo.url} {commentMediaInfo?.type === "video" ? (
thumbnailHandler={(thumbnail) => { <VideoThumbnail
const img = document.querySelector(`img[key="img-${thread.cid}"]`); videoUrl={commentMediaInfo.url}
if (img) { thumbnailHandler={(thumbnail) => {
img.src = thumbnail; const img = document.querySelector(`img[key="img-${thread.cid}"]`);
} if (img) {
}} img.src = thumbnail;
/> }
) : null} }}
{commentMediaInfo?.type === "audio" ? ( />
<img key={`img-${thread.cid}`} alt="thread" src={commentMediaInfo.url} ) : null}
onError={(e) => { {commentMediaInfo?.type === "audio" ? (
e.target.src = fallbackImgUrl <img key={`img-${thread.cid}`} alt="thread" src={commentMediaInfo.url}
e.target.onerror = null;}} /> onError={(e) => {
) : null} e.target.src = fallbackImgUrl
</Fragment> e.target.onerror = null;}} />
) : null} ) : null}
</Link> </Fragment>
{/* <div key={`ti-${thread.cid}`} className="thread-icons" > ) : null}
<span key={`si-${thread.cid}`} className="thread-icon sticky-icon" title="Sticky"></span> </Link>
</div> */} {/* <div key={`ti-${thread.cid}`} className="thread-icons" >
<div key={`meta-${thread.cid}`} className="meta" title="(R)eplies / (I)mage Replies" > <span key={`si-${thread.cid}`} className="thread-icon sticky-icon" title="Sticky"></span>
R: </div> */}
<b key={`b-${thread.cid}`}>{thread.replyCount}</b> <div key={`meta-${thread.cid}`} className="meta" title="(R)eplies / (I)mage Replies" >
R:
<b key={`b-${thread.cid}`}>{thread.replyCount}</b>
</div>
<div key={`t-${thread.cid}`} className="teaser">
<b key={`b2-${thread.cid}`}>{thread.title ? `${thread.title}` : null}</b>
{thread.content ? `: ${thread.content}` : null}
</div>
</div> </div>
<div key={`t-${thread.cid}`} className="teaser"> )})}
<b key={`b2-${thread.cid}`}>{thread.title ? `${thread.title}` : null}</b> </InfiniteScroll>
{thread.content ? `: ${thread.content}` : null} )}
</div>
</div>
)})}
</InfiniteScroll>
</Threads> </Threads>
</Container> </Container>
); );