rename threads components

README.md

@@ -12,5 +12,3 @@ Rate Limits. The API used is an unofficial one. As such, Threads can enforce rat
 
 - [ ] If the API throws an error, gracefully handle it in the UI. Right now, for some weird reason, Nextjs throws the error as HTML with 500 status code and swr spams the api until it gets a successful response, even though retryOnError is false
 - [ ] Test search users column by passing in invalid values. We need to display meaningful error messages
-- [ ] Encode and decode any values passed to api (See https://stackoverflow.com/a/62228852/2104976)
-- [ ] Rename the components inside the Threads folder (Cell A, Cell B etc)

components/Thread/QuotedPost.js

@@ -1,10 +1,10 @@
-import CellB from "./CellB";
-import CellE from "./CellE";
-import CellH from "./CellH";
-import TextContent from "./TextContent";
-import ImageContent from "./ImageContent";
-import NestedQuotedPost from "./NestedQuotedPost";
-import LinkPreviewContent from "./LinkPreviewContent";
+import ProfilePic from "./components/ProfilePic";
+import Title from "./components/Title";
+import Stats from "./components/Stats";
+import TextContent from "./components/TextContent";
+import ImageContent from "./components/ImageContent";
+import NestedQuotedPost from "./components/NestedQuotedPost";
+import LinkPreviewContent from "./components/LinkPreviewContent";
 
 export default function QuotedPost({
  content, // Thread body
@@ -20,8 +20,8 @@ export default function QuotedPost({
  return (
  <article className="border rounded bg-white flex flex-col p-2">
  <div className="flex mb-2">
- <CellB handle={handle} profilePic={profilePic} isQuotedPost />
- <CellE handle={handle} createdAt={createdAt} />
+ <ProfilePic handle={handle} profilePic={profilePic} isQuotedPost />
+ <Title handle={handle} createdAt={createdAt} />
  </div>
 
  <TextContent content={content} />
@@ -30,7 +30,7 @@ export default function QuotedPost({
 
  <NestedQuotedPost post={nestedQuotedPost} />
 
- <CellH likeCount={likeCount} replyCount={replyCount} />
+ <Stats likeCount={likeCount} replyCount={replyCount} />
  </article>
  );
 }

components/Thread/LinkPreviewContent/index.js → components/Thread/components/LinkPreviewContent/index.js

@@ -21,8 +21,8 @@ export default function LinkPreviewContent({ linkPreview }) {
  alt="An image"
  className="rounded-t w-full h-auto mb-2"
  />
- <span className="text-sm text-gray-400 p-4">{displayUrl}</span>
- <p className="text-sm px-4 pb-4">{title}</p>
+ <span className="text-sm text-gray-400 px-4">{displayUrl}</span>
+ <p className="text-sm px-4 pb-2">{title}</p>
  </a>
  );
 }

components/Thread/CellG/index.js → components/Thread/components/PostActions/index.js

@@ -4,8 +4,13 @@ import {
  ReplyOutlineSVG,
  RepostOutlineSVG,
 } from "@/components/SVGIcons";
+import { useSelf } from "@/hooks/useSelf";
+
+export default function PostActions() {
+ const user = useSelf()
+
+
 
-export default function CellG() {
  return (
  <div className="flex">
  <div className="hover:bg-gray-100 p-2 -ml-3 hover:cursor-pointer rounded-full">
@@ -17,7 +22,7 @@ export default function CellG() {
  <div className="hover:bg-gray-100 p-2 hover:cursor-pointer rounded-full">
  <RepostOutlineSVG className="w-6 h-6" />
  </div>
- <div className="hover:bg-gray-100 p-2 hover:cursor-pointer rounded-full">
+ <div className="hover:bg-gray-100 p-2 hover:cursor-pointer rounded-full opacity-25">
  <EnvelopeOutlineSVG className="w-6 h-6" />
  </div>
  </div>

components/Thread/CellB/index.js → components/Thread/components/ProfilePic/index.js

@@ -1,7 +1,7 @@
 import clsx from "clsx";
 import Image from "next/image";
 
-export default function CellB({ handle, profilePic, isQuotedPost = false }) {
+export default function ProfilePic({ handle, profilePic, isQuotedPost = false }) {
  return (
  <div
  className={clsx("flex justify-center", {

components/Thread/CellF/index.js → components/Thread/components/ReplyIndicator/index.js

@@ -1,4 +1,4 @@
-export default function CellF({ isReply, replyTo }) {
+export default function ReplyIndicator({ isReply, replyTo }) {
  let markup;
 
  if (isReply) {

components/Thread/CellD/index.js → components/Thread/components/RepostIndicator/index.js

@@ -1,4 +1,4 @@
-export default function CellD({ handle, isRepost }) {
+export default function RepostIndicator({ handle, isRepost }) {
  let markup;
 
  if (isRepost) {

components/Thread/CellH/index.js → components/Thread/components/Stats/index.js

@@ -9,7 +9,7 @@ function getLikeLabel(likeCount) {
  return `${new Intl.NumberFormat().format(likeCount)} ${suffix}`;
 }
 
-export default function CellH({ likeCount, replyCount }) {
+export default function Stats({ likeCount, replyCount }) {
  let markup;
 
  if (likeCount > 0 && replyCount > 0) {

components/Thread/CellC/index.js → components/Thread/components/ThreadLink/index.js

@@ -1,4 +1,4 @@
-export default function CellC({ isInternalNode, isRootNode }) {
+export default function ThreadLink({ isInternalNode, isRootNode }) {
  let markup;
 
  if (isInternalNode || isRootNode) {

components/Thread/CellE/index.js → components/Thread/components/Title/index.js

@@ -1,6 +1,6 @@
 import getTimeSince from "@/utils/timeSince";
 
-export default function CellE({ handle, createdAt }) {
+export default function Title({ handle, createdAt }) {
  const dateTile = new Intl.DateTimeFormat("en-US", {
  dateStyle: "medium",
  timeStyle: "short",

components/Thread/CellA/index.js → components/Thread/components/TopLeftContent/index.js

@@ -1,6 +1,6 @@
 import { RepostOutlineSVG } from "@/components/SVGIcons";
 
-export default function CellA({ isRepost, isInternalNode, isLeafNode }) {
+export default function TopLeftContent({ isRepost, isInternalNode, isLeafNode }) {
  let markup;
 
  if (isRepost) {

components/Thread/index.js

@@ -1,17 +1,17 @@
 import clsx from "clsx";
-import CellA from "./CellA";
-import CellB from "./CellB";
-import CellC from "./CellC";
-import CellD from "./CellD";
-import CellE from "./CellE";
-import CellF from "./CellF";
-import CellG from "./CellG";
-import CellH from "./CellH";
+import TopLeftContent from "./components/TopLeftContent";
+import ProfilePic from "./components/ProfilePic";
+import ThreadLink from "./components/ThreadLink";
+import RepostIndicator from "./components/RepostIndicator";
+import Title from "./components/Title";
+import ReplyIndicator from "./components/ReplyIndicator";
+import PostActions from "./components/PostActions";
+import Stats from "./components/Stats";
 import QuotedPost from "./QuotedPost";
-import TextContent from "./TextContent";
-import ImageContent from "./ImageContent";
-import VideoContent from "./VideoContent";
-import LinkPreviewContent from "./LinkPreviewContent";
+import TextContent from "./components/TextContent";
+import ImageContent from "./components/ImageContent";
+import VideoContent from "./components/VideoContent";
+import LinkPreviewContent from "./components/LinkPreviewContent";
 
 export default function Thread({
  content, // Thread body
@@ -41,31 +41,31 @@ export default function Thread({
  })}
  >
  <div className="flex flex-col w-16 shrink-0">
- <CellA
+ <TopLeftContent
  isRepost={isRepost}
  isInternalNode={isInternalNode}
  isLeafNode={isLeafNode}
  />
- <CellB handle={handle} profilePic={profilePic} />
- <CellC isInternalNode={isInternalNode} isRootNode={isRootNode} />
+ <ProfilePic handle={handle} profilePic={profilePic} />
+ <ThreadLink isInternalNode={isInternalNode} isRootNode={isRootNode} />
  </div>
  <div
  className={clsx("flex flex-col grow pr-3 text-sm", {
  "pb-3": isInternalNode || isRootNode || isLeafNode,
  })}
  >
- <CellD handle={repostedBy} isRepost={isRepost} />
- <CellE handle={handle} createdAt={createdAt} />
- <CellF isReply={isReply} replyTo={replyTo} />
+ <RepostIndicator handle={repostedBy} isRepost={isRepost} />
+ <Title handle={handle} createdAt={createdAt} />
+ <ReplyIndicator isReply={isReply} replyTo={replyTo} />
  <TextContent content={content} />
  {video && <VideoContent url={video} />}
  {!video && <ImageContent image={image} />}
  <LinkPreviewContent linkPreview={linkPreview} />
 
  {quotedPost && <QuotedPost {...quotedPost} />}
 
- <CellG />
- <CellH likeCount={likeCount} replyCount={replyCount} />
+ <PostActions />
+ <Stats likeCount={likeCount} replyCount={replyCount} />
  </div>
  </article>
  );