Create util for thumbnail url

sublinks · Dec 23, 2023 · 9b75b07 · 9b75b07
1 parent e52955f
commit 9b75b07
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 10 deletions.
diff --git a/src/app/p/[comslug]/[postid]/page.tsx b/src/app/p/[comslug]/[postid]/page.tsx
@@ -4,7 +4,7 @@ import Link from 'next/link';
 import MainCard from '@/components/main-card';
 import { PaleBodyText, PaleLinkText } from '@/components/text';
 import PostHeader from '@/components/post-header';
-import { isImage } from '@/utils/links';
+import { getPostThumbnailUrl, isImage } from '@/utils/links';
 import sublinksClient from '@/utils/client';
 
 import * as testData from '../../../../../test-data.json';
@@ -56,12 +56,13 @@ const PostView = async ({ params: { comSlug, postId } }: PostViewProps) => {
 
   const { post_view: postView } = postData;
   const {
-    body, name: postName, url: postUrl, thumbnail_url: thumbnailUrl
+    body, name: postName, url: postUrl
   } = postView.post;
   const { name: authorName, actor_id: authorUrl } = postView.creator;
   const { actor_id: communityUrl } = postView.community;
   const { score } = postView.counts;
   const postHasImage = postUrl ? isImage(postUrl) : false;
+  const thumbnailUrl = getPostThumbnailUrl(postView.post);
 
   const SubTitle = (
     <PostSubTitle

diff --git a/src/components/post-header/index.tsx b/src/components/post-header/index.tsx
@@ -23,7 +23,6 @@ const PostHeader = ({
   points, title, SubTitle, postUrl, thumbnailUrl, hasBody, hasImage
 }: PostHeaderProps) => {
   const [showOriginalImage, setShowOriginalImage] = useState(hasImage && !hasBody);
-  const thumbnailUrlFallback = thumbnailUrl || postUrl;
 
   let thumbnailLabel = "Go to post's URL";
   if (hasImage) {
@@ -51,7 +50,7 @@ const PostHeader = ({
               }
             }}
           >
-            <PostThumbnail postThumbnailUrl={thumbnailUrlFallback} />
+            <PostThumbnail postThumbnailUrl={thumbnailUrl} />
           </button>
         </div>
         <div className="flex flex-col">

diff --git a/src/components/post/index.tsx b/src/components/post/index.tsx
@@ -5,6 +5,7 @@ import { getCommunitySlugFromUrl } from '@/utils/communities';
 import {
   Post, Community, PostAggregates
 } from 'sublinks-js-client';
+import { getPostThumbnailUrl } from '@/utils/links';
 import {
   BodyText, BodyTitle, PaleBodyText
 } from '../text';
@@ -22,21 +23,20 @@ export const PostCard = ({
   community,
   counts
 }: PostCardProps) => {
-  const {
-    id, body, name: title, thumbnail_url: thumbnailUrl
-  } = post;
+  const { id, body, name: title } = post;
   const { actor_id: communityUrl } = community;
   const { score } = counts;
+  const thumbnailUrl = getPostThumbnailUrl(post);
   const communitySlug = getCommunitySlugFromUrl(communityUrl);
-  const postUrl = `/p/${communitySlug}/${id}`;
+  const postHref = `/p/${communitySlug}/${id}`;
 
   return (
     <div key={id}>
       <div className="flex">
         <div className="flex items-center ml-8">
           <PostVotes points={score} />
         </div>
-        <Link href={postUrl} className="w-full group">
+        <Link href={postHref} className="w-full group">
           <div className="flex h-100 relative">
             <div className="h-full flex gap-12 px-12 py-6 items-start">
               <div className="h-80 w-80 mt-8 flex flex-shrink-0 relative">

diff --git a/src/utils/links.ts b/src/utils/links.ts
@@ -1,5 +1,14 @@
-const isImage = (url: string) => /\.(jpg|jpeg|png|webp|avif|gif|svg)?.*$/.test(url);
+import { Post } from 'sublinks-js-client';
+
+const isImage = (url: string) => {
+  const splitUrl = url.split('?');
+  return /\.(jpg|jpeg|png|webp|avif|gif|svg)$/.test(splitUrl?.[0] || url);
+};
+
+const getPostThumbnailUrl = (post: Post) => post.thumbnail_url
+  || (post.url && isImage(post.url) ? post.url : undefined);
 
 export {
+  getPostThumbnailUrl,
   isImage
 };