From 05c1b913bf7b0a121fdf4e0a7cda467c82017432 Mon Sep 17 00:00:00 2001
From: Pdzly <34943569+Pdzly@users.noreply.github.com>
Date: Thu, 14 Dec 2023 02:28:12 +0000
Subject: [PATCH] Broke Post out and added granular arguments. (#6)

* Broke Post out and added granular arguments.

* Removed unused arguments

* Fixed eslint issues
---
 package-lock.json                  | 123 ++++++++++++++++++++++++++++-
 package.json                       |   3 +-
 src/components/post-feed/index.tsx |  53 ++-----------
 src/components/post/index.tsx      |  68 ++++++++++++++++
 4 files changed, 200 insertions(+), 47 deletions(-)
 create mode 100644 src/components/post/index.tsx

diff --git a/package-lock.json b/package-lock.json
index d366b15..8ab1bc6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,7 +15,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",
@@ -1031,6 +1032,11 @@
         "has-symbols": "^1.0.3"
       }
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.16",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.16.tgz",
@@ -1380,6 +1386,17 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "dev": true
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/comma-separated-tokens": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
@@ -1410,6 +1427,14 @@
       "integrity": "sha512-JsPKdmh8ZkmnHxDk55FZ1TqVLvEQTvoByJZRN9jzI0UjxK/QgAmsphz7PGtqgPieQZ/CQcHWXCR7ATDNhGe+YA==",
       "dev": true
     },
+    "node_modules/cross-fetch": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.8.tgz",
+      "integrity": "sha512-cvA+JwZoU0Xq+h6WkMvAUqPEYy92Obet6UdKLfW60qn99ftItKjB5T+BkyWOFWe2pUyfQ+IJHmpOTznqk1M6Kg==",
+      "dependencies": {
+        "node-fetch": "^2.6.12"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -1527,6 +1552,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/dequal": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
@@ -2392,6 +2425,19 @@
         "is-callable": "^1.1.3"
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fraction.js": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
@@ -3551,6 +3597,15 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/lemmy-js-client": {
+      "version": "0.19.0-rc.19",
+      "resolved": "https://registry.npmjs.org/lemmy-js-client/-/lemmy-js-client-0.19.0-rc.19.tgz",
+      "integrity": "sha512-kae8V33QixbyYIA+pn7+sCeOOWL3eRgnFaNkZU8Y8vxhwZExIhkZus9jzVt/BoyPddVlafyBHxgAUsWXLA4tRA==",
+      "dependencies": {
+        "cross-fetch": "^3.1.5",
+        "form-data": "^4.0.0"
+      }
+    },
     "node_modules/levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -4463,6 +4518,25 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -4568,6 +4642,25 @@
         }
       }
     },
+    "node_modules/node-fetch": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
+      "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      },
+      "peerDependencies": {
+        "encoding": "^0.1.0"
+      },
+      "peerDependenciesMeta": {
+        "encoding": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/node-releases": {
       "version": "2.0.13",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz",
@@ -6095,6 +6188,15 @@
         }
       }
     },
+    "node_modules/sublinks-js-client": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/sublinks-js-client/-/sublinks-js-client-0.0.3.tgz",
+      "integrity": "sha512-KoBKZi639+UBB69vpbrKylgyTFBtk91rKeq/To8QmH+oOdgGCSJF7XKDe5MhEfSkeUpS3Jpuv84E70njTlFsOw==",
+      "dependencies": {
+        "cross-fetch": "^3.1.5",
+        "lemmy-js-client": "^0.19.0-rc.19"
+      }
+    },
     "node_modules/sucrase": {
       "version": "3.34.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.34.0.tgz",
@@ -6246,6 +6348,11 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
+    },
     "node_modules/trim-lines": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
@@ -6662,6 +6769,20 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
+    },
+    "node_modules/whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+      "dependencies": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/package.json b/package.json
index de28951..d14286d 100644
--- 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
index 73b53b7..30d34d7 100644
--- 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
new file mode 100644
index 0000000..64c7d16
--- /dev/null
+++ 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>
+  );
+};