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
+64 -49
View File
@@ -1,31 +1,31 @@
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';
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 { version } = packageJson
@@ -74,7 +74,7 @@ const AllCatalog = () => {
const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false); const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);
const addresses = defaultSubplebbits.map(subplebbit => subplebbit.address); const addresses = defaultSubplebbits.map(subplebbit => subplebbit.address);
const { feed, 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));
@@ -143,8 +143,7 @@ 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))}
}; };
@@ -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) => (
@@ -379,7 +378,7 @@ const AllCatalog = () => {
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'
) )
) )
} }
@@ -404,10 +403,10 @@ 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>
@@ -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,11 +450,23 @@ 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
) : ( ) : (
@@ -467,13 +478,13 @@ 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];
@@ -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}`}
@@ -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 => {
@@ -571,9 +585,11 @@ const AllCatalog = () => {
<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' }}
> >
@@ -663,12 +679,11 @@ 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={{
@@ -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) => (
@@ -721,7 +736,7 @@ const AllCatalog = () => {
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'
) )
) )
} }
src/components/views/Catalog.jsx
+87 -63
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';
@@ -87,10 +88,11 @@ const Catalog = () => {
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 = [];
@@ -199,8 +201,7 @@ 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))}
}; };
@@ -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) => (
@@ -564,7 +565,7 @@ const Catalog = () => {
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,10 +590,10 @@ 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>
@@ -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>
@@ -694,6 +695,13 @@ const Catalog = () => {
<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">
@@ -725,20 +733,16 @@ const Catalog = () => {
</TopBar> </TopBar>
<Tooltip id="tooltip" className="tooltip" /> <Tooltip id="tooltip" className="tooltip" />
<Threads selectedStyle={selectedStyle}> <Threads selectedStyle={selectedStyle}>
{subplebbit?.state !== "failed" && subplebbit.state === "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('')}>
@@ -749,15 +753,19 @@ const Catalog = () => {
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;
@@ -780,9 +788,11 @@ const Catalog = () => {
<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' }}
> >
@@ -805,10 +815,8 @@ const Catalog = () => {
</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('')}>
@@ -822,10 +830,12 @@ 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' }}>
@@ -836,16 +846,20 @@ const Catalog = () => {
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;
@@ -868,9 +882,11 @@ const Catalog = () => {
<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' }}
> >
@@ -922,9 +938,11 @@ 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) }}
@@ -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,12 +992,14 @@ 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}
@@ -1002,19 +1023,23 @@ 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>
)} )}
<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 => {
@@ -1038,9 +1063,11 @@ const Catalog = () => {
<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' }}
> >
@@ -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>
@@ -1189,7 +1213,7 @@ const Catalog = () => {
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'
) )
) )
} }
src/components/views/Description.jsx
+43 -24
View File
@@ -1,24 +1,24 @@
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';
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 { version } = packageJson
@@ -45,7 +45,7 @@ const Description = () => {
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 });
@@ -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) => (
@@ -174,7 +174,7 @@ const Description = () => {
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,10 +199,10 @@ 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>
@@ -241,6 +241,16 @@ const Description = () => {
<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>
@@ -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>
@@ -354,9 +371,11 @@ const Description = () => {
<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' }}
> >
@@ -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>
@@ -486,7 +505,7 @@ const Description = () => {
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'
) )
) )
} }
src/components/views/SubscriptionsCatalog.jsx
+65 -50
View File
@@ -1,31 +1,31 @@
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';
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 { version } = packageJson
@@ -72,7 +72,7 @@ const SubscriptionsCatalog = () => {
const [moderatorPermissions, setModeratorPermissions] = useState({}); const [moderatorPermissions, setModeratorPermissions] = useState({});
const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false); const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);
const { feed, 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' });
@@ -140,8 +140,7 @@ 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))}
}; };
@@ -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) => (
@@ -375,7 +374,7 @@ const SubscriptionsCatalog = () => {
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,10 +399,10 @@ 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>
@@ -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,11 +454,23 @@ 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
) : ( ) : (
@@ -471,13 +482,13 @@ 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];
@@ -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}`}
@@ -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 => {
@@ -575,9 +589,11 @@ const SubscriptionsCatalog = () => {
<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' }}
> >
@@ -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>
@@ -723,7 +738,7 @@ const SubscriptionsCatalog = () => {
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'
) )
) )
} }
src/components/views/Thread.jsx
+69 -27
View File
@@ -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) => (
@@ -664,7 +664,7 @@ const Thread = () => {
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,10 +689,10 @@ 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>
@@ -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,12 +804,19 @@ 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'}
@@ -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
@@ -1048,9 +1060,11 @@ const Thread = () => {
<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' }}
> >
@@ -1309,9 +1323,11 @@ const Thread = () => {
<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' }}
> >
@@ -1613,7 +1629,8 @@ const Thread = () => {
}); });
} }
}) })
}} }
}
} }
postQuoteOnLeave={() => { postQuoteOnLeave={() => {
removeHighlight(); removeHighlight();
@@ -1668,13 +1685,17 @@ const Thread = () => {
<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}`} />
@@ -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 ? (
@@ -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}`}
@@ -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} />
)} )}
@@ -2040,7 +2081,8 @@ const Thread = () => {
}); });
} }
}) })
}} }
}
} }
postQuoteOnLeave={() => { postQuoteOnLeave={() => {
removeHighlight(); removeHighlight();
@@ -2165,7 +2207,7 @@ const Thread = () => {
<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>
@@ -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>
@@ -2298,7 +2340,7 @@ const Thread = () => {
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'
) )
) )
} }
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: