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

test new hooks

Browse Source
This commit is contained in:
plebbitor
2023-03-24 18:08:07 +01:00
parent 1b34241d8f
commit 7eb30c6c0a
7 changed files with 208 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/views/Board.jsx
+27 -10
View File
@@ -2,7 +2,7 @@ import React, { useState, useEffect, Fragment } from 'react';
import { Link, useNavigate, useParams } from 'react-router-dom';
import InfiniteScroll from 'react-infinite-scroller';
import { Tooltip } from 'react-tooltip';
import { useFeed, useAccountsActions } from '@plebbit/plebbit-react-hooks';
import { useFeed, usePublishComment } from '@plebbit/plebbit-react-hooks';
import useAppStore from '../../useAppStore';
import { Container, NavBar, Header, Break, PostFormLink, PostFormTable, PostForm, TopBar, BoardForm } from './styles/Board.styled';
import CaptchaModal from '../CaptchaModal';
@@ -17,6 +17,7 @@ import onError from '../../utils/onError';
import onSuccess from '../../utils/onSuccess';
import renderComments from '../../utils/renderComments';
import useClickForm from '../../hooks/useClickForm';
import VideoThumbnail from 'react-video-thumbnail';
const Board = () => {
@@ -35,7 +36,7 @@ const Board = () => {
const [name, setName] = useState('');
const [subject, setSubject] = useState('');
const [comment, setComment] = useState('');
const { publishComment } = useAccountsActions();
const { publishComment } = usePublishComment();
const [isCaptchaOpen, setIsCaptchaOpen] = useState(false);
const [isReplyOpen, setIsReplyOpen] = useState(false);
const [captchaImage, setCaptchaImage] = useState('');
@@ -43,8 +44,8 @@ const Board = () => {
const [prevScrollPos, setPrevScrollPos] = useState(0);
const [visible, setVisible] = useState(true);
const [endIndex, setEndIndex] = useState(2);
const { feed, hasMore, loadMore } = useFeed([`${selectedAddress}`], 'new');
const [selectedFeed, setSelectedFeed] = useState(feed);
const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'new'});
const [selectedFeed, setSelectedFeed] = useState(feed.slice(0, endIndex));
const renderedFeed = selectedFeed.slice(0, endIndex);
const { subplebbitAddress } = useParams();
const handleClickForm = useClickForm();
@@ -83,8 +84,7 @@ const Board = () => {
setEndIndex(2);
}, [selectedAddress]);
const tryLoadMore = async () => {
try {
loadMore();
@@ -425,12 +425,20 @@ const Board = () => {
) : null}
{commentMediaInfo?.type === "video" ? (
<span key={`fta-${thread.cid}`} className="file-thumb">
<video key={`fti-${thread.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
<VideoThumbnail
videoUrl={commentMediaInfo.url}
thumbnailHandler={(thumbnail) => {
const img = document.querySelector(`img[key="img-${thread.cid}"]`);
if (img) {
img.src = thumbnail;
}
}}
/>
</span>
) : null}
{commentMediaInfo?.type === "audio" ? (
<span key={`fta-${thread.cid}`} className="file-thumb">
<audio key={`fti-${thread.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
{/* <audio key={`fti-${thread.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} /> */}
</span>
) : null}
</div>
@@ -711,14 +719,23 @@ const Board = () => {
) : commentMediaInfo.type === "video" ? (
<div key={`mob-f-${thread.cid}`} className="file-mobile">
<span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
<video key={`mob-img-${thread.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
<VideoThumbnail
videoUrl={commentMediaInfo.url}
thumbnailHandler={(thumbnail) => {
const img = document.querySelector(`img[key="img-${thread.cid}"]`);
if (img) {
img.src = thumbnail;
}
}}
/>
{/* <video key={`mob-img-${thread.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} /> */}
<div key={`mob-fi-${thread.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div>
</span>
</div>
) : commentMediaInfo.type === "audio" ? (
<div key={`mob-f-${thread.cid}`} className="file-mobile">
<span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
<audio key={`mob-img-${thread.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
{/* <audio key={`mob-img-${thread.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} /> */}
<div key={`mob-fi-${thread.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div>
</span>
</div>
src/components/views/Catalog.jsx
+23 -5
View File
@@ -1,7 +1,8 @@
import React, { useState, useEffect, Fragment } from 'react';
import { Link, useNavigate, useParams } from 'react-router-dom';
import InfiniteScroll from 'react-infinite-scroller';
import { useFeed, useAccountsActions } from '@plebbit/plebbit-react-hooks';
import VideoThumbnail from 'react-video-thumbnail';
import { useFeed, usePublishComment } from '@plebbit/plebbit-react-hooks';
import useAppStore from '../../useAppStore';
import { Container, NavBar, Header, Break, PostForm, PostFormLink, PostFormTable } from './styles/Board.styled';
import { Threads } from './styles/Catalog.styled';
@@ -33,13 +34,13 @@ const Catalog = () => {
const [name, setName] = useState('');
const [subject, setSubject] = useState('');
const [comment, setComment] = useState('');
const { publishComment } = useAccountsActions();
const { publishComment } = usePublishComment();
const [isCaptchaOpen, setIsCaptchaOpen] = useState(false);
const [captchaImage, setCaptchaImage] = useState('');
const navigate = useNavigate();
const [prevScrollPos, setPrevScrollPos] = useState(0);
const [visible, setVisible] = useState(true);
const { feed, hasMore, loadMore } = useFeed([`${selectedAddress}`], 'new');
const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'new'});
const { subplebbitAddress } = useParams();
const handleClickForm = useClickForm();
@@ -336,7 +337,7 @@ const Catalog = () => {
>
{feed.map(thread => {
const commentMediaInfo = getCommentMediaInfo(thread);
const fallbackImgUrl = "/assets/plebchan-thumbdown.png";
const fallbackImgUrl = "/assets/filedeleted-res.gif";
return (
<div key={`thread-${thread.cid}`} className="thread">
<Link key={`a-${thread.cid}`} to={`/${selectedAddress}/thread/${thread.cid}`} onClick={() => handleClickThread(thread.cid)}>
@@ -354,8 +355,25 @@ const Catalog = () => {
e.target.src = fallbackImgUrl
e.target.onerror = null;}} />
) : null}
{commentMediaInfo?.type === "video" ? (
<VideoThumbnail
videoUrl={commentMediaInfo.url}
thumbnailHandler={(thumbnail) => {
const img = document.querySelector(`img[key="img-${thread.cid}"]`);
if (img) {
img.src = thumbnail;
}
}}
/>
) : null}
{commentMediaInfo?.type === "audio" ? (
<img key={`img-${thread.cid}`} alt="thread" src={commentMediaInfo.url}
onError={(e) => {
e.target.src = fallbackImgUrl
e.target.onerror = null;}} />
) : null}
</Fragment>
) : (<img key={`img-${thread.cid}`} alt="thread" src={fallbackImgUrl} />)}
) : null}
</Link>
{/* <div key={`ti-${thread.cid}`} className="thread-icons" >
<span key={`si-${thread.cid}`} className="thread-icon sticky-icon" title="Sticky"></span>
src/components/views/Thread.jsx
+7 -7
View File
@@ -1,7 +1,7 @@
import React, { useState, useEffect } from 'react';
import { Link, useNavigate, useParams } from 'react-router-dom';
import { Tooltip } from 'react-tooltip';
import { useComment, useAccountsActions } from '@plebbit/plebbit-react-hooks';
import { useComment, usePublishComment } from '@plebbit/plebbit-react-hooks';
import useAppStore from '../../useAppStore';
import { Container, NavBar, Header, Break, PostForm, PostFormTable, BoardForm } from './styles/Board.styled';
import { ReplyFormLink, TopBar, BottomBar } from './styles/Thread.styled';
@@ -36,14 +36,14 @@ const Thread = () => {
const [name, setName] = useState('');
const [subject, setSubject] = useState('');
const [commentContent, setCommentContent] = useState('');
const { publishComment } = useAccountsActions();
const { publishComment } = usePublishComment();
const [isCaptchaOpen, setIsCaptchaOpen] = useState(false);
const [isReplyOpen, setIsReplyOpen] = useState(false);
const [captchaImage, setCaptchaImage] = useState('');
const navigate = useNavigate();
const [prevScrollPos, setPrevScrollPos] = useState(0);
const [visible, setVisible] = useState(true);
const comment = useComment(selectedThread);
const comment = useComment({ selectedThread });
const { subplebbitAddress, threadCid } = useParams();
const handleClickForm = useClickForm();
@@ -479,7 +479,7 @@ const Thread = () => {
</span>})
</span>
&nbsp;
<span className="date-time" data-utc="data">{getDate(comment.timestamp)}</span>
<span className="date-time" data-utc="data">{getDate(comment?.timestamp)}</span>
&nbsp;
<span className="post-number">
<Link to="" onClick={handleVoidClick} title="Link to this post">c/</Link>
@@ -553,7 +553,7 @@ const Thread = () => {
</span>
</span>
&nbsp;
<span key={`dt-${reply.cid}`} className="date-time" data-utc="data">{getDate(reply.timestamp)}</span>
<span key={`dt-${reply.cid}`} className="date-time" data-utc="data">{getDate(reply?.timestamp)}</span>
&nbsp;
<span key={`pn-${reply.cid}`} className="post-number">
<Link to="" key={`pl1-${reply.cid}`} onClick={handleVoidClick} title="Link to this post">c/</Link>
@@ -645,7 +645,7 @@ const Thread = () => {
</span>) : null}
</span>
<span key={`mob-dt-${comment.cid}`} className="date-time-mobile">
{getDate(comment.timestamp)}
{getDate(comment?.timestamp)}
&nbsp;
<button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`mob-no-${comment.cid}`} onClick={handleReplyOpen} title="Link to this post">c/</button>
<Link to="" key={`mob-no2-${comment.cid}`} onClick={handleVoidClick} title="Reply to this post">{comment.cid?.slice(0, 8)}</Link>
@@ -738,7 +738,7 @@ const Thread = () => {
<br key={`mob-br-${reply.cid}`} />
</span>
<span key={`mob-dt-${reply.cid}`} className="date-time-mobile">
{getDate(reply.timestamp)}&nbsp;
{getDate(reply?.timestamp)}&nbsp;
<Link to="" key={`mob-pl1-${reply.cid}`} onClick={handleVoidClick} title="Link to this post">c/</Link>
<button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`mob-pl2-${reply.cid}`} onClick={handleReplyOpen} title="Reply to this post">{reply.cid.slice(0, 8)}</button>
</span>
src/components/views/styles/Catalog.styled.jsx
-2
View File
@@ -24,8 +24,6 @@ export const Threads = styled.div`
display: inline;
margin: auto;
box-shadow: 0 0 5px rgba(0, 0, 0, .25);
min-height: 50px;
min-width: 50px;
border: 0;
}