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

added helmet title to all views

Browse Source
This commit is contained in:
plebbitor
2023-04-21 10:47:39 +02:00
parent a4c7e86adb
commit 6aa27c3e1e
6 changed files with 1891 additions and 1849 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/views/Board.jsx
+630 -624
View File
File diff suppressed because it is too large Load Diff
src/components/views/Catalog.jsx
+201 -195
View File
@@ -1,6 +1,7 @@
import React, { useState, useEffect, useRef, Fragment } from 'react'; import React, { useState, useEffect, useRef, Fragment } from 'react';
import { Link, useNavigate, useParams } from 'react-router-dom'; import { Helmet } from 'react-helmet-async';
import InfiniteScroll from 'react-infinite-scroller'; import InfiniteScroll from 'react-infinite-scroller';
import { Link, useNavigate, useParams } from 'react-router-dom';
import { useFeed, usePublishComment } from '@plebbit/plebbit-react-hooks'; import { useFeed, usePublishComment } from '@plebbit/plebbit-react-hooks';
import { debounce } from 'lodash'; import { debounce } from 'lodash';
import useGeneralStore from '../../hooks/stores/useGeneralStore'; import useGeneralStore from '../../hooks/stores/useGeneralStore';
@@ -202,210 +203,215 @@ const Catalog = () => {
return ( return (
<Container> <>
<SettingsModal <Helmet>
selectedStyle={selectedStyle} <title>{((selectedTitle ? selectedTitle : selectedAddress) + " - Catalog - plebchan")}</title>
isOpen={isSettingsOpen} </Helmet>
closeModal={() => setIsSettingsOpen(false)} /> <Container>
<NavBar selectedStyle={selectedStyle}> <SettingsModal
<> selectedStyle={selectedStyle}
{defaultSubplebbits.map(subplebbit => ( isOpen={isSettingsOpen}
<span className="boardList" key={`span-${subplebbit.address}`}> closeModal={() => setIsSettingsOpen(false)} />
<NavBar selectedStyle={selectedStyle}>
<>
{defaultSubplebbits.map(subplebbit => (
<span className="boardList" key={`span-${subplebbit.address}`}>
[
<Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`}
onClick={() => {
setSelectedTitle(subplebbit.title);
setSelectedAddress(subplebbit.address);
}}
>{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
]&nbsp;
</span>
))}
<span className="nav">
[ [
<Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`}
onClick={() => {
setSelectedTitle(subplebbit.title);
setSelectedAddress(subplebbit.address);
}}
>{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
]&nbsp;
</span>
))}
<span className="nav">
[
<Link to={`/p/${selectedAddress}/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
]
[
<Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
)}>Home</Link>
]
</span>
<div id="board-nav-mobile" style={{ top: visible ? 0 : '-23px' }}>
<div className="board-select">
<strong>Board</strong>
&nbsp;
<select id="board-select-mobile" value={selectedAddress} onChange={handleSelectChange}>
{defaultSubplebbits.map(subplebbit => (
<option key={`option-${subplebbit.address}`} value={subplebbit.address}
>{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
))}
</select>
</div>
<div className="page-jump">
<Link to={`/p/${selectedAddress}/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link> <Link to={`/p/${selectedAddress}/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
&nbsp; ]
[
<Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}} <Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
)}>Home</Link> )}>Home</Link>
]
</span>
<div id="board-nav-mobile" style={{ top: visible ? 0 : '-23px' }}>
<div className="board-select">
<strong>Board</strong>
&nbsp;
<select id="board-select-mobile" value={selectedAddress} onChange={handleSelectChange}>
{defaultSubplebbits.map(subplebbit => (
<option key={`option-${subplebbit.address}`} value={subplebbit.address}
>{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
))}
</select>
</div>
<div className="page-jump">
<Link to={`/p/${selectedAddress}/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
&nbsp;
<Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
)}>Home</Link>
</div>
</div> </div>
</div> <div id="separator-mobile">&nbsp;</div>
<div id="separator-mobile">&nbsp;</div> <div id="separator-mobile">&nbsp;</div>
<div id="separator-mobile">&nbsp;</div> </>
</> </NavBar>
</NavBar> <Header selectedStyle={selectedStyle}>
<Header selectedStyle={selectedStyle}> <>
<> <div className="banner">
<div className="banner"> <ImageBanner />
<ImageBanner /> </div>
</div> <>
<> <div className="board-title">{selectedTitle}</div>
<div className="board-title">{selectedTitle}</div> <div className="board-address">p/{selectedAddress}</div>
<div className="board-address">p/{selectedAddress}</div> </>
</> </>
</> </Header>
</Header> <Break selectedStyle={selectedStyle} />
<Break selectedStyle={selectedStyle} /> <PostForm selectedStyle={selectedStyle}>
<PostForm selectedStyle={selectedStyle}> <PostFormLink id="post-form-link" showPostFormLink={showPostFormLink} selectedStyle={selectedStyle} >
<PostFormLink id="post-form-link" showPostFormLink={showPostFormLink} selectedStyle={selectedStyle} > <div id="post-form-link-desktop">
<div id="post-form-link-desktop"> [
<a onClick={useClickForm()} onMouseOver={(event) => event.target.style.cursor='pointer'}>Start a New Thread</a>
]
</div>
<div id="post-form-link-mobile">
<span className="btn-wrap">
<a onClick={useClickForm()} onMouseOver={(event) => event.target.style.cursor='pointer'}>Start a New Thread</a>
</span>
</div>
</PostFormLink>
<PostFormTable id="post-form" showPostForm={showPostForm} selectedStyle={selectedStyle} className="post-form">
<tbody>
<tr data-type="Name">
<td id="td-name">Name</td>
<td>
<input name="name" type="text" tabIndex={1} placeholder="Anonymous" ref={nameRef} />
</td>
</tr>
<tr data-type="Subject">
<td>Subject</td>
<td>
<input name="sub" type="text" tabIndex={3} ref={subjectRef}/>
<input id="post-button" type="submit" value="Post" tabIndex={6}
onClick={handleSubmit} />
</td>
</tr>
<tr data-type="Comment">
<td>Comment</td>
<td>
<textarea name="com" cols="48" rows="4" tabIndex={4} wrap="soft" ref={commentRef} />
</td>
</tr>
<tr data-type="File">
<td>Embed File</td>
<td>
<input name="embed" type="text" tabIndex={7} placeholder="Paste link" ref={linkRef} />
<button id="t-help" type="button" onClick={
() => alert("- Embedding media is optional, posts can be text-only. \n- A CAPTCHA challenge will appear after posting. \n- The CAPTCHA is case-sensitive.")
} data-tip="Help">?</button>
</td>
</tr>
</tbody>
</PostFormTable>
</PostForm>
<TopBar selectedStyle={selectedStyle}>
<hr />
<span className="style-changer">
Style:
 
<select id="style-selector" onChange={handleStyleChange} value={selectedStyle}>
<option value="Yotsuba">Yotsuba</option>
<option value="Yotsuba-B">Yotsuba B</option>
<option value="Futaba">Futaba</option>
<option value="Burichan">Burichan</option>
<option value="Tomorrow">Tomorrow</option>
<option value="Photon">Photon</option>
</select>
</span>
<div className="return-button" id="return-button-desktop">
[ [
<a onClick={useClickForm()} onMouseOver={(event) => event.target.style.cursor='pointer'}>Start a New Thread</a> <Link to={`/p/${selectedAddress}`}>Return</Link>
] ]
</div> </div>
<div id="post-form-link-mobile"> <div id="return-button-mobile">
<span className="btn-wrap"> <span className="btn-wrap-catalog btn-wrap">
<a onClick={useClickForm()} onMouseOver={(event) => event.target.style.cursor='pointer'}>Start a New Thread</a> <Link to={`/p/${selectedAddress}`}>Return</Link>
</span> </span>
</div> </div>
</PostFormLink> <div id="stats" style={{float: "right", marginTop: "5px"}}>
<PostFormTable id="post-form" showPostForm={showPostForm} selectedStyle={selectedStyle} className="post-form"> {feed.length > 0 ? (null) : (<span>Fetching IPFS...</span>)}
<tbody> </div>
<tr data-type="Name"> <hr />
<td id="td-name">Name</td> </TopBar>
<td> <Threads selectedStyle={selectedStyle}>
<input name="name" type="text" tabIndex={1} placeholder="Anonymous" ref={nameRef} /> {feed.length < 1 ? (
</td> <CatalogLoader />
</tr> ) : (
<tr data-type="Subject"> <InfiniteScroll
<td>Subject</td> pageStart={0}
<td> loadMore={tryLoadMore}
<input name="sub" type="text" tabIndex={3} ref={subjectRef}/> hasMore={hasMore}
<input id="post-button" type="submit" value="Post" tabIndex={6} >
onClick={handleSubmit} /> {feed.map((thread) => {
</td> const commentMediaInfo = getCommentMediaInfo(thread);
</tr> const fallbackImgUrl = "/assets/filedeleted-res.gif";
<tr data-type="Comment"> return (
<td>Comment</td> <Link style={{all: "unset", cursor: "pointer"}} key={`link-${thread.cid}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)}>
<td> <div key={`thread-${thread.cid}`} className="thread">
<textarea name="com" cols="48" rows="4" tabIndex={4} wrap="soft" ref={commentRef} /> {commentMediaInfo?.url ? (
</td> <Fragment key="f-catalog">
</tr> {commentMediaInfo?.type === "webpage" ? (
<tr data-type="File"> <img key={`img-${thread.cid}`} alt="thread"
<td>Embed File</td> src={commentMediaInfo.url}
<td> onError={(e) => {
<input name="embed" type="text" tabIndex={7} placeholder="Paste link" ref={linkRef} /> e.target.src = fallbackImgUrl
<button id="t-help" type="button" onClick={ e.target.onerror = null;}} />
() => alert("- Embedding media is optional, posts can be text-only. \n- A CAPTCHA challenge will appear after posting. \n- The CAPTCHA is case-sensitive.") ) : null}
} data-tip="Help">?</button> {commentMediaInfo?.type === "image" ? (
</td> <img key={`img-${thread.cid}`} alt="thread"
</tr> src={commentMediaInfo.url}
</tbody> onError={(e) => {
</PostFormTable> e.target.src = fallbackImgUrl
</PostForm> e.target.onerror = null;}} />
<TopBar selectedStyle={selectedStyle}> ) : null}
<hr /> {commentMediaInfo?.type === "video" ? (
<span className="style-changer"> <video key={`fti-${thread.cid}`}
Style: src={commentMediaInfo.url}
  alt={commentMediaInfo.type}
<select id="style-selector" onChange={handleStyleChange} value={selectedStyle}> style={{ pointerEvents: "none" }}
<option value="Yotsuba">Yotsuba</option> onError={(e) => e.target.src = fallbackImgUrl} />
<option value="Yotsuba-B">Yotsuba B</option> ) : null}
<option value="Futaba">Futaba</option> {commentMediaInfo?.type === "audio" ? (
<option value="Burichan">Burichan</option> <audio controls
<option value="Tomorrow">Tomorrow</option> key={`fti-${thread.cid}`}
<option value="Photon">Photon</option> src={commentMediaInfo.url}
</select> alt={commentMediaInfo.type}
</span> style={{ pointerEvents: "none" }}
<div className="return-button" id="return-button-desktop"> onError={(e) => e.target.src = fallbackImgUrl} />
[ ) : null}
<Link to={`/p/${selectedAddress}`}>Return</Link> </Fragment>
] ) : null}
</div> {/* <div key={`ti-${thread.cid}`} className="thread-icons" >
<div id="return-button-mobile"> <span key={`si-${thread.cid}`} className="thread-icon sticky-icon" title="Sticky"></span>
<span className="btn-wrap-catalog btn-wrap"> </div> */}
<Link to={`/p/${selectedAddress}`}>Return</Link> <div key={`meta-${thread.cid}`} className="meta" title="(R)eplies / (I)mage Replies" >
</span> R:
</div> <b key={`b-${thread.cid}`}>{thread.replyCount}</b>
<div id="stats" style={{float: "right", marginTop: "5px"}}> </div>
{feed.length > 0 ? (null) : (<span>Fetching IPFS...</span>)} <div key={`t-${thread.cid}`} className="teaser">
</div> <b key={`b2-${thread.cid}`}>{thread.title ? `${thread.title}` : null}</b>
<hr /> {thread.content ? `: ${thread.content}` : null}
</TopBar> </div>
<Threads selectedStyle={selectedStyle}>
{feed.length < 1 ? (
<CatalogLoader />
) : (
<InfiniteScroll
pageStart={0}
loadMore={tryLoadMore}
hasMore={hasMore}
>
{feed.map((thread) => {
const commentMediaInfo = getCommentMediaInfo(thread);
const fallbackImgUrl = "/assets/filedeleted-res.gif";
return (
<Link style={{all: "unset", cursor: "pointer"}} key={`link-${thread.cid}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)}>
<div key={`thread-${thread.cid}`} className="thread">
{commentMediaInfo?.url ? (
<Fragment key="f-catalog">
{commentMediaInfo?.type === "webpage" ? (
<img key={`img-${thread.cid}`} alt="thread"
src={commentMediaInfo.url}
onError={(e) => {
e.target.src = fallbackImgUrl
e.target.onerror = null;}} />
) : null}
{commentMediaInfo?.type === "image" ? (
<img key={`img-${thread.cid}`} alt="thread"
src={commentMediaInfo.url}
onError={(e) => {
e.target.src = fallbackImgUrl
e.target.onerror = null;}} />
) : null}
{commentMediaInfo?.type === "video" ? (
<video key={`fti-${thread.cid}`}
src={commentMediaInfo.url}
alt={commentMediaInfo.type}
style={{ pointerEvents: "none" }}
onError={(e) => e.target.src = fallbackImgUrl} />
) : null}
{commentMediaInfo?.type === "audio" ? (
<audio controls
key={`fti-${thread.cid}`}
src={commentMediaInfo.url}
alt={commentMediaInfo.type}
style={{ pointerEvents: "none" }}
onError={(e) => e.target.src = fallbackImgUrl} />
) : null}
</Fragment>
) : null}
{/* <div key={`ti-${thread.cid}`} className="thread-icons" >
<span key={`si-${thread.cid}`} className="thread-icon sticky-icon" title="Sticky"></span>
</div> */}
<div key={`meta-${thread.cid}`} className="meta" title="(R)eplies / (I)mage Replies" >
R:
<b key={`b-${thread.cid}`}>{thread.replyCount}</b>
</div> </div>
<div key={`t-${thread.cid}`} className="teaser"> </Link>
<b key={`b2-${thread.cid}`}>{thread.title ? `${thread.title}` : null}</b> )})}
{thread.content ? `: ${thread.content}` : null} </InfiniteScroll>
</div> )}
</div> </Threads>
</Link> </Container>
)})} </>
</InfiniteScroll>
)}
</Threads>
</Container>
); );
} }
src/components/views/Home.jsx
+96 -90
View File
@@ -1,4 +1,5 @@
import React, { useEffect, useRef } from 'react'; import React, { useEffect, useRef } from 'react';
import { Helmet } from 'react-helmet-async';
import useGeneralStore from '../../hooks/stores/useGeneralStore'; import useGeneralStore from '../../hooks/stores/useGeneralStore';
import { Link, useNavigate } from 'react-router-dom'; import { Link, useNavigate } from 'react-router-dom';
import { Container, Header, Logo, Page, Search, About, AboutTitle, AboutContent, Boards, BoardsTitle, BoardsContent, Footer } from '../styled/Home.styled'; import { Container, Header, Logo, Page, Search, About, AboutTitle, AboutContent, Boards, BoardsTitle, BoardsContent, Footer } from '../styled/Home.styled';
@@ -28,103 +29,108 @@ const Home = () => {
return ( return (
<Container> <>
<Header> <Helmet>
<Logo> <title>plebchan</title>
<Link to="/"> </Helmet>
<img alt="plebchan" src="/assets/logo/logo-transparent.png" /> <Container>
</Link> <Header>
</Logo> <Logo>
</Header> <Link to="/">
<Page> <img alt="plebchan" src="/assets/logo/logo-transparent.png" />
<Search> </Link>
<input type="text" placeholder='"board.eth" or "12D3KooW..."' ref={inputRef} onKeyDown={ </Logo>
(event) => { </Header>
if (event.key === "Enter") { <Page>
event.preventDefault(); <Search>
<input type="text" placeholder='"board.eth" or "12D3KooW..."' ref={inputRef} onKeyDown={
(event) => {
if (event.key === "Enter") {
event.preventDefault();
const address = inputRef.current.value;
if (address) {
setSelectedAddress(address);
navigate(`/p/${address}`)
}
}
}} />
<input type="submit" value="Search" onClick={
() => {
const address = inputRef.current.value; const address = inputRef.current.value;
if (address) { if (address) {
setSelectedAddress(address); setSelectedAddress(address);
navigate(`/p/${address}`) navigate(`/p/${address}`)
} }
} }
}} /> } />
<input type="submit" value="Search" onClick={ </Search>
() => { <About>
const address = inputRef.current.value; <AboutTitle>
if (address) { <h2>What is plebchan?</h2>
setSelectedAddress(address); </AboutTitle>
navigate(`/p/${address}`) <AboutContent>
} <div id="content">
} <p>Plebchan is a serverless, adminless, decentralized 4chan alternative that uses the <a href="https://plebbit.com" target="_blank" rel="noreferrer">plebbit protocol</a>. Users do not need to register an account before participating in the community; anyone can post comments, share media links, and create a board. Search for any board address above, or feel free to click on a popular board below that interests you and jump right in! </p>
} /> <br />
</Search> <p>There are no global rules, each board is completely independent and their owners decide how they should be moderated.</p>
<About> </div>
<AboutTitle> </AboutContent>
<h2>What is plebchan?</h2> </About>
</AboutTitle> <Boards>
<AboutContent> <BoardsTitle>
<div id="content"> <h2>Popular boards</h2>
<p>Plebchan is a serverless, adminless, decentralized 4chan alternative that uses the <a href="https://plebbit.com" target="_blank" rel="noreferrer">plebbit protocol</a>. Users do not need to register an account before participating in the community; anyone can post comments, share media links, and create a board. Search for any board address above, or feel free to click on a popular board below that interests you and jump right in! </p> </BoardsTitle>
<br /> <BoardsContent>
<p>There are no global rules, each board is completely independent and their owners decide how they should be moderated.</p> {defaultSubplebbits.map(subplebbit => (
</div> <div className="board" key={subplebbit.address}>
</AboutContent> <div className="board-title">
</About> {subplebbit.title ? subplebbit.title : <span style={{userSelect: "none"}}>&nbsp;</span>}
<Boards> </div>
<BoardsTitle> <Link to={`/p/${subplebbit.address}`} onClick={() => {
<h2>Popular boards</h2> setSelectedTitle(subplebbit.title);
</BoardsTitle> setSelectedAddress(subplebbit.address);
<BoardsContent> }} >
{defaultSubplebbits.map(subplebbit => ( <img alt="board logo" src="/assets/plebchan.png" />
<div className="board" key={subplebbit.address}> </Link>
<div className="board-title"> <div className="board-text">
{subplebbit.title ? subplebbit.title : <span style={{userSelect: "none"}}>&nbsp;</span>} <b>{subplebbit.address}</b>
</div>
</div> </div>
<Link to={`/p/${subplebbit.address}`} onClick={() => { ))}
setSelectedTitle(subplebbit.title); </BoardsContent>
setSelectedAddress(subplebbit.address); </Boards>
}} > </Page>
<img alt="board logo" src="/assets/plebchan.png" /> <Footer>
</Link> <ul>
<div className="board-text"> <li className="fill"></li>
<b>{subplebbit.address}</b> <li className="first">
</div> <a href="https://plebbitapp.eth.limo/#/" target="_blank" rel="noopener noreferrer">Plebbit</a>
</div> </li>
))} <li>
</BoardsContent> <a href="https://gitcoin.co/grants/5515/plebbit-a-serverless-adminless-decentralized-redd" target="_blank" rel="noopener noreferrer">Donate</a>
</Boards> </li>
</Page> <li>
<Footer> <a href="https://plebbit.com/whitepaper" target="_blank" rel="noopener noreferrer">Whitepaper</a>
<ul> </li>
<li className="fill"></li> <li>
<li className="first"> <a href="https://snowtrace.io/token/0x625fc9bb971bb305a2ad63252665dcfe9098bee9" target="_blank" rel="noopener noreferrer">Token</a>
<a href="https://plebbitapp.eth.limo/#/" target="_blank" rel="noopener noreferrer">Plebbit</a> </li>
</li> <li>
<li> <a href="https://matrix.to/#/#plebbit:plebbitchat.org" target="_blank" rel="noopener noreferrer">Matrix</a>
<a href="https://gitcoin.co/grants/5515/plebbit-a-serverless-adminless-decentralized-redd" target="_blank" rel="noopener noreferrer">Donate</a> </li>
</li> <li>
<li> <a href="https://t.me/plebbit" target="_blank" rel="noopener noreferrer">Telegram</a>
<a href="https://plebbit.com/whitepaper" target="_blank" rel="noopener noreferrer">Whitepaper</a> </li>
</li> <li>
<li> <a href="https://twitter.com/getplebbit" target="_blank" rel="noopener noreferrer">Twitter</a>
<a href="https://snowtrace.io/token/0x625fc9bb971bb305a2ad63252665dcfe9098bee9" target="_blank" rel="noopener noreferrer">Token</a> </li>
</li> <li>
<li> <a href="https://discord.gg/E7ejphwzGW" target="_blank" rel="noopener noreferrer">Discord</a>
<a href="https://matrix.to/#/#plebbit:plebbitchat.org" target="_blank" rel="noopener noreferrer">Matrix</a> </li>
</li> </ul>
<li> </Footer>
<a href="https://t.me/plebbit" target="_blank" rel="noopener noreferrer">Telegram</a> </Container>
</li> </>
<li>
<a href="https://twitter.com/getplebbit" target="_blank" rel="noopener noreferrer">Twitter</a>
</li>
<li>
<a href="https://discord.gg/E7ejphwzGW" target="_blank" rel="noopener noreferrer">Discord</a>
</li>
</ul>
</Footer>
</Container>
) )
}; };
src/components/views/NotFound.jsx
+28 -22
View File
@@ -1,4 +1,5 @@
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
import { Helmet } from 'react-helmet-async';
import useGeneralStore from '../../hooks/stores/useGeneralStore'; import useGeneralStore from '../../hooks/stores/useGeneralStore';
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { Container, Header, Logo, Page, Boards, BoardsTitle } from '../styled/Home.styled'; import { Container, Header, Logo, Page, Boards, BoardsTitle } from '../styled/Home.styled';
@@ -17,28 +18,33 @@ const NotFound = ({ setBodyStyle }) => {
}, [setBodyStyle, setSelectedStyle]); }, [setBodyStyle, setSelectedStyle]);
return ( return (
<Container> <>
<Header> <Helmet>
<Logo> <title>plebchan - 404 Not Found</title>
<Link to="/"> </Helmet>
<img alt="plebchan" src="/assets/logo/logo-transparent.png" /> <Container>
</Link> <Header>
</Logo> <Logo>
</Header> <Link to="/">
<Page> <img alt="plebchan" src="/assets/logo/logo-transparent.png" />
<Boards> </Link>
<BoardsTitle> </Logo>
<h2 style={{textAlign: 'center'}}>404 Not Found</h2> </Header>
</BoardsTitle> <Page>
<img src="/assets/plebchan-husbando.jpg" alt="plebchan" style={{ <Boards>
display: "block", <BoardsTitle>
margin: "auto", <h2 style={{textAlign: 'center'}}>404 Not Found</h2>
padding: "15px", </BoardsTitle>
width: "50%" <img src="/assets/plebchan-husbando.jpg" alt="plebchan" style={{
}}></img> display: "block",
</Boards> margin: "auto",
</Page> padding: "15px",
</Container> width: "50%"
}}></img>
</Boards>
</Page>
</Container>
</>
); );
} }
src/components/views/Pending.jsx
+297 -291
View File
@@ -1,4 +1,5 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
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 { useAccountComment } from '@plebbit/plebbit-react-hooks'; import { useAccountComment } from '@plebbit/plebbit-react-hooks';
@@ -70,313 +71,318 @@ const Pending = () => {
return ( return (
<Container> <>
<SettingsModal <Helmet>
selectedStyle={selectedStyle} <title>{`plebchan - Pending Thread #${parseInt(index) + 1}`}</title>
isOpen={isSettingsOpen} </Helmet>
closeModal={() => setIsSettingsOpen(false)} /> <Container>
<NavBar selectedStyle={selectedStyle}> <SettingsModal
<> selectedStyle={selectedStyle}
{defaultSubplebbits.map(subplebbit => ( isOpen={isSettingsOpen}
<span className="boardList" key={`span-${subplebbit.address}`}> closeModal={() => setIsSettingsOpen(false)} />
[ <NavBar selectedStyle={selectedStyle}>
<Link key={`a-${subplebbit.address}`}
to={`/p/${subplebbit.address}`}
onClick={() => {
setSelectedTitle(subplebbit.title);
setSelectedAddress(subplebbit.address);
}}
>{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
]&nbsp;
</span>
))}
<span className="nav">
[
<Link to={`/p/${selectedAddress}/c/${selectedThread}/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
]
[
<Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
)}>Home</Link>
]
</span>
<div id="board-nav-mobile" style={{ top: visible ? 0 : '-23px' }}>
<div className="board-select">
<strong>Board</strong>
&nbsp;
<select id="board-select-mobile" value={selectedAddress} onChange={handleSelectChange}>
{defaultSubplebbits.map(subplebbit => (
<option key={`option-${subplebbit.address}`} value={subplebbit.address}
>{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
))}
</select>
</div>
<div className="page-jump">
<Link to={`/p/${selectedAddress}/c/${selectedThread}/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
&nbsp;
<Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
)}>Home</Link>
</div>
</div>
<div id="separator-mobile">&nbsp;</div>
<div id="separator-mobile">&nbsp;</div>
</>
</NavBar>
<Header selectedStyle={selectedStyle}>
<>
<div className="banner">
<ImageBanner />
</div>
<>
<div className="board-title">{selectedTitle ?? null}</div>
<div className="board-address">{selectedAddress ? ("p/" + selectedAddress) : null}</div>
</>
</>
</Header>
<Break selectedStyle={selectedStyle} />
<PostForm selectedStyle={selectedStyle} name="post" action="" method="post" enctype="multipart/form-data">
<ReplyFormLink id="post-form-link" showReplyFormLink={showPostFormLink} selectedStyle={selectedStyle} >
<div id="return-button-mobile">
<span className="btn-wrap">
<Link to={`/p/${selectedAddress}`}>Return</Link>
</span>
</div>
<div id="catalog-button-mobile">
<span className="btn-wrap">
<Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link>
</span>
</div>
<div>&nbsp;</div>
</ReplyFormLink>
</PostForm>
<TopBar selectedStyle={selectedStyle}>
<hr />
<span className="style-changer">
Style:
 
<select id="style-selector" onChange={handleStyleChange} value={selectedStyle}>
<option value="Yotsuba">Yotsuba</option>
<option value="Yotsuba-B">Yotsuba B</option>
<option value="Futaba">Futaba</option>
<option value="Burichan">Burichan</option>
<option value="Tomorrow">Tomorrow</option>
<option value="Photon">Photon</option>
</select>
</span>
<span className="return-button" id="return-button-desktop">
[
<Link to={`/p/${selectedAddress}`}>Return</Link>
]
</span>
<span className="return-button catalog-button" id="catalog-button-desktop">
[
<Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link>
]
</span>
{comment ? (
<span className="reply-stat">Preview</span>
) : (
<span className="reply-stat">Fetching IPFS...</span>
)}
<hr />
</TopBar>
<Tooltip id="tooltip" className="tooltip" />
<BoardForm selectedStyle={selectedStyle}>
{comment !== undefined ? (
<> <>
<div className="thread"> {defaultSubplebbits.map(subplebbit => (
<div className="op-container"> <span className="boardList" key={`span-${subplebbit.address}`}>
<div className="post op"> [
<div className="post-info"> <Link key={`a-${subplebbit.address}`}
{commentMediaInfo?.url ? ( to={`/p/${subplebbit.address}`}
<div key={`f-${"pending"}`} className="file" style={{marginBottom: "5px"}}> onClick={() => {
<div key={`ft-${"pending"}`} className="file-text"> setSelectedTitle(subplebbit.title);
Link:&nbsp; setSelectedAddress(subplebbit.address);
<a key={`fa-${"pending"}`} href={commentMediaInfo.url} target="_blank">{ }}
commentMediaInfo?.url.length > 30 ? >{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
commentMediaInfo?.url.slice(0, 30) + "(...)" : ]&nbsp;
commentMediaInfo?.url </span>
}</a>&nbsp;({commentMediaInfo?.type}) ))}
</div> <span className="nav">
{commentMediaInfo?.type === "webpage" ? ( [
<span key={`fta-${"pending"}`} className="file-thumb"> <Link to={`/p/${selectedAddress}/c/${selectedThread}/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
<img key={`fti-${"pending"}`} src={comment.thumbnailUrl} alt="thumbnail" onError={(e) => e.target.src = fallbackImgUrl} /> ]
</span> [
) : null} <Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
{commentMediaInfo?.type === "image" ? ( )}>Home</Link>
<span key={`fta-${"pending"}`} className="file-thumb"> ]
<img key={`fti-${"pending"}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} /> </span>
</span> <div id="board-nav-mobile" style={{ top: visible ? 0 : '-23px' }}>
) : null} <div className="board-select">
{commentMediaInfo?.type === "video" ? ( <strong>Board</strong>
<span key={`fta-${"pending"}`} className="file-thumb"> &nbsp;
<video controls key={`fti-${"pending"}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} /> <select id="board-select-mobile" value={selectedAddress} onChange={handleSelectChange}>
</span> {defaultSubplebbits.map(subplebbit => (
) : null} <option key={`option-${subplebbit.address}`} value={subplebbit.address}
{commentMediaInfo?.type === "audio" ? ( >{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
<span key={`fta-${"pending"}`} className="file-thumb"> ))}
<audio controls key={`fti-${"pending"}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} /> </select>
</span> </div>
) : null} <div className="page-jump">
</div> <Link to={`/p/${selectedAddress}/c/${selectedThread}/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
) : null} &nbsp;
<span className="name-block"> <Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
{comment.title ? ( )}>Home</Link>
comment.title.length > 75 ?
<>
<span key={`q-${"pending"}`} className="title"
data-tooltip-id="tooltip"
data-tooltip-content={comment.title}
data-tooltip-place="top">
{comment.title.slice(0, 75) + " (...)"}
</span>
</>
: <span key={`q-${"pending"}`} className="title">
{comment.title}
</span>)
: null}
&nbsp;
{comment.author?.displayName
? comment.author?.displayName.length > 20
? <>
<span key={`n-${"pending"}`} className="name"
data-tooltip-id="tooltip"
data-tooltip-content={comment.author?.displayName}
data-tooltip-place="top">
{comment.author?.displayName.slice(0, 20) + " (...)"}
</span>
</>
: <span key={`n-${"pending"}`} className="name">
{comment.author?.displayName}</span>
: <span key={`n-${"pending"}`} className="name">
Anonymous</span>}
&nbsp;
&nbsp;
<span className="poster-address">
(u/
<span key={`pa-${"pending"}`} className="poster-address">
{comment.author?.address}
</span>)
</span>
&nbsp;
<span className="date-time" data-utc="data">{getDate(comment?.timestamp)}</span>
&nbsp;
<span className="post-number">
<Link to="" onClick={() => {}} title="Link to this post">c/</Link>
<span key="pending" style={{color: 'red', fontWeight: '700'}}>Pending</span>
</span>&nbsp;&nbsp;
<button key={`pmb-${"pending"}`} className="post-menu-button" onClick={() => {}} title="Post menu" style={{ all: 'unset', cursor: 'pointer' }}>▶</button>
</span>
<blockquote key={`blockquote-${"pending"}`}>
<Post content={comment.content} comment={comment} handleQuoteClick={handleQuoteClick} key={`post-${"pending"}`} />
</blockquote>
</div>
</div>
</div> </div>
</div> </div>
<div className="thread-mobile" key="thread-mobile"> <div id="separator-mobile">&nbsp;</div>
<hr /> <div id="separator-mobile">&nbsp;</div>
<div className="op-container" key="op-container"> </>
<div key={`mob-po-${"pending"}`} className="post op"> </NavBar>
<div key={`mob-pi-${"pending"}`} className="post-info-mobile"> <Header selectedStyle={selectedStyle}>
<button style={{ all: 'unset', cursor: 'pointer' }} key={`mob-pb-${"pending"}`} className="post-menu-button-mobile" onClick={() => {}}>...</button> <>
<span className="name-block-mobile"> <div className="banner">
{comment.author?.displayName <ImageBanner />
? comment.author?.displayName.length > 15 </div>
? <> <>
<span key={`mob-n-${"pending"}`} className="name-mobile" <div className="board-title">{selectedTitle ?? null}</div>
data-tooltip-id="tooltip" <div className="board-address">{selectedAddress ? ("p/" + selectedAddress) : null}</div>
data-tooltip-content={comment.author?.displayName} </>
data-tooltip-place="top"> </>
{comment.author?.displayName.slice(0, 15) + " (...)"} </Header>
<Break selectedStyle={selectedStyle} />
<PostForm selectedStyle={selectedStyle} name="post" action="" method="post" enctype="multipart/form-data">
<ReplyFormLink id="post-form-link" showReplyFormLink={showPostFormLink} selectedStyle={selectedStyle} >
<div id="return-button-mobile">
<span className="btn-wrap">
<Link to={`/p/${selectedAddress}`}>Return</Link>
</span>
</div>
<div id="catalog-button-mobile">
<span className="btn-wrap">
<Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link>
</span>
</div>
<div>&nbsp;</div>
</ReplyFormLink>
</PostForm>
<TopBar selectedStyle={selectedStyle}>
<hr />
<span className="style-changer">
Style:
 
<select id="style-selector" onChange={handleStyleChange} value={selectedStyle}>
<option value="Yotsuba">Yotsuba</option>
<option value="Yotsuba-B">Yotsuba B</option>
<option value="Futaba">Futaba</option>
<option value="Burichan">Burichan</option>
<option value="Tomorrow">Tomorrow</option>
<option value="Photon">Photon</option>
</select>
</span>
<span className="return-button" id="return-button-desktop">
[
<Link to={`/p/${selectedAddress}`}>Return</Link>
]
</span>
<span className="return-button catalog-button" id="catalog-button-desktop">
[
<Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link>
]
</span>
{comment ? (
<span className="reply-stat">Preview</span>
) : (
<span className="reply-stat">Fetching IPFS...</span>
)}
<hr />
</TopBar>
<Tooltip id="tooltip" className="tooltip" />
<BoardForm selectedStyle={selectedStyle}>
{comment !== undefined ? (
<>
<div className="thread">
<div className="op-container">
<div className="post op">
<div className="post-info">
{commentMediaInfo?.url ? (
<div key={`f-${"pending"}`} className="file" style={{marginBottom: "5px"}}>
<div key={`ft-${"pending"}`} className="file-text">
Link:&nbsp;
<a key={`fa-${"pending"}`} href={commentMediaInfo.url} target="_blank">{
commentMediaInfo?.url.length > 30 ?
commentMediaInfo?.url.slice(0, 30) + "(...)" :
commentMediaInfo?.url
}</a>&nbsp;({commentMediaInfo?.type})
</div>
{commentMediaInfo?.type === "webpage" ? (
<span key={`fta-${"pending"}`} className="file-thumb">
<img key={`fti-${"pending"}`} src={comment.thumbnailUrl} alt="thumbnail" onError={(e) => e.target.src = fallbackImgUrl} />
</span> </span>
</> ) : null}
: <span key={`mob-n-${"pending"}`} className="name-mobile"> {commentMediaInfo?.type === "image" ? (
{comment.author?.displayName}</span> <span key={`fta-${"pending"}`} className="file-thumb">
: <span key={`mob-n-${"pending"}`} className="name-mobile"> <img key={`fti-${"pending"}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
Anonymous</span>} </span>
&nbsp; ) : null}
<span key={`mob-pa-${"pending"}`} className="poster-address-mobile"> {commentMediaInfo?.type === "video" ? (
(u/ <span key={`fta-${"pending"}`} className="file-thumb">
<span key={`mob-ha-${"pending"}`} className="highlight-address-mobile"> <video controls key={`fti-${"pending"}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
{comment.author?.address} </span>
</span> ) : null}
)&nbsp; {commentMediaInfo?.type === "audio" ? (
</span> <span key={`fta-${"pending"}`} className="file-thumb">
<br key={`mob-br1-${"pending"}`} /> <audio controls key={`fti-${"pending"}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
{comment.title ? ( </span>
comment.title.length > 30 ? ) : null}
</div>
) : null}
<span className="name-block">
{comment.title ? (
comment.title.length > 75 ?
<> <>
<span key={`mob-t-${"pending"}`} className="subject-mobile" <span key={`q-${"pending"}`} className="title"
data-tooltip-id="tooltip" data-tooltip-id="tooltip"
data-tooltip-content={comment.title} data-tooltip-content={comment.title}
data-tooltip-place="top"> data-tooltip-place="top">
{comment.title.slice(0, 30) + " (...)"} {comment.title.slice(0, 75) + " (...)"}
</span> </span>
</> </>
: <span key={`mob-t-${"pending"}`} className="subject-mobile"> : <span key={`q-${"pending"}`} className="title">
{comment.title} {comment.title}
</span>) : null} </span>)
</span> : null}
<span key={`mob-dt-${"pending"}`} className="date-time-mobile">
{getDate(comment?.timestamp)}
&nbsp; &nbsp;
<button id="reply-button" style={{ all: 'unset' }} key={`mob-no-${"pending"}`}>c/</button> {comment.author?.displayName
? comment.author?.displayName.length > 20
? <>
<span key={`n-${"pending"}`} className="name"
data-tooltip-id="tooltip"
data-tooltip-content={comment.author?.displayName}
data-tooltip-place="top">
{comment.author?.displayName.slice(0, 20) + " (...)"}
</span>
</>
: <span key={`n-${"pending"}`} className="name">
{comment.author?.displayName}</span>
: <span key={`n-${"pending"}`} className="name">
Anonymous</span>}
&nbsp;
&nbsp; &nbsp;
<span key="pending-mob" style={{color: 'red', fontWeight: '700'}}>Pending</span> <span className="poster-address">
(u/
<span key={`pa-${"pending"}`} className="poster-address">
{comment.author?.address}
</span>)
</span>
&nbsp;
<span className="date-time" data-utc="data">{getDate(comment?.timestamp)}</span>
&nbsp;
<span className="post-number">
<Link to="" onClick={() => {}} title="Link to this post">c/</Link>
<span key="pending" style={{color: 'red', fontWeight: '700'}}>Pending</span>
</span>&nbsp;&nbsp;
<button key={`pmb-${"pending"}`} className="post-menu-button" onClick={() => {}} title="Post menu" style={{ all: 'unset', cursor: 'pointer' }}>▶</button>
</span> </span>
<blockquote key={`blockquote-${"pending"}`}>
<Post content={comment.content} comment={comment} handleQuoteClick={handleQuoteClick} key={`post-${"pending"}`} />
</blockquote>
</div> </div>
{commentMediaInfo?.url ? (
commentMediaInfo.type === "webpage" ? (
<div key={`mob-f-${"pending"}`} className="file-mobile">
<span key={`mob-ft${"pending"}`} className="file-thumb-mobile">
<img key={`mob-img-${"pending"}`} src={comment.thumbnailUrl} alt="thumbnail" onError={(e) => e.target.src = fallbackImgUrl} />
<div key={`mob-fi-${"pending"}`} className="file-info-mobile">{commentMediaInfo.type}</div>
</span>
</div>
) : commentMediaInfo.type === "image" ? (
<div key={`mob-f-${"pending"}`} className="file-mobile">
<span key={`mob-ft${"pending"}`} className="file-thumb-mobile">
<img key={`mob-img-${"pending"}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
<div key={`mob-fi-${"pending"}`} className="file-info-mobile">{commentMediaInfo.type}</div>
</span>
</div>
) : commentMediaInfo.type === "video" ? (
<div key={`mob-f-${"pending"}`} className="file-mobile">
<span key={`mob-ft${"pending"}`} className="file-thumb-mobile">
<video controls key={`mob-img-${"pending"}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
<div key={`mob-fi-${"pending"}`} className="file-info-mobile">{commentMediaInfo.type}</div>
</span>
</div>
) : commentMediaInfo.type === "audio" ? (
<div key={`mob-f-${"pending"}`} className="file-mobile">
<span key={`mob-ft${"pending"}`} className="file-thumb-mobile">
<audio controls key={`mob-img-${"pending"}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
<div key={`mob-fi-${"pending"}`} className="file-info-mobile">{commentMediaInfo.type}</div>
</span>
</div>
) : null
) : null}
<blockquote key={`mob-bq-${"pending"}`} className="post-message-mobile">
{comment.content ? (
<>
<Post content={comment.content} handleQuoteClick={handleQuoteClick} comment={comment} key={`post-mobile-${"pending"}`} />
</>
) : null}
</blockquote>
</div> </div>
</div> </div>
</div> </div>
<BottomBar selectedStyle={selectedStyle}> <div className="thread-mobile" key="thread-mobile">
<div id="bottombar-desktop"> <hr />
<hr /> <div className="op-container" key="op-container">
</div> <div key={`mob-po-${"pending"}`} className="post op">
</BottomBar> <div key={`mob-pi-${"pending"}`} className="post-info-mobile">
</> <button style={{ all: 'unset', cursor: 'pointer' }} key={`mob-pb-${"pending"}`} className="post-menu-button-mobile" onClick={() => {}}>...</button>
) : ( <span className="name-block-mobile">
<PostLoader /> {comment.author?.displayName
)} ? comment.author?.displayName.length > 15
</BoardForm> ? <>
</Container> <span key={`mob-n-${"pending"}`} className="name-mobile"
data-tooltip-id="tooltip"
data-tooltip-content={comment.author?.displayName}
data-tooltip-place="top">
{comment.author?.displayName.slice(0, 15) + " (...)"}
</span>
</>
: <span key={`mob-n-${"pending"}`} className="name-mobile">
{comment.author?.displayName}</span>
: <span key={`mob-n-${"pending"}`} className="name-mobile">
Anonymous</span>}
&nbsp;
<span key={`mob-pa-${"pending"}`} className="poster-address-mobile">
(u/
<span key={`mob-ha-${"pending"}`} className="highlight-address-mobile">
{comment.author?.address}
</span>
)&nbsp;
</span>
<br key={`mob-br1-${"pending"}`} />
{comment.title ? (
comment.title.length > 30 ?
<>
<span key={`mob-t-${"pending"}`} className="subject-mobile"
data-tooltip-id="tooltip"
data-tooltip-content={comment.title}
data-tooltip-place="top">
{comment.title.slice(0, 30) + " (...)"}
</span>
</>
: <span key={`mob-t-${"pending"}`} className="subject-mobile">
{comment.title}
</span>) : null}
</span>
<span key={`mob-dt-${"pending"}`} className="date-time-mobile">
{getDate(comment?.timestamp)}
&nbsp;
<button id="reply-button" style={{ all: 'unset' }} key={`mob-no-${"pending"}`}>c/</button>
&nbsp;
<span key="pending-mob" style={{color: 'red', fontWeight: '700'}}>Pending</span>
</span>
</div>
{commentMediaInfo?.url ? (
commentMediaInfo.type === "webpage" ? (
<div key={`mob-f-${"pending"}`} className="file-mobile">
<span key={`mob-ft${"pending"}`} className="file-thumb-mobile">
<img key={`mob-img-${"pending"}`} src={comment.thumbnailUrl} alt="thumbnail" onError={(e) => e.target.src = fallbackImgUrl} />
<div key={`mob-fi-${"pending"}`} className="file-info-mobile">{commentMediaInfo.type}</div>
</span>
</div>
) : commentMediaInfo.type === "image" ? (
<div key={`mob-f-${"pending"}`} className="file-mobile">
<span key={`mob-ft${"pending"}`} className="file-thumb-mobile">
<img key={`mob-img-${"pending"}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
<div key={`mob-fi-${"pending"}`} className="file-info-mobile">{commentMediaInfo.type}</div>
</span>
</div>
) : commentMediaInfo.type === "video" ? (
<div key={`mob-f-${"pending"}`} className="file-mobile">
<span key={`mob-ft${"pending"}`} className="file-thumb-mobile">
<video controls key={`mob-img-${"pending"}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
<div key={`mob-fi-${"pending"}`} className="file-info-mobile">{commentMediaInfo.type}</div>
</span>
</div>
) : commentMediaInfo.type === "audio" ? (
<div key={`mob-f-${"pending"}`} className="file-mobile">
<span key={`mob-ft${"pending"}`} className="file-thumb-mobile">
<audio controls key={`mob-img-${"pending"}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
<div key={`mob-fi-${"pending"}`} className="file-info-mobile">{commentMediaInfo.type}</div>
</span>
</div>
) : null
) : null}
<blockquote key={`mob-bq-${"pending"}`} className="post-message-mobile">
{comment.content ? (
<>
<Post content={comment.content} handleQuoteClick={handleQuoteClick} comment={comment} key={`post-mobile-${"pending"}`} />
</>
) : null}
</blockquote>
</div>
</div>
</div>
<BottomBar selectedStyle={selectedStyle}>
<div id="bottombar-desktop">
<hr />
</div>
</BottomBar>
</>
) : (
<PostLoader />
)}
</BoardForm>
</Container>
</>
); );
} }
src/components/views/Thread.jsx
+639 -627
View File
File diff suppressed because it is too large Load Diff