From d6386ebe329bf3b7f4f0d79c2b245d9e8b96baca Mon Sep 17 00:00:00 2001
From: Pouria Delfanazari <pdelfan@gmail.com>
Date: Thu, 11 Jan 2024 17:26:49 -0800
Subject: [PATCH] Refactor reply and parent chain into separate containers

---
 src/containers/thread/ParentContainer.tsx     | 40 ++++++++
 src/containers/thread/PostThreadContainer.tsx | 93 +++----------------
 src/containers/thread/RepliesContainer.tsx    | 68 ++++++++++++++
 src/lib/consts/thread.ts                      |  1 +
 4 files changed, 124 insertions(+), 78 deletions(-)
 create mode 100644 src/containers/thread/ParentContainer.tsx
 create mode 100644 src/containers/thread/RepliesContainer.tsx
 create mode 100644 src/lib/consts/thread.ts

diff --git a/src/containers/thread/ParentContainer.tsx b/src/containers/thread/ParentContainer.tsx
new file mode 100644
index 00000000..274acd8b
--- /dev/null
+++ b/src/containers/thread/ParentContainer.tsx
@@ -0,0 +1,40 @@
+import FeedPost from "@/components/contentDisplay/feedPost/FeedPost";
+import { ContentFilterResult, Thread } from "../../../types/feed";
+import { AppBskyFeedDefs } from "@atproto/api";
+import BlockedEmbed from "@/components/dataDisplay/postEmbed/BlockedEmbed";
+import NotFoundEmbed from "@/components/dataDisplay/postEmbed/NotFoundEmbed";
+
+interface Props {
+  parentChain: Thread[];
+  contentFilter: ContentFilterResult;
+}
+
+export default function ParentContainer(props: Props) {
+  const { parentChain, contentFilter } = props;
+
+  return (
+    <div className="flex flex-col justify-between p-3 border border-x-0 md:border-x  first:border-t-0 last:border-b last:rounded-b-2xl even:[&:not(:last-child)]:border-b-0 odd:[&:not(:last-child)]:border-b-0">
+      {parentChain.map((parent, i) => (
+        <div key={i}>
+          {AppBskyFeedDefs.isBlockedPost(parent) && (
+            <BlockedEmbed depth={0} isReply={i < parentChain.length - 1} />
+          )}
+          {AppBskyFeedDefs.isNotFoundPost(parent) && (
+            <NotFoundEmbed depth={0} isReply={i < parentChain.length - 1} />
+          )}
+          {AppBskyFeedDefs.isBlockedAuthor(parent) && (
+            <BlockedEmbed depth={0} isReply={i < parentChain.length - 1} />
+          )}
+
+          {AppBskyFeedDefs.isThreadViewPost(parent) && contentFilter && (
+            <FeedPost
+              post={parent}
+              filter={contentFilter}
+              isParent={i < parentChain.length - 1}
+            />
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/src/containers/thread/PostThreadContainer.tsx b/src/containers/thread/PostThreadContainer.tsx
index 3539606c..8c3b9260 100644
--- a/src/containers/thread/PostThreadContainer.tsx
+++ b/src/containers/thread/PostThreadContainer.tsx
@@ -15,9 +15,8 @@ import Button from "@/components/actions/button/Button";
 import { useRouter } from "next/navigation";
 import FeedPostSkeleton from "@/components/contentDisplay/feedPost/FeedPostSkeleton";
 import FeedAlert from "@/components/feedback/feedAlert/FeedAlert";
-import { sortThread } from "@/lib/utils/feed";
-import Link from "next/link";
-import { getPostId } from "@/lib/utils/link";
+import RepliesContainer from "./RepliesContainer";
+import ParentContainer from "./ParentContainer";
 
 interface Props {
   id: string;
@@ -28,7 +27,6 @@ export default function PostThreadContainer(props: Props) {
   const { id, handle } = props;
   const agent = useAgent();
   const router = useRouter();
-  const MAX_REPLIES = 4;
 
   const {
     data: thread,
@@ -98,85 +96,24 @@ export default function PostThreadContainer(props: Props) {
 
       {(isFetching || isLoading) && <FeedPostSkeleton />}
 
-      {parentChain && parentChain.length > 0 && (
-        <div className="flex flex-col justify-between p-3 border border-x-0 md:border-x  first:border-t-0 last:border-b last:rounded-b-2xl even:[&:not(:last-child)]:border-b-0 odd:[&:not(:last-child)]:border-b-0">
-          {parentChain.map((parent, i) => (
-            <div key={i}>
-              {AppBskyFeedDefs.isBlockedPost(parent) && (
-                <BlockedEmbed depth={0} isReply={i < parentChain.length - 1} />
-              )}
-              {AppBskyFeedDefs.isNotFoundPost(parent) && (
-                <NotFoundEmbed depth={0} isReply={i < parentChain.length - 1} />
-              )}
-              {AppBskyFeedDefs.isBlockedAuthor(parent) && (
-                <BlockedEmbed depth={0} isReply={i < parentChain.length - 1} />
-              )}
-
-              {AppBskyFeedDefs.isThreadViewPost(parent) && contentFilter && (
-                <FeedPost
-                  post={parent}
-                  filter={contentFilter}
-                  isParent={i < parentChain.length - 1}
-                />
-              )}
-            </div>
-          ))}
-        </div>
+      {parentChain && parentChain.length > 0 && contentFilter && (
+        <ParentContainer
+          parentChain={parentChain}
+          contentFilter={contentFilter}
+        />
       )}
 
       {thread && contentFilter && (
-        <ThreadPost
-          post={thread?.post as PostView}
-          filter={contentFilter}          
-        />
+        <ThreadPost post={thread?.post as PostView} filter={contentFilter} />
       )}
 
-      {contentFilter &&
-        threadPreferences &&
-        replyChains &&
-        replyChains
-          .sort((a, b) => sortThread(a[0], b[0], threadPreferences))
-          .map((replyArr, i) => (
-            <div
-              className="p-3 border border-x-0 md:border-x first:border-t-0 last:border-b md:last:rounded-b-2xl even:[&:not(:last-child)]:border-b-0 odd:[&:not(:last-child)]:border-b-0"
-              key={i}
-            >
-              {replyArr.map((reply, j) => (
-                <div className={reply.post.uri} key={reply.post.uri}>
-                  {AppBskyFeedDefs.isBlockedPost(reply) && (
-                    <BlockedEmbed depth={0} />
-                  )}
-                  {AppBskyFeedDefs.isNotFoundPost(reply) && (
-                    <NotFoundEmbed depth={0} />
-                  )}
-                  {AppBskyFeedDefs.isBlockedAuthor(reply) && (
-                    <BlockedEmbed depth={0} />
-                  )}
-
-                  {AppBskyFeedDefs.isThreadViewPost(reply) &&
-                    j < MAX_REPLIES && (
-                      <FeedPost
-                        post={reply}
-                        filter={contentFilter}
-                        isParent={j < replyArr.length - 1 && j < MAX_REPLIES}
-                      />
-                    )}
-
-                  {AppBskyFeedDefs.isThreadViewPost(reply) &&
-                    j === MAX_REPLIES && (
-                      <Link
-                        href={`/dashboard/user/${
-                          reply.post.author.handle
-                        }/post/${getPostId(reply.post.uri)}`}
-                        className="inline-block bg-neutral-600/10 py-2 px-2.5 text-neutral-600 text-sm font-medium rounded-full hover:bg-neutral-200"
-                      >
-                        View Thread
-                      </Link>
-                    )}
-                </div>
-              ))}
-            </div>
-          ))}
+      {contentFilter && threadPreferences && replyChains && (
+        <RepliesContainer
+          replies={replyChains}
+          threadPreferences={threadPreferences}
+          contentFilter={contentFilter}
+        />
+      )}
     </>
   );
 }
diff --git a/src/containers/thread/RepliesContainer.tsx b/src/containers/thread/RepliesContainer.tsx
new file mode 100644
index 00000000..bb71c917
--- /dev/null
+++ b/src/containers/thread/RepliesContainer.tsx
@@ -0,0 +1,68 @@
+import { AppBskyFeedDefs } from "@atproto/api";
+import { ContentFilterResult, ThreadViewResult } from "../../../types/feed";
+import { sortThread } from "@/lib/utils/feed";
+import BlockedEmbed from "@/components/dataDisplay/postEmbed/BlockedEmbed";
+import NotFoundEmbed from "@/components/dataDisplay/postEmbed/NotFoundEmbed";
+import FeedPost from "@/components/contentDisplay/feedPost/FeedPost";
+import { MAX_REPLIES } from "@/lib/consts/thread";
+import Link from "next/link";
+import { getPostId } from "@/lib/utils/link";
+import { useState } from "react";
+
+interface Props {
+  replies: AppBskyFeedDefs.ThreadViewPost[][];
+  threadPreferences: ThreadViewResult;
+  contentFilter: ContentFilterResult;
+}
+
+export default function RepliesContainer(props: Props) {
+  const { replies, threadPreferences, contentFilter } = props;
+  const [expandThread, setExpandThread] = useState(false);
+
+  return (
+    <>
+      {replies
+        .sort((a, b) => sortThread(a[0], b[0], threadPreferences))
+        .map((replyArr, i) => (
+          <div
+            className="p-3 border border-x-0 md:border-x first:border-t-0 last:border-b md:last:rounded-b-2xl even:[&:not(:last-child)]:border-b-0 odd:[&:not(:last-child)]:border-b-0"
+            key={i}
+          >
+            {replyArr.map((reply, j) => (
+              <div className={reply.post.uri} key={reply.post.uri}>
+                {AppBskyFeedDefs.isBlockedPost(reply) && (
+                  <BlockedEmbed depth={0} />
+                )}
+                {AppBskyFeedDefs.isNotFoundPost(reply) && (
+                  <NotFoundEmbed depth={0} />
+                )}
+                {AppBskyFeedDefs.isBlockedAuthor(reply) && (
+                  <BlockedEmbed depth={0} />
+                )}
+
+                {AppBskyFeedDefs.isThreadViewPost(reply) && j < MAX_REPLIES && (
+                  <FeedPost
+                    post={reply}
+                    filter={contentFilter}
+                    isParent={j < replyArr.length - 1 && j < MAX_REPLIES}
+                  />
+                )}
+
+                {AppBskyFeedDefs.isThreadViewPost(reply) &&
+                  j === MAX_REPLIES && (
+                    <Link
+                      href={`/dashboard/user/${
+                        reply.post.author.handle
+                      }/post/${getPostId(reply.post.uri)}`}
+                      className="inline-block bg-neutral-600/10 py-2 px-2.5 text-neutral-600 text-sm font-medium rounded-full hover:bg-neutral-200"
+                    >
+                      View Thread
+                    </Link>
+                  )}
+              </div>
+            ))}
+          </div>
+        ))}
+    </>
+  );
+}
diff --git a/src/lib/consts/thread.ts b/src/lib/consts/thread.ts
new file mode 100644
index 00000000..54199d87
--- /dev/null
+++ b/src/lib/consts/thread.ts
@@ -0,0 +1 @@
+export const MAX_REPLIES = 4;