Merge branch 'preview'

pdelfan · Dec 19, 2023 · f83faee · f83faee
2 parents 7077813 + 5bc7df1
commit f83faee
Show file tree

Hide file tree

Showing 17 changed files with 174 additions and 640 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.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",

diff --git a/src/app/providers/query.tsx b/src/app/providers/query.tsx
@@ -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,
           },
         },
       })

diff --git a/src/components/contentDisplay/searchList/PostsSearchList.tsx b/src/components/contentDisplay/searchList/PostsSearchList.tsx
diff --git a/src/components/contentDisplay/searchList/SearchList.tsx b/src/components/contentDisplay/searchList/SearchList.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>
   );
 }
diff --git a/src/components/dataDisplay/postEmbed/BlockedEmbed.tsx b/src/components/dataDisplay/postEmbed/BlockedEmbed.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>
       )}
     </>

diff --git a/src/components/dataDisplay/postEmbed/NotFoundEmbed.tsx b/src/components/dataDisplay/postEmbed/NotFoundEmbed.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>
       )}
     </>

diff --git a/src/components/dataDisplay/postEmbed/RecordEmbed.tsx b/src/components/dataDisplay/postEmbed/RecordEmbed.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

diff --git a/src/containers/FeedContainer.tsx b/src/containers/FeedContainer.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" />

diff --git a/src/containers/search/PostSearchContainer.tsx b/src/containers/search/PostSearchContainer.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>
+  );
+}
diff --git a/...entDisplay/searchList/UsersSearchList.tsx → ...containers/search/UserSearchContainer.tsx b/...entDisplay/searchList/UsersSearchList.tsx → ...containers/search/UserSearchContainer.tsx
@@ -3,21 +3,21 @@
 import { searchProfiles } from "@/lib/api/bsky/actor";
 import useAgent from "@/lib/hooks/bsky/useAgent";
 import { useInfiniteQuery } from "@tanstack/react-query";
-import ProfileCard from "../profileCard/ProfileCard";
 import { Fragment, useEffect } from "react";
-import ProfileCardSkeleton from "../profileCard/ProfileCardSkeleton";
 import { useInView } from "react-intersection-observer";
 import { Icon } from "@iconify/react/dist/iconify.js";
 import FeedAlert from "@/components/feedback/feedAlert/FeedAlert";
+import ProfileCard from "@/components/contentDisplay/profileCard/ProfileCard";
+import ProfileCardSkeleton from "@/components/contentDisplay/profileCard/ProfileCardSkeleton";
 
 interface Props {
   query: string;
 }
 
-export default function UsersSearchList(props: Props) {
+export default function UserSearchContainer(props: Props) {
   const { query } = props;
   const agent = useAgent();
-  const { ref, inView } = useInView();
+  const { ref: observerRef, inView } = useInView();
 
   const {
     status,
@@ -35,6 +35,11 @@ export default function UsersSearchList(props: Props) {
     getNextPageParam: (lastPage) => lastPage?.cursor,
   });
 
+  const isEmpty =
+    !isFetching &&
+    !isFetchingNextPage &&
+    profiles?.pages[0]?.actors?.length === 0;
+
   useEffect(() => {
     if (inView) {
       fetchNextPage();
@@ -59,6 +64,11 @@ export default function UsersSearchList(props: Props) {
               </Fragment>
             ))}
       </section>
+      {isEmpty && (
+        <div className="mx-3 md:mx-0 border-t">
+          <FeedAlert variant="empty" message="No users found" />
+        </div>
+      )}
       {isFetching && !isFetchingNextPage && (
         <ProfileCardSkeleton rounded={false} />
       )}
@@ -67,15 +77,7 @@ export default function UsersSearchList(props: Props) {
           <Icon icon="eos-icons:loading" className="text-xl" />
         </section>
       )}
-      <div ref={ref} />
-      {profiles?.pages[0]?.actors.length === 0 && (
-        <div className="mx-3 md:mx-0 border-t">
-          <FeedAlert
-            variant="empty"
-            message="No users found"            
-          />
-        </div>
-      )}
+      <div ref={observerRef} />
     </section>
   );
 }
diff --git a/src/containers/thread/PostThreadContainer.tsx b/src/containers/thread/PostThreadContainer.tsx
@@ -30,6 +30,7 @@ export default function PostThreadContainer(props: Props) {
 
   const {
     data: thread,
+    error,
     isError,
     isFetching,
     isLoading,
@@ -73,7 +74,7 @@ export default function PostThreadContainer(props: Props) {
           {isError && (
             <FeedAlert
               variant="badResponse"
-              message="Something went wrong"
+              message={error.message}
               standalone={true}
             />
           )}
@@ -98,15 +99,15 @@ export default function PostThreadContainer(props: Props) {
       {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={parent.post.uri}>
+            <div key={i}>
               {AppBskyFeedDefs.isBlockedPost(parent) && (
-                <BlockedEmbed depth={0} />
+                <BlockedEmbed depth={0} isReply={i < parentChain.length - 1} />
               )}
               {AppBskyFeedDefs.isNotFoundPost(parent) && (
-                <NotFoundEmbed depth={0} />
+                <NotFoundEmbed depth={0} isReply={i < parentChain.length - 1} />
               )}
               {AppBskyFeedDefs.isBlockedAuthor(parent) && (
-                <BlockedEmbed depth={0} />
+                <BlockedEmbed depth={0} isReply={i < parentChain.length - 1} />
               )}
 
               {AppBskyFeedDefs.isThreadViewPost(parent) && contentFilter && (