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

implement state strings in posts

Browse Source
This commit is contained in:
Tom
2023-06-01 10:43:17 +02:00
parent d790961a5d
commit f03ff66f06
6 changed files with 145 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/BoardAvatar.jsx
+1 -1
View File
@@ -15,7 +15,7 @@ const BoardAvatar = ({ address }) => {
return ( return (
<img <img
className="board-avatar" className="board-avatar"
alt="board logo" alt="board avatar"
src={avatarUrl} src={avatarUrl}
/> />
); );
src/components/StateLabel.jsx
+52
View File
@@ -0,0 +1,52 @@
import React, { useEffect, useState } from "react";
import { useComment } from "@plebbit/plebbit-react-hooks";
const StateLabel = ({ commentCid, className }) => {
const comment = useComment({commentCid});
const [stateString, setStateString] = useState(null);
useEffect(() => {
if (comment.clients) {
for (const ipfsGatewayUrl in comment.clients?.ipfsGateways) {
const ipfsGateway = comment.clients?.ipfsGateways[ipfsGatewayUrl]
if (ipfsGateway.state === 'fetching-ipfs') {
setStateString(`Fetching IPFS from ${ipfsGatewayUrl}`)
}
if (ipfsGateway.state === 'fetching-ipns-update') {
setStateString(`Fetching IPNS from ${ipfsGatewayUrl}`)
}
if (ipfsGateway.state === 'succeeded') {
setStateString(`Fetched comment from ${ipfsGatewayUrl}`)
}
}
for (const ipfsClientUrl in comment.clients?.ipfsClients) {
const ipfsClient = comment.clients?.ipfsClients[ipfsClientUrl]
if (ipfsClient.state === 'fetching-ipfs') {
setStateString(`Fetching IPFS from ${ipfsClient.peers.length} peers`)
}
if (ipfsClient.state === 'fetching-ipns-update') {
setStateString(`Fetching IPNS from ${ipfsClient.peers.length} peers`)
}
if (ipfsClient.state === 'succeeded') {
setStateString(`Fetched comment from ${ipfsClient.peers.length} peers`)
}
}
}
}, [comment.clients])
return (
comment.state === "succeeded" ? null : (
<span className={className}>
<>
<br />
{stateString || comment.state}
</>
</span>
)
)
};
export default StateLabel;
src/components/styled/views/Board.styled.jsx
+25
View File
@@ -1630,6 +1630,31 @@ export const TopBar = styled.div`
`; `;
export const BoardForm = styled.div` export const BoardForm = styled.div`
.ellipsis {
margin-right: 14px;
}
.ellipsis:after {
content: "\\2026";
position: absolute;
-webkit-animation: ellipsis steps(4,end) 1200ms infinite;
animation: ellipsis steps(4,end) 1500ms infinite;
width: 0px;
overflow: hidden;
}
@keyframes ellipsis {
to {
width: 1.25em;
}
}
@-webkit-keyframes ellipsis {
to {
width: 1.25em;
}
}
@media (min-width: 480px) { @media (min-width: 480px) {
margin-bottom: 130px; margin-bottom: 130px;
src/components/styled/views/Thread.styled.jsx
+29
View File
@@ -834,6 +834,30 @@ export const BottomBar = styled.div`
`; `;
export const BoardForm = styled.div` export const BoardForm = styled.div`
.ellipsis {
margin-right: 14px;
}
.ellipsis:after {
content: "\\2026";
position: absolute;
-webkit-animation: ellipsis steps(4,end) 1200ms infinite;
animation: ellipsis steps(4,end) 1500ms infinite;
width: 0px;
overflow: hidden;
}
@keyframes ellipsis {
to {
width: 1.25em;
}
}
@-webkit-keyframes ellipsis {
to {
width: 1.25em;
}
}
@media (min-width: 480px) { @media (min-width: 480px) {
.thread-mobile { .thread-mobile {
display: none; display: none;
@@ -3185,6 +3209,11 @@ export const Footer = styled.div`
a:hover { a:hover {
color: #5f89ac; color: #5f89ac;
} }
}
#style-selector {
background-color: #282a2e;
color: #c5c8c6;
border: 1px solid #373b41;
}`; }`;
case 'Photon': case 'Photon':
src/components/views/Board.jsx
+25
View File
@@ -19,6 +19,7 @@ import ModerationModal from '../modals/ModerationModal';
import OfflineIndicator from '../OfflineIndicator'; import OfflineIndicator from '../OfflineIndicator';
import Post from '../Post'; import Post from '../Post';
import PostLoader from '../PostLoader'; import PostLoader from '../PostLoader';
import StateLabel from '../StateLabel';
import ReplyModal from '../modals/ReplyModal'; import ReplyModal from '../modals/ReplyModal';
import SettingsModal from '../modals/SettingsModal'; import SettingsModal from '../modals/SettingsModal';
import findShortParentCid from '../../utils/findShortParentCid'; import findShortParentCid from '../../utils/findShortParentCid';
@@ -985,6 +986,9 @@ const Board = () => {
<EditLabel key={`edit-label-thread-${index}`} <EditLabel key={`edit-label-thread-${index}`}
commentCid={thread.cid} commentCid={thread.cid}
className="ttl"/> className="ttl"/>
<StateLabel key={`state-label-thread-${index}`}
commentCid={thread.cid}
className="ttl ellipsis"/>
<br key={`ttl-s-br2${index}`} /> <br key={`ttl-s-br2${index}`} />
Post too long.&nbsp; Post too long.&nbsp;
<Link key={`ttl-l-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link> <Link key={`ttl-l-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link>
@@ -997,6 +1001,9 @@ const Board = () => {
<EditLabel key={`edit-label-thread-${index}`} <EditLabel key={`edit-label-thread-${index}`}
commentCid={thread.cid} commentCid={thread.cid}
className="ttl"/> className="ttl"/>
<StateLabel key={`state-label-thread-${index}`}
commentCid={thread.cid}
className="ttl ellipsis"/>
</blockquote>) </blockquote>)
: null} : null}
</div> </div>
@@ -1256,6 +1263,9 @@ const Board = () => {
<EditLabel key={`edit-label-reply-${index}`} <EditLabel key={`edit-label-reply-${index}`}
commentCid={reply.cid} commentCid={reply.cid}
className="ttl"/> className="ttl"/>
<StateLabel key={`state-label-reply-${index}`}
commentCid={reply.cid}
className="ttl ellipsis"/>
<br key={`ttl-s-br2${index}`} /> <br key={`ttl-s-br2${index}`} />
Comment too long.&nbsp; Comment too long.&nbsp;
<Link key={`ttl-l-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link> <Link key={`ttl-l-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link>
@@ -1270,6 +1280,9 @@ const Board = () => {
<EditLabel key={`edit-label-reply-${index}`} <EditLabel key={`edit-label-reply-${index}`}
commentCid={reply.cid} commentCid={reply.cid}
className="ttl"/> className="ttl"/>
<StateLabel key={`state-label-reply-${index}`}
commentCid={reply.cid}
className="ttl ellipsis"/>
</blockquote>) </blockquote>)
: null} : null}
</div> </div>
@@ -1410,6 +1423,9 @@ const Board = () => {
<EditLabel key={`edit-label-thread-mob-${index}`} <EditLabel key={`edit-label-thread-mob-${index}`}
commentCid={thread.cid} commentCid={thread.cid}
className="ttl"/> className="ttl"/>
<StateLabel key={`state-label-thread-mob-${index}`}
commentCid={thread.cid}
className="ttl ellipsis"/>
<br key={`mob-ttl-s-br2${thread.cid}`} /> <br key={`mob-ttl-s-br2${thread.cid}`} />
Post too long.&nbsp; Post too long.&nbsp;
<Link key={`mob-ttl-l-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link> <Link key={`mob-ttl-l-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link>
@@ -1421,6 +1437,9 @@ const Board = () => {
<EditLabel key={`edit-label-thread-mob-${index}`} <EditLabel key={`edit-label-thread-mob-${index}`}
commentCid={thread.cid} commentCid={thread.cid}
className="ttl"/> className="ttl"/>
<StateLabel key={`state-label-thread-mob-${index}`}
commentCid={thread.cid}
className="ttl ellipsis"/>
</blockquote>) </blockquote>)
: null} : null}
</div> </div>
@@ -1560,6 +1579,9 @@ const Board = () => {
<EditLabel key={`edit-label-reply-mob-${index}`} <EditLabel key={`edit-label-reply-mob-${index}`}
commentCid={reply.cid} commentCid={reply.cid}
className="ttl"/> className="ttl"/>
<StateLabel key={`state-label-reply-mob-${index}`}
commentCid={reply.cid}
className="ttl ellipsis"/>
<br key={`mob-ttl-s-br2${reply.cid}`} /> <br key={`mob-ttl-s-br2${reply.cid}`} />
Comment too long.&nbsp; Comment too long.&nbsp;
<Link key={`mob-ttl-l-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link> <Link key={`mob-ttl-l-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link>
@@ -1574,6 +1596,9 @@ const Board = () => {
<EditLabel key={`edit-label-reply-mob-${index}`} <EditLabel key={`edit-label-reply-mob-${index}`}
commentCid={reply.cid} commentCid={reply.cid}
className="ttl"/> className="ttl"/>
<StateLabel key={`state-label-reply-mob-${index}`}
commentCid={reply.cid}
className="ttl ellipsis"/>
</blockquote>) </blockquote>)
: null} : null}
{reply.replyCount > 0 ? ( {reply.replyCount > 0 ? (
src/components/views/Thread.jsx
+13
View File
@@ -18,6 +18,7 @@ import ModerationModal from '../modals/ModerationModal';
import OfflineIndicator from '../OfflineIndicator'; import OfflineIndicator from '../OfflineIndicator';
import Post from '../Post'; import Post from '../Post';
import PostLoader from '../PostLoader'; import PostLoader from '../PostLoader';
import StateLabel from '../StateLabel';
import ReplyModal from '../modals/ReplyModal'; import ReplyModal from '../modals/ReplyModal';
import SettingsModal from '../modals/SettingsModal'; import SettingsModal from '../modals/SettingsModal';
import findShortParentCid from '../../utils/findShortParentCid'; import findShortParentCid from '../../utils/findShortParentCid';
@@ -935,6 +936,9 @@ const Thread = () => {
<EditLabel key={`edit-label-thread-${index}`} <EditLabel key={`edit-label-thread-${index}`}
commentCid={comment.cid} commentCid={comment.cid}
className="ttl"/> className="ttl"/>
<StateLabel key={`state-label-thread-${index}`}
commentCid={comment.cid}
className="ttl ellipsis"/>
</blockquote> </blockquote>
</div> </div>
</div> </div>
@@ -1174,6 +1178,9 @@ const Thread = () => {
<EditLabel key={`edit-label-reply-${index}`} <EditLabel key={`edit-label-reply-${index}`}
commentCid={reply.cid} commentCid={reply.cid}
className="ttl"/> className="ttl"/>
<StateLabel key={`state-label-reply-${index}`}
commentCid={reply.cid}
className="ttl ellipsis"/>
</blockquote> </blockquote>
</div> </div>
</div> </div>
@@ -1294,6 +1301,9 @@ const Thread = () => {
<EditLabel key={`edit-label-thread-mob-${index}`} <EditLabel key={`edit-label-thread-mob-${index}`}
commentCid={comment.cid} commentCid={comment.cid}
className="ttl"/> className="ttl"/>
<StateLabel key={`state-label-thread-mob-${index}`}
commentCid={comment.cid}
className="ttl ellipsis"/>
</> </>
) : null} ) : null}
</blockquote> </blockquote>
@@ -1411,6 +1421,9 @@ const Thread = () => {
<EditLabel key={`edit-label-reply-mob-${index}`} <EditLabel key={`edit-label-reply-mob-${index}`}
commentCid={reply.cid} commentCid={reply.cid}
className="ttl"/> className="ttl"/>
<StateLabel key={`state-label-reply-mob-${index}`}
commentCid={reply.cid}
className="ttl ellipsis"/>
</blockquote> </blockquote>
{reply.replyCount > 0 ? ( {reply.replyCount > 0 ? (
<div key={`back-mob-${index}`} className='backlink backlink-mobile'> <div key={`back-mob-${index}`} className='backlink backlink-mobile'>