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 functional subscriptions board, fixes

Browse Source
This commit is contained in:
Tom
2023-05-03 11:01:41 +02:00
parent 48075d4c1f
commit 9291f3c9a5
5 changed files with 1103 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.js
+6 -2
View File
@@ -7,12 +7,13 @@ import 'react-toastify/dist/ReactToastify.css';
import useGeneralStore from './hooks/stores/useGeneralStore'; import useGeneralStore from './hooks/stores/useGeneralStore';
import { GlobalStyle } from './components/styled/GlobalStyle.styled'; import { GlobalStyle } from './components/styled/GlobalStyle.styled';
import { Toast } from './components/styled/Toast.styled'; import { Toast } from './components/styled/Toast.styled';
import Home from './components/views/Home';
import Board from './components/views/Board'; import Board from './components/views/Board';
import Thread from './components/views/Thread';
import Catalog from './components/views/Catalog'; import Catalog from './components/views/Catalog';
import Home from './components/views/Home';
import NotFound from './components/views/NotFound'; import NotFound from './components/views/NotFound';
import Pending from './components/views/Pending'; import Pending from './components/views/Pending';
import Subscriptions from './components/views/Subscriptions';
import Thread from './components/views/Thread';
import CaptchaModal from './components/CaptchaModal'; import CaptchaModal from './components/CaptchaModal';
import { importAll } from './components/ImageBanner'; import { importAll } from './components/ImageBanner';
import preloadImages from './utils/preloadImages'; import preloadImages from './utils/preloadImages';
@@ -161,6 +162,9 @@ export default function App() {
<Route path={`/profile/c/:index`} element={<Pending setBodyStyle={setBodyStyle} /> }> <Route path={`/profile/c/:index`} element={<Pending setBodyStyle={setBodyStyle} /> }>
<Route path='settings' element={<Pending />} /> <Route path='settings' element={<Pending />} />
</Route> </Route>
<Route path={`/profile/p/subscriptions`} element={<Subscriptions setBodyStyle={setBodyStyle} /> }>
<Route path='settings' element={<Subscriptions />} />
</Route>
<Route path='*' element={<NotFound setBodyStyle={setBodyStyle} />} /> <Route path='*' element={<NotFound setBodyStyle={setBodyStyle} />} />
</Routes> </Routes>
<Toast /> <Toast />
src/components/views/Board.jsx
+49 -20
View File
@@ -3,7 +3,7 @@ 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 { Virtuoso } from 'react-virtuoso'; 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 { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils'
import { debounce } from 'lodash'; import { debounce } from 'lodash';
import useGeneralStore from '../../hooks/stores/useGeneralStore'; import useGeneralStore from '../../hooks/stores/useGeneralStore';
@@ -23,6 +23,7 @@ import handleQuoteClick from '../../utils/handleQuoteClick';
import handleStyleChange from '../../utils/handleStyleChange'; import handleStyleChange from '../../utils/handleStyleChange';
import useClickForm from '../../hooks/useClickForm'; import useClickForm from '../../hooks/useClickForm';
import useError from '../../hooks/useError'; import useError from '../../hooks/useError';
import useSuccess from '../../hooks/useSuccess';
import packageJson from '../../../package.json' import packageJson from '../../../package.json'
const {version} = packageJson const {version} = packageJson
@@ -47,6 +48,8 @@ const Board = () => {
showPostFormLink, showPostFormLink,
} = useGeneralStore(state => state); } = useGeneralStore(state => state);
const account = useAccount();
const nameRef = useRef(); const nameRef = useRef();
const subjectRef = useRef(); const subjectRef = useRef();
const commentRef = useRef(); const commentRef = useRef();
@@ -60,10 +63,12 @@ const Board = () => {
const [selectedFeed, setSelectedFeed] = useState(feed); const [selectedFeed, setSelectedFeed] = useState(feed);
const { subplebbitAddress } = useParams(); const { subplebbitAddress } = useParams();
const [errorMessage, setErrorMessage] = useState(null); const { subscribed, subscribe, unsubscribe } = useSubscribe({subplebbitAddress: selectedAddress});
useError(errorMessage, [errorMessage]);
const account = useAccount(); const [errorMessage, setErrorMessage] = useState(null);
const [successMessage, setSuccessMessage] = useState(null);
useError(errorMessage, [errorMessage]);
useSuccess(successMessage, [successMessage]);
const [triggerPublishComment, setTriggerPublishComment] = useState(false); const [triggerPublishComment, setTriggerPublishComment] = useState(false);
@@ -304,12 +309,33 @@ const Board = () => {
// mobile navbar board select functionality // mobile navbar board select functionality
const handleSelectChange = (event) => { const handleSelectChange = (event) => {
const selected = event.target.value; const selected = event.target.value;
if (selected === 'subscriptions') {
navigate(`/profile/p/subscriptions`);
return;
}
const selectedTitle = defaultSubplebbits.find((subplebbit) => subplebbit.address === selected).title; const selectedTitle = defaultSubplebbits.find((subplebbit) => subplebbit.address === selected).title;
setSelectedTitle(selectedTitle); setSelectedTitle(selectedTitle);
setSelectedAddress(selected); setSelectedAddress(selected);
navigate(`/p/${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 ( return (
<> <>
@@ -329,7 +355,7 @@ const Board = () => {
<> <>
<span className="boardList"> <span className="boardList">
[ [
<Link to="" onClick={() => {}}>Subscriptions</Link> <Link to={`/profile/p/subscriptions`}>Subscriptions</Link>
]&nbsp;[ ]&nbsp;[
</span> </span>
{defaultSubplebbits.map((subplebbit, index) => ( {defaultSubplebbits.map((subplebbit, index) => (
@@ -362,7 +388,7 @@ const Board = () => {
<strong>Board</strong> <strong>Board</strong>
&nbsp; &nbsp;
<select id="board-select-mobile" value={selectedAddress} onChange={handleSelectChange}> <select id="board-select-mobile" value={selectedAddress} onChange={handleSelectChange}>
<option value="">Subscriptions</option> <option value="subscriptions">Subscriptions</option>
{defaultSubplebbits.map(subplebbit => ( {defaultSubplebbits.map(subplebbit => (
<option key={`option-${subplebbit.address}`} value={subplebbit.address} <option key={`option-${subplebbit.address}`} value={subplebbit.address}
>{subplebbit.title ? subplebbit.title : subplebbit.address}</option> >{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
@@ -467,10 +493,14 @@ const Board = () => {
<> <>
<span className="subscribe-button-desktop"> <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> </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"}}> <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={`dt-${index}`} className="date-time" data-utc="data">{getDate(thread.timestamp)}</span>
&nbsp; &nbsp;
<span key={`pn-${index}`} className="post-number post-number-desktop"> <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}`} <Link to={`/p/${selectedAddress}/c/${thread.cid}`} id="reply-button" key={`pl2-${index}`}
onClick={(e) => { onClick={(e) => {
if (e.button === 2) return; if (e.button === 2) return;
@@ -667,13 +697,13 @@ const Board = () => {
<div key={`pi-${index}`} className="post-info"> <div key={`pi-${index}`} className="post-info">
<span key={`nb-${index}`} className="nameblock"> <span key={`nb-${index}`} className="nameblock">
{reply.author.displayName {reply.author.displayName
? reply.author.displayName.length > 12 ? reply.author.displayName.length > 20
? <Fragment key={`fragment6-${index}`}> ? <Fragment key={`fragment6-${index}`}>
<span key={`mob-n-${index}`} className="name" <span key={`mob-n-${index}`} className="name"
data-tooltip-id="tooltip" data-tooltip-id="tooltip"
data-tooltip-content={reply.author.displayName} data-tooltip-content={reply.author.displayName}
data-tooltip-place="top"> data-tooltip-place="top">
{reply.author.displayName.slice(0, 12) + " (...)"} {reply.author.displayName.slice(0, 20) + " (...)"}
</span> </span>
</Fragment> </Fragment>
: <span key={`mob-n-${index}`} className="name"> : <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={`dt-${index}`} className="date-time" data-utc="data">{getDate(reply.timestamp)}</span>
&nbsp; &nbsp;
<span key={`pn-${index}`} className="post-number post-number-desktop"> <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 ? ( {reply.shortCid ? (
<Link to={`/p/${selectedAddress}/c/${thread.cid}`} id="reply-button" key={`pl2-${index}`} <Link to={`/p/${selectedAddress}/c/${thread.cid}`} id="reply-button" key={`pl2-${index}`}
onClick={(e) => { onClick={(e) => {
@@ -831,13 +861,13 @@ const Board = () => {
<button key={`mob-pb-${index}`} className="post-menu-button-mobile" style={{ all: 'unset', cursor: 'pointer' }}>...</button> <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"> <span key={`mob-nbm-${index}`} className="name-block-mobile">
{thread.author.displayName {thread.author.displayName
? thread.author.displayName.length > 15 ? thread.author.displayName.length > 20
? <Fragment key={`fragment9-${index}`}> ? <Fragment key={`fragment9-${index}`}>
<span key={`mob-n-${index}`} className="name-mobile" <span key={`mob-n-${index}`} className="name-mobile"
data-tooltip-id="tooltip" data-tooltip-id="tooltip"
data-tooltip-content={thread.author.displayName} data-tooltip-content={thread.author.displayName}
data-tooltip-place="top"> data-tooltip-place="top">
{thread.author.displayName.slice(0, 15) + " (...)"} {thread.author.displayName.slice(0, 20) + " (...)"}
</span> </span>
</Fragment> </Fragment>
: <span key={`mob-n-${index}`} className="name-mobile"> : <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"> <span key={`mob-dt-${index}`} className="date-time-mobile post-number-mobile">
{getDate(thread.timestamp)} {getDate(thread.timestamp)}
&nbsp; &nbsp;
<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}`} <Link to={`/p/${selectedAddress}/c/${thread.cid}`} id="reply-button" key={`mob-no2-${index}`}
onClick={(e) => { onClick={(e) => {
if (e.button === 2) return; 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> <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"> <span key={`mob-nb-${index}`} className="name-block-mobile">
{reply.author.displayName {reply.author.displayName
? reply.author.displayName.length > 12 ? reply.author.displayName.length > 20
? <Fragment key={`fragment13-${index}`}> ? <Fragment key={`fragment13-${index}`}>
<span key={`mob-n-${index}`} className="name-mobile" <span key={`mob-n-${index}`} className="name-mobile"
data-tooltip-id="tooltip" data-tooltip-id="tooltip"
data-tooltip-content={reply.author.displayName} data-tooltip-content={reply.author.displayName}
data-tooltip-place="top"> data-tooltip-place="top">
{reply.author.displayName.slice(0, 12) + " (...)"} {reply.author.displayName.slice(0, 20) + " (...)"}
</span> </span>
</Fragment> </Fragment>
: <span key={`mob-n-${index}`} className="name-mobile"> : <span key={`mob-n-${index}`} className="name-mobile">
@@ -1012,7 +1042,7 @@ const Board = () => {
</span> </span>
<span key={`mob-dt-${index}`} className="date-time-mobile post-number-mobile"> <span key={`mob-dt-${index}`} className="date-time-mobile post-number-mobile">
{getDate(reply.timestamp)}&nbsp; {getDate(reply.timestamp)}&nbsp;
<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 ? ( {reply.shortCid ? (
<Link to={`/p/${selectedAddress}/c/${thread.cid}`} id="reply-button" key={`mob-pl2-${index}`} <Link to={`/p/${selectedAddress}/c/${thread.cid}`} id="reply-button" key={`mob-pl2-${index}`}
onClick={(e) => { onClick={(e) => {
@@ -1154,7 +1184,7 @@ const Board = () => {
<span className="boardList"> <span className="boardList">
[ [
<Link to="" onClick={() => {}}>Subscriptions</Link> <Link to="" onClick={() => {}}>Subscriptions</Link>
]&nbsp;[ ]&nbsp;
</span> </span>
{defaultSubplebbits.map((subplebbit, index) => ( {defaultSubplebbits.map((subplebbit, index) => (
<span className="boardList" key={`span-${subplebbit.address}`}> <span className="boardList" key={`span-${subplebbit.address}`}>
@@ -1164,7 +1194,6 @@ const Board = () => {
{index !== defaultSubplebbits.length - 1 ? " /" : null} {index !== defaultSubplebbits.length - 1 ? " /" : null}
</span> </span>
))} ))}
]
<span className="nav"> <span className="nav">
[ [
<button style={{all: 'unset', cursor: 'pointer'}} onClick={ <button style={{all: 'unset', cursor: 'pointer'}} onClick={
src/components/views/Catalog.jsx
+9 -3
View File
@@ -218,6 +218,12 @@ const Catalog = () => {
// mobile navbar board select functionality // mobile navbar board select functionality
const handleSelectChange = (event) => { const handleSelectChange = (event) => {
const selected = event.target.value; const selected = event.target.value;
if (selected === 'subscriptions') {
navigate(`/profile/p/subscriptions`);
return;
}
const selectedTitle = defaultSubplebbits.find((subplebbit) => subplebbit.address === selected).title; const selectedTitle = defaultSubplebbits.find((subplebbit) => subplebbit.address === selected).title;
setSelectedTitle(selectedTitle); setSelectedTitle(selectedTitle);
setSelectedAddress(selected); setSelectedAddress(selected);
@@ -239,7 +245,7 @@ const Catalog = () => {
<> <>
<span className="boardList"> <span className="boardList">
[ [
<Link to="" onClick={() => {}}>Subscriptions</Link> <Link to={`/profile/p/subscriptions`}>Subscriptions</Link>
]&nbsp;[ ]&nbsp;[
</span> </span>
{defaultSubplebbits.map((subplebbit, index) => ( {defaultSubplebbits.map((subplebbit, index) => (
@@ -275,6 +281,7 @@ const Catalog = () => {
<strong>Board</strong> <strong>Board</strong>
&nbsp; &nbsp;
<select id="board-select-mobile" value={selectedAddress} onChange={handleSelectChange}> <select id="board-select-mobile" value={selectedAddress} onChange={handleSelectChange}>
<option value="subscriptions">Subscriptions</option>
{defaultSubplebbits.map(subplebbit => ( {defaultSubplebbits.map(subplebbit => (
<option key={`option-${subplebbit.address}`} value={subplebbit.address} <option key={`option-${subplebbit.address}`} value={subplebbit.address}
>{subplebbit.title ? subplebbit.title : subplebbit.address}</option> >{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
@@ -497,7 +504,7 @@ const Catalog = () => {
<span className="boardList"> <span className="boardList">
[ [
<Link to="" onClick={() => {}}>Subscriptions</Link> <Link to="" onClick={() => {}}>Subscriptions</Link>
]&nbsp;[ ]&nbsp;
</span> </span>
{defaultSubplebbits.map((subplebbit, index) => ( {defaultSubplebbits.map((subplebbit, index) => (
<span className="boardList" key={`span-${subplebbit.address}`}> <span className="boardList" key={`span-${subplebbit.address}`}>
@@ -510,7 +517,6 @@ const Catalog = () => {
{index !== defaultSubplebbits.length - 1 ? " /" : null} {index !== defaultSubplebbits.length - 1 ? " /" : null}
</span> </span>
))} ))}
]
<span className="nav"> <span className="nav">
[ [
<button style={{all: 'unset', cursor: 'pointer'}} onClick={ <button style={{all: 'unset', cursor: 'pointer'}} onClick={
src/components/views/Subscriptions.jsx
+1023
View File
File diff suppressed because it is too large Load Diff
src/components/views/Thread.jsx
+16 -9
View File
@@ -250,6 +250,12 @@ const Thread = () => {
// mobile navbar board select functionality // mobile navbar board select functionality
const handleSelectChange = (event) => { const handleSelectChange = (event) => {
const selected = event.target.value; const selected = event.target.value;
if (selected === 'subscriptions') {
navigate(`/profile/p/subscriptions`);
return;
}
const selectedTitle = defaultSubplebbits.find((subplebbit) => subplebbit.address === selected).title; const selectedTitle = defaultSubplebbits.find((subplebbit) => subplebbit.address === selected).title;
setSelectedTitle(selectedTitle); setSelectedTitle(selectedTitle);
setSelectedAddress(selected); setSelectedAddress(selected);
@@ -281,7 +287,7 @@ const Thread = () => {
<> <>
<span className="boardList"> <span className="boardList">
[ [
<Link to="" onClick={() => {}}>Subscriptions</Link> <Link to={`/profile/p/subscriptions`}>Subscriptions</Link>
]&nbsp;[ ]&nbsp;[
</span> </span>
{defaultSubplebbits.map((subplebbit, index) => ( {defaultSubplebbits.map((subplebbit, index) => (
@@ -317,6 +323,7 @@ const Thread = () => {
<strong>Board</strong> <strong>Board</strong>
&nbsp; &nbsp;
<select id="board-select-mobile" value={selectedAddress} onChange={handleSelectChange}> <select id="board-select-mobile" value={selectedAddress} onChange={handleSelectChange}>
<option value="subscriptions">Subscriptions</option>
{defaultSubplebbits.map(subplebbit => ( {defaultSubplebbits.map(subplebbit => (
<option key={`option-${subplebbit.address}`} value={subplebbit.address} <option key={`option-${subplebbit.address}`} value={subplebbit.address}
>{subplebbit.title ? subplebbit.title : subplebbit.address}</option> >{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
@@ -564,7 +571,7 @@ const Thread = () => {
<span className="date-time" data-utc="data">{getDate(comment?.timestamp)}</span> <span className="date-time" data-utc="data">{getDate(comment?.timestamp)}</span>
&nbsp; &nbsp;
<span className="post-number post-number-desktop"> <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={() => { <button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} onClick={() => {
setIsReplyOpen(true); setSelectedParentCid(comment.cid); setSelectedShortCid(comment.shortCid); setIsReplyOpen(true); setSelectedParentCid(comment.cid); setSelectedShortCid(comment.shortCid);
}} title="Reply to this post">{comment.shortCid}</button> }} 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 key={`dt-${index}`} className="date-time" data-utc="data">{getDate(reply?.timestamp)}</span>
&nbsp; &nbsp;
<span style={{cursor: 'pointer'}} key={`pn-${index}`} className="post-number post-number-desktop"> <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 ? ( {reply.shortCid ? (
<button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`pl2-${index}`} onClick={() => { <button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`pl2-${index}`} onClick={() => {
setIsReplyOpen(true); setSelectedParentCid(reply.cid); setSelectedShortCid(reply.shortCid); 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"> <span key={`mob-dt-${comment.cid}`} className="date-time-mobile post-number-mobile">
{getDate(comment?.timestamp)} {getDate(comment?.timestamp)}
&nbsp; &nbsp;
<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); setIsReplyOpen(true); setSelectedParentCid(comment.cid); setSelectedShortCid(comment.shortCid);
}} title="Link to this post">c/</button> }}>{comment.shortCid}</span>
<span id="reply-button" style={{cursor: 'pointer'}} key={`mob-no2-${comment.cid}`} title="Reply to this post">{comment.shortCid}</span>
</span> </span>
</div> </div>
{commentMediaInfo?.url ? ( {commentMediaInfo?.url ? (
@@ -903,7 +911,7 @@ const Thread = () => {
</span> </span>
<span key={`mob-dt-${index}`} className="date-time-mobile post-number-mobile"> <span key={`mob-dt-${index}`} className="date-time-mobile post-number-mobile">
{getDate(reply?.timestamp)}&nbsp; {getDate(reply?.timestamp)}&nbsp;
<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 ? ( {reply.shortCid ? (
<button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`mob-pl2-${index}`} onClick={() => { <button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`mob-pl2-${index}`} onClick={() => {
setIsReplyOpen(true); setSelectedParentCid(reply.cid); setSelectedShortCid(reply.shortCid); setIsReplyOpen(true); setSelectedParentCid(reply.cid); setSelectedShortCid(reply.shortCid);
@@ -1129,7 +1137,7 @@ const Thread = () => {
<span className="boardList"> <span className="boardList">
[ [
<Link to="" onClick={() => {}}>Subscriptions</Link> <Link to="" onClick={() => {}}>Subscriptions</Link>
]&nbsp;[ ]&nbsp;
</span> </span>
{defaultSubplebbits.map((subplebbit, index) => ( {defaultSubplebbits.map((subplebbit, index) => (
<span className="boardList" key={`span-${subplebbit.address}`}> <span className="boardList" key={`span-${subplebbit.address}`}>
@@ -1142,7 +1150,6 @@ const Thread = () => {
{index !== defaultSubplebbits.length - 1 ? " /" : null} {index !== defaultSubplebbits.length - 1 ? " /" : null}
</span> </span>
))} ))}
]
<span className="nav"> <span className="nav">
[ [
<button style={{all: 'unset', cursor: 'pointer'}} onClick={ <button style={{all: 'unset', cursor: 'pointer'}} onClick={