refactor(media utils): memoize once, not twice

src/components/post/post.tsx

@@ -3,7 +3,7 @@ import { Link, useLocation, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { Role, useSubplebbit } from '@plebbit/plebbit-react-hooks';
 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 { isPostPageView } from '../../lib/utils/view-utils';
 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 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 [showThumbnail, setShowThumbnail] = useState(true);
 
@@ -166,7 +166,7 @@ const ReplyDesktop = ({ reply, roles }: PostProps) => {
   const { address, displayName, shortAddress } = author || {};
   const authorRole = roles?.[address]?.role;
 
-  const commentMediaInfo = getCommentMediaInfoMemoized(reply);
+  const commentMediaInfo = getCommentMediaInfo(reply);
   const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
   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 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 [showThumbnail, setShowThumbnail] = useState(true);
 
@@ -361,7 +361,7 @@ const ReplyMobile = ({ reply, roles }: PostProps) => {
   const { address, displayName, shortAddress } = author || {};
   const authorRole = roles?.[address]?.role;
 
-  const commentMediaInfo = getCommentMediaInfoMemoized(reply);
+  const commentMediaInfo = getCommentMediaInfo(reply);
   const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
   const [showThumbnail, setShowThumbnail] = useState(true);
 

src/lib/utils/media-utils.ts

@@ -45,45 +45,42 @@ const getPatternThumbnailUrl = (url: URL): string | undefined => {
   }
 };
 
-const getLinkMediaInfo = (link: string): CommentMediaInfo | undefined => {
+const getLinkMediaInfo = memoize(
-  if (!isValidURL(link)) {
+  (link: string): CommentMediaInfo | undefined => {
-    return;
+    if (!isValidURL(link)) {
-  }
+      return;
-  const url = new URL(link);
+    }
-  let patternThumbnailUrl: string | undefined;
+    const url = new URL(link);
-  let type: string = 'webpage';
+    let patternThumbnailUrl: string | undefined;
-  let mime: string | undefined;
+    let type: string = 'webpage';
+    let mime: string | undefined;
 
-  // Check for common dynamic image URL patterns
+    try {
-  if (link.includes('/_next/image?')) {
+      mime = extName(url.pathname.slice(url.pathname.lastIndexOf('/') + 1))[0]?.mime;
-    // Next.js Image component
+      if (mime) {
-    return { url: link, type: 'image' };
+        if (mime.startsWith('image')) {
-  }
+          type = mime === 'image/gif' ? 'gif' : 'image';
-
+        } else if (mime.startsWith('video')) {
-  try {
+          type = 'video';
-    mime = extName(url.pathname.slice(url.pathname.lastIndexOf('/') + 1))[0]?.mime;
+        } else if (mime.startsWith('audio')) {
-    if (mime) {
+          type = 'audio';
-      if (mime.startsWith('image')) {
+        }
-        type = mime === 'image/gif' ? 'gif' : 'image';
-      } else if (mime.startsWith('video')) {
-        type = 'video';
-      } else if (mime.startsWith('audio')) {
-        type = 'audio';
       }
+
+      if (canEmbed(url) || url.host.startsWith('yt.')) {
+        type = 'iframe';
+        patternThumbnailUrl = getPatternThumbnailUrl(url);
+      }
+    } catch (e) {
+      console.error(e);
     }
 
-    if (canEmbed(url) || url.host.startsWith('yt.')) {
+    return { url: link, type, patternThumbnailUrl };
-      type = 'iframe';
+  },
-      patternThumbnailUrl = getPatternThumbnailUrl(url);
+  { max: 1000 },
-    }
+);
-  } catch (e) {
-    console.error(e);
-  }
 
-  return { url: link, type, patternThumbnailUrl };
+export const getCommentMediaInfo = (comment: Comment): CommentMediaInfo | undefined => {
-};
-
-const getCommentMediaInfo = (comment: Comment): CommentMediaInfo | undefined => {
   if (!comment?.thumbnailUrl && !comment?.link) {
     return;
   }
@@ -94,6 +91,3 @@ const getCommentMediaInfo = (comment: Comment): CommentMediaInfo | undefined =>
   }
   return;
 };
-
-export const getCommentMediaInfoMemoized = memoize(getCommentMediaInfo, { max: 1000 });
-export const getLinkMediaInfoMemoized = memoize(getLinkMediaInfo, { max: 1000 });