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

feat(home): boards box shows list of boards being moderated by the user

Browse Source
This commit is contained in:
plebeius.eth
2023-10-05 09:32:10 +02:00
parent 4eba8e7530
commit fabec543bf
1 changed files with 22 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/views/Home.jsx
+22 -19
View File
@@ -1,6 +1,6 @@
import React, { useEffect, useRef, useState } from 'react'; import React, { useEffect, useRef, useState } from 'react';
import { Helmet } from 'react-helmet-async'; import { Helmet } from 'react-helmet-async';
import { useAccount, useComment, useSubplebbit, useSubplebbits } from '@plebbit/plebbit-react-hooks'; import { useAccount, useAccountSubplebbits, useComment, useSubplebbit, useSubplebbits } from '@plebbit/plebbit-react-hooks';
import { Link, useNavigate } from 'react-router-dom'; import { Link, useNavigate } from 'react-router-dom';
import { Container, Header, Logo, Page, Search, About, AboutTitle, AboutContent, BoardsBox, BoardsContent, Footer } from '../styled/views/Home.styled'; import { Container, Header, Logo, Page, Search, About, AboutTitle, AboutContent, BoardsBox, BoardsContent, Footer } from '../styled/views/Home.styled';
import BoardAvatar from '../BoardAvatar'; import BoardAvatar from '../BoardAvatar';
@@ -13,7 +13,7 @@ import { Tooltip } from 'react-tooltip';
const { version } = packageJson; const { version } = packageJson;
const commitRef = process?.env?.REACT_APP_COMMIT_REF ? ` ${process.env.REACT_APP_COMMIT_REF.slice(0, 7)}` : ''; const commitRef = process?.env?.REACT_APP_COMMIT_REF ? ` ${process.env.REACT_APP_COMMIT_REF.slice(0, 7)}` : '';
const RecentThread = ({ commentCid }) => { const PopularThreads = ({ commentCid }) => {
const comment = useComment({ commentCid }); const comment = useComment({ commentCid });
const subplebbit = useSubplebbit({ subplebbitAddress: comment?.subplebbitAddress }); const subplebbit = useSubplebbit({ subplebbitAddress: comment?.subplebbitAddress });
const { setSelectedAddress, setSelectedTitle } = useGeneralStore((state) => state); const { setSelectedAddress, setSelectedTitle } = useGeneralStore((state) => state);
@@ -34,13 +34,13 @@ const RecentThread = ({ commentCid }) => {
window.scrollTo(0, 0); window.scrollTo(0, 0);
}} }}
> >
{commentMediaInfo?.type === 'webpage' && comment.thumbnailUrl ? ( {commentMediaInfo?.type === 'webpage' && commentMediaInfo?.thumbnail ? (
<img className='board-avatar' src={commentMediaInfo?.thumbnail} alt='post' /> <img className='board-avatar' src={commentMediaInfo?.thumbnail} alt='post' />
) : commentMediaInfo?.type === 'image' ? ( ) : commentMediaInfo?.type === 'image' ? (
<img className='board-avatar' src={commentMediaInfo?.url} alt='post' /> <img className='board-avatar' src={commentMediaInfo?.url} alt='post' />
) : commentMediaInfo?.type === 'video' ? ( ) : commentMediaInfo?.type === 'video' ? (
<video className='board-avatar' src={commentMediaInfo?.url} alt='post' /> <video className='board-avatar' src={commentMediaInfo?.url} alt='post' />
) : commentMediaInfo?.type === 'iframe' ? ( ) : commentMediaInfo?.type === 'iframe' && commentMediaInfo?.thumbnail ? (
<img className='board-avatar' src={commentMediaInfo?.thumbnail} alt='post' /> <img className='board-avatar' src={commentMediaInfo?.thumbnail} alt='post' />
) : ( ) : (
<BoardAvatar address={comment.subplebbitAddress} /> <BoardAvatar address={comment.subplebbitAddress} />
@@ -59,6 +59,8 @@ const RecentThread = ({ commentCid }) => {
const Home = () => { const Home = () => {
const { bodyStyle, setBodyStyle, defaultSubplebbits, defaultNsfwSubplebbits, setSelectedAddress, selectedStyle, setSelectedStyle } = useGeneralStore((state) => state); const { bodyStyle, setBodyStyle, defaultSubplebbits, defaultNsfwSubplebbits, setSelectedAddress, selectedStyle, setSelectedStyle } = useGeneralStore((state) => state);
const { accountSubplebbits } = useAccountSubplebbits();
const accountSubplebbitsAddresses = Object.values(accountSubplebbits).map((subplebbit) => subplebbit.address);
const sfwAddresses = defaultSubplebbits.map((subplebbit) => subplebbit.address); const sfwAddresses = defaultSubplebbits.map((subplebbit) => subplebbit.address);
const sfwSubs = useSubplebbits({ subplebbitAddresses: sfwAddresses }); const sfwSubs = useSubplebbits({ subplebbitAddresses: sfwAddresses });
const sfwList = sfwSubs.subplebbits.map((subplebbit) => subplebbit?.address); const sfwList = sfwSubs.subplebbits.map((subplebbit) => subplebbit?.address);
@@ -327,22 +329,23 @@ const Home = () => {
<div className='column'> <div className='column'>
<h3 style={{ textDecoration: 'underline', display: 'inline' }}>Moderating</h3> <h3 style={{ textDecoration: 'underline', display: 'inline' }}>Moderating</h3>
<ul> <ul>
{!isElectron ? ( {accountSubplebbitsAddresses?.length === 0 && <li style={{ color: 'black' }}>Not moderating any board.</li>}
<li style={{ color: 'black' }}> {accountSubplebbitsAddresses?.slice(0, showAllSubscriptions ? undefined : 18).map((subplebbit, index) => (
Visible on{' '} <li key={`sub-${index}`}>
<a <OfflineIndicator address={subplebbit} className='disconnected' isText={true} />
style={{ color: 'blue', textDecoration: 'underline' }} <Link
href='https://github.com/plebbit/plebchan/releases/latest' key={`sub-link-${index}`}
target='_blank' className='boardlink'
rel='noopener noreferrer' onClick={() => {
window.scrollTo(0, 0);
}}
to={`/p/${subplebbit}`}
> >
full node (desktop) {subplebbit}
</a> </Link>
. &nbsp;
</li> </li>
) : ( ))}
<div>WIP</div>
)}
</ul> </ul>
</div> </div>
</div> </div>
@@ -353,7 +356,7 @@ const Home = () => {
</div> </div>
<BoardsContent> <BoardsContent>
{sfwListCids.map((cid) => ( {sfwListCids.map((cid) => (
<RecentThread commentCid={cid} /> <PopularThreads commentCid={cid} />
))} ))}
</BoardsContent> </BoardsContent>
</BoardsBox> </BoardsBox>