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

Merge pull request #302 from plebbit/development

Browse Source 
Development
This commit is contained in:
plebeius.eth
2023-10-21 21:53:09 +02:00
committed by GitHub
parent 63489be08a bfb3f3ffd9
commit 948ba6b4b5
11 changed files with 85 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Post.jsx
+1
View File
@@ -81,6 +81,7 @@ const Post = ({ content, postQuoteOnClick, postQuoteOnOver, postQuoteOnLeave, po
parts.push(
<ForwardRefLink
key={`quotelink-${i}-${lastIndex}`}
className='quotelink'
to={linkTo}
target={linkTarget}
src/components/styled/views/Thread.styled.jsx
+35
View File
@@ -195,6 +195,23 @@ export const TopBar = styled.div`
overflow: hidden;
}
.stats-pending-container {
float: right;
margin-top: 3px;
margin-right: 30px;
overflow: hidden;
max-width: calc(100vw - 50vw);
}
#stats-pending {
display: inline-block;
max-width: calc(100vw - 50vw);
word-wrap: break-word;
white-space: nowrap;
text-overflow: '';
overflow: hidden;
}
.ellipsis-all {
white-space: nowrap;
}
@@ -246,6 +263,24 @@ export const TopBar = styled.div`
overflow: hidden;
}
.stats-pending-container {
height: 25px;
position: absolute;
text-align: left;
overflow: hidden;
width: 100vw;
margin-top: 8px;
}
#stats-pending {
display: inline-block;
max-width: 90vw;
word-wrap: break-word;
white-space: nowrap;
text-overflow: '';
overflow: hidden;
}
.ellipsis-all {
white-space: nowrap;
}
src/components/views/All.jsx
+9 -14
View File
@@ -138,7 +138,8 @@ const All = () => {
const addresses = defaultSubplebbits.map((subplebbit) => subplebbit.address);
const { feed, loadMore } = useFeed({ subplebbitAddresses: addresses, sortType: 'active' });
const { subplebbits } = useSubplebbits({ subplebbitAddresses: addresses, sortType: 'active' });
const [selectedFeed, setSelectedFeed] = useState(feed.sort((a, b) => b.timestamp - a.timestamp));
const [selectedFeed, setSelectedFeed] = useState(feed);
let feedData = [...feed];
const stateString = useFeedStateString(addresses);
@@ -282,10 +283,6 @@ const All = () => {
}
}, [errorString, setNewErrorMessage]);
useEffect(() => {
setSelectedFeed(feed.sort((a, b) => b.timestamp - a.timestamp));
}, [feed]);
const flattenedRepliesByThread = useMemo(() => {
return selectedFeed.reduce((acc, thread) => {
const replies = flattenCommentsPages(thread.replies);
@@ -303,22 +300,20 @@ const All = () => {
const filter = useCallback((accountComment) => allParentCids.has(accountComment.parentCid), [allParentCids]);
const { accountComments } = useAccountComments({ filter });
const filteredRepliesByThread = useMemo(() => {
const maxRepliesPerThread = 5;
const accountRepliesNotYetInCommentReplies = selectedFeed.reduce((acc, thread) => {
const replyCids = new Set(flattenedRepliesByThread[thread.cid].map((reply) => reply.cid));
acc[thread.cid] = accountComments.filter((accountReply) => !replyCids.has(accountReply.cid) && accountReply.parentCid === thread.cid);
return acc;
}, {});
return selectedFeed.reduce((acc, thread) => {
const combinedReplies = [...flattenedRepliesByThread[thread.cid], ...accountRepliesNotYetInCommentReplies[thread.cid]].sort((a, b) => a.timestamp - b.timestamp);
const existingReplies = flattenedRepliesByThread[thread.cid] || [];
const newReplies = accountComments.filter(
(accountReply) => accountReply.parentCid === thread.cid || existingReplies.some((reply) => reply.cid === accountReply.parentCid),
);
const combinedReplies = [...existingReplies, ...newReplies].sort((a, b) => a.timestamp - b.timestamp);
acc[thread.cid] = {
displayedReplies: combinedReplies.slice(0, maxRepliesPerThread),
omittedCount: Math.max(combinedReplies.length - maxRepliesPerThread, 0),
};
return acc;
}, {});
}, [flattenedRepliesByThread, accountComments, selectedFeed]);
@@ -712,7 +707,7 @@ const All = () => {
{feed ? (
<Virtuoso
increaseViewportBy={{ bottom: 600, top: 600 }}
data={selectedFeed}
data={feedData}
itemContent={(index, thread) => {
if (editedComments[thread.cid]) {
thread = editedComments[thread.cid];
src/components/views/AllCatalog.jsx
+5 -5
View File
@@ -700,8 +700,9 @@ const CatalogPost = ({ post }) => {
const CatalogRow = ({ row }) => {
const posts = [];
for (const post of row) {
posts.push(<CatalogPost key={post?.cid} post={post} />);
for (const [index, post] of row.entries()) {
const key = `${post?.cid}-${index}`;
posts.push(<CatalogPost key={key} post={post} />);
}
return <div>{posts}</div>;
};
@@ -734,14 +735,14 @@ const AllCatalog = () => {
const addresses = defaultSubplebbits.map((subplebbit) => subplebbit.address);
const { feed, hasMore, loadMore } = useFeed({ subplebbitAddresses: addresses, sortType: 'active' });
const { subplebbits } = useSubplebbits({ subplebbitAddresses: addresses, sortType: 'active' });
const [selectedFeed, setSelectedFeed] = useState(feed.sort((a, b) => b.timestamp - a.timestamp));
let feedData = [...feed];
const stateString = useFeedStateString(addresses);
const columnWidth = 180;
const windowWidth = useWindowWidth();
const columnCount = Math.floor(windowWidth / columnWidth);
const rows = useFeedRows(selectedFeed, columnCount);
const rows = useFeedRows(feedData, columnCount);
// mobile navbar scroll effect
useEffect(() => {
@@ -778,7 +779,6 @@ const AllCatalog = () => {
const handleClickTitle = (title, address) => {
setSelectedTitle(title);
setSelectedAddress(address);
setSelectedFeed(feed.filter((feed) => feed.title === title));
};
const location = useLocation();
src/components/views/Board.jsx
+9 -11
View File
@@ -308,22 +308,20 @@ const Board = () => {
const filter = useCallback((accountComment) => allParentCids.has(accountComment.parentCid), [allParentCids]);
const { accountComments } = useAccountComments({ filter });
const filteredRepliesByThread = useMemo(() => {
const maxRepliesPerThread = 5;
const accountRepliesNotYetInCommentReplies = selectedFeed.reduce((acc, thread) => {
const replyCids = new Set(flattenedRepliesByThread[thread.cid].map((reply) => reply.cid));
acc[thread.cid] = accountComments.filter((accountReply) => !replyCids.has(accountReply.cid) && accountReply.parentCid === thread.cid);
return acc;
}, {});
return selectedFeed.reduce((acc, thread) => {
const combinedReplies = [...flattenedRepliesByThread[thread.cid], ...accountRepliesNotYetInCommentReplies[thread.cid]].sort((a, b) => a.timestamp - b.timestamp);
const existingReplies = flattenedRepliesByThread[thread.cid] || [];
const newReplies = accountComments.filter(
(accountReply) => accountReply.parentCid === thread.cid || existingReplies.some((reply) => reply.cid === accountReply.parentCid),
);
const combinedReplies = [...existingReplies, ...newReplies].sort((a, b) => a.timestamp - b.timestamp);
acc[thread.cid] = {
displayedReplies: combinedReplies.slice(0, maxRepliesPerThread),
omittedCount: Math.max(combinedReplies.length - maxRepliesPerThread, 0),
};
return acc;
}, {});
}, [flattenedRepliesByThread, accountComments, selectedFeed]);
@@ -1780,7 +1778,7 @@ const Board = () => {
<hr key={`hr-${index}`} />
<div key={`pi-${index}`} className='post-info'>
{commentMediaInfo?.url ? (
<div key={`f-${index}`} className='file' style={{ marginBottom: '5px' }}>
<div key={`f-${index}`} className='file'>
<div key={`ft-${index}`} className='file-text'>
Link:&nbsp;
<a key={`fa-${index}`} href={commentMediaInfo.url} target='_blank' rel='noopener noreferrer'>
@@ -2027,7 +2025,7 @@ const Board = () => {
{thread.pinned ? (
<>
&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={{ imageRendering: 'pixelated' }} />
</>
) : null}
{thread.locked ? (
@@ -2761,7 +2759,7 @@ const Board = () => {
</div>
</div>
{replyMediaInfo?.url ? (
<div key={`f-${index}`} className='file' style={{ marginBottom: '5px' }}>
<div key={`f-${index}`} className='file'>
<div key={`ft-${index}`} className='file-text'>
Link:&nbsp;
<a key={`fa-${index}`} href={replyMediaInfo.url} target='_blank' rel='noopener noreferrer'>
src/components/views/Catalog.jsx
+3 -2
View File
@@ -1122,8 +1122,9 @@ const CatalogPost = ({ post }) => {
const CatalogRow = ({ row }) => {
const posts = [];
for (const post of row) {
posts.push(<CatalogPost key={post?.cid} post={post} />);
for (const [index, post] of row.entries()) {
const key = `${post?.cid}-${index}`;
posts.push(<CatalogPost key={key} post={post} />);
}
return <div>{posts}</div>;
};
src/components/views/Home.jsx
+2 -2
View File
@@ -328,8 +328,8 @@ const Home = () => {
<h2>Popular Threads</h2>
</div>
<BoardsContent>
{sfwListCids.map((cid) => (
<PopularThreads commentCid={cid} />
{sfwListCids.map((cid, index) => (
<PopularThreads key={index} commentCid={cid} />
))}
</BoardsContent>
</BoardsBox>
src/components/views/Pending.jsx
+4 -1
View File
@@ -291,7 +291,10 @@ const Pending = () => {
</Link>
]
</span>
<span className={stateString ? 'reply-stat ellipsis' : ''}>{stateString}</span>
<div className='stats-pending-container'>
<span id='stats-pending'>{stateString}</span>
<span className={stateString ? 'ellipsis-all' : ''} />
</div>
<hr />
</TopBar>
<Tooltip id='tooltip' className='tooltip' />
src/components/views/Subscriptions.jsx
+9 -10
View File
@@ -136,8 +136,9 @@ const Subscriptions = () => {
useAnonModeRef(selectedThreadCidRef, anonymousMode && executeAnonMode);
const { feed, loadMore } = useFeed({ subplebbitAddresses: account?.subscriptions, sortType: 'active' });
const [selectedFeed, setSelectedFeed] = useState(feed.sort((a, b) => b.timestamp - a.timestamp));
const { subplebbits } = useSubplebbits({ subplebbitAddresses: account?.subscriptions, sortType: 'active' });
const [selectedFeed, setSelectedFeed] = useState(feed);
let feedData = [...feed];
const stateString = useFeedStateString(account?.subscriptions);
@@ -302,22 +303,20 @@ const Subscriptions = () => {
const filter = useCallback((accountComment) => allParentCids.has(accountComment.parentCid), [allParentCids]);
const { accountComments } = useAccountComments({ filter });
const filteredRepliesByThread = useMemo(() => {
const maxRepliesPerThread = 5;
const accountRepliesNotYetInCommentReplies = selectedFeed.reduce((acc, thread) => {
const replyCids = new Set(flattenedRepliesByThread[thread.cid].map((reply) => reply.cid));
acc[thread.cid] = accountComments.filter((accountReply) => !replyCids.has(accountReply.cid) && accountReply.parentCid === thread.cid);
return acc;
}, {});
return selectedFeed.reduce((acc, thread) => {
const combinedReplies = [...flattenedRepliesByThread[thread.cid], ...accountRepliesNotYetInCommentReplies[thread.cid]].sort((a, b) => a.timestamp - b.timestamp);
const existingReplies = flattenedRepliesByThread[thread.cid] || [];
const newReplies = accountComments.filter(
(accountReply) => accountReply.parentCid === thread.cid || existingReplies.some((reply) => reply.cid === accountReply.parentCid),
);
const combinedReplies = [...existingReplies, ...newReplies].sort((a, b) => a.timestamp - b.timestamp);
acc[thread.cid] = {
displayedReplies: combinedReplies.slice(0, maxRepliesPerThread),
omittedCount: Math.max(combinedReplies.length - maxRepliesPerThread, 0),
};
return acc;
}, {});
}, [flattenedRepliesByThread, accountComments, selectedFeed]);
@@ -716,7 +715,7 @@ const Subscriptions = () => {
{!feed ? null : (
<Virtuoso
increaseViewportBy={{ bottom: 600, top: 600 }}
data={selectedFeed}
data={feedData}
itemContent={(index, thread) => {
if (editedComments[thread.cid]) {
thread = editedComments[thread.cid];
src/components/views/SubscriptionsCatalog.jsx
+5 -5
View File
@@ -700,8 +700,9 @@ const CatalogPost = ({ post }) => {
const CatalogRow = ({ row }) => {
const posts = [];
for (const post of row) {
posts.push(<CatalogPost key={post?.cid} post={post} />);
for (const [index, post] of row.entries()) {
const key = `${post?.cid}-${index}`;
posts.push(<CatalogPost key={key} post={post} />);
}
return <div>{posts}</div>;
};
@@ -732,15 +733,15 @@ const SubscriptionsCatalog = () => {
const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);
const { feed, hasMore, loadMore } = useFeed({ subplebbitAddresses: account?.subscriptions, sortType: 'active' });
const [selectedFeed, setSelectedFeed] = useState(feed.sort((a, b) => b.timestamp - a.timestamp));
const { subplebbits } = useSubplebbits({ subplebbitAddresses: account?.subscriptions, sortType: 'active' });
let feedData = [...feed];
const stateString = useFeedStateString(account?.subscriptions);
const columnWidth = 180;
const windowWidth = useWindowWidth();
const columnCount = Math.floor(windowWidth / columnWidth);
const rows = useFeedRows(selectedFeed, columnCount);
const rows = useFeedRows(feedData, columnCount);
// mobile navbar scroll effect
useEffect(() => {
@@ -759,7 +760,6 @@ const SubscriptionsCatalog = () => {
const handleClickTitle = (title, address) => {
setSelectedTitle(title);
setSelectedAddress(address);
setSelectedFeed(feed.filter((feed) => feed.title === title));
};
// mobile navbar board select functionality
src/components/views/Thread.jsx
+3 -1
View File
@@ -306,7 +306,9 @@ const Thread = () => {
const accountRepliesNotYetInCommentReplies = useMemo(() => {
const commentReplyCids = new Set(flattenedReplies.map((reply) => reply.cid));
return accountComments.filter((accountReply) => {
return !commentReplyCids.has(accountReply.cid) && accountReply.parentCid === selectedThread;
return (
!commentReplyCids.has(accountReply.cid) && (accountReply.parentCid === selectedThread || flattenedReplies.some((reply) => reply.cid === accountReply.parentCid))
);
});
}, [flattenedReplies, accountComments, selectedThread]);