Merge branch 'preview'

pdelfan · Jan 25, 2024 · 139f820 · 139f820
2 parents 82828fb + 3bd95d6
commit 139f820
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 17 deletions.
diff --git a/src/app/dashboard/user/[handle]/(post)/post/[id]/page.tsx b/src/app/dashboard/user/[handle]/(post)/post/[id]/page.tsx
@@ -1,4 +1,6 @@
 import PostThreadContainer from "@/containers/thread/PostThreadContainer";
+import { getSessionFromServer } from "@/lib/api/auth/session";
+import { getProfile } from "@/lib/api/bsky/actor";
 
 interface Props {
   params: {
@@ -7,8 +9,16 @@ interface Props {
   };
 }
 
-export default function Page(props: Props) {
+export default async function Page(props: Props) {
   const { id, handle } = props.params;
+  const session = await getSessionFromServer();
+  const profile = await getProfile(session?.user.bskySession.handle);
 
-  return <PostThreadContainer id={id} handle={handle} />;
+  return (
+    <PostThreadContainer
+      id={id}
+      handle={handle}
+      viewerAvatar={profile?.avatar}
+    />
+  );
 }
diff --git a/src/components/actions/composePrompt/ComposePrompt.tsx b/src/components/actions/composePrompt/ComposePrompt.tsx
@@ -0,0 +1,41 @@
+"use client";
+
+import { useComposerControls } from "@/app/providers/composer";
+import Avatar from "@/components/dataDisplay/avatar/Avatar";
+import { AppBskyFeedDefs, AppBskyFeedPost } from "@atproto/api";
+
+interface Props {
+  avatar?: string;
+  post: AppBskyFeedDefs.PostView;
+}
+
+export default function ComposePrompt(props: Props) {
+  const { avatar, post } = props;
+  const { openComposer } = useComposerControls();
+
+  return (
+    <button
+      onClick={(e) => {
+        e.stopPropagation();
+        const text = AppBskyFeedPost.isRecord(post.record) && post.record.text;
+
+        openComposer({
+          replyTo: {
+            uri: post.uri,
+            cid: post.cid,
+            text: text.toString(),
+            author: {
+              handle: post.author.handle,
+              displayName: post.author.displayName,
+              avatar: post.author.avatar,
+            },
+          },
+        });
+      }}
+      className="flex items-center w-full gap-3 px-3 py-2 hover:bg-neutral-50"
+    >
+      <Avatar src={avatar} />
+      <span className="font-medium text-neutral-400">Write your reply</span>
+    </button>
+  );
+}
diff --git a/src/components/actions/editProfile/EditProfile.tsx b/src/components/actions/editProfile/EditProfile.tsx
@@ -151,7 +151,7 @@ export default function EditProfile(props: Props) {
           </div>
         </div>
         <div className="flex gap-3 mt-2 justify-end">
-          <Dialog.Close className="px-4 py-2 text-sm text-neutral-600g font-semibold border rounded-full hover:bg-neutral-50">
+          <Dialog.Close className="px-4 py-2 text-sm text-neutral-600 font-semibold border rounded-full hover:bg-neutral-50">
             Cancel
           </Dialog.Close>
           <Button

diff --git a/src/components/contentDisplay/threadPost/ThreadPost.tsx b/src/components/contentDisplay/threadPost/ThreadPost.tsx
@@ -4,7 +4,7 @@ import Avatar from "@/components/dataDisplay/avatar/Avatar";
 import PostActions from "@/components/dataDisplay/postActions/PostActions";
 import PostEmbed from "@/components/dataDisplay/postEmbed/PostEmbed";
 import PostText from "@/components/dataDisplay/postText/postText";
-import { getFormattedDate, getRelativeTime } from "@/lib/utils/time";
+import { getFormattedDate } from "@/lib/utils/time";
 import { AppBskyFeedDefs } from "@atproto/api";
 import { useRouter } from "next/navigation";
 import { ContentFilterResult } from "../../../../types/feed";

diff --git a/src/containers/thread/PostThreadContainer.tsx b/src/containers/thread/PostThreadContainer.tsx
@@ -17,14 +17,16 @@ import FeedAlert from "@/components/feedback/feedAlert/FeedAlert";
 import RepliesContainer from "./RepliesContainer";
 import ParentContainer from "./ParentContainer";
 import { sortThread } from "@/lib/utils/feed";
+import ComposePrompt from "@/components/actions/composePrompt/ComposePrompt";
 
 interface Props {
   id: string;
   handle: string;
+  viewerAvatar?: string;
 }
 
 export default function PostThreadContainer(props: Props) {
-  const { id, handle } = props;
+  const { id, handle, viewerAvatar } = props;
   const agent = useAgent();
   const router = useRouter();
 
@@ -104,7 +106,21 @@ export default function PostThreadContainer(props: Props) {
       )}
 
       {thread && contentFilter && (
-        <ThreadPost post={thread?.post as PostView} filter={contentFilter} />
+        <>
+          <ThreadPost post={thread?.post as PostView} filter={contentFilter} />
+          <div
+            className={`${
+              replyChains.length === 0
+                ? "border rounded-b-2xl"
+                : "border-x border-t"
+            }`}
+          >
+            <ComposePrompt
+              avatar={viewerAvatar}
+              post={thread?.post as PostView}
+            />
+          </div>
+        </>
       )}
 
       {contentFilter &&

diff --git a/src/containers/thread/RepliesContainer.tsx b/src/containers/thread/RepliesContainer.tsx
@@ -1,5 +1,5 @@
 import { AppBskyFeedDefs } from "@atproto/api";
-import { ContentFilterResult, ThreadViewResult } from "../../../types/feed";
+import { ContentFilterResult } from "../../../types/feed";
 import BlockedEmbed from "@/components/dataDisplay/postEmbed/BlockedEmbed";
 import NotFoundEmbed from "@/components/dataDisplay/postEmbed/NotFoundEmbed";
 import FeedPost from "@/components/contentDisplay/feedPost/FeedPost";
@@ -35,9 +35,12 @@ export default function RepliesContainer(props: Props) {
             j === MAX_REPLIES &&
             replies.length > MAX_REPLIES &&
             !showMore && (
-              <div 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">
-                <button onClick={() => setShowMore(true)}>Show More</button>
-              </div>
+              <button
+                onClick={() => setShowMore(true)}
+                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"
+              >
+                Show More
+              </button>
             )}
 
           {AppBskyFeedDefs.isThreadViewPost(reply) &&
@@ -46,15 +49,9 @@ export default function RepliesContainer(props: Props) {
               <FeedPost
                 post={reply}
                 filter={contentFilter}
-                isParent={j <= replies.length - 1}
+                isParent={j < replies.length - 1}
               />
             )}
-
-          {j == replies.length - 1 && showMore && (
-            <div 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">
-              <button onClick={() => setShowMore(false)}>Show Less</button>
-            </div>
-          )}
         </div>
       ))}
     </>