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 (
+
+ {parentChain.map((parent, i) => (
+
+ {AppBskyFeedDefs.isBlockedPost(parent) && (
+
+ )}
+ {AppBskyFeedDefs.isNotFoundPost(parent) && (
+
+ )}
+ {AppBskyFeedDefs.isBlockedAuthor(parent) && (
+
+ )}
+
+ {AppBskyFeedDefs.isThreadViewPost(parent) && contentFilter && (
+
+ )}
+
+ ))}
+
+ );
+}
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) && }
- {parentChain && parentChain.length > 0 && (
-
- {parentChain.map((parent, i) => (
-
- {AppBskyFeedDefs.isBlockedPost(parent) && (
-
- )}
- {AppBskyFeedDefs.isNotFoundPost(parent) && (
-
- )}
- {AppBskyFeedDefs.isBlockedAuthor(parent) && (
-
- )}
-
- {AppBskyFeedDefs.isThreadViewPost(parent) && contentFilter && (
-
- )}
-
- ))}
-
+ {parentChain && parentChain.length > 0 && contentFilter && (
+
)}
{thread && contentFilter && (
-
+
)}
- {contentFilter &&
- threadPreferences &&
- replyChains &&
- replyChains
- .sort((a, b) => sortThread(a[0], b[0], threadPreferences))
- .map((replyArr, i) => (
-
- {replyArr.map((reply, j) => (
-
- {AppBskyFeedDefs.isBlockedPost(reply) && (
-
- )}
- {AppBskyFeedDefs.isNotFoundPost(reply) && (
-
- )}
- {AppBskyFeedDefs.isBlockedAuthor(reply) && (
-
- )}
-
- {AppBskyFeedDefs.isThreadViewPost(reply) &&
- j < MAX_REPLIES && (
-
- )}
-
- {AppBskyFeedDefs.isThreadViewPost(reply) &&
- j === MAX_REPLIES && (
-
- View Thread
-
- )}
-
- ))}
-
- ))}
+ {contentFilter && threadPreferences && replyChains && (
+
+ )}
>
);
}
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) => (
+
+ {replyArr.map((reply, j) => (
+
+ {AppBskyFeedDefs.isBlockedPost(reply) && (
+
+ )}
+ {AppBskyFeedDefs.isNotFoundPost(reply) && (
+
+ )}
+ {AppBskyFeedDefs.isBlockedAuthor(reply) && (
+
+ )}
+
+ {AppBskyFeedDefs.isThreadViewPost(reply) && j < MAX_REPLIES && (
+
+ )}
+
+ {AppBskyFeedDefs.isThreadViewPost(reply) &&
+ j === MAX_REPLIES && (
+
+ View Thread
+
+ )}
+
+ ))}
+
+ ))}
+ >
+ );
+}
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;