Merge branch 'preview'

Author: pdelfan

package-lock.json

@@ -40,7 +40,6 @@
     "react-dropzone": "^14.2.3",
     "react-hot-toast": "^2.4.1",
     "react-intersection-observer": "^9.5.3",
-    "sharp": "^0.33.1",
     "tailwindcss-animate": "^1.0.7",
     "tinyld": "^1.3.4",
     "use-clipboard-copy": "^0.2.0",

package.json

@@ -18,6 +18,7 @@ export default function QueryProvider({
             // With SSR, we usually want to set some default staleTime
             // above 0 to avoid refetching immediately on the client
             staleTime: 60 * 1000,
+            retry: false,
           },
         },
       })

src/app/providers/query.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import { useState } from "react";
-import UsersSearchList from "./UsersSearchList";
-import PostsSearchList from "./PostsSearchList";
+import PostSearchContainer from "@/containers/search/PostSearchContainer";
+import UserSearchContainer from "@/containers/search/UserSearchContainer";
 
 interface Props {
   query: string;
@@ -47,8 +47,8 @@ export default function SearchList(props: Props) {
         </button>
       </div>
 
-      {currenTab === "posts" && <PostsSearchList query={query} />}
-      {currenTab === "users" && <UsersSearchList query={query} />}
+      {currenTab === "posts" && <PostSearchContainer query={query} />}
+      {currenTab === "users" && <UserSearchContainer query={query} />}
     </section>
   );
 }

src/components/contentDisplay/searchList/PostsSearchList.tsx

@@ -2,21 +2,28 @@ import { Icon } from "@iconify/react/dist/iconify.js";
 
 interface Props {
   depth: number;
+  isReply?: boolean;
 }
 
 export default function BlockedEmbed(props: Props) {
-  const { depth } = props;
+  const { depth = 0, isReply = false } = props;
+  const replyStyle = isReply && "mb-6";
 
   return (
     <>
       {depth < 1 && (
-        <div className="p-3 mt-2 border rounded-xl bg-white">
+        <div
+          className={`relative p-3 border rounded-xl bg-white ${replyStyle}`}
+        >
           <div className="flex gap-2">
             <Icon icon="fluent:shield-error-24-filled" className="text-2xl" />
             <span>
               Post is from a blocked user or someone who has blocked you.
             </span>
           </div>
+          {isReply && (
+            <div className="absolute left-6 top-12  h-full border-l-2" />
+          )}
         </div>
       )}
     </>

src/components/contentDisplay/searchList/SearchList.tsx

@@ -2,19 +2,26 @@ import { Icon } from "@iconify/react/dist/iconify.js";
 
 interface Props {
   depth: number;
+  isReply?: boolean;
 }
 
 export default function NotFoundEmbed(props: Props) {
-  const { depth } = props;
+  const { depth = 0, isReply = false } = props;
+  const replyStyle = isReply && "mb-6";
 
   return (
     <>
       {depth < 1 && (
-        <div className="p-3 mt-2 border rounded-xl bg-white">
+        <div
+          className={`relative p-3 border rounded-xl bg-white ${replyStyle}`}
+        >
           <div className="flex gap-2">
             <Icon icon="ep:warning-filled" className="text-2xl" />
-            <span>Post cannot be found</span>
+            <span>Deleted post</span>
           </div>
+          {isReply && (
+            <div className="absolute left-6 top-12  h-full border-l-2" />
+          )}
         </div>
       )}
     </>

src/components/dataDisplay/postEmbed/BlockedEmbed.tsx

@@ -23,8 +23,16 @@ export default function RecordEmbed(props: Props) {
 
   return (
     <article className="flex flex-col rounded-xl">
-      {isBlocked && <BlockedEmbed depth={depth} />}
-      {notFound && <NotFoundEmbed depth={depth} />}
+      {isBlocked && (
+        <div className="mt-2">
+          <BlockedEmbed depth={depth} />
+        </div>
+      )}
+      {notFound && (
+        <div className="mt-2">
+          <NotFoundEmbed depth={depth} />
+        </div>
+      )}
       {media && <PostEmbed content={media} depth={depth + 1} />}
       {isViewable && depth < 1 && (
         <div

src/components/dataDisplay/postEmbed/NotFoundEmbed.tsx

@@ -28,6 +28,7 @@ export default function FeedContainer(props: Props) {
     isFetchingFeedNextPage,
     feedHasNextPage,
   } = useFeed(feed);
+
   const isEmpty =
     !isFetchingFeed &&
     !isFetchingFeedNextPage &&
@@ -42,7 +43,7 @@ export default function FeedContainer(props: Props) {
       <Refetch
         onRefetch={() => {
           window.scrollTo({ top: 0, behavior: "smooth" });
-          refetchFeed();          
+          refetchFeed();
         }}
       />
       <ComposeButton mode="float" />

src/components/dataDisplay/postEmbed/RecordEmbed.tsx

@@ -0,0 +1,81 @@
+import { searchPosts } from "@/lib/api/bsky/actor";
+import useAgent from "@/lib/hooks/bsky/useAgent";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { Fragment, useEffect } from "react";
+import EndOfFeed from "@/components/feedback/endOfFeed/EndOfFeed";
+import FeedAlert from "@/components/feedback/feedAlert/FeedAlert";
+import FeedPostSkeleton from "@/components/contentDisplay/feedPost/FeedPostSkeleton";
+import SearchPost from "@/components/contentDisplay/searchPost/SearchPost";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { useInView } from "react-intersection-observer";
+
+interface Props {
+  query: string;
+}
+
+export default function PostSearchContainer(props: Props) {
+  const { query } = props;
+  const decoded = decodeURIComponent(query);
+  const agent = useAgent();
+
+  const {
+    status,
+    data: posts,
+    error,
+    isLoading,
+    isFetching,
+    isFetchingNextPage,
+    hasNextPage,
+    fetchNextPage,
+  } = useInfiniteQuery({
+    queryKey: ["searchPosts", query],
+    queryFn: ({ pageParam }) => searchPosts(decoded, pageParam, agent),
+    initialPageParam: "",
+    getNextPageParam: (lastPage) => lastPage?.cursor,
+  });
+
+  const isEmpty =
+    !isFetching && !isFetchingNextPage && posts?.pages[0]?.posts?.length === 0;
+
+  const { ref: observerRef, inView } = useInView();
+
+  useEffect(() => {
+    if (inView) {
+      fetchNextPage();
+    }
+  }, [fetchNextPage, inView]);
+
+  return (
+    <div>
+      <section className="flex flex-col">
+        {posts?.pages
+          .flatMap((page) => page?.posts)
+          .map((post, i) => (
+            <Fragment key={i}>
+              {post && <SearchPost key={i} post={post} />}
+            </Fragment>
+          ))}
+      </section>
+      {isEmpty && !hasNextPage && (
+        <div className="mx-3 md:mx-0 border-t">
+          <FeedAlert variant="empty" message="No posts found" />
+        </div>
+      )}
+      {isFetching && !isFetchingNextPage && <FeedPostSkeleton />}
+      {isFetchingNextPage && (
+        <section className="flex flex-1 justify-center mt-3">
+          <Icon icon="eos-icons:loading" className="text-xl" />
+        </section>
+      )}
+      {error && (
+        <FeedAlert variant="badResponse" message="Something went wrong" />
+      )}
+      {!isEmpty &&
+        !error &&
+        !isFetching &&
+        !hasNextPage &&
+        !isFetchingNextPage && <EndOfFeed />}
+      <div ref={observerRef} />
+    </div>
+  );
+}