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

Fixed #181

Browse Source
This commit is contained in:
Sujal Choudhari
2023-08-09 18:49:57 +05:30
parent 88ffdb2b4c
commit f293a1ed30
4 changed files with 255 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/OfflineIndicator.jsx
+1 -1
View File
@@ -7,7 +7,7 @@ const OfflineIndicator = ({ address, className, tooltipPlace }) => {
return ( return (
<> <>
{!isOnline && ( {true && (
<> <>
{" "} {" "}
<img <img
src/components/styled/views/Catalog.styled.jsx
+12 -3
View File
@@ -32,13 +32,22 @@ export const Threads = styled.div`
.thread-icons { .thread-icons {
display: inline; display: inline;
height: 16px;
margin: 2px 0 0 -101px;
position: absolute;
width: 100px; width: 100px;
height: 16px;
position:absolute;
margin: 6px 60px 0 0px;
text-align: right; text-align: right;
top:0;
right:0;
z-index:4;
} }
.thread-icon-has-display{
transform: translate(68px, -4px);
scale: 0.8;
}
.offline-icon { .offline-icon {
height: 16px; height: 16px;
margin: 2px; margin: 2px;
src/components/views/AllCatalog.jsx
+6 -2
View File
@@ -378,7 +378,11 @@ const AllCatalog = () => {
) : null} ) : null}
</Link> </Link>
) : null} ) : null}
<div key={`ti-`} className="thread-icons" > <div key={`ti-`} className={`thread-icons ${(commentMediaInfo && (
commentMediaInfo.type === 'image' ||
commentMediaInfo.type === 'video' ||
(commentMediaInfo.type === 'webpage' &&
commentMediaInfo.thumbnail))) ? "thread-icon-has-display" :""}`} >
{(commentMediaInfo && ( {(commentMediaInfo && (
commentMediaInfo.type === 'image' || commentMediaInfo.type === 'image' ||
commentMediaInfo.type === 'video' || commentMediaInfo.type === 'video' ||
@@ -386,7 +390,7 @@ const AllCatalog = () => {
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
src/components/views/SubscriptionsCatalog.jsx
+236 -227
View File
@@ -1,7 +1,7 @@
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} 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 { Virtuoso } from 'react-virtuoso'; import { Virtuoso } from 'react-virtuoso';
@@ -28,7 +28,7 @@ import useGeneralStore from '../../hooks/stores/useGeneralStore';
import useSuccess from '../../hooks/useSuccess'; import useSuccess from '../../hooks/useSuccess';
import useWindowWidth from '../../hooks/useWindowWidth'; import useWindowWidth from '../../hooks/useWindowWidth';
import packageJson from '../../../package.json'; import packageJson from '../../../package.json';
const {version} = packageJson const { version } = packageJson
let lastVirtuosoStates = {} let lastVirtuosoStates = {}
@@ -73,9 +73,9 @@ 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, 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);
@@ -87,13 +87,13 @@ const SubscriptionsCatalog = () => {
useEffect(() => { useEffect(() => {
let permissions = {}; let permissions = {};
selectedFeed.forEach(thread => { selectedFeed.forEach(thread => {
const subplebbit = subplebbits.find(s => s && s.address === thread.subplebbitAddress); const subplebbit = subplebbits.find(s => s && s.address === thread.subplebbitAddress);
if (subplebbit && subplebbit.roles) { if (subplebbit && subplebbit.roles) {
const role = subplebbit.roles[account?.author.address]?.role; const role = subplebbit.roles[account?.author.address]?.role;
if (role === 'moderator' || role === 'admin' || role === 'owner') { if (role === 'moderator' || role === 'admin' || role === 'owner') {
permissions[thread.subplebbitAddress] = true; permissions[thread.subplebbitAddress] = true;
} else { } else {
@@ -101,9 +101,9 @@ const SubscriptionsCatalog = () => {
} }
} }
}); });
setModeratorPermissions(permissions); setModeratorPermissions(permissions);
}, [account?.author.address, selectedFeed, subplebbits]); }, [account?.author.address, selectedFeed, subplebbits]);
// mobile navbar scroll effect // mobile navbar scroll effect
@@ -113,17 +113,17 @@ const SubscriptionsCatalog = () => {
setVisible(prevScrollPos > currentScrollPos || currentScrollPos < 10); setVisible(prevScrollPos > currentScrollPos || currentScrollPos < 10);
setPrevScrollPos(currentScrollPos); setPrevScrollPos(currentScrollPos);
}, 50); }, 50);
window.addEventListener('scroll', debouncedHandleScroll); window.addEventListener('scroll', debouncedHandleScroll);
return () => window.removeEventListener('scroll', debouncedHandleScroll); return () => window.removeEventListener('scroll', debouncedHandleScroll);
}, [prevScrollPos, visible]); }, [prevScrollPos, visible]);
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}`);
console.log('challenge failed', challengeVerification); console.log('challenge failed', challengeVerification);
@@ -147,16 +147,16 @@ const SubscriptionsCatalog = () => {
const getChallengeAnswersFromUser = async (challenges) => { const getChallengeAnswersFromUser = async (challenges) => {
setChallengesArray(challenges); setChallengesArray(challenges);
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const imageString = challenges?.challenges[0].challenge; const imageString = challenges?.challenges[0].challenge;
const imageSource = `data:image/png;base64,${imageString}`; const imageSource = `data:image/png;base64,${imageString}`;
const challengeImg = new Image(); const challengeImg = new Image();
challengeImg.src = imageSource; challengeImg.src = imageSource;
challengeImg.onload = () => { challengeImg.onload = () => {
setIsCaptchaOpen(true); setIsCaptchaOpen(true);
const handleKeyDown = async (event) => { const handleKeyDown = async (event) => {
if (event.key === 'Enter') { if (event.key === 'Enter') {
const currentCaptchaResponse = useGeneralStore.getState().captchaResponse; const currentCaptchaResponse = useGeneralStore.getState().captchaResponse;
@@ -172,7 +172,7 @@ const SubscriptionsCatalog = () => {
setResolveCaptchaPromise(resolve); setResolveCaptchaPromise(resolve);
}; };
challengeImg.onerror = () => { challengeImg.onerror = () => {
reject(setNewErrorMessage('Could not load challenges')); reject(setNewErrorMessage('Could not load challenges'));
}; };
@@ -189,8 +189,8 @@ const SubscriptionsCatalog = () => {
setNewErrorMessage(error.message); console.log(error); setNewErrorMessage(error.message); console.log(error);
}, },
}); });
const { publishCommentEdit } = usePublishCommentEdit(publishCommentEditOptions); const { publishCommentEdit } = usePublishCommentEdit(publishCommentEditOptions);
@@ -209,7 +209,7 @@ const SubscriptionsCatalog = () => {
} }
}, [editedComment, setIsAuthorEdit]); }, [editedComment, setIsAuthorEdit]);
useEffect(() => { useEffect(() => {
let isActive = true; let isActive = true;
if (publishCommentEditOptions && triggerPublishCommentEdit) { if (publishCommentEditOptions && triggerPublishCommentEdit) {
@@ -252,13 +252,13 @@ const SubscriptionsCatalog = () => {
}; };
const CatalogPost = ({post}) => { const CatalogPost = ({ post }) => {
const thread = post; const thread = post;
const commentMediaInfo = getCommentMediaInfo(thread); const commentMediaInfo = getCommentMediaInfo(thread);
const linkCount = countLinks(thread); const linkCount = countLinks(thread);
const fallbackImgUrl = "assets/filedeleted-res.gif"; const fallbackImgUrl = "assets/filedeleted-res.gif";
const [isHoveringOnThread, setIsHoveringOnThread] = useState(false); const [isHoveringOnThread, setIsHoveringOnThread] = useState(false);
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 isModerator = moderatorPermissions[thread.subplebbitAddress]; const isModerator = moderatorPermissions[thread.subplebbitAddress];
@@ -271,14 +271,14 @@ const SubscriptionsCatalog = () => {
const handleOptionClick = () => { const handleOptionClick = () => {
setOpenMenuCid(null); setOpenMenuCid(null);
}; };
useEffect(() => { useEffect(() => {
if (openMenuCid !== null) { if (openMenuCid !== null) {
document.addEventListener('click', handleOutsideClick); document.addEventListener('click', handleOutsideClick);
} else { } else {
document.removeEventListener('click', handleOutsideClick); document.removeEventListener('click', handleOutsideClick);
} }
return () => { return () => {
document.removeEventListener('click', handleOutsideClick); document.removeEventListener('click', handleOutsideClick);
}; };
@@ -286,7 +286,7 @@ const SubscriptionsCatalog = () => {
const handleAuthorDeleteClick = (comment) => { const handleAuthorDeleteClick = (comment) => {
handleOptionClick(comment.cid); handleOptionClick(comment.cid);
confirmAlert({ confirmAlert({
customUI: ({ onClose }) => { customUI: ({ onClose }) => {
return ( return (
@@ -318,8 +318,8 @@ const SubscriptionsCatalog = () => {
} }
}); });
}; };
const handleAuthorEditClick = (comment) => { const handleAuthorEditClick = (comment) => {
handleOptionClick(comment.cid); handleOptionClick(comment.cid);
setIsAuthorEdit(true); setIsAuthorEdit(true);
@@ -330,63 +330,68 @@ const SubscriptionsCatalog = () => {
} }
return ( return (
<div key={`thread-`} className="thread" <div key={`thread-`} 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-`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`} <Link style={{ all: "unset", cursor: "pointer" }} key={`link-`} 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-`} <img className="card" key={`img-`}
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-`} <img className="card" key={`img-`}
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-`} <video className="card" key={`fti-`}
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-`} key={`fti-`}
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}
</Link> </Link>
) : null} ) : null}
<div key={`ti-`} className="thread-icons" > <div key={`ti-`} 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))) ? "thread-icon-has-display" : ""}`} >
commentMediaInfo.thumbnail))) ? ( {(commentMediaInfo && (
<OfflineIndicator commentMediaInfo.type === 'image' ||
address={thread.subplebbitAddress} commentMediaInfo.type === 'video' ||
className="thread-icon offline-icon" (commentMediaInfo.type === 'webpage' &&
tooltipPlace="top" /> commentMediaInfo.thumbnail))) ? (
<OfflineIndicator
address={thread.subplebbitAddress}
className="thread-icon offline-icon"
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-`} className="meta" title="(R)eplies / (L)ink Replies" > <div key={`meta-`} className="meta" title="(R)eplies / (L)ink Replies" >
R:&nbsp;<b key={`b-`}>{thread.replyCount}</b> R:&nbsp;<b key={`b-`}>{thread.replyCount}</b>
{linkCount > 0 ? ( {linkCount > 0 ? (
@@ -395,45 +400,49 @@ const SubscriptionsCatalog = () => {
L:&nbsp;<b key={`i-`}>{linkCount}</b> L:&nbsp;<b key={`i-`}>{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-`} zIndex: '999'
title="Post menu" }}
ref={el => { key={`pmb-`}
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>
@@ -442,26 +451,26 @@ 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={() => {
setSelectedAddress(thread.subplebbitAddress); setSelectedAddress(thread.subplebbitAddress);
setModeratingCommentCid(thread.cid) setModeratingCommentCid(thread.cid)
setIsModerationOpen(true); setIsModerationOpen(true);
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>
</> </>
@@ -469,44 +478,44 @@ const SubscriptionsCatalog = () => {
</> </>
)}</VerifiedAuthor> )}</VerifiedAuthor>
{(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-`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`} <Link style={{ all: "unset", cursor: "pointer" }} key={`link2-`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`}
onClick={() => setSelectedThread(thread.cid)}> onClick={() => setSelectedThread(thread.cid)}>
<div key={`t-`} className="teaser"> <div key={`t-`} className="teaser">
<b key={`b2-`}>{thread.title ? `${thread.title}` : null}</b> <b key={`b2-`}>{thread.title ? `${thread.title}` : null}</b>
{thread.content ? `: ${thread.content}` : null} {thread.content ? `: ${thread.content}` : null}
@@ -517,7 +526,7 @@ const SubscriptionsCatalog = () => {
}; };
const CatalogRow = ({row}) => { const CatalogRow = ({ row }) => {
const posts = [] const posts = []
for (const post of row) { for (const post of row) {
posts.push(<CatalogPost key={post?.cid} post={post} />) posts.push(<CatalogPost key={post?.cid} post={post} />)
@@ -537,7 +546,7 @@ const SubscriptionsCatalog = () => {
return () => window.removeEventListener('scroll', setLastVirtuosoState); return () => window.removeEventListener('scroll', setLastVirtuosoState);
}, [selectedAddress]); }, [selectedAddress]);
const lastVirtuosoState = lastVirtuosoStates["subscriptionsCatalog"]; const lastVirtuosoState = lastVirtuosoStates["subscriptionsCatalog"];
@@ -545,60 +554,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:\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> }>Create Board</span>
] ]
[ [
@@ -617,20 +626,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:\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> }>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>
@@ -643,7 +652,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>
@@ -652,7 +661,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} />
@@ -660,7 +669,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>
@@ -683,7 +692,7 @@ const SubscriptionsCatalog = () => {
{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>
)} )}
@@ -693,13 +702,13 @@ const SubscriptionsCatalog = () => {
<Threads selectedStyle={selectedStyle}> <Threads selectedStyle={selectedStyle}>
{feed.length > 1 ? ( {feed.length > 1 ? (
<Virtuoso <Virtuoso
increaseViewportBy={{bottom: 600, top: 600}} increaseViewportBy={{ bottom: 600, top: 600 }}
totalCount={rows?.length || 0} totalCount={rows?.length || 0}
data={rows} data={rows}
style={{maxWidth: '100%'}} style={{ maxWidth: '100%' }}
itemContent={(index, row) => <CatalogRow index={index} row={row} />} itemContent={(index, row) => <CatalogRow index={index} row={row} />}
useWindowScroll={true} useWindowScroll={true}
components={{ Footer: () => hasMore ? <CatalogLoader /> : null}} components={{ Footer: () => hasMore ? <CatalogLoader /> : null }}
endReached={loadMore} endReached={loadMore}
ref={virtuosoRef} ref={virtuosoRef}
restoreStateFrom={lastVirtuosoState} restoreStateFrom={lastVirtuosoState}
@@ -720,7 +729,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>
@@ -733,40 +742,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:\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> }>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>
@@ -783,13 +792,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;
<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://github.com/plebbit/plebchan/releases/latest" target="_blank" rel="noopener noreferrer">App</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://twitter.com/plebchan_eth" target="_blank" rel="noopener noreferrer">Twitter</a>
&nbsp;•&nbsp;
<a style={{ textDecoration: 'underline' }} href="https://t.me/plebbit" target="_blank" rel="noopener noreferrer">Telegram</a>
</div> </div>
</Footer> </Footer>
</Container> </Container>