Fix infinite resolve
This commit is contained in:
parent
a9b9c3ccf0
commit
58db9576b9
4 changed files with 16 additions and 16 deletions
|
@ -26,13 +26,11 @@ import CommentsList from './view';
|
||||||
const select = (state, props) => {
|
const select = (state, props) => {
|
||||||
const activeChannelClaim = selectActiveChannelClaim(state);
|
const activeChannelClaim = selectActiveChannelClaim(state);
|
||||||
const topLevelComments = makeSelectTopLevelCommentsForUri(props.uri)(state);
|
const topLevelComments = makeSelectTopLevelCommentsForUri(props.uri)(state);
|
||||||
const resolvedComments = [];
|
|
||||||
|
|
||||||
if (topLevelComments.length > 0) {
|
const resolvedComments =
|
||||||
topLevelComments.map(
|
topLevelComments && topLevelComments.length > 0
|
||||||
(comment) => Boolean(makeSelectClaimForUri(comment.channel_url)(state)) && resolvedComments.push(comment)
|
? topLevelComments.filter(({ channel_url }) => makeSelectClaimForUri(channel_url)(state) !== undefined)
|
||||||
);
|
: [];
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
topLevelComments,
|
topLevelComments,
|
||||||
|
|
|
@ -100,6 +100,8 @@ function CommentList(props: Props) {
|
||||||
const channelId = getChannelIdFromClaim(claim);
|
const channelId = getChannelIdFromClaim(claim);
|
||||||
const channelSettings = channelId ? settingsByChannelId[channelId] : undefined;
|
const channelSettings = channelId ? settingsByChannelId[channelId] : undefined;
|
||||||
const moreBelow = page < topLevelTotalPages;
|
const moreBelow = page < topLevelTotalPages;
|
||||||
|
const isResolvingComments = topLevelComments && resolvedComments.length !== topLevelComments.length;
|
||||||
|
const alreadyResolved = !isResolvingComments && resolvedComments.length !== 0;
|
||||||
|
|
||||||
// Display comments immediately if not fetching reactions
|
// Display comments immediately if not fetching reactions
|
||||||
// If not, wait to show comments until reactions are fetched
|
// If not, wait to show comments until reactions are fetched
|
||||||
|
@ -227,11 +229,13 @@ function CommentList(props: Props) {
|
||||||
|
|
||||||
// Batch resolve comment channel urls
|
// Batch resolve comment channel urls
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
if (!topLevelComments || alreadyResolved) return;
|
||||||
|
|
||||||
const urisToResolve = [];
|
const urisToResolve = [];
|
||||||
topLevelComments.map(({ channel_url }) => channel_url !== undefined && urisToResolve.push(channel_url));
|
topLevelComments.map(({ channel_url }) => channel_url !== undefined && urisToResolve.push(channel_url));
|
||||||
|
|
||||||
if (urisToResolve.length > 0) doResolveUris(urisToResolve);
|
if (urisToResolve.length > 0) doResolveUris(urisToResolve);
|
||||||
}, [topLevelComments, doResolveUris]);
|
}, [alreadyResolved, doResolveUris, topLevelComments]);
|
||||||
|
|
||||||
const getCommentElems = (comments) =>
|
const getCommentElems = (comments) =>
|
||||||
comments.map((comment) => (
|
comments.map((comment) => (
|
||||||
|
|
|
@ -6,13 +6,10 @@ import CommentsReplies from './view';
|
||||||
|
|
||||||
const select = (state, props) => {
|
const select = (state, props) => {
|
||||||
const fetchedReplies = makeSelectRepliesForParentId(props.parentId)(state);
|
const fetchedReplies = makeSelectRepliesForParentId(props.parentId)(state);
|
||||||
const resolvedReplies = [];
|
const resolvedReplies =
|
||||||
|
fetchedReplies && fetchedReplies.length > 0
|
||||||
if (fetchedReplies && fetchedReplies.length > 0) {
|
? fetchedReplies.filter(({ channel_url }) => makeSelectClaimForUri(channel_url)(state) !== undefined)
|
||||||
fetchedReplies.map(
|
: [];
|
||||||
(comment) => Boolean(makeSelectClaimForUri(comment.channel_url)(state)) && resolvedReplies.push(comment)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
fetchedReplies,
|
fetchedReplies,
|
||||||
|
|
|
@ -44,16 +44,17 @@ function CommentsReplies(props: Props) {
|
||||||
|
|
||||||
const [isExpanded, setExpanded] = React.useState(true);
|
const [isExpanded, setExpanded] = React.useState(true);
|
||||||
const isResolvingReplies = fetchedReplies && resolvedReplies.length !== fetchedReplies.length;
|
const isResolvingReplies = fetchedReplies && resolvedReplies.length !== fetchedReplies.length;
|
||||||
|
const alreadyResolved = !isResolvingReplies && resolvedReplies.length !== 0;
|
||||||
|
|
||||||
// Batch resolve comment channel urls
|
// Batch resolve comment channel urls
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
if (!fetchedReplies) return;
|
if (!fetchedReplies || alreadyResolved) return;
|
||||||
|
|
||||||
const urisToResolve = [];
|
const urisToResolve = [];
|
||||||
fetchedReplies.map(({ channel_url }) => channel_url !== undefined && urisToResolve.push(channel_url));
|
fetchedReplies.map(({ channel_url }) => channel_url !== undefined && urisToResolve.push(channel_url));
|
||||||
|
|
||||||
if (urisToResolve.length > 0) doResolveUris(urisToResolve);
|
if (urisToResolve.length > 0) doResolveUris(urisToResolve);
|
||||||
}, [fetchedReplies, doResolveUris]);
|
}, [alreadyResolved, doResolveUris, fetchedReplies]);
|
||||||
|
|
||||||
return !numDirectReplies ? null : (
|
return !numDirectReplies ? null : (
|
||||||
<div className="comment__replies-container">
|
<div className="comment__replies-container">
|
||||||
|
|
Loading…
Reference in a new issue