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

incorrect memoization

Browse Source
This commit is contained in:
Tom (plebeius.eth)
2024-12-16 15:50:54 +01:00
parent 0717850c53
commit 620f04b33a
1 changed files with 18 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/hooks/use-comment-media-info.ts
+18 -19
View File
@@ -1,4 +1,4 @@
import { useCallback, useEffect, useMemo, useState } from 'react'; import { useCallback, useEffect } from 'react';
import { useLocation, useParams } from 'react-router-dom'; import { useLocation, useParams } from 'react-router-dom';
import { Comment } from '@plebbit/plebbit-react-hooks'; import { Comment } from '@plebbit/plebbit-react-hooks';
import { getCommentMediaInfo, fetchWebpageThumbnailIfNeeded } from '../lib/utils/media-utils'; import { getCommentMediaInfo, fetchWebpageThumbnailIfNeeded } from '../lib/utils/media-utils';
@@ -9,36 +9,35 @@ export const useCommentMediaInfo = (comment: Comment) => {
const params = useParams(); const params = useParams();
const isInPostPageView = isPostPageView(location.pathname, params); const isInPostPageView = isPostPageView(location.pathname, params);
const isInPendingPostView = isPendingPostView(location.pathname, params); const isInPendingPostView = isPendingPostView(location.pathname, params);
// some sites have CORS access, so the thumbnail can be fetched client-side, which is helpful if subplebbit.settings.fetchThumbnailUrls is false // some sites have CORS access, so the thumbnail can be fetched client-side, which is helpful if subplebbit.settings.fetchThumbnailUrls is false
const initialCommentMediaInfo = useMemo(() => getCommentMediaInfo(comment), [comment]);
const [commentMediaInfo, setCommentMediaInfo] = useState(initialCommentMediaInfo);
const fetchThumbnail = useCallback(async () => { const fetchThumbnail = useCallback(async () => {
if (!isInPostPageView && !isInPendingPostView) { let commentMediaInfo = getCommentMediaInfo(comment);
return; // don't fetch in feed view, it displaces the posts if (commentMediaInfo?.type === 'webpage' && !commentMediaInfo.thumbnail) {
} const newMediaInfo = await fetchWebpageThumbnailIfNeeded(commentMediaInfo);
if (initialCommentMediaInfo?.type === 'webpage' && !initialCommentMediaInfo.thumbnail) {
const newMediaInfo = await fetchWebpageThumbnailIfNeeded(initialCommentMediaInfo);
// Fetch the dimensions of the thumbnail // Fetch the dimensions of the thumbnail
if (newMediaInfo.thumbnail) { if (newMediaInfo.thumbnail) {
const img = new Image(); const img = new Image();
img.onload = () => { img.onload = () => {
setCommentMediaInfo({ commentMediaInfo = {
...newMediaInfo, ...newMediaInfo,
thumbnailWidth: img.width, thumbnailWidth: img.width,
thumbnailHeight: img.height, thumbnailHeight: img.height,
}); };
}; };
img.src = newMediaInfo.thumbnail; img.src = newMediaInfo.thumbnail;
} else {
setCommentMediaInfo(newMediaInfo);
} }
commentMediaInfo = newMediaInfo;
} }
}, [initialCommentMediaInfo, isInPostPageView, isInPendingPostView]); return commentMediaInfo;
useEffect(() => { }, [comment]);
fetchThumbnail();
}, [fetchThumbnail]);
return commentMediaInfo; useEffect(() => {
// don't fetch in feed view, it displaces the posts
if (isInPostPageView && isInPendingPostView) {
fetchThumbnail();
}
}, [fetchThumbnail, isInPostPageView, isInPendingPostView]);
return getCommentMediaInfo(comment);
}; };