mirror of
https://github.com/bitsocialnet/5chan.git
synced 2026-08-03 07:41:04 +02:00
add functional subscriptions board, fixes
This commit is contained in:
Tom
+6
-2
@@ -7,12 +7,13 @@ import 'react-toastify/dist/ReactToastify.css';
|
||||
import useGeneralStore from './hooks/stores/useGeneralStore';
|
||||
import { GlobalStyle } from './components/styled/GlobalStyle.styled';
|
||||
import { Toast } from './components/styled/Toast.styled';
|
||||
import Home from './components/views/Home';
|
||||
import Board from './components/views/Board';
|
||||
import Thread from './components/views/Thread';
|
||||
import Catalog from './components/views/Catalog';
|
||||
import Home from './components/views/Home';
|
||||
import NotFound from './components/views/NotFound';
|
||||
import Pending from './components/views/Pending';
|
||||
import Subscriptions from './components/views/Subscriptions';
|
||||
import Thread from './components/views/Thread';
|
||||
import CaptchaModal from './components/CaptchaModal';
|
||||
import { importAll } from './components/ImageBanner';
|
||||
import preloadImages from './utils/preloadImages';
|
||||
@@ -161,6 +162,9 @@ export default function App() {
|
||||
<Route path={`/profile/c/:index`} element={<Pending setBodyStyle={setBodyStyle} /> }>
|
||||
<Route path='settings' element={<Pending />} />
|
||||
</Route>
|
||||
<Route path={`/profile/p/subscriptions`} element={<Subscriptions setBodyStyle={setBodyStyle} /> }>
|
||||
<Route path='settings' element={<Subscriptions />} />
|
||||
</Route>
|
||||
<Route path='*' element={<NotFound setBodyStyle={setBodyStyle} />} />
|
||||
</Routes>
|
||||
<Toast />
|
||||
|
||||
@@ -3,7 +3,7 @@ import { Helmet } from 'react-helmet-async';
|
||||
import { Link, useNavigate, useParams } from 'react-router-dom';
|
||||
import { Tooltip } from 'react-tooltip';
|
||||
import { Virtuoso } from 'react-virtuoso';
|
||||
import { useAccount, useAccountComments, useFeed, usePublishComment } from '@plebbit/plebbit-react-hooks';
|
||||
import { useAccount, useAccountComments, useFeed, usePublishComment, useSubscribe } from '@plebbit/plebbit-react-hooks';
|
||||
import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils'
|
||||
import { debounce } from 'lodash';
|
||||
import useGeneralStore from '../../hooks/stores/useGeneralStore';
|
||||
@@ -23,6 +23,7 @@ import handleQuoteClick from '../../utils/handleQuoteClick';
|
||||
import handleStyleChange from '../../utils/handleStyleChange';
|
||||
import useClickForm from '../../hooks/useClickForm';
|
||||
import useError from '../../hooks/useError';
|
||||
import useSuccess from '../../hooks/useSuccess';
|
||||
import packageJson from '../../../package.json'
|
||||
const {version} = packageJson
|
||||
|
||||
@@ -47,6 +48,8 @@ const Board = () => {
|
||||
showPostFormLink,
|
||||
} = useGeneralStore(state => state);
|
||||
|
||||
const account = useAccount();
|
||||
|
||||
const nameRef = useRef();
|
||||
const subjectRef = useRef();
|
||||
const commentRef = useRef();
|
||||
@@ -60,10 +63,12 @@ const Board = () => {
|
||||
const [selectedFeed, setSelectedFeed] = useState(feed);
|
||||
const { subplebbitAddress } = useParams();
|
||||
|
||||
const [errorMessage, setErrorMessage] = useState(null);
|
||||
useError(errorMessage, [errorMessage]);
|
||||
const { subscribed, subscribe, unsubscribe } = useSubscribe({subplebbitAddress: selectedAddress});
|
||||
|
||||
const account = useAccount();
|
||||
const [errorMessage, setErrorMessage] = useState(null);
|
||||
const [successMessage, setSuccessMessage] = useState(null);
|
||||
useError(errorMessage, [errorMessage]);
|
||||
useSuccess(successMessage, [successMessage]);
|
||||
|
||||
const [triggerPublishComment, setTriggerPublishComment] = useState(false);
|
||||
|
||||
@@ -304,12 +309,33 @@ const Board = () => {
|
||||
// mobile navbar board select functionality
|
||||
const handleSelectChange = (event) => {
|
||||
const selected = event.target.value;
|
||||
|
||||
if (selected === 'subscriptions') {
|
||||
navigate(`/profile/p/subscriptions`);
|
||||
return;
|
||||
}
|
||||
|
||||
const selectedTitle = defaultSubplebbits.find((subplebbit) => subplebbit.address === selected).title;
|
||||
setSelectedTitle(selectedTitle);
|
||||
setSelectedAddress(selected);
|
||||
navigate(`/p/${selected}`);
|
||||
};
|
||||
|
||||
const handleSubscribe = async () => {
|
||||
try {
|
||||
if (subscribed === false) {
|
||||
await subscribe(selectedAddress);
|
||||
setSuccessMessage(`Subscribed to ${selectedTitle ?? selectedAddress}`);
|
||||
|
||||
} else if (subscribed === true) {
|
||||
await unsubscribe(selectedAddress);
|
||||
setSuccessMessage(`Unsubscribed from ${selectedTitle ?? selectedAddress}`);
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
setErrorMessage(error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -329,7 +355,7 @@ const Board = () => {
|
||||
<>
|
||||
<span className="boardList">
|
||||
[
|
||||
<Link to="" onClick={() => {}}>Subscriptions</Link>
|
||||
<Link to={`/profile/p/subscriptions`}>Subscriptions</Link>
|
||||
] [
|
||||
</span>
|
||||
{defaultSubplebbits.map((subplebbit, index) => (
|
||||
@@ -362,7 +388,7 @@ const Board = () => {
|
||||
<strong>Board</strong>
|
||||
|
||||
<select id="board-select-mobile" value={selectedAddress} onChange={handleSelectChange}>
|
||||
<option value="">Subscriptions</option>
|
||||
<option value="subscriptions">Subscriptions</option>
|
||||
{defaultSubplebbits.map(subplebbit => (
|
||||
<option key={`option-${subplebbit.address}`} value={subplebbit.address}
|
||||
>{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
|
||||
@@ -467,10 +493,14 @@ const Board = () => {
|
||||
<>
|
||||
<span className="subscribe-button-desktop">
|
||||
[
|
||||
<button id="subscribe" style={{all: 'unset', cursor: 'pointer'}}>Subscribe</button>
|
||||
<button id="subscribe" style={{all: 'unset', cursor: 'pointer'}}
|
||||
onClick={() => handleSubscribe()}>{subscribed ? "Unsubscribe" : "Subscribe"}
|
||||
</button>
|
||||
]
|
||||
</span>
|
||||
<button className="subscribe-button-mobile btn-wrap">Subscribe</button>
|
||||
<button className="subscribe-button-mobile btn-wrap"
|
||||
onClick={() => handleSubscribe()}>{subscribed ? "Unsubscribe" : "Subscribe"}
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<div id="stats" style={{float: "right", marginTop: "5px"}}>
|
||||
@@ -595,7 +625,7 @@ const Board = () => {
|
||||
<span key={`dt-${index}`} className="date-time" data-utc="data">{getDate(thread.timestamp)}</span>
|
||||
|
||||
<span key={`pn-${index}`} className="post-number post-number-desktop">
|
||||
<span style={{cursor: 'pointer'}} id="reply-button" key={`pl1-${index}`} title="Link to this post">c/</span>
|
||||
<span key={`pl1-${index}`}>c/</span>
|
||||
<Link to={`/p/${selectedAddress}/c/${thread.cid}`} id="reply-button" key={`pl2-${index}`}
|
||||
onClick={(e) => {
|
||||
if (e.button === 2) return;
|
||||
@@ -667,13 +697,13 @@ const Board = () => {
|
||||
<div key={`pi-${index}`} className="post-info">
|
||||
<span key={`nb-${index}`} className="nameblock">
|
||||
{reply.author.displayName
|
||||
? reply.author.displayName.length > 12
|
||||
? reply.author.displayName.length > 20
|
||||
? <Fragment key={`fragment6-${index}`}>
|
||||
<span key={`mob-n-${index}`} className="name"
|
||||
data-tooltip-id="tooltip"
|
||||
data-tooltip-content={reply.author.displayName}
|
||||
data-tooltip-place="top">
|
||||
{reply.author.displayName.slice(0, 12) + " (...)"}
|
||||
{reply.author.displayName.slice(0, 20) + " (...)"}
|
||||
</span>
|
||||
</Fragment>
|
||||
: <span key={`mob-n-${index}`} className="name">
|
||||
@@ -708,7 +738,7 @@ const Board = () => {
|
||||
<span key={`dt-${index}`} className="date-time" data-utc="data">{getDate(reply.timestamp)}</span>
|
||||
|
||||
<span key={`pn-${index}`} className="post-number post-number-desktop">
|
||||
<span id="reply-button" style={{cursor: 'pointer'}} key={`pl1-${index}`} title="Link to this post">c/</span>
|
||||
<span key={`pl1-${index}`}>c/</span>
|
||||
{reply.shortCid ? (
|
||||
<Link to={`/p/${selectedAddress}/c/${thread.cid}`} id="reply-button" key={`pl2-${index}`}
|
||||
onClick={(e) => {
|
||||
@@ -831,13 +861,13 @@ const Board = () => {
|
||||
<button key={`mob-pb-${index}`} className="post-menu-button-mobile" style={{ all: 'unset', cursor: 'pointer' }}>...</button>
|
||||
<span key={`mob-nbm-${index}`} className="name-block-mobile">
|
||||
{thread.author.displayName
|
||||
? thread.author.displayName.length > 15
|
||||
? thread.author.displayName.length > 20
|
||||
? <Fragment key={`fragment9-${index}`}>
|
||||
<span key={`mob-n-${index}`} className="name-mobile"
|
||||
data-tooltip-id="tooltip"
|
||||
data-tooltip-content={thread.author.displayName}
|
||||
data-tooltip-place="top">
|
||||
{thread.author.displayName.slice(0, 15) + " (...)"}
|
||||
{thread.author.displayName.slice(0, 20) + " (...)"}
|
||||
</span>
|
||||
</Fragment>
|
||||
: <span key={`mob-n-${index}`} className="name-mobile">
|
||||
@@ -874,7 +904,7 @@ const Board = () => {
|
||||
<span key={`mob-dt-${index}`} className="date-time-mobile post-number-mobile">
|
||||
{getDate(thread.timestamp)}
|
||||
|
||||
<span id="reply-button" style={{cursor: 'pointer'}} key={`mob-no-${index}`} title="Link to this post">c/</span>
|
||||
<span key={`mob-no-${index}`}>c/</span>
|
||||
<Link to={`/p/${selectedAddress}/c/${thread.cid}`} id="reply-button" key={`mob-no2-${index}`}
|
||||
onClick={(e) => {
|
||||
if (e.button === 2) return;
|
||||
@@ -972,13 +1002,13 @@ const Board = () => {
|
||||
<button key={`pmbm-${index}`} className="post-menu-button-mobile" title="Post menu" style={{ all: 'unset', cursor: 'pointer' }}>...</button>
|
||||
<span key={`mob-nb-${index}`} className="name-block-mobile">
|
||||
{reply.author.displayName
|
||||
? reply.author.displayName.length > 12
|
||||
? reply.author.displayName.length > 20
|
||||
? <Fragment key={`fragment13-${index}`}>
|
||||
<span key={`mob-n-${index}`} className="name-mobile"
|
||||
data-tooltip-id="tooltip"
|
||||
data-tooltip-content={reply.author.displayName}
|
||||
data-tooltip-place="top">
|
||||
{reply.author.displayName.slice(0, 12) + " (...)"}
|
||||
{reply.author.displayName.slice(0, 20) + " (...)"}
|
||||
</span>
|
||||
</Fragment>
|
||||
: <span key={`mob-n-${index}`} className="name-mobile">
|
||||
@@ -1012,7 +1042,7 @@ const Board = () => {
|
||||
</span>
|
||||
<span key={`mob-dt-${index}`} className="date-time-mobile post-number-mobile">
|
||||
{getDate(reply.timestamp)}
|
||||
<span id="reply-button" style={{cursor: 'pointer'}} key={`mob-pl1-${index}`} title="Link to this post">c/</span>
|
||||
<span key={`mob-pl1-${index}`}>c/</span>
|
||||
{reply.shortCid ? (
|
||||
<Link to={`/p/${selectedAddress}/c/${thread.cid}`} id="reply-button" key={`mob-pl2-${index}`}
|
||||
onClick={(e) => {
|
||||
@@ -1154,7 +1184,7 @@ const Board = () => {
|
||||
<span className="boardList">
|
||||
[
|
||||
<Link to="" onClick={() => {}}>Subscriptions</Link>
|
||||
] [
|
||||
]
|
||||
</span>
|
||||
{defaultSubplebbits.map((subplebbit, index) => (
|
||||
<span className="boardList" key={`span-${subplebbit.address}`}>
|
||||
@@ -1164,7 +1194,6 @@ const Board = () => {
|
||||
{index !== defaultSubplebbits.length - 1 ? " /" : null}
|
||||
</span>
|
||||
))}
|
||||
]
|
||||
<span className="nav">
|
||||
[
|
||||
<button style={{all: 'unset', cursor: 'pointer'}} onClick={
|
||||
|
||||
@@ -218,6 +218,12 @@ const Catalog = () => {
|
||||
// mobile navbar board select functionality
|
||||
const handleSelectChange = (event) => {
|
||||
const selected = event.target.value;
|
||||
|
||||
if (selected === 'subscriptions') {
|
||||
navigate(`/profile/p/subscriptions`);
|
||||
return;
|
||||
}
|
||||
|
||||
const selectedTitle = defaultSubplebbits.find((subplebbit) => subplebbit.address === selected).title;
|
||||
setSelectedTitle(selectedTitle);
|
||||
setSelectedAddress(selected);
|
||||
@@ -239,7 +245,7 @@ const Catalog = () => {
|
||||
<>
|
||||
<span className="boardList">
|
||||
[
|
||||
<Link to="" onClick={() => {}}>Subscriptions</Link>
|
||||
<Link to={`/profile/p/subscriptions`}>Subscriptions</Link>
|
||||
] [
|
||||
</span>
|
||||
{defaultSubplebbits.map((subplebbit, index) => (
|
||||
@@ -275,6 +281,7 @@ const Catalog = () => {
|
||||
<strong>Board</strong>
|
||||
|
||||
<select id="board-select-mobile" value={selectedAddress} onChange={handleSelectChange}>
|
||||
<option value="subscriptions">Subscriptions</option>
|
||||
{defaultSubplebbits.map(subplebbit => (
|
||||
<option key={`option-${subplebbit.address}`} value={subplebbit.address}
|
||||
>{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
|
||||
@@ -497,7 +504,7 @@ const Catalog = () => {
|
||||
<span className="boardList">
|
||||
[
|
||||
<Link to="" onClick={() => {}}>Subscriptions</Link>
|
||||
] [
|
||||
]
|
||||
</span>
|
||||
{defaultSubplebbits.map((subplebbit, index) => (
|
||||
<span className="boardList" key={`span-${subplebbit.address}`}>
|
||||
@@ -510,7 +517,6 @@ const Catalog = () => {
|
||||
{index !== defaultSubplebbits.length - 1 ? " /" : null}
|
||||
</span>
|
||||
))}
|
||||
]
|
||||
<span className="nav">
|
||||
[
|
||||
<button style={{all: 'unset', cursor: 'pointer'}} onClick={
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -250,6 +250,12 @@ const Thread = () => {
|
||||
// mobile navbar board select functionality
|
||||
const handleSelectChange = (event) => {
|
||||
const selected = event.target.value;
|
||||
|
||||
if (selected === 'subscriptions') {
|
||||
navigate(`/profile/p/subscriptions`);
|
||||
return;
|
||||
}
|
||||
|
||||
const selectedTitle = defaultSubplebbits.find((subplebbit) => subplebbit.address === selected).title;
|
||||
setSelectedTitle(selectedTitle);
|
||||
setSelectedAddress(selected);
|
||||
@@ -281,7 +287,7 @@ const Thread = () => {
|
||||
<>
|
||||
<span className="boardList">
|
||||
[
|
||||
<Link to="" onClick={() => {}}>Subscriptions</Link>
|
||||
<Link to={`/profile/p/subscriptions`}>Subscriptions</Link>
|
||||
] [
|
||||
</span>
|
||||
{defaultSubplebbits.map((subplebbit, index) => (
|
||||
@@ -317,6 +323,7 @@ const Thread = () => {
|
||||
<strong>Board</strong>
|
||||
|
||||
<select id="board-select-mobile" value={selectedAddress} onChange={handleSelectChange}>
|
||||
<option value="subscriptions">Subscriptions</option>
|
||||
{defaultSubplebbits.map(subplebbit => (
|
||||
<option key={`option-${subplebbit.address}`} value={subplebbit.address}
|
||||
>{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
|
||||
@@ -564,7 +571,7 @@ const Thread = () => {
|
||||
<span className="date-time" data-utc="data">{getDate(comment?.timestamp)}</span>
|
||||
|
||||
<span className="post-number post-number-desktop">
|
||||
<span style={{cursor: 'pointer'}} id="reply-button" title="Link to this post">c/</span>
|
||||
<span style={{cursor: 'pointer'}}>c/</span>
|
||||
<button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} onClick={() => {
|
||||
setIsReplyOpen(true); setSelectedParentCid(comment.cid); setSelectedShortCid(comment.shortCid);
|
||||
}} title="Reply to this post">{comment.shortCid}</button>
|
||||
@@ -645,7 +652,7 @@ const Thread = () => {
|
||||
<span key={`dt-${index}`} className="date-time" data-utc="data">{getDate(reply?.timestamp)}</span>
|
||||
|
||||
<span style={{cursor: 'pointer'}} key={`pn-${index}`} className="post-number post-number-desktop">
|
||||
<span id="reply-button" key={`pl1-${index}`} title="Link to this post">c/</span>
|
||||
<span key={`pl1-${index}`}>c/</span>
|
||||
{reply.shortCid ? (
|
||||
<button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`pl2-${index}`} onClick={() => {
|
||||
setIsReplyOpen(true); setSelectedParentCid(reply.cid); setSelectedShortCid(reply.shortCid);
|
||||
@@ -788,10 +795,11 @@ const Thread = () => {
|
||||
<span key={`mob-dt-${comment.cid}`} className="date-time-mobile post-number-mobile">
|
||||
{getDate(comment?.timestamp)}
|
||||
|
||||
<button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`mob-no-${comment.cid}`} onClick={() => {
|
||||
<span key={`mob-no-${comment.cid}`}>c/</span>
|
||||
<span id="reply-button" style={{cursor: 'pointer'}} key={`mob-no2-${comment.cid}`} title="Reply to this post"
|
||||
onClick={() => {
|
||||
setIsReplyOpen(true); setSelectedParentCid(comment.cid); setSelectedShortCid(comment.shortCid);
|
||||
}} title="Link to this post">c/</button>
|
||||
<span id="reply-button" style={{cursor: 'pointer'}} key={`mob-no2-${comment.cid}`} title="Reply to this post">{comment.shortCid}</span>
|
||||
}}>{comment.shortCid}</span>
|
||||
</span>
|
||||
</div>
|
||||
{commentMediaInfo?.url ? (
|
||||
@@ -903,7 +911,7 @@ const Thread = () => {
|
||||
</span>
|
||||
<span key={`mob-dt-${index}`} className="date-time-mobile post-number-mobile">
|
||||
{getDate(reply?.timestamp)}
|
||||
<span id="reply-button" style={{cursor: 'pointer'}} key={`mob-pl1-${index}`} title="Link to this post">c/</span>
|
||||
<span key={`mob-pl1-${index}`}>c/</span>
|
||||
{reply.shortCid ? (
|
||||
<button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`mob-pl2-${index}`} onClick={() => {
|
||||
setIsReplyOpen(true); setSelectedParentCid(reply.cid); setSelectedShortCid(reply.shortCid);
|
||||
@@ -1129,7 +1137,7 @@ const Thread = () => {
|
||||
<span className="boardList">
|
||||
[
|
||||
<Link to="" onClick={() => {}}>Subscriptions</Link>
|
||||
] [
|
||||
]
|
||||
</span>
|
||||
{defaultSubplebbits.map((subplebbit, index) => (
|
||||
<span className="boardList" key={`span-${subplebbit.address}`}>
|
||||
@@ -1142,7 +1150,6 @@ const Thread = () => {
|
||||
{index !== defaultSubplebbits.length - 1 ? " /" : null}
|
||||
</span>
|
||||
))}
|
||||
]
|
||||
<span className="nav">
|
||||
[
|
||||
<button style={{all: 'unset', cursor: 'pointer'}} onClick={
|
||||
|
||||
Reference in New Issue
Block a user