Broke Post out and added granular arguments. (#6)

* Broke Post out and added granular arguments. * Removed unused arguments * Fixed eslint issues
sublinks · Dec 14, 2023 · 05c1b91 · 05c1b91
1 parent 9ea7147
commit 05c1b91
Show file tree

Hide file tree

Showing 4 changed files with 200 additions and 47 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,7 +17,8 @@
     "react": "^18",
     "react-dom": "^18",
     "react-markdown": "^9.0.1",
-    "remark-gfm": "^4.0.0"
+    "remark-gfm": "^4.0.0",
+    "sublinks-js-client": "^0.0.3"
   },
   "devDependencies": {
     "@stylistic/eslint-plugin-js": "^1.4.1",

diff --git a/src/components/post-feed/index.tsx b/src/components/post-feed/index.tsx
@@ -1,54 +1,17 @@
 import React from 'react';
-import Link from 'next/link';
 
-import { getCommunitySlugFromUrl } from '@/utils/communities';
-import PostVotes from '../post-votes';
-import { BodyText, BodyTitle, PaleBodyText } from '../text';
 import * as testData from '../../../test-data.json';
-import PostThumbnail from '../post-thumbnail';
+import { PostCard } from '../post';
 
 const PostFeed = () => (
   <div className="bg-primary dark:bg-primary-dark flex flex-col gap-8">
-    {testData.posts.map(postData => {
-      const {
-        id, body, name: title, thumbnail_url: thumbnailUrl
-      } = postData.post;
-      const { actor_id: communityUrl } = postData.community;
-      const { score } = postData.counts;
-      const communitySlug = getCommunitySlugFromUrl(communityUrl);
-      const postUrl = `/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">
-              <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">
-                    <PostThumbnail postThumbnailUrl={thumbnailUrl} />
-                  </div>
-                  <div className="h-full w-full flex">
-                    <div className="h-full flex flex-col">
-                      <BodyTitle className="text-sm font-semibold line-clamp-2 group-hover:text-brand dark:group-hover:text-brand-dark group-visited:text-gray-500 group-visited:dark:text-gray-400">{title}</BodyTitle>
-                      <div className="mb-8 flex max-md:flex-col">
-                        <PaleBodyText className="text-xs">
-                          {`Posted to ${communitySlug}`}
-                        </PaleBodyText>
-                      </div>
-                      {body && <BodyText className="text-xs max-md:hidden line-clamp-2 group-visited:text-gray-500 group-visited:dark:text-gray-400">{body}</BodyText>}
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </Link>
-          </div>
-          <div className="border-b-2 border-secondary dark:border-secondary-dark" />
-        </div>
-      );
-    })}
+    {testData.posts.map(postData => (
+      <PostCard
+        community={postData.community}
+        counts={postData.counts}
+        post={postData.post}
+      />
+    ))}
   </div>
 );
 

diff --git a/src/components/post/index.tsx b/src/components/post/index.tsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import Link from 'next/link';
+
+import { getCommunitySlugFromUrl } from '@/utils/communities';
+import {
+  Post, Community, PostAggregates
+} from 'sublinks-js-client';
+import {
+  BodyText, BodyTitle, PaleBodyText
+} from '../text';
+import PostVotes from '../post-votes';
+import PostThumbnail from '../post-thumbnail';
+
+interface PostCardProps {
+  post: Post;
+  community: Community;
+  counts: PostAggregates
+}
+
+export const PostCard = ({
+  post,
+  community,
+  counts
+}: PostCardProps) => {
+  const {
+    id, body, name: title, thumbnail_url: thumbnailUrl
+  } = post;
+  const { actor_id: communityUrl } = community;
+  const { score } = counts;
+  const communitySlug = getCommunitySlugFromUrl(communityUrl);
+  const postUrl = `/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">
+          <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">
+                <PostThumbnail postThumbnailUrl={thumbnailUrl} />
+              </div>
+              <div className="h-full w-full flex">
+                <div className="h-full flex flex-col">
+                  <BodyTitle
+                    className="text-sm font-semibold line-clamp-2 group-hover:text-brand dark:group-hover:text-brand-dark group-visited:text-gray-500 group-visited:dark:text-gray-400"
+                  >
+                    {title}
+
+                  </BodyTitle>
+                  <div className="mb-8 flex max-md:flex-col">
+                    <PaleBodyText className="text-xs">
+                      {`Posted to ${communitySlug}`}
+                    </PaleBodyText>
+                  </div>
+                  {body && <BodyText className="text-xs max-md:hidden line-clamp-2 group-visited:text-gray-500 group-visited:dark:text-gray-400">{body}</BodyText>}
+                </div>
+              </div>
+            </div>
+          </div>
+        </Link>
+      </div>
+      <div className="border-b-2 border-secondary dark:border-secondary-dark" />
+    </div>
+  );
+};