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

chore(post menu): update plebones link to eth limo

Browse Source
This commit is contained in:
plebeius.eth
2023-09-21 14:38:12 +02:00
parent b966fbd4db
commit 51b50c1cfa
9 changed files with 18846 additions and 16301 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/views/All.jsx
+1568 -1074
View File
File diff suppressed because it is too large Load Diff
src/components/views/AllCatalog.jsx
+456 -366
View File
File diff suppressed because it is too large Load Diff
src/components/views/Board.jsx
+2121 -1493
View File
File diff suppressed because it is too large Load Diff
src/components/views/Catalog.jsx
+773 -587
View File
File diff suppressed because it is too large Load Diff
src/components/views/Description.jsx
+436 -336
View File
File diff suppressed because it is too large Load Diff
src/components/views/Rules.jsx
+392 -301
View File
@@ -6,7 +6,7 @@ import { Tooltip } from 'react-tooltip';
import { useSubplebbit } from '@plebbit/plebbit-react-hooks';
import { debounce } from 'lodash';
import { Container, NavBar, Header, Break, PostMenu, PostForm, PostMenuMobile } from '../styled/views/Board.styled';
import { TopBar, BoardForm, Footer, ReplyFormLink} from '../styled/views/Thread.styled';
import { TopBar, BoardForm, Footer, ReplyFormLink } from '../styled/views/Thread.styled';
import { PostMenuCatalog } from '../styled/views/Catalog.styled';
import BoardStats from '../BoardStats';
import ImageBanner from '../ImageBanner';
@@ -18,25 +18,26 @@ import getDate from '../../utils/getDate';
import handleStyleChange from '../../utils/handleStyleChange';
import useGeneralStore from '../../hooks/stores/useGeneralStore';
import packageJson from '../../../package.json';
const {version} = packageJson;
const { version } = packageJson;
const commitRef = process?.env?.REACT_APP_COMMIT_REF ? ` ${process.env.REACT_APP_COMMIT_REF.slice(0, 7)}` : '';
const Rules = () => {
const {
defaultSubplebbits,
isSettingsOpen, setIsSettingsOpen,
selectedAddress, setSelectedAddress,
selectedStyle,
setSelectedTitle,
} = useGeneralStore(state => state);
const { defaultSubplebbits, isSettingsOpen, setIsSettingsOpen, selectedAddress, setSelectedAddress, selectedStyle, setSelectedTitle } = useGeneralStore(
(state) => state,
);
// temporary hardcode
const plebtokenRules = [
"This community is strictly SFW. Any NSFW language or content will be removed.",
<span>Only post about the plebbit token ($PLEB). For general cryptocurrency discussion, go to <Link className='quotelink' to="/p/business-and-finance.eth">p/business-and-finance.eth</Link>.</span>,
"FUD is allowed unless blatantly meaningless and spammy."
]
'This community is strictly SFW. Any NSFW language or content will be removed.',
<span>
Only post about the plebbit token ($PLEB). For general cryptocurrency discussion, go to{' '}
<Link className='quotelink' to='/p/business-and-finance.eth'>
p/business-and-finance.eth
</Link>
.
</span>,
'FUD is allowed unless blatantly meaningless and spammy.',
];
const navigate = useNavigate();
@@ -48,16 +49,15 @@ const Rules = () => {
const [isAdminListOpen, setIsAdminListOpen] = useState(false);
const [prevScrollPos, setPrevScrollPos] = useState(0);
const [visible, setVisible] = useState(true);
const [menuPosition, setMenuPosition] = useState({top: 0, left: 0});
const [mobileMenuPosition, setMobileMenuPosition] = useState({top: 0, left: 0});
const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 });
const [mobileMenuPosition, setMobileMenuPosition] = useState({ top: 0, left: 0 });
const [openMenuCid, setOpenMenuCid] = useState(null);
const [openMobileMenuCid, setOpenMobileMenuCid] = useState(null);
const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);
const [isClientRedirectMenuOpen, setIsClientRedirectMenuOpen] = useState(false);
const { subplebbitAddress } = useParams();
const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress});
const subplebbit = useSubplebbit({ subplebbitAddress: selectedAddress });
const handleOptionClick = () => {
setOpenMenuCid(null);
@@ -67,19 +67,23 @@ const Rules = () => {
setOpenMobileMenuCid(null);
};
const handleOutsideClick = useCallback((e) => {
const handleOutsideClick = useCallback(
(e) => {
if (openMenuCid !== null && !postMenuCatalogRef.current.contains(e.target)) {
setOpenMenuCid(null);
}
}, [openMenuCid, postMenuCatalogRef]);
},
[openMenuCid, postMenuCatalogRef],
);
const handleMobileOutsideClick = useCallback((e) => {
const handleMobileOutsideClick = useCallback(
(e) => {
if (openMobileMenuCid !== null && !postMenuMobileRef.current.contains(e.target)) {
setOpenMobileMenuCid(null);
}
}, [openMobileMenuCid, postMenuMobileRef]);
},
[openMobileMenuCid, postMenuMobileRef],
);
useEffect(() => {
if (openMenuCid !== null) {
@@ -93,7 +97,6 @@ const Rules = () => {
};
}, [openMenuCid, handleOutsideClick]);
useEffect(() => {
if (openMobileMenuCid !== null) {
document.addEventListener('click', handleMobileOutsideClick);
@@ -106,18 +109,16 @@ const Rules = () => {
};
}, [openMobileMenuCid, handleMobileOutsideClick]);
useEffect(() => {
window.scrollTo(0, 0);
}, []);
useEffect(() => {
const selectedSubplebbit = defaultSubplebbits.find((subplebbit) => subplebbit.address === subplebbitAddress);
if (subplebbitAddress) {
setSelectedAddress(subplebbitAddress);
} else if (subplebbit?.address) {
setSelectedAddress(subplebbit.address)
setSelectedAddress(subplebbit.address);
}
if (selectedSubplebbit) {
setSelectedTitle(selectedSubplebbit.title);
@@ -157,240 +158,279 @@ const Rules = () => {
navigate(`/p/${selected}`);
};
return (
<>
<Helmet>
<title>
{"Board Rules - " + (subplebbit.title || subplebbit.address) + " - plebchan"}
</title>
<title>{'Board Rules - ' + (subplebbit.title || subplebbit.address) + ' - plebchan'}</title>
</Helmet>
<Container>
<CreateBoardModal
selectedStyle={selectedStyle}
isOpen={isCreateBoardOpen}
closeModal={() => setIsCreateBoardOpen(false)} />
<AdminListModal
selectedStyle={selectedStyle}
isOpen={isAdminListOpen}
closeModal={() => setIsAdminListOpen(false)}
roles={subplebbit.roles} />
<SettingsModal
selectedStyle={selectedStyle}
isOpen={isSettingsOpen}
closeModal={() => setIsSettingsOpen(false)} />
<CreateBoardModal selectedStyle={selectedStyle} isOpen={isCreateBoardOpen} closeModal={() => setIsCreateBoardOpen(false)} />
<AdminListModal selectedStyle={selectedStyle} isOpen={isAdminListOpen} closeModal={() => setIsAdminListOpen(false)} roles={subplebbit.roles} />
<SettingsModal selectedStyle={selectedStyle} isOpen={isSettingsOpen} closeModal={() => setIsSettingsOpen(false)} />
<NavBar selectedStyle={selectedStyle}>
<>
<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;[
{defaultSubplebbits.map((subplebbit, index) => (
<span className="boardList" key={`span-${subplebbit.address}`}>
{index === 0 ? null : "\u00a0"}
<Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => {
<span className='boardList' key={`span-${subplebbit.address}`}>
{index === 0 ? null : '\u00a0'}
<Link
to={`/p/${subplebbit.address}`}
key={`a-${subplebbit.address}`}
onClick={() => {
setSelectedTitle(subplebbit.title);
setSelectedAddress(subplebbit.address);
}}
>{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
{index !== defaultSubplebbits.length - 1 ? " /" : null}
>
{subplebbit.title ? subplebbit.title : subplebbit.address}
</Link>
{index !== defaultSubplebbits.length - 1 ? ' /' : null}
</span>
))}
]
</span>
<span className="nav">
<span className='nav'>
[
<span id="button-span" style={{cursor: 'pointer'}} onClick={
() => {
window.electron && window.electron.isElectron ? (
setIsCreateBoardOpen(true)
) : (
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'
)
)
}
}>Create Board</span>
]
[
<Link to={`/p/${selectedAddress}/rules/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
]
[
<Link to="/">Home</Link>
]
<span
id='button-span'
style={{ cursor: 'pointer' }}
onClick={() => {
window.electron && window.electron.isElectron
? setIsCreateBoardOpen(true)
: 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',
);
}}
>
Create Board
</span>
<div id="board-nav-mobile" style={{ top: visible ? 0 : '-23px' }}>
<div className="nav-container">
<div className="board-select">
] [
<Link to={`/p/${selectedAddress}/rules/settings`} onClick={() => setIsSettingsOpen(true)}>
Settings
</Link>
] [<Link to='/'>Home</Link>]
</span>
<div id='board-nav-mobile' style={{ top: visible ? 0 : '-23px' }}>
<div className='nav-container'>
<div className='board-select'>
<strong>Board</strong>
&nbsp;
<select id="board-select-mobile" value={selectedAddress} onChange={handleSelectChange}>
<option value="all">All</option>
<option value="subscriptions">Subscriptions</option>
{!defaultSubplebbits.some(subplebbit => subplebbit.address === selectedAddress) && (
<option value={selectedAddress}>{selectedAddress}</option>
)}
{defaultSubplebbits.map(subplebbit => (
<option key={`option-${subplebbit.address}`} value={subplebbit.address}
>{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
<select id='board-select-mobile' value={selectedAddress} onChange={handleSelectChange}>
<option value='all'>All</option>
<option value='subscriptions'>Subscriptions</option>
{!defaultSubplebbits.some((subplebbit) => subplebbit.address === selectedAddress) && <option value={selectedAddress}>{selectedAddress}</option>}
{defaultSubplebbits.map((subplebbit) => (
<option key={`option-${subplebbit.address}`} value={subplebbit.address}>
{subplebbit.title ? subplebbit.title : subplebbit.address}
</option>
))}
</select> 
<span id="button-span" style={{cursor: 'pointer'}} onClick={
() => 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'
</select>
 
<span
id='button-span'
style={{ cursor: 'pointer' }}
onClick={() =>
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',
)
}>Create Board</span>
}
>
Create Board
</span>
</div>
<div className="page-jump">
<Link to={`/p/${selectedAddress}/rules/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
<div className='page-jump'>
<Link to={`/p/${selectedAddress}/rules/settings`} onClick={() => setIsSettingsOpen(true)}>
Settings
</Link>
&nbsp;
<Link to="/" onClick={() => {handleStyleChange({target: {value: "Yotsuba"}}); window.scrollTo(0, 0);}}>Home</Link>
<Link
to='/'
onClick={() => {
handleStyleChange({ target: { value: 'Yotsuba' } });
window.scrollTo(0, 0);
}}
>
Home
</Link>
</div>
</div>
</div>
<div id="separator-mobile">&nbsp;</div>
<div id="separator-mobile">&nbsp;</div>
<div id='separator-mobile'>&nbsp;</div>
<div id='separator-mobile'>&nbsp;</div>
</>
</NavBar>
<Header selectedStyle={selectedStyle}>
<>
<div className="banner">
<div className='banner'>
<ImageBanner />
</div>
<>
<div className="board-title">{subplebbit.title ?? null}</div>
<div className="board-address">p/{subplebbit.address}
<OfflineIndicator
address={subplebbit.address}
className="offline"
tooltipPlace="top" />
<div className='board-title'>{subplebbit.title ?? null}</div>
<div className='board-address'>
p/{subplebbit.address}
<OfflineIndicator address={subplebbit.address} className='offline' tooltipPlace='top' />
</div>
</>
</>
</Header>
<Break selectedStyle={selectedStyle} />
<PostForm selectedStyle={selectedStyle}>
<ReplyFormLink id="post-form-link" selectedStyle={selectedStyle} style={{marginBottom: '10px'}}>
<div id="return-button-mobile">
<span className="btn-wrap" onClick={()=> {window.scrollTo(0, 0)}}>
<ReplyFormLink id='post-form-link' selectedStyle={selectedStyle} style={{ marginBottom: '10px' }}>
<div id='return-button-mobile'>
<span
className='btn-wrap'
onClick={() => {
window.scrollTo(0, 0);
}}
>
<Link to={`/p/${selectedAddress}`}>Return</Link>
</span>
</div>
<div id="catalog-button-mobile">
<span className="btn-wrap">
<Link to={`/p/${selectedAddress}/catalog`} onClick={()=> {window.scrollTo(0, 0)}}>Catalog</Link>
<div id='catalog-button-mobile'>
<span className='btn-wrap'>
<Link
to={`/p/${selectedAddress}/catalog`}
onClick={() => {
window.scrollTo(0, 0);
}}
>
Catalog
</Link>
</span>
</div>
<div id="bottom-button-mobile">
<span className="btn-wrap">
<span style={{cursor: 'pointer'}} onClick={() => window.scrollTo(0, document.body.scrollHeight)} onMouseOver={(event) => event.target.style.cursor='pointer'}>Bottom</span>
<div id='bottom-button-mobile'>
<span className='btn-wrap'>
<span
style={{ cursor: 'pointer' }}
onClick={() => window.scrollTo(0, document.body.scrollHeight)}
onMouseOver={(event) => (event.target.style.cursor = 'pointer')}
>
Bottom
</span>
</span>
</div>
</ReplyFormLink>
</PostForm>
<BoardStats subplebbitAddress={selectedAddress} />
<TopBar selectedStyle={selectedStyle}>
<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>
<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 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 className='return-button catalog-button' id='catalog-button-desktop'>
[<Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link>]
</span>
<span className="return-button catalog-button" id="bottom-button-desktop">
<span className='return-button catalog-button' id='bottom-button-desktop'>
[
<span id="button" style={{cursor: 'pointer'}} onClick={() => window.scrollTo(0, document.body.scrollHeight)}
onMouseOver={(event) => event.target.style.cursor='pointer'}
onTouchStart={() => window.scrollTo(0, document.body.scrollHeight)}>Bottom</span>
<span
id='button'
style={{ cursor: 'pointer' }}
onClick={() => window.scrollTo(0, document.body.scrollHeight)}
onMouseOver={(event) => (event.target.style.cursor = 'pointer')}
onTouchStart={() => window.scrollTo(0, document.body.scrollHeight)}
>
Bottom
</span>
]
</span>
</TopBar>
<Tooltip id="tooltip" className="tooltip" />
<Tooltip id='tooltip' className='tooltip' />
<BoardForm selectedStyle={selectedStyle}>
<>
<div className="thread">
<div className="op-container">
<div className="post op op-desktop">
<div className='thread'>
<div className='op-container'>
<div className='post op op-desktop'>
<hr />
<div className="post-info">
<span className="name-block">
<span className="title">Rules</span>
<div className='post-info'>
<span className='name-block'>
<span className='title'>Rules</span>
&nbsp;
<span className="name capcode"
style={{cursor: 'pointer'}}
onClick={() => {setIsAdminListOpen(!isAdminListOpen)}}
>## Board Admins</span>
<span
className='name capcode'
style={{ cursor: 'pointer' }}
onClick={() => {
setIsAdminListOpen(!isAdminListOpen);
}}
>
## Board Admins
</span>
&nbsp;
<span className="date-time">{getDate(subplebbit.createdAt)}</span>
<span className='date-time'>{getDate(subplebbit.createdAt)}</span>
&nbsp;
<img src="assets/sticky.gif" alt="Sticky" title="Sticky" style={{marginBottom: "-1px", imageRendering: 'pixelated'}} />
<img src='assets/sticky.gif' alt='Sticky' title='Sticky' style={{ marginBottom: '-1px', imageRendering: 'pixelated' }} />
&nbsp;
<img src="assets/closed.gif" alt="Closed" title="Closed" style={{marginBottom: "-1px", imageRendering: 'pixelated'}} />
<span>&nbsp;
[
<Link to={() => {}} style={{textDecoration: "none"}} className="reply-link">Reply</Link>
<img src='assets/closed.gif' alt='Closed' title='Closed' style={{ marginBottom: '-1px', imageRendering: 'pixelated' }} />
<span>
&nbsp; [
<Link to={() => {}} style={{ textDecoration: 'none' }} className='reply-link'>
Reply
</Link>
]
</span>
<PostMenu
title="Post menu"
ref={el => {
threadMenuRefs.current["rules"] = el;
title='Post menu'
ref={(el) => {
threadMenuRefs.current['rules'] = el;
}}
className='post-menu-button'
rotated={openMenuCid === "rules"}
rotated={openMenuCid === 'rules'}
onClick={(event) => {
event.stopPropagation();
const rect = threadMenuRefs.current["rules"].getBoundingClientRect();
setMenuPosition({top: rect.top + window.scrollY, left: rect.left});
setOpenMenuCid(prevCid => (prevCid === "rules" ? null : "rules"));
const rect = threadMenuRefs.current['rules'].getBoundingClientRect();
setMenuPosition({ top: rect.top + window.scrollY, left: rect.left });
setOpenMenuCid((prevCid) => (prevCid === 'rules' ? null : 'rules'));
}}
>
▶
</PostMenu>
{createPortal(
<PostMenuCatalog selectedStyle={selectedStyle}
ref={el => {postMenuCatalogRef.current = el}}
<PostMenuCatalog
selectedStyle={selectedStyle}
ref={(el) => {
postMenuCatalogRef.current = el;
}}
onClick={(event) => event.stopPropagation()}
style={{position: "absolute",
top: menuPosition.top + 7,
left: menuPosition.left}}>
<div className={`post-menu-thread post-menu-thread-${"rules"}`}
style={{ display: openMenuCid === "rules" ? 'block' : 'none' }}
style={{ position: 'absolute', top: menuPosition.top + 7, left: menuPosition.left }}
>
<ul className="post-menu-catalog">
<div className={`post-menu-thread post-menu-thread-${'rules'}`} style={{ display: openMenuCid === 'rules' ? 'block' : 'none' }}>
<ul className='post-menu-catalog'>
{/* {isModerator ? (
<>
change rules
</>
) : null} */}
<li
onMouseOver={() => {setIsClientRedirectMenuOpen(true)}}
onMouseLeave={() => {setIsClientRedirectMenuOpen(false)}}>
onMouseOver={() => {
setIsClientRedirectMenuOpen(true);
}}
onMouseLeave={() => {
setIsClientRedirectMenuOpen(false);
}}
>
View on »
<ul className="dropdown-menu post-menu-catalog"
style={{display: isClientRedirectMenuOpen ? 'block': 'none'}}>
<li onClick={() => handleOptionClick("rules")}>
<a
href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}`}
target="_blank" rel="noreferrer"
>Plebbit</a>
<ul className='dropdown-menu post-menu-catalog' style={{ display: isClientRedirectMenuOpen ? 'block' : 'none' }}>
<li onClick={() => handleOptionClick('rules')}>
<a href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}`} target='_blank' rel='noreferrer'>
Plebbit
</a>
</li>
{/* <li onClick={() => handleOptionClick("rules")}>
<a
@@ -398,224 +438,275 @@ const Rules = () => {
target="_blank" rel="noreferrer"
>Seedit</a>
</li> */}
<li onClick={() => handleOptionClick("rules")}>
<a
href={`https://plebones.netlify.app/#/p/${selectedAddress}`}
target="_blank" rel="noreferrer"
>Plebones</a>
<li onClick={() => handleOptionClick('rules')}>
<a href={`https://plebones.eth.limo/#/p/${selectedAddress}`} target='_blank' rel='noreferrer'>
Plebones
</a>
</li>
</ul>
</li>
</ul>
</div>
</PostMenuCatalog>, document.body
</PostMenuCatalog>,
document.body,
)}
</span>
<blockquote >
<div className="custom-paragraph" style={{paddingBottom: '17px'}}>
{subplebbit.address === "plebtoken.eth" ? (
plebtokenRules.map((rule, index) => (
<blockquote>
<div className='custom-paragraph' style={{ paddingBottom: '17px' }}>
{subplebbit.address === 'plebtoken.eth'
? plebtokenRules.map((rule, index) => (
<React.Fragment key={index}>
{index + 1}. {rule}
<br />
</React.Fragment>
))
) : (
subplebbit.rules?.map((rule, index) => (
: subplebbit.rules?.map((rule, index) => (
<React.Fragment key={index}>
{index + 1}. {rule}
<br />
</React.Fragment>
))
)}
))}
</div>
</blockquote>
</div>
</div>
</div>
</div>
<div className="thread-mobile">
<div className='thread-mobile'>
<hr />
<div className="op-container">
<div className="post op op-mobile">
<div className="post-info-mobile">
<button key={`mob-pb-`} className="post-menu-button-mobile"
ref={el => {
threadMenuRefsMobile.current["rules"] = el;
<div className='op-container'>
<div className='post op op-mobile'>
<div className='post-info-mobile'>
<button
key={`mob-pb-`}
className='post-menu-button-mobile'
ref={(el) => {
threadMenuRefsMobile.current['rules'] = el;
}}
onClick={(event) => {
event.stopPropagation();
const rect = threadMenuRefsMobile.current["rules"].getBoundingClientRect();
setMobileMenuPosition({top: rect.top + window.scrollY, left: rect.left});
setOpenMobileMenuCid(prevCid => (prevCid === "rules" ? null : "rules"));
const rect = threadMenuRefsMobile.current['rules'].getBoundingClientRect();
setMobileMenuPosition({ top: rect.top + window.scrollY, left: rect.left });
setOpenMobileMenuCid((prevCid) => (prevCid === 'rules' ? null : 'rules'));
}}
style={{ all: 'unset', cursor: 'pointer' }}
>...</button>
>
...
</button>
{createPortal(
<PostMenuMobile selectedStyle={selectedStyle}
ref={el => {postMenuMobileRef.current = el}}
<PostMenuMobile
selectedStyle={selectedStyle}
ref={(el) => {
postMenuMobileRef.current = el;
}}
onClick={(event) => event.stopPropagation()}
style={{position: "absolute",
display: openMobileMenuCid === "rules" ? "block" : "none",
style={{
position: 'absolute',
display: openMobileMenuCid === 'rules' ? 'block' : 'none',
top: mobileMenuPosition.top + 20,
left: mobileMenuPosition.left}}>
left: mobileMenuPosition.left,
}}
>
<ul className={`post-menu-mobile-thread-description`}>
<a style={{color: 'inherit', textDecoration: 'none'}}
<a
style={{ color: 'inherit', textDecoration: 'none' }}
href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}`}
target="_blank" rel="noreferrer">
<li onClick={() => handleMobileOptionClick("rules")}>
View on plebbit
</li>
target='_blank'
rel='noreferrer'
>
<li onClick={() => handleMobileOptionClick('rules')}>View on plebbit</li>
</a>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://plebones.netlify.app/#/p/${selectedAddress}`}
target="_blank" rel="noreferrer">
<li onClick={() => handleMobileOptionClick("rules")}>
View on plebones
</li>
<a
style={{ color: 'inherit', textDecoration: 'none' }}
href={`https://plebones.eth.limo/#/p/${selectedAddress}`}
target='_blank'
rel='noreferrer'
>
<li onClick={() => handleMobileOptionClick('rules')}>View on plebones</li>
</a>
</ul>
</PostMenuMobile>, document.body
</PostMenuMobile>,
document.body,
)}
<span className="name-block-mobile">
<span className="name-mobile capcode"
style={{cursor: 'pointer'}}
onClick={() => {setIsAdminListOpen(!isAdminListOpen)}}
>## Board Admins</span>
<span className='name-block-mobile'>
<span
className='name-mobile capcode'
style={{ cursor: 'pointer' }}
onClick={() => {
setIsAdminListOpen(!isAdminListOpen);
}}
>
## Board Admins
</span>
&nbsp;
<span className="thread-icons-mobile"
style={{float: "right", marginRight: "18px"}}>
<img src="assets/sticky.gif" alt="Sticky" title="Sticky" style={{marginTop: "-1px", marginRight: "2px", imageRendering: 'pixelated'}} />
<span className='thread-icons-mobile' style={{ float: 'right', marginRight: '18px' }}>
<img src='assets/sticky.gif' alt='Sticky' title='Sticky' style={{ marginTop: '-1px', marginRight: '2px', imageRendering: 'pixelated' }} />
&nbsp;
<img src="assets/closed.gif" alt="Closed" title="Closed" style={{marginTop: "-1px", marginRight: "2px", imageRendering: 'pixelated'}} />
<img src='assets/closed.gif' alt='Closed' title='Closed' style={{ marginTop: '-1px', marginRight: '2px', imageRendering: 'pixelated' }} />
</span>
<br />
<span className="subject-mobile"
style={{marginBottom: "-15px"}}>Rules</span>
<span className='subject-mobile' style={{ marginBottom: '-15px' }}>
Rules
</span>
&nbsp;
</span>
<span className="date-time-mobile post-number-mobile">{getDate(subplebbit.createdAt)}</span>
<span className='date-time-mobile post-number-mobile'>{getDate(subplebbit.createdAt)}</span>
&nbsp;
</div>
<blockquote className="post-message-mobile">
<div className="custom-paragraph">
{subplebbit.address === "plebtoken.eth" ? (
plebtokenRules.map((rule, index) => (
<blockquote className='post-message-mobile'>
<div className='custom-paragraph'>
{subplebbit.address === 'plebtoken.eth'
? plebtokenRules.map((rule, index) => (
<React.Fragment key={index}>
{index + 1}. {rule}
<br />
</React.Fragment>
))
) : (
subplebbit.rules?.map((rule, index) => (
: subplebbit.rules?.map((rule, index) => (
<React.Fragment key={index}>
{index + 1}. {rule}
<br />
</React.Fragment>
))
)}
))}
</div>
</blockquote>
</div>
<div className="post-link-mobile">
<Link to={() => {}} className="button-mobile">View Thread</Link>
<div className='post-link-mobile'>
<Link to={() => {}} className='button-mobile'>
View Thread
</Link>
</div>
</div>
</div>
</>
</BoardForm>
<Footer selectedStyle={selectedStyle}>
<Break id="break" selectedStyle={selectedStyle} style={{
marginTop: "-36px",
width: "100%",
}} />
<Break selectedStyle={selectedStyle} style={{
width: "100%",
}} />
<span className="style-changer" style={{
float: "right",
marginTop: "2px",
}}>
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>
<Break
id='break'
selectedStyle={selectedStyle}
style={{
marginTop: '-36px',
width: '100%',
}}
/>
<Break
selectedStyle={selectedStyle}
style={{
width: '100%',
}}
/>
<span
className='style-changer'
style={{
float: 'right',
marginTop: '2px',
}}
>
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>
<NavBar selectedStyle={selectedStyle} style={{
marginTop: "42px",
}}>
<NavBar
selectedStyle={selectedStyle}
style={{
marginTop: '42px',
}}
>
<>
<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;
</span>
{defaultSubplebbits.map((subplebbit, index) => (
<span className="boardList" key={`span-${subplebbit.address}`}>
{index === 0 ? null : "\u00a0"}
<Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => {
<span className='boardList' key={`span-${subplebbit.address}`}>
{index === 0 ? null : '\u00a0'}
<Link
to={`/p/${subplebbit.address}`}
key={`a-${subplebbit.address}`}
onClick={() => {
setSelectedTitle(subplebbit.title);
setSelectedAddress(subplebbit.address);
}}
>{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
{index !== defaultSubplebbits.length - 1 ? " /" : null}
>
{subplebbit.title ? subplebbit.title : subplebbit.address}
</Link>
{index !== defaultSubplebbits.length - 1 ? ' /' : null}
</span>
))}
<span className="nav">
<span className='nav'>
[
<span id="button-span" style={{cursor: 'pointer'}} onClick={
() => {
window.electron && window.electron.isElectron ? (
setIsCreateBoardOpen(true)
) : (
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'
)
)
}
}>Create Board</span>
]
[
<Link to={`/p/${selectedAddress}/rules/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
]
[
<Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
)}>Home</Link>
<span
id='button-span'
style={{ cursor: 'pointer' }}
onClick={() => {
window.electron && window.electron.isElectron
? setIsCreateBoardOpen(true)
: 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',
);
}}
>
Create Board
</span>
] [
<Link to={`/p/${selectedAddress}/rules/settings`} onClick={() => setIsSettingsOpen(true)}>
Settings
</Link>
] [
<Link to='/' onClick={() => handleStyleChange({ target: { value: 'Yotsuba' } })}>
Home
</Link>
]
</span>
</>
</NavBar>
<div id="version">
plebchan v{version}{commitRef}. GPL-2.0
<div id='version'>
plebchan v{version}
{commitRef}. GPL-2.0
</div>
<div className="footer-links"
<div
className='footer-links'
style={{
textAlign: "center",
fontSize: "x-small",
fontFamily: "arial",
marginTop: "5px",
marginBottom: "15px",
}}>
<a style={{textDecoration: 'underline'}} href="https://plebbit.com" target="_blank" rel="noopener noreferrer">About</a>
textAlign: 'center',
fontSize: 'x-small',
fontFamily: 'arial',
marginTop: '5px',
marginBottom: '15px',
}}
>
<a style={{ textDecoration: 'underline' }} href='https://plebbit.com' target='_blank' rel='noopener noreferrer'>
About
</a>
&nbsp;•&nbsp;
<a style={{textDecoration: 'underline'}} href="https://github.com/plebbit/plebchan/releases/latest" target="_blank" rel="noopener noreferrer">App</a>
<a style={{ textDecoration: 'underline' }} href='https://github.com/plebbit/plebchan/releases/latest' target='_blank' rel='noopener noreferrer'>
App
</a>
&nbsp;•&nbsp;
<a style={{textDecoration: 'underline'}} href="https://twitter.com/plebchan_eth" target="_blank" rel="noopener noreferrer">Twitter</a>
<a style={{ textDecoration: 'underline' }} href='https://twitter.com/plebchan_eth' target='_blank' rel='noopener noreferrer'>
Twitter
</a>
&nbsp;•&nbsp;
<a style={{textDecoration: 'underline'}} href="https://t.me/plebbit" target="_blank" rel="noopener noreferrer">Telegram</a>
<a style={{ textDecoration: 'underline' }} href='https://t.me/plebbit' target='_blank' rel='noopener noreferrer'>
Telegram
</a>
</div>
</Footer>
</Container>
</>
);
}
};
export default Rules;
src/components/views/Subscriptions.jsx
+1570 -1076
View File
File diff suppressed because it is too large Load Diff
src/components/views/SubscriptionsCatalog.jsx
+452 -366
View File
File diff suppressed because it is too large Load Diff
src/components/views/Thread.jsx
+1461 -1085
View File
File diff suppressed because it is too large Load Diff