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
+105 -90
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,9 +142,8 @@ 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))}
}; };
@@ -343,7 +342,7 @@ const AllCatalog = () => {
<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}
@@ -355,7 +354,7 @@ const AllCatalog = () => {
<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) => (
@@ -373,25 +372,25 @@ const AllCatalog = () => {
</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/all/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link> <Link to={`/p/all/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
] ]
[ [
<Link to="/">Home</Link> <Link to="/">Home</Link>
] ]
</span> </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">
@@ -404,24 +403,24 @@ const AllCatalog = () => {
<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,23 +478,23 @@ 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 ? (
@@ -500,7 +511,8 @@ const AllCatalog = () => {
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}`}
@@ -535,7 +547,7 @@ const AllCatalog = () => {
)} )}
</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 ? (
@@ -545,9 +557,11 @@ const AllCatalog = () => {
</> </>
) : null} ) : null}
<PostMenu <PostMenu
style={{ display: isHoveringOnThread === thread.cid ? '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'
}}
key={`pmb-${index}`} key={`pmb-${index}`}
title="Post menu" title="Post menu"
ref={el => { ref={el => {
@@ -560,7 +574,7 @@ const AllCatalog = () => {
onClick={(event) => { onClick={(event) => {
event.stopPropagation(); event.stopPropagation();
const rect = threadMenuRefs.current[thread.cid].getBoundingClientRect(); const rect = threadMenuRefs.current[thread.cid].getBoundingClientRect();
setMenuPosition({top: rect.top + window.scrollY, left: rect.left}); setMenuPosition({ top: rect.top + window.scrollY, left: rect.left });
setOpenMenuCid(prevCid => (prevCid === thread.cid ? null : thread.cid)); setOpenMenuCid(prevCid => (prevCid === thread.cid ? null : thread.cid));
}} }}
> >
@@ -569,11 +583,13 @@ const AllCatalog = () => {
</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={{
position: "absolute",
top: menuPosition.top + 7, top: menuPosition.top + 7,
left: menuPosition.left}}> 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' }}
> >
@@ -622,11 +638,11 @@ const AllCatalog = () => {
(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}`}
@@ -654,7 +670,7 @@ const AllCatalog = () => {
</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>
@@ -663,13 +679,12 @@ const AllCatalog = () => {
</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={{
marginTop: "-36px", marginTop: "-36px",
@@ -683,7 +698,7 @@ const AllCatalog = () => {
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,7 +715,7 @@ const AllCatalog = () => {
<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) => (
@@ -715,28 +730,28 @@ const AllCatalog = () => {
</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/all/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link> <Link to={`/p/all/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 >
</> </>
</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
+138 -114
View File
@@ -1,4 +1,5 @@
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import InfiniteScroll from 'react-infinite-scroller';
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';
@@ -29,7 +30,7 @@ import useSuccess from '../../hooks/useSuccess';
import useAnonModeStore from '../../hooks/stores/useAnonModeStore'; import useAnonModeStore from '../../hooks/stores/useAnonModeStore';
import useGeneralStore from '../../hooks/stores/useGeneralStore'; import useGeneralStore from '../../hooks/stores/useGeneralStore';
import packageJson from '../../../package.json' import packageJson from '../../../package.json'
const {version} = packageJson const { version } = packageJson
const Catalog = () => { const Catalog = () => {
@@ -82,15 +83,16 @@ const Catalog = () => {
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 [executeAnonMode, setExecuteAnonMode] = useState(false); const [executeAnonMode, setExecuteAnonMode] = useState(false);
const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false); const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);
const account = useAccount(); const { feed, hasMore, loadMore } = useFeed({ subplebbitAddresses: [`${selectedAddress}`], sortType: 'active' });
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 = []; let feedWithDescriptionAndRules = [];
@@ -98,12 +100,12 @@ const Catalog = () => {
if (subplebbit.rules) { if (subplebbit.rules) {
feedWithDescriptionAndRules.push({type: 'rules', content: subplebbit.rules}); feedWithDescriptionAndRules.push({ type: 'rules', content: subplebbit.rules });
} }
if (subplebbit.description) { if (subplebbit.description) {
feedWithDescriptionAndRules.push({type: 'description', content: subplebbit.description}); feedWithDescriptionAndRules.push({ type: 'description', content: subplebbit.description });
} }
useEffect(() => { useEffect(() => {
@@ -166,7 +168,7 @@ const Catalog = () => {
}, [errorString, setNewErrorMessage]); }, [errorString, setNewErrorMessage]);
const { subscribed, subscribe, unsubscribe } = useSubscribe({subplebbitAddress: selectedAddress}); const { subscribed, subscribe, unsubscribe } = useSubscribe({ subplebbitAddress: selectedAddress });
useEffect(() => { useEffect(() => {
@@ -198,9 +200,8 @@ const Catalog = () => {
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))}
}; };
@@ -317,7 +318,7 @@ const Catalog = () => {
const signerPrivateKey = storedSigners[selectedThreadCidRef].privateKey; const signerPrivateKey = storedSigners[selectedThreadCidRef].privateKey;
try { try {
signer = await account?.plebbit.createSigner({type: 'ed25519', privateKey: signerPrivateKey}); signer = await account?.plebbit.createSigner({ type: 'ed25519', privateKey: signerPrivateKey });
} catch (error) { } catch (error) {
console.log(error); console.log(error);
} }
@@ -528,7 +529,7 @@ const Catalog = () => {
<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}
@@ -540,7 +541,7 @@ const Catalog = () => {
<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) => (
@@ -558,13 +559,13 @@ const Catalog = () => {
</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'
) )
) )
} }
@@ -589,17 +590,17 @@ const Catalog = () => {
<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}/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link> <Link to={`/p/${selectedAddress}/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>
@@ -628,12 +629,12 @@ const Catalog = () => {
<PostFormLink id="post-form-link" showPostFormLink={showPostFormLink} selectedStyle={selectedStyle} > <PostFormLink id="post-form-link" showPostFormLink={showPostFormLink} selectedStyle={selectedStyle} >
<div id="post-form-link-desktop"> <div id="post-form-link-desktop">
[ [
<Link to={`/p/${subplebbitAddress}/catalog/post`} onClick={useClickForm()} onMouseOver={(event) => event.target.style.cursor='pointer'}>Start a New Thread</Link> <Link to={`/p/${subplebbitAddress}/catalog/post`} onClick={useClickForm()} onMouseOver={(event) => event.target.style.cursor = 'pointer'}>Start a New Thread</Link>
] ]
</div> </div>
<div id="post-form-link-mobile"> <div id="post-form-link-mobile">
<span className="btn-wrap"> <span className="btn-wrap">
<Link to={`/p/${subplebbitAddress}/catalog/post`} onClick={useClickForm()} onMouseOver={(event) => event.target.style.cursor='pointer'}>Start a New Thread</Link> <Link to={`/p/${subplebbitAddress}/catalog/post`} onClick={useClickForm()} onMouseOver={(event) => event.target.style.cursor = 'pointer'}>Start a New Thread</Link>
</span> </span>
</div> </div>
</PostFormLink> </PostFormLink>
@@ -652,7 +653,7 @@ const Catalog = () => {
<tr data-type="Subject"> <tr data-type="Subject">
<td>Subject</td> <td>Subject</td>
<td> <td>
<input name="sub" type="text" tabIndex={3} ref={subjectRef}/> <input name="sub" type="text" tabIndex={3} ref={subjectRef} />
<input id="post-button" type="submit" value="Post" tabIndex={6} <input id="post-button" type="submit" value="Post" tabIndex={6}
onClick={handleSubmit} /> onClick={handleSubmit} />
</td> </td>
@@ -679,7 +680,7 @@ const Catalog = () => {
<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>
@@ -691,14 +692,21 @@ const Catalog = () => {
</span> </span>
<div className="return-button" id="return-button-desktop"> <div className="return-button" id="return-button-desktop">
[ [
<Link to={`/p/${selectedAddress}`} onClick={()=> {window.scrollTo(0, 0)}}>Return</Link> <Link to={`/p/${selectedAddress}`} onClick={() => { window.scrollTo(0, 0) }}>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>
{subplebbit.state === "succeeded" ? ( {subplebbit.state === "succeeded" ? (
<> <>
<span className="subscribe-button-desktop"> <span className="subscribe-button-desktop">
[ [
<span id="subscribe" style={{cursor: 'pointer'}}> <span id="subscribe" style={{ cursor: 'pointer' }}>
<span onClick={() => handleSubscribe()}> <span onClick={() => handleSubscribe()}>
{subscribed ? "Unsubscribe" : "Subscribe"} {subscribed ? "Unsubscribe" : "Subscribe"}
</span> </span>
@@ -712,52 +720,52 @@ const Catalog = () => {
</span> </span>
</> </>
) : ( ) : (
<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>
)} )}
<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/${selectedAddress}`} onClick={()=> {window.scrollTo(0, 0)}}>Return</Link> <Link to={`/p/${selectedAddress}`} onClick={() => { window.scrollTo(0, 0) }}>Return</Link>
</span> </span>
</div> </div>
<hr /> <hr />
</TopBar> </TopBar>
<Tooltip id="tooltip" className="tooltip" /> <Tooltip id="tooltip" className="tooltip" />
<Threads selectedStyle={selectedStyle}> <Threads selectedStyle={selectedStyle}>
{subplebbit?.state !== "failed" && subplebbit.state === "succeeded" ? ( {subplebbit?.state === "failed" ? (
<VirtuosoGrid null
style={{width: '100%', height: '100%'}} ) : (
data={feed} subplebbit.state === "succeeded" ? (
increaseViewportBy={{bottom: 600, top: 600}} <InfiniteScroll
itemContent={(index) => { pageStart={0}
const thread = feed[index]; loadMore={tryLoadMore}
const commentMediaInfo = getCommentMediaInfo(thread); hasMore={hasMore}
const linkCount = countLinks(thread); >
const fallbackImgUrl = "assets/filedeleted-res.gif"; {subplebbit.rules ? (
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('')}>
<BoardForm selectedStyle={selectedStyle} style={{all: 'unset'}}> <BoardForm selectedStyle={selectedStyle} style={{ all: 'unset' }}>
<div className='meta' title="(R)eplies / (L)ink Replies"> <div className='meta' title="(R)eplies / (L)ink Replies">
R:&nbsp;<b>0</b>&nbsp;/&nbsp;L:&nbsp;<b>0</b> R:&nbsp;<b>0</b>&nbsp;/&nbsp;L:&nbsp;<b>0</b>
<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" <span className="thread-icon sticky-icon" title="Sticky"
style={{ style={{
imageRendering: "pixelated",}} /> imageRendering: "pixelated",
}} />
<span className="thread-icon closed-icon" title="Closed" <span className="thread-icon closed-icon" title="Closed"
style={{ style={{
imageRendering: "pixelated",}} /> imageRendering: "pixelated",
}} />
</div> </div>
<PostMenu <PostMenu
style={{ display: isHoveringOnThread === "rules" ? 'inline-block' : 'none', style={{
display: isHoveringOnThread === "rules" ? '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" title="Post menu"
ref={el => { ref={el => {
threadMenuRefs.current["rules"] = el; threadMenuRefs.current["rules"] = el;
@@ -769,7 +777,7 @@ const Catalog = () => {
onClick={(event) => { onClick={(event) => {
event.stopPropagation(); event.stopPropagation();
const rect = threadMenuRefs.current["rules"].getBoundingClientRect(); const rect = threadMenuRefs.current["rules"].getBoundingClientRect();
setMenuPosition({top: rect.top + window.scrollY, left: rect.left}); setMenuPosition({ top: rect.top + window.scrollY, left: rect.left });
setOpenMenuCid(prevCid => (prevCid === "rules" ? null : "rules")); setOpenMenuCid(prevCid => (prevCid === "rules" ? null : "rules"));
}} }}
> >
@@ -778,11 +786,13 @@ const Catalog = () => {
</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={{
position: "absolute",
top: menuPosition.top + 7, top: menuPosition.top + 7,
left: menuPosition.left}}> left: menuPosition.left
}}>
<div className={`post-menu-thread post-menu-thread-${"rules"}`} <div className={`post-menu-thread post-menu-thread-${"rules"}`}
style={{ display: openMenuCid === "rules" ? 'block' : 'none' }} style={{ display: openMenuCid === "rules" ? 'block' : 'none' }}
> >
@@ -798,21 +808,19 @@ const Catalog = () => {
</PostMenuCatalog>, document.body </PostMenuCatalog>, document.body
)} )}
</BoardForm> </BoardForm>
<Link style={{all: "unset", cursor: "pointer"}} to={`/p/${selectedAddress}/rules`}> <Link style={{ all: "unset", cursor: "pointer" }} to={`/p/${selectedAddress}/rules`}>
<div className="teaser"> <div className="teaser">
<b>Rules</b> <b>Rules</b>
{": " + subplebbit.rules.map((rule, index) => `${index + 1}. ${rule}`).join(' ')} {": " + subplebbit.rules.map((rule, index) => `${index + 1}. ${rule}`).join(' ')}
</div> </div>
</Link> </Link>
</div> </div>
) ) : null}
} else if (item?.type === 'description') { {subplebbit.description ? (
return (
<>
<div className='thread' <div className='thread'
onMouseOver={() => setIsHoveringOnThread('description')} onMouseOver={() => setIsHoveringOnThread('description')}
onMouseLeave={() => setIsHoveringOnThread('')}> onMouseLeave={() => setIsHoveringOnThread('')}>
<Link style={{all: 'unset', cursor: 'pointer'}} to={`/p/${selectedAddress}/description`}> <Link style={{ all: 'unset', cursor: 'pointer' }} to={`/p/${selectedAddress}/description`}>
{subplebbit.suggested?.avatarUrl ? ( {subplebbit.suggested?.avatarUrl ? (
<img className='card' <img className='card'
src={subplebbit.suggested.avatarUrl} alt="board avatar" /> src={subplebbit.suggested.avatarUrl} alt="board avatar" />
@@ -822,30 +830,36 @@ const Catalog = () => {
<div className='thread-icons'> <div className='thread-icons'>
<span className="thread-icon sticky-icon" title="Sticky" <span className="thread-icon sticky-icon" title="Sticky"
style={{ style={{
imageRendering: "pixelated",}} /> imageRendering: "pixelated",
}} />
<span className="thread-icon closed-icon" title="Closed" <span className="thread-icon closed-icon" title="Closed"
style={{ style={{
imageRendering: "pixelated",}} /> imageRendering: "pixelated",
}} />
</div> </div>
) : null} ) : null}
<BoardForm selectedStyle={selectedStyle} style={{all: 'unset'}}> <BoardForm selectedStyle={selectedStyle} style={{ all: 'unset' }}>
<div className='meta' title="(R)eplies / (L)ink Replies"> <div className='meta' title="(R)eplies / (L)ink Replies">
R:&nbsp;<b>0</b>&nbsp;/&nbsp;L:&nbsp;<b>0</b> R:&nbsp;<b>0</b>&nbsp;/&nbsp;L:&nbsp;<b>0</b>
{subplebbit.suggested?.avatarUrl ? null : ( {subplebbit.suggested?.avatarUrl ? 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" <span className="thread-icon sticky-icon" title="Sticky"
style={{ style={{
imageRendering: "pixelated",}} /> imageRendering: "pixelated",
}} />
<span className="thread-icon closed-icon" title="Closed" <span className="thread-icon closed-icon" title="Closed"
style={{ style={{
imageRendering: "pixelated",}} /> imageRendering: "pixelated",
}} />
</div> </div>
)} )}
<PostMenu <PostMenu
style={{ display: isHoveringOnThread === "description" ? 'inline-block' : 'none', style={{
display: isHoveringOnThread === "description" ? '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" title="Post menu"
ref={el => { ref={el => {
threadMenuRefs.current["description"] = el; threadMenuRefs.current["description"] = el;
@@ -857,7 +871,7 @@ const Catalog = () => {
onClick={(event) => { onClick={(event) => {
event.stopPropagation(); event.stopPropagation();
const rect = threadMenuRefs.current["description"].getBoundingClientRect(); const rect = threadMenuRefs.current["description"].getBoundingClientRect();
setMenuPosition({top: rect.top + window.scrollY, left: rect.left}); setMenuPosition({ top: rect.top + window.scrollY, left: rect.left });
setOpenMenuCid(prevCid => (prevCid === "description" ? null : "description")); setOpenMenuCid(prevCid => (prevCid === "description" ? null : "description"));
}} }}
> >
@@ -866,11 +880,13 @@ const Catalog = () => {
</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={{
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-${"description"}`}
style={{ display: openMenuCid === "description" ? 'block' : 'none' }} style={{ display: openMenuCid === "description" ? 'block' : 'none' }}
> >
@@ -883,11 +899,11 @@ const Catalog = () => {
) : null} */} ) : null} */}
{subplebbit.suggested?.avatarUrl ? ( {subplebbit.suggested?.avatarUrl ? (
<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("description")}> <li onClick={() => handleOptionClick("description")}>
<a <a
href={`https://lens.google.com/uploadbyurl?url=${subplebbit.suggested.avatarUrl}`} href={`https://lens.google.com/uploadbyurl?url=${subplebbit.suggested.avatarUrl}`}
@@ -914,7 +930,7 @@ const Catalog = () => {
</PostMenuCatalog>, document.body </PostMenuCatalog>, document.body
)} )}
</BoardForm> </BoardForm>
<Link style={{all: "unset", cursor: "pointer"}} to={`/p/${selectedAddress}/description`} <Link style={{ all: "unset", cursor: "pointer" }} to={`/p/${selectedAddress}/description`}
onClick={() => setSelectedThread("description")}> onClick={() => setSelectedThread("description")}>
<div className="teaser"> <div className="teaser">
<b>Welcome to {subplebbit.title || subplebbit.address}</b> <b>Welcome to {subplebbit.title || subplebbit.address}</b>
@@ -922,15 +938,17 @@ const Catalog = () => {
</div> </div>
</Link> </Link>
</div> </div>
</> ) : null}
) {feed.map((thread, index) => {
} else { const commentMediaInfo = getCommentMediaInfo(thread);
const fallbackImgUrl = "assets/filedeleted-res.gif";
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/${selectedAddress}/c/${thread.cid}`} <Link style={{ all: "unset", cursor: "pointer" }} key={`link-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`}
onClick={() => setSelectedThread(thread.cid)}> onClick={() => setSelectedThread(thread.cid)}>
{commentMediaInfo?.type === "webpage" ? ( {commentMediaInfo?.type === "webpage" ? (
thread.thumbnailUrl ? ( thread.thumbnailUrl ? (
@@ -947,7 +965,8 @@ const Catalog = () => {
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}`}
@@ -973,17 +992,19 @@ const Catalog = () => {
{thread.pinned ? ( {thread.pinned ? (
<span key={`si-${index}`} className="thread-icon sticky-icon" title="Sticky" <span key={`si-${index}`} className="thread-icon sticky-icon" title="Sticky"
style={{ style={{
imageRendering: "pixelated",}} /> imageRendering: "pixelated",
}} />
) : null} ) : null}
{thread.locked ? ( {thread.locked ? (
<span key={`li-${index}`} className="thread-icon closed-icon" title="Closed" <span key={`li-${index}`} className="thread-icon closed-icon" title="Closed"
style={{ style={{
imageRendering: "pixelated",}} /> imageRendering: "pixelated",
}} />
) : null} ) : null}
</div> </div>
) : null} ) : null}
<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 ? (
@@ -998,23 +1019,27 @@ const Catalog = () => {
(commentMediaInfo.type === 'webpage' && (commentMediaInfo.type === 'webpage' &&
commentMediaInfo.thumbnail))) ? null : ( 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' }}>
{thread.pinned ? ( {thread.pinned ? (
<span key={`si-${index}`} className="thread-icon sticky-icon" title="Sticky" <span key={`si-${index}`} className="thread-icon sticky-icon" title="Sticky"
style={{ style={{
imageRendering: "pixelated",}} /> imageRendering: "pixelated",
}} />
) : null} ) : null}
{thread.locked ? ( {thread.locked ? (
<span key={`li-${index}`} className="thread-icon closed-icon" title="Closed" <span key={`li-${index}`} className="thread-icon closed-icon" title="Closed"
style={{ style={{
imageRendering: "pixelated",}} /> imageRendering: "pixelated",
}} />
) : null} ) : null}
</div> </div>
)} )}
<PostMenu <PostMenu
style={{ display: isHoveringOnThread === thread.cid ? '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'
}}
key={`pmb-${index}`} key={`pmb-${index}`}
title="Post menu" title="Post menu"
ref={el => { ref={el => {
@@ -1027,7 +1052,7 @@ const Catalog = () => {
onClick={(event) => { onClick={(event) => {
event.stopPropagation(); event.stopPropagation();
const rect = threadMenuRefs.current[thread.cid].getBoundingClientRect(); const rect = threadMenuRefs.current[thread.cid].getBoundingClientRect();
setMenuPosition({top: rect.top + window.scrollY, left: rect.left}); setMenuPosition({ top: rect.top + window.scrollY, left: rect.left });
setOpenMenuCid(prevCid => (prevCid === thread.cid ? null : thread.cid)); setOpenMenuCid(prevCid => (prevCid === thread.cid ? null : thread.cid));
}} }}
> >
@@ -1036,11 +1061,13 @@ const Catalog = () => {
</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={{
position: "absolute",
top: menuPosition.top + 7, top: menuPosition.top + 7,
left: menuPosition.left}}> 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' }}
> >
@@ -1087,11 +1114,11 @@ const Catalog = () => {
(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}`}
@@ -1119,7 +1146,7 @@ const Catalog = () => {
</PostMenuCatalog>, document.body </PostMenuCatalog>, document.body
)} )}
</BoardForm> </BoardForm>
<Link style={{all: "unset", cursor: "pointer"}} key={`link2-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} <Link style={{ all: "unset", cursor: "pointer" }} key={`link2-${index}`} to={`/p/${selectedAddress}/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>
@@ -1128,13 +1155,10 @@ const Catalog = () => {
</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={{
@@ -1149,7 +1173,7 @@ const Catalog = () => {
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>
@@ -1166,7 +1190,7 @@ const Catalog = () => {
<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> </span>
@@ -1183,13 +1207,13 @@ const Catalog = () => {
))} ))}
<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'
) )
) )
} }
@@ -1199,7 +1223,7 @@ const Catalog = () => {
<Link to={`/p/${selectedAddress}/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link> <Link to={`/p/${selectedAddress}/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>
@@ -1216,13 +1240,13 @@ const Catalog = () => {
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/Description.jsx
+78 -59
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 = () => {
@@ -150,7 +150,7 @@ const Description = () => {
<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) => (
@@ -168,13 +168,13 @@ const Description = () => {
</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'
) )
) )
} }
@@ -199,17 +199,17 @@ const Description = () => {
<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>
@@ -235,20 +235,30 @@ const Description = () => {
</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,8 +295,8 @@ 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>
@@ -296,7 +313,7 @@ const Description = () => {
<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}
@@ -311,7 +328,7 @@ const Description = () => {
<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>
@@ -320,18 +337,18 @@ const Description = () => {
<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
@@ -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,11 +369,13 @@ 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={{
position: "absolute",
top: menuPosition.top + 7, top: menuPosition.top + 7,
left: menuPosition.left}}> left: menuPosition.left
}}>
<div className={`post-menu-thread post-menu-thread-${subplebbit.pubsubTopic}`} <div className={`post-menu-thread post-menu-thread-${subplebbit.pubsubTopic}`}
style={{ display: openMenuCid === subplebbit.pubsubTopic ? 'block' : 'none' }} style={{ display: openMenuCid === subplebbit.pubsubTopic ? 'block' : 'none' }}
> >
@@ -390,19 +409,19 @@ const Description = () => {
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>
@@ -414,7 +433,7 @@ const Description = () => {
<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>
@@ -463,7 +482,7 @@ const Description = () => {
<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> </span>
@@ -480,13 +499,13 @@ const Description = () => {
))} ))}
<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'
) )
) )
} }
@@ -496,7 +515,7 @@ const Description = () => {
<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
+90 -75
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,9 +139,8 @@ 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))}
}; };
@@ -339,7 +338,7 @@ const SubscriptionsCatalog = () => {
<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}
@@ -351,7 +350,7 @@ const SubscriptionsCatalog = () => {
<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) => (
@@ -369,13 +368,13 @@ const SubscriptionsCatalog = () => {
</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'
) )
) )
} }
@@ -400,17 +399,17 @@ const SubscriptionsCatalog = () => {
<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>
@@ -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,23 +482,23 @@ 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 ? (
@@ -504,7 +515,8 @@ const SubscriptionsCatalog = () => {
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}`}
@@ -539,7 +551,7 @@ const SubscriptionsCatalog = () => {
)} )}
</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 ? (
@@ -549,9 +561,11 @@ const SubscriptionsCatalog = () => {
</> </>
) : null} ) : null}
<PostMenu <PostMenu
style={{ display: isHoveringOnThread === thread.cid ? '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'
}}
key={`pmb-${index}`} key={`pmb-${index}`}
title="Post menu" title="Post menu"
ref={el => { ref={el => {
@@ -564,7 +578,7 @@ const SubscriptionsCatalog = () => {
onClick={(event) => { onClick={(event) => {
event.stopPropagation(); event.stopPropagation();
const rect = threadMenuRefs.current[thread.cid].getBoundingClientRect(); const rect = threadMenuRefs.current[thread.cid].getBoundingClientRect();
setMenuPosition({top: rect.top + window.scrollY, left: rect.left}); setMenuPosition({ top: rect.top + window.scrollY, left: rect.left });
setOpenMenuCid(prevCid => (prevCid === thread.cid ? null : thread.cid)); setOpenMenuCid(prevCid => (prevCid === thread.cid ? null : thread.cid));
}} }}
> >
@@ -573,11 +587,13 @@ const SubscriptionsCatalog = () => {
</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={{
position: "absolute",
top: menuPosition.top + 7, top: menuPosition.top + 7,
left: menuPosition.left}}> 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' }}
> >
@@ -626,11 +642,11 @@ const SubscriptionsCatalog = () => {
(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}`}
@@ -658,7 +674,7 @@ const SubscriptionsCatalog = () => {
</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>
@@ -667,12 +683,11 @@ const SubscriptionsCatalog = () => {
</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>
@@ -717,13 +732,13 @@ const SubscriptionsCatalog = () => {
</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'
) )
) )
} }
@@ -733,7 +748,7 @@ const SubscriptionsCatalog = () => {
<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
+138 -96
View File
@@ -41,7 +41,7 @@ import useSuccess from '../../hooks/useSuccess';
import useAnonModeStore from '../../hooks/stores/useAnonModeStore'; import useAnonModeStore from '../../hooks/stores/useAnonModeStore';
import useGeneralStore from '../../hooks/stores/useGeneralStore'; import useGeneralStore from '../../hooks/stores/useGeneralStore';
import packageJson from '../../../package.json' import packageJson from '../../../package.json'
const {version} = packageJson const { version } = packageJson
const Thread = () => { const Thread = () => {
@@ -106,10 +106,10 @@ const Thread = () => {
const [isImageSearchOpen, setIsImageSearchOpen] = useState(false); const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
const [isModerator, setIsModerator] = useState(false); const [isModerator, setIsModerator] = 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 [outOfViewCid, setOutOfViewCid] = useState(null); const [outOfViewCid, setOutOfViewCid] = useState(null);
const [outOfViewPosition, setOutOfViewPosition] = useState({top: 0, left: 0}); const [outOfViewPosition, setOutOfViewPosition] = useState({ top: 0, left: 0 });
const [postOnHoverHeight, setPostOnHoverHeight] = useState(0); const [postOnHoverHeight, setPostOnHoverHeight] = useState(0);
const [executeAnonMode, setExecuteAnonMode] = useState(false); const [executeAnonMode, setExecuteAnonMode] = useState(false);
const [cidTracker, setCidTracker] = useState({}); const [cidTracker, setCidTracker] = useState({});
@@ -121,9 +121,9 @@ const Thread = () => {
useAnonMode(selectedThread, anonymousMode && executeAnonMode); useAnonMode(selectedThread, anonymousMode && executeAnonMode);
const comment = useComment({commentCid: selectedThread}); const comment = useComment({ commentCid: selectedThread });
const { subplebbitAddress, threadCid } = useParams(); const { subplebbitAddress, threadCid } = useParams();
const subplebbit = useSubplebbit({subplebbitAddress: comment.subplebbitAddress}); const subplebbit = useSubplebbit({ subplebbitAddress: comment.subplebbitAddress });
const selectedAddress = subplebbit.address; const selectedAddress = subplebbit.address;
const stateString = useStateString(comment); const stateString = useStateString(comment);
@@ -208,7 +208,7 @@ const Thread = () => {
useEffect(() => { useEffect(() => {
if ( comment.state === "failed" && selectedAddress === undefined) { if (comment.state === "failed" && selectedAddress === undefined) {
navigate('/404'); navigate('/404');
} }
}, [selectedAddress, navigate, comment.state]); }, [selectedAddress, navigate, comment.state]);
@@ -244,7 +244,7 @@ const Thread = () => {
}), [flattenedReplies, selectedThread]); }), [flattenedReplies, selectedThread]);
const { accountComments } = useAccountComments({filter}); const { accountComments } = useAccountComments({ filter });
const accountRepliesNotYetInCommentReplies = useMemo(() => { const accountRepliesNotYetInCommentReplies = useMemo(() => {
@@ -411,7 +411,7 @@ const Thread = () => {
const signerPrivateKey = storedSigners[selectedThread].privateKey; const signerPrivateKey = storedSigners[selectedThread].privateKey;
try { try {
signer = await account?.plebbit.createSigner({type: 'ed25519', privateKey: signerPrivateKey}); signer = await account?.plebbit.createSigner({ type: 'ed25519', privateKey: signerPrivateKey });
} catch (error) { } catch (error) {
console.log(error); console.log(error);
} }
@@ -628,7 +628,7 @@ const Thread = () => {
<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}
@@ -640,7 +640,7 @@ const Thread = () => {
<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) => (
@@ -658,13 +658,13 @@ const Thread = () => {
</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'
) )
) )
} }
@@ -689,17 +689,17 @@ const Thread = () => {
<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>
@@ -727,28 +727,28 @@ const Thread = () => {
<PostForm selectedStyle={selectedStyle} name="post" action="" method="post" enctype="multipart/form-data"> <PostForm selectedStyle={selectedStyle} name="post" action="" method="post" enctype="multipart/form-data">
<ReplyFormLink id="post-form-link" showReplyFormLink={showPostFormLink} selectedStyle={selectedStyle} > <ReplyFormLink id="post-form-link" showReplyFormLink={showPostFormLink} selectedStyle={selectedStyle} >
<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="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>
<div id="post-form-link-desktop"> <div id="post-form-link-desktop">
[ [
<Link to={`/p/${subplebbitAddress}/c/${selectedThread}/post`} onClick={() => {handleClickForm(); setSelectedShortCid(comment.shortCid)}} onMouseOver={(event) => event.target.style.cursor='pointer'}>Post a Reply</Link> <Link to={`/p/${subplebbitAddress}/c/${selectedThread}/post`} onClick={() => { handleClickForm(); setSelectedShortCid(comment.shortCid) }} onMouseOver={(event) => event.target.style.cursor = 'pointer'}>Post a Reply</Link>
] ]
</div> </div>
<div id="post-form-link-mobile"> <div id="post-form-link-mobile">
<span className="btn-wrap"> <span className="btn-wrap">
<Link to={`/p/${subplebbitAddress}/c/${selectedThread}/post`} onClick={() => {handleClickForm(); setSelectedShortCid(comment.shortCid)}} onMouseOver={(event) => event.target.style.cursor='pointer'}>Post a Reply</Link> <Link to={`/p/${subplebbitAddress}/c/${selectedThread}/post`} onClick={() => { handleClickForm(); setSelectedShortCid(comment.shortCid) }} onMouseOver={(event) => event.target.style.cursor = 'pointer'}>Post a Reply</Link>
</span> </span>
</div> </div>
</ReplyFormLink> </ReplyFormLink>
@@ -789,7 +789,7 @@ const Thread = () => {
<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>
@@ -804,15 +804,22 @@ const Thread = () => {
<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>
] ]
</span> </span>
<span className="return-button catalog-button" id="bottom-button-desktop"> <span className="return-button catalog-button" id="bottom-button-desktop-thread">
[ [
<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>
@@ -984,7 +991,7 @@ const Thread = () => {
&nbsp; &nbsp;
&nbsp; &nbsp;
<span className="poster-address address-desktop" <span className="poster-address address-desktop"
id="reply-button" style={{cursor: "pointer"}} id="reply-button" style={{ cursor: "pointer" }}
onClick={() => handleAddressClick(<VerifiedAuthor commentCid={comment.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>)}> onClick={() => handleAddressClick(<VerifiedAuthor commentCid={comment.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>)}>
(u/ (u/
<span key={`pa-${comment.cid}`} className="poster-address"> <span key={`pa-${comment.cid}`} className="poster-address">
@@ -996,7 +1003,7 @@ const Thread = () => {
&nbsp; &nbsp;
<span className="post-number post-number-desktop"> <span className="post-number post-number-desktop">
<span>c/</span> <span>c/</span>
<Link to={() => {}} id="reply-button" style={{ cursor: 'pointer' }} <Link to={() => { }} id="reply-button" style={{ cursor: 'pointer' }}
onClick={() => { onClick={() => {
let text = document.getSelection().toString(); let text = document.getSelection().toString();
text = text ? `>${text}` : text; text = text ? `>${text}` : text;
@@ -1008,22 +1015,27 @@ const Thread = () => {
setIsReplyOpen(true); setIsReplyOpen(true);
setSelectedShortCid(comment.shortCid); setSelectedShortCid(comment.shortCid);
setSelectedParentCid(comment.cid); setSelectedParentCid(comment.cid);
}}} title="Reply to this post">{comment.shortCid}</Link> }
}} title="Reply to this post">{comment.shortCid}</Link>
</span>&nbsp; </span>&nbsp;
{comment.pinned ? ( {comment.pinned ? (
<> <>
&nbsp; &nbsp;
<img src="assets/sticky.gif" alt="Sticky" title="Sticky" <img src="assets/sticky.gif" alt="Sticky" title="Sticky"
style={{marginBottom: "-1px", style={{
imageRendering: "pixelated",}} /> marginBottom: "-1px",
imageRendering: "pixelated",
}} />
</> </>
) : null} ) : null}
{comment.locked ? ( {comment.locked ? (
<> <>
&nbsp; &nbsp;
<img src="assets/closed.gif" alt="Closed" title="Closed" <img src="assets/closed.gif" alt="Closed" title="Closed"
style={{marginBottom: "-1px", style={{
imageRendering: "pixelated",}} /> marginBottom: "-1px",
imageRendering: "pixelated",
}} />
</> </>
) : null} ) : null}
<PostMenu <PostMenu
@@ -1038,7 +1050,7 @@ const Thread = () => {
onClick={(event) => { onClick={(event) => {
event.stopPropagation(); event.stopPropagation();
const rect = threadMenuRefs.current[comment.cid].getBoundingClientRect(); const rect = threadMenuRefs.current[comment.cid].getBoundingClientRect();
setMenuPosition({top: rect.top + window.scrollY, left: rect.left}); setMenuPosition({ top: rect.top + window.scrollY, left: rect.left });
setOpenMenuCid(prevCid => (prevCid === comment.cid ? null : comment.cid)); setOpenMenuCid(prevCid => (prevCid === comment.cid ? null : comment.cid));
}} }}
> >
@@ -1046,11 +1058,13 @@ const Thread = () => {
</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={{
position: "absolute",
top: menuPosition.top + 7, top: menuPosition.top + 7,
left: menuPosition.left}}> left: menuPosition.left
}}>
<div className={`post-menu-thread post-menu-thread-${comment.cid}`} <div className={`post-menu-thread post-menu-thread-${comment.cid}`}
style={{ display: openMenuCid === comment.cid ? 'block' : 'none' }} style={{ display: openMenuCid === comment.cid ? 'block' : 'none' }}
> >
@@ -1097,11 +1111,11 @@ const Thread = () => {
(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(comment.cid)}> <li onClick={() => handleOptionClick(comment.cid)}>
<a <a
href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`} href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
@@ -1132,12 +1146,12 @@ const Thread = () => {
{comment.replies?.pages?.topAll.comments {comment.replies?.pages?.topAll.comments
.sort((a, b) => a.timestamp - b.timestamp) .sort((a, b) => a.timestamp - b.timestamp)
.map((reply, index) => ( .map((reply, index) => (
<div key={`div-${index}`} style={{display: 'inline-block'}} <div key={`div-${index}`} style={{ display: 'inline-block' }}
ref={el => { ref={el => {
backlinkRefs.current[reply.cid] = el; backlinkRefs.current[reply.cid] = el;
}}> }}>
<Link key={`ql-${index}`} <Link key={`ql-${index}`}
to={() => {}} className="quote-link" to={() => { }} className="quote-link"
onClick={(event) => handleQuoteClick(reply, null, event)} onClick={(event) => handleQuoteClick(reply, null, event)}
onMouseOver={(event) => { onMouseOver={(event) => {
event.stopPropagation(); event.stopPropagation();
@@ -1187,10 +1201,10 @@ const Thread = () => {
<Post content={comment.content} comment={comment} key={`post-${comment.cid}`} /> <Post content={comment.content} comment={comment} key={`post-${comment.cid}`} />
<EditLabel key={`edit-label-thread-${index}`} <EditLabel key={`edit-label-thread-${index}`}
commentCid={comment.cid} commentCid={comment.cid}
className="ttl"/> className="ttl" />
<StateLabel key={`state-label-thread-${index}`} <StateLabel key={`state-label-thread-${index}`}
commentIndex={comment.index} commentIndex={comment.index}
className="ttl ellipsis"/> className="ttl ellipsis" />
</blockquote> </blockquote>
</div> </div>
</div> </div>
@@ -1237,7 +1251,7 @@ const Thread = () => {
Anonymous</span>} Anonymous</span>}
&nbsp; &nbsp;
<span key={`pa-${index}`} className="poster-address address-desktop" <span key={`pa-${index}`} className="poster-address address-desktop"
id="reply-button" style={{cursor: "pointer"}} id="reply-button" style={{ cursor: "pointer" }}
onClick={() => handleAddressClick(reply.author?.shortAddress)} onClick={() => handleAddressClick(reply.author?.shortAddress)}
> >
(u/ (u/
@@ -1299,7 +1313,7 @@ const Thread = () => {
onClick={(event) => { onClick={(event) => {
event.stopPropagation(); event.stopPropagation();
const rect = replyMenuRefs.current[reply.cid].getBoundingClientRect(); const rect = replyMenuRefs.current[reply.cid].getBoundingClientRect();
setMenuPosition({top: rect.top + window.scrollY, left: rect.left}); setMenuPosition({ top: rect.top + window.scrollY, left: rect.left });
setOpenMenuCid(prevCid => (prevCid === reply.cid ? null : reply.cid)); setOpenMenuCid(prevCid => (prevCid === reply.cid ? null : reply.cid));
}} }}
> >
@@ -1307,11 +1321,13 @@ const Thread = () => {
</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={{
position: "absolute",
top: menuPosition.top + 7, top: menuPosition.top + 7,
left: menuPosition.left}}> left: menuPosition.left
}}>
<div className={`post-menu-reply post-menu-reply-${reply.cid}`} <div className={`post-menu-reply post-menu-reply-${reply.cid}`}
style={{ display: openMenuCid === reply.cid ? 'block' : 'none' }} style={{ display: openMenuCid === reply.cid ? 'block' : 'none' }}
> >
@@ -1358,11 +1374,11 @@ const Thread = () => {
(replyMediaInfo.type === 'webpage' && (replyMediaInfo.type === 'webpage' &&
replyMediaInfo.thumbnail))) ? ( replyMediaInfo.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(reply.cid)}> <li onClick={() => handleOptionClick(reply.cid)}>
<a <a
href={`https://lens.google.com/uploadbyurl?url=${replyMediaInfo.url}`} href={`https://lens.google.com/uploadbyurl?url=${replyMediaInfo.url}`}
@@ -1393,12 +1409,12 @@ const Thread = () => {
{reply.replies?.pages?.topAll.comments {reply.replies?.pages?.topAll.comments
.sort((a, b) => a.timestamp - b.timestamp) .sort((a, b) => a.timestamp - b.timestamp)
.map((reply, index) => ( .map((reply, index) => (
<div key={`div-${index}`} style={{display: 'inline-block'}} <div key={`div-${index}`} style={{ display: 'inline-block' }}
ref={el => { ref={el => {
backlinkRefs.current[reply.cid] = el; backlinkRefs.current[reply.cid] = el;
}}> }}>
<Link key={`ql-${index}`} <Link key={`ql-${index}`}
to={() => {}} className="quote-link" to={() => { }} className="quote-link"
onClick={(event) => handleQuoteClick(reply, null, event)} onClick={(event) => handleQuoteClick(reply, null, event)}
onMouseOver={(event) => { onMouseOver={(event) => {
event.stopPropagation(); event.stopPropagation();
@@ -1526,7 +1542,7 @@ const Thread = () => {
</div> </div>
) : null} ) : null}
<blockquote key={`pm-${index}`} className="post-message"> <blockquote key={`pm-${index}`} className="post-message">
<Link to={() => {}} key={`r-pm-${index}`} className="quotelink" <Link to={() => { }} key={`r-pm-${index}`} className="quotelink"
ref={el => { ref={el => {
quoteRefs.current[reply.cid] = el; quoteRefs.current[reply.cid] = el;
}} }}
@@ -1613,7 +1629,8 @@ const Thread = () => {
}); });
} }
}) })
}} }
}
} }
postQuoteOnLeave={() => { postQuoteOnLeave={() => {
removeHighlight(); removeHighlight();
@@ -1622,10 +1639,10 @@ const Thread = () => {
/> />
<EditLabel key={`edit-label-reply-${index}`} <EditLabel key={`edit-label-reply-${index}`}
commentCid={reply.cid} commentCid={reply.cid}
className="ttl"/> className="ttl" />
<StateLabel key={`state-label-reply-${index}`} <StateLabel key={`state-label-reply-${index}`}
commentIndex={reply.index} commentIndex={reply.index}
className="ttl ellipsis"/> className="ttl ellipsis" />
</blockquote> </blockquote>
</div> </div>
</div> </div>
@@ -1656,7 +1673,7 @@ const Thread = () => {
Anonymous</span>} Anonymous</span>}
&nbsp; &nbsp;
<span key={`mob-pa-${comment.cid}`} className="poster-address-mobile address-mobile" <span key={`mob-pa-${comment.cid}`} className="poster-address-mobile address-mobile"
id="reply-button" style={{cursor: "pointer"}} id="reply-button" style={{ cursor: "pointer" }}
onClick={() => handleAddressClick(<VerifiedAuthor commentCid={comment.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>)} onClick={() => handleAddressClick(<VerifiedAuthor commentCid={comment.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>)}
> >
(u/ (u/
@@ -1665,16 +1682,20 @@ const Thread = () => {
</span> </span>
)&nbsp; )&nbsp;
</span> </span>
<span key={`ti-mob-${index}`} className="thread-icons-mobile" style={{float: "right", marginRight: "18px"}}> <span key={`ti-mob-${index}`} className="thread-icons-mobile" style={{ float: "right", marginRight: "18px" }}>
{comment.pinned ? ( {comment.pinned ? (
<img src="assets/sticky.gif" alt="Sticky" title="Sticky" <img src="assets/sticky.gif" alt="Sticky" title="Sticky"
style={{marginTop: "-1px", marginRight: "2px", style={{
imageRendering: "pixelated",}} /> marginTop: "-1px", marginRight: "2px",
imageRendering: "pixelated",
}} />
) : null} ) : null}
{comment.locked ? ( {comment.locked ? (
<img src="assets/closed.gif" alt="Closed" title="Closed" <img src="assets/closed.gif" alt="Closed" title="Closed"
style={{marginTop: "-1px", marginRight: "2px", style={{
imageRendering: "pixelated",}} /> marginTop: "-1px", marginRight: "2px",
imageRendering: "pixelated",
}} />
) : null} ) : null}
</span> </span>
<br key={`mob-br1-${comment.cid}`} /> <br key={`mob-br1-${comment.cid}`} />
@@ -1696,7 +1717,7 @@ const Thread = () => {
{getDate(comment?.timestamp)} {getDate(comment?.timestamp)}
&nbsp; &nbsp;
<span key={`mob-no-${comment.cid}`}>c/</span> <span key={`mob-no-${comment.cid}`}>c/</span>
<Link to={() => {}} id="reply-button" key={`mob-no2-${comment.cid}`} title="Reply to this post" <Link to={() => { }} id="reply-button" key={`mob-no2-${comment.cid}`} title="Reply to this post"
onClick={() => { onClick={() => {
let text = document.getSelection().toString(); let text = document.getSelection().toString();
text = text ? `>${text}` : text; text = text ? `>${text}` : text;
@@ -1708,7 +1729,8 @@ const Thread = () => {
setIsReplyOpen(true); setIsReplyOpen(true);
setSelectedShortCid(comment.shortCid); setSelectedShortCid(comment.shortCid);
setSelectedParentCid(comment.cid); setSelectedParentCid(comment.cid);
}}}>{comment.shortCid}</Link> }
}}>{comment.shortCid}</Link>
</span> </span>
</div> </div>
{comment.link ? ( {comment.link ? (
@@ -1721,7 +1743,7 @@ const Thread = () => {
<iframe <iframe
key={`mob-fti-${index}`} key={`mob-fti-${index}`}
src={commentMediaInfo.embedUrl} src={commentMediaInfo.embedUrl}
style={{border: "none", height: "250px"}} style={{ border: "none", height: "250px" }}
title="Embedded content" title="Embedded content"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen /> allowFullScreen />
@@ -1781,6 +1803,24 @@ const Thread = () => {
controls controls
style={{ cursor: 'pointer' }} style={{ cursor: 'pointer' }}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
) : (
<video
key={`fti-${index}`}
src={commentMediaInfo.url}
alt="thumbnail"
onClick={() => { handleThumbnailClick(index, true) }}
style={{ cursor: "pointer" }}
id="video-thumbnail-mobile"
onError={(e) => e.target.src = fallbackImgUrl}
/>
)}
{commentMediaInfo?.type === "video" || "iframe" ? (
isMobileThumbnailClicked[index] ? (
<div style={{ textAlign: "center", marginTop: "15px", marginBottom: "15px" }}>
<span className='button-mobile' style={{ float: "none", cursor: "pointer" }}
onClick={() => { handleThumbnailClick(index, true) }}
>Close</span>
</div>
) : ( ) : (
<video <video
key={`fti-${index}`} key={`fti-${index}`}
@@ -1820,10 +1860,10 @@ const Thread = () => {
<Post content={comment.content} comment={comment} key={`post-mobile-${comment.cid}`} /> <Post content={comment.content} comment={comment} key={`post-mobile-${comment.cid}`} />
<EditLabel key={`edit-label-thread-mob-${index}`} <EditLabel key={`edit-label-thread-mob-${index}`}
commentCid={comment.cid} commentCid={comment.cid}
className="ttl"/> className="ttl" />
<StateLabel key={`state-label-thread-mob-${index}`} <StateLabel key={`state-label-thread-mob-${index}`}
commentIndex={comment.index} commentIndex={comment.index}
className="ttl ellipsis"/> className="ttl ellipsis" />
</> </>
) : null} ) : null}
</blockquote> </blockquote>
@@ -1860,7 +1900,7 @@ const Thread = () => {
Anonymous</span>} Anonymous</span>}
&nbsp; &nbsp;
<span key={`mob-pa-${index}`} className="poster-address-mobile address-mobile" <span key={`mob-pa-${index}`} className="poster-address-mobile address-mobile"
id="reply-button" style={{cursor: "pointer"}} id="reply-button" style={{ cursor: "pointer" }}
onClick={() => handleAddressClick(reply.author?.shortAddress)} onClick={() => handleAddressClick(reply.author?.shortAddress)}
> >
(u/ (u/
@@ -1901,7 +1941,8 @@ const Thread = () => {
setIsReplyOpen(true); setIsReplyOpen(true);
setSelectedShortCid(reply.shortCid); setSelectedShortCid(reply.shortCid);
setSelectedParentCid(reply.cid); setSelectedParentCid(reply.cid);
}}} title="Reply to this post">{reply.shortCid}</Link> }
}} title="Reply to this post">{reply.shortCid}</Link>
) : ( ) : (
<PendingLabel key="pending-mob" commentIndex={reply.index} /> <PendingLabel key="pending-mob" commentIndex={reply.index} />
)} )}
@@ -1917,7 +1958,7 @@ const Thread = () => {
<img key={`mob-img-${reply.cid}`} <img key={`mob-img-${reply.cid}`}
src={replyMediaInfo.thumbnail} alt={replyMediaInfo.type} src={replyMediaInfo.thumbnail} alt={replyMediaInfo.type}
onClick={handleImageClick} onClick={handleImageClick}
style={{cursor: "pointer"}} style={{ cursor: "pointer" }}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
) : null} ) : null}
<div key={`mob-fi-${reply.cid}`} className="file-info-mobile">{replyMediaInfo.type}</div> <div key={`mob-fi-${reply.cid}`} className="file-info-mobile">{replyMediaInfo.type}</div>
@@ -1929,7 +1970,7 @@ const Thread = () => {
<img key={`mob-img-${reply.cid}`} <img key={`mob-img-${reply.cid}`}
src={replyMediaInfo.url} alt={replyMediaInfo.type} src={replyMediaInfo.url} alt={replyMediaInfo.type}
onClick={handleImageClick} onClick={handleImageClick}
style={{cursor: "pointer"}} style={{ cursor: "pointer" }}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
<div key={`mob-fi-${reply.cid}`} className="file-info-mobile">{replyMediaInfo.type}</div> <div key={`mob-fi-${reply.cid}`} className="file-info-mobile">{replyMediaInfo.type}</div>
</span> </span>
@@ -1954,7 +1995,7 @@ const Thread = () => {
</div> </div>
) : null} ) : null}
<blockquote key={`mob-pm-${index}`} className="post-message-mobile"> <blockquote key={`mob-pm-${index}`} className="post-message-mobile">
<span style={{cursor: 'pointer'}} key={`mob-ql-${index}`} className="quotelink-mobile" <span style={{ cursor: 'pointer' }} key={`mob-ql-${index}`} className="quotelink-mobile"
ref={el => { ref={el => {
quoteRefsMobile.current[reply.cid] = el; quoteRefsMobile.current[reply.cid] = el;
}} }}
@@ -2040,7 +2081,8 @@ const Thread = () => {
}); });
} }
}) })
}} }
}
} }
postQuoteOnLeave={() => { postQuoteOnLeave={() => {
removeHighlight(); removeHighlight();
@@ -2049,21 +2091,21 @@ const Thread = () => {
/> />
<EditLabel key={`edit-label-reply-mob-${index}`} <EditLabel key={`edit-label-reply-mob-${index}`}
commentCid={reply.cid} commentCid={reply.cid}
className="ttl"/> className="ttl" />
<StateLabel key={`state-label-reply-mob-${index}`} <StateLabel key={`state-label-reply-mob-${index}`}
commentIndex={reply.index} commentIndex={reply.index}
className="ttl ellipsis"/> className="ttl ellipsis" />
</blockquote> </blockquote>
{reply.replyCount > 0 ? ( {reply.replyCount > 0 ? (
<div key={`back-mob-${index}`} className='backlink backlink-mobile'> <div key={`back-mob-${index}`} className='backlink backlink-mobile'>
{reply.replies?.pages?.topAll.comments {reply.replies?.pages?.topAll.comments
.sort((a, b) => a.timestamp - b.timestamp) .sort((a, b) => a.timestamp - b.timestamp)
.map((reply, index) => ( .map((reply, index) => (
<div key={`div-back${index}`} style={{display: 'inline-block'}} <div key={`div-back${index}`} style={{ display: 'inline-block' }}
ref={el => { ref={el => {
backlinkRefsMobile.current[reply.cid] = el; backlinkRefsMobile.current[reply.cid] = el;
}}> }}>
<span style={{cursor: 'pointer'}} key={`ql-${index}`} className="quote-link" <span style={{ cursor: 'pointer' }} key={`ql-${index}`} className="quote-link"
onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)} onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)}
onMouseOver={(event) => { onMouseOver={(event) => {
event.stopPropagation(); event.stopPropagation();
@@ -2130,13 +2172,13 @@ const Thread = () => {
<span className="bottom-bar-top"> <span className="bottom-bar-top">
[ [
<span id="button" onClick={() => window.scrollTo(0, 0)} <span id="button" onClick={() => window.scrollTo(0, 0)}
onMouseOver={(event) => event.target.style.cursor='pointer'} onMouseOver={(event) => event.target.style.cursor = 'pointer'}
onTouchStart={() => window.scrollTo(0, 0)}>Top</span> onTouchStart={() => window.scrollTo(0, 0)}>Top</span>
] ]
</span> </span>
<span className="quickreply-button"> <span className="quickreply-button">
[ [
<span id="button" onClick={() => {setIsReplyOpen(true); setSelectedParentCid(comment.cid); setSelectedShortCid(comment.shortCid);}} onMouseOver={(event) => event.target.style.cursor='pointer'}>Post a Reply</span> <span id="button" onClick={() => { setIsReplyOpen(true); setSelectedParentCid(comment.cid); setSelectedShortCid(comment.shortCid); }} onMouseOver={(event) => event.target.style.cursor = 'pointer'}>Post a Reply</span>
] ]
</span> </span>
{comment ? ( {comment ? (
@@ -2161,11 +2203,11 @@ const Thread = () => {
</BottomBar> </BottomBar>
{comment.replyCount > 2 ? ( {comment.replyCount > 2 ? (
<div id="bottombar-mobile"> <div id="bottombar-mobile">
<hr style={{marginTop: "30px"}} /> <hr style={{ marginTop: "30px" }} />
<TopBar selectedStyle={selectedStyle} style={{marginTop: "-5px"}}> <TopBar selectedStyle={selectedStyle} style={{ marginTop: "-5px" }}>
<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>
@@ -2197,7 +2239,7 @@ const Thread = () => {
<ReplyFormLink id="post-form-link" selectedStyle={selectedStyle} > <ReplyFormLink id="post-form-link" selectedStyle={selectedStyle} >
<div id="post-form-link-mobile" className="post-button-mobile"> <div id="post-form-link-mobile" className="post-button-mobile">
<span className="btn-wrap"> <span className="btn-wrap">
<span style={{cursor: 'pointer'}} onClick={() => {setIsReplyOpen(true); setSelectedParentCid(comment.cid); setSelectedShortCid(comment.shortCid);}} onMouseOver={(event) => event.target.style.cursor='pointer'}>Post a Reply</span> <span style={{ cursor: 'pointer' }} onClick={() => { setIsReplyOpen(true); setSelectedParentCid(comment.cid); setSelectedShortCid(comment.shortCid); }} onMouseOver={(event) => event.target.style.cursor = 'pointer'}>Post a Reply</span>
</span> </span>
</div> </div>
<div id="btns-container"> <div id="btns-container">
@@ -2206,7 +2248,7 @@ const Thread = () => {
<Link to={`/p/${selectedAddress}`}>Return</Link> <Link to={`/p/${selectedAddress}`}>Return</Link>
</span> </span>
</div> </div>
<div id="catalog-button-mobile" style={{paddingRight: "2px"}}> <div id="catalog-button-mobile" style={{ paddingRight: "2px" }}>
<span className="btn-wrap"> <span className="btn-wrap">
<Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link> <Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link>
</span> </span>
@@ -2214,9 +2256,9 @@ const Thread = () => {
<span className="bottom-bar-top"> <span className="bottom-bar-top">
<span className="btn-wrap"> <span className="btn-wrap">
<span onClick={() => window.scrollTo(0, 0)} <span onClick={() => window.scrollTo(0, 0)}
onMouseOver={(event) => event.target.style.cursor='pointer'} onMouseOver={(event) => event.target.style.cursor = 'pointer'}
onTouchStart={() => window.scrollTo(0, 0)} onTouchStart={() => window.scrollTo(0, 0)}
style={{cursor: 'pointer', marginRight: "10px", marginLeft: "10px"}} style={{ cursor: 'pointer', marginRight: "10px", marginLeft: "10px" }}
>Top</span> >Top</span>
</span> </span>
</span> </span>
@@ -2258,7 +2300,7 @@ const Thread = () => {
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>
@@ -2275,7 +2317,7 @@ const Thread = () => {
<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> </span>
@@ -2292,13 +2334,13 @@ const Thread = () => {
))} ))}
<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'
) )
) )
} }
@@ -2308,7 +2350,7 @@ const Thread = () => {
<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>
@@ -2325,13 +2367,13 @@ const Thread = () => {
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>
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: