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

refactor(media utils): memoize once, not twice

Browse Source
This commit is contained in:
plebeius.eth
2024-04-10 12:19:02 +02:00
parent 9ae351cbe1
commit b1fb9f9d0c
2 changed files with 36 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/post/post.tsx
+5 -5
View File
@@ -3,7 +3,7 @@ import { Link, useLocation, useParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { Role, useSubplebbit } from '@plebbit/plebbit-react-hooks'; import { Role, useSubplebbit } from '@plebbit/plebbit-react-hooks';
import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js'; import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
import { getCommentMediaInfoMemoized, getHasThumbnail } from '../../lib/utils/media-utils'; import { getCommentMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils';
import { getFormattedDate } from '../../lib/utils/time-utils'; import { getFormattedDate } from '../../lib/utils/time-utils';
import { isPostPageView } from '../../lib/utils/view-utils'; import { isPostPageView } from '../../lib/utils/view-utils';
import useCountLinksInReplies from '../../hooks/use-count-links-in-replies'; import useCountLinksInReplies from '../../hooks/use-count-links-in-replies';
@@ -33,7 +33,7 @@ const PostDesktop = ({ post, roles, showAllReplies }: PostProps) => {
const displayTitle = title && title.length > 75 ? title?.slice(0, 75) + '...' : title; const displayTitle = title && title.length > 75 ? title?.slice(0, 75) + '...' : title;
const displayContent = content && !isInPostPage && content.length > 1000 ? content?.slice(0, 1000) + '(...)' : content; const displayContent = content && !isInPostPage && content.length > 1000 ? content?.slice(0, 1000) + '(...)' : content;
const commentMediaInfo = getCommentMediaInfoMemoized(post); const commentMediaInfo = getCommentMediaInfo(post);
const hasThumbnail = getHasThumbnail(commentMediaInfo, link); const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
const [showThumbnail, setShowThumbnail] = useState(true); const [showThumbnail, setShowThumbnail] = useState(true);
@@ -166,7 +166,7 @@ const ReplyDesktop = ({ reply, roles }: PostProps) => {
const { address, displayName, shortAddress } = author || {}; const { address, displayName, shortAddress } = author || {};
const authorRole = roles?.[address]?.role; const authorRole = roles?.[address]?.role;
const commentMediaInfo = getCommentMediaInfoMemoized(reply); const commentMediaInfo = getCommentMediaInfo(reply);
const hasThumbnail = getHasThumbnail(commentMediaInfo, link); const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
const [showThumbnail, setShowThumbnail] = useState(true); const [showThumbnail, setShowThumbnail] = useState(true);
@@ -267,7 +267,7 @@ const PostMobile = ({ post, roles, showAllReplies }: PostProps) => {
const displayTitle = title && title.length > 30 ? title?.slice(0, 30) + '(...)' : title; const displayTitle = title && title.length > 30 ? title?.slice(0, 30) + '(...)' : title;
const displayContent = content && !isInPostPage && content.length > 1000 ? content?.slice(0, 1000) : content; const displayContent = content && !isInPostPage && content.length > 1000 ? content?.slice(0, 1000) : content;
const commentMediaInfo = getCommentMediaInfoMemoized(post); const commentMediaInfo = getCommentMediaInfo(post);
const hasThumbnail = getHasThumbnail(commentMediaInfo, link); const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
const [showThumbnail, setShowThumbnail] = useState(true); const [showThumbnail, setShowThumbnail] = useState(true);
@@ -361,7 +361,7 @@ const ReplyMobile = ({ reply, roles }: PostProps) => {
const { address, displayName, shortAddress } = author || {}; const { address, displayName, shortAddress } = author || {};
const authorRole = roles?.[address]?.role; const authorRole = roles?.[address]?.role;
const commentMediaInfo = getCommentMediaInfoMemoized(reply); const commentMediaInfo = getCommentMediaInfo(reply);
const hasThumbnail = getHasThumbnail(commentMediaInfo, link); const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
const [showThumbnail, setShowThumbnail] = useState(true); const [showThumbnail, setShowThumbnail] = useState(true);
src/lib/utils/media-utils.ts
+6 -12
View File
@@ -45,7 +45,8 @@ const getPatternThumbnailUrl = (url: URL): string | undefined => {
} }
}; };
const getLinkMediaInfo = (link: string): CommentMediaInfo | undefined => { const getLinkMediaInfo = memoize(
(link: string): CommentMediaInfo | undefined => {
if (!isValidURL(link)) { if (!isValidURL(link)) {
return; return;
} }
@@ -54,12 +55,6 @@ const getLinkMediaInfo = (link: string): CommentMediaInfo | undefined => {
let type: string = 'webpage'; let type: string = 'webpage';
let mime: string | undefined; let mime: string | undefined;
// Check for common dynamic image URL patterns
if (link.includes('/_next/image?')) {
// Next.js Image component
return { url: link, type: 'image' };
}
try { try {
mime = extName(url.pathname.slice(url.pathname.lastIndexOf('/') + 1))[0]?.mime; mime = extName(url.pathname.slice(url.pathname.lastIndexOf('/') + 1))[0]?.mime;
if (mime) { if (mime) {
@@ -81,9 +76,11 @@ const getLinkMediaInfo = (link: string): CommentMediaInfo | undefined => {
} }
return { url: link, type, patternThumbnailUrl }; return { url: link, type, patternThumbnailUrl };
}; },
{ max: 1000 },
);
const getCommentMediaInfo = (comment: Comment): CommentMediaInfo | undefined => { export const getCommentMediaInfo = (comment: Comment): CommentMediaInfo | undefined => {
if (!comment?.thumbnailUrl && !comment?.link) { if (!comment?.thumbnailUrl && !comment?.link) {
return; return;
} }
@@ -94,6 +91,3 @@ const getCommentMediaInfo = (comment: Comment): CommentMediaInfo | undefined =>
} }
return; return;
}; };
export const getCommentMediaInfoMemoized = memoize(getCommentMediaInfo, { max: 1000 });
export const getLinkMediaInfoMemoized = memoize(getLinkMediaInfo, { max: 1000 });