@@ -16,21 +26,23 @@ function Skeleton() {
);
}
-export default function FeedListSkeleton() {
+export default function FeedListSkeleton(props: Props) {
+ const { rounded = false } = props;
+
return (
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
);
}
diff --git a/src/components/contentDisplay/searchList/SearchList.tsx b/src/components/contentDisplay/searchList/SearchList.tsx
index 90d59cec..ec1fc4c2 100644
--- a/src/components/contentDisplay/searchList/SearchList.tsx
+++ b/src/components/contentDisplay/searchList/SearchList.tsx
@@ -6,6 +6,7 @@ import UserSearchContainer from "@/containers/search/UserSearchContainer";
import { useSession } from "next-auth/react";
import Tabs from "@/components/navigational/tabs/Tabs";
import TabItem from "@/components/navigational/tabs/TabItem";
+import FeedSearchContainer from "@/containers/search/FeedSearchContainer";
interface Props {
query: string;
@@ -13,12 +14,12 @@ interface Props {
export default function SearchList(props: Props) {
const { query } = props;
- const [currentTab, setCurrentTab] = useState<"top" | "latest" | "users">(
- "top",
- );
+ const [currentTab, setCurrentTab] = useState<
+ "top" | "latest" | "users" | "feeds"
+ >("top");
const { data: session } = useSession();
- const handleTabChange = (tab: "top" | "latest" | "users") => {
+ const handleTabChange = (tab: "top" | "latest" | "users" | "feeds") => {
setCurrentTab(tab);
};
@@ -51,6 +52,12 @@ export default function SearchList(props: Props) {
label="Users"
isActive={currentTab === "users"}
/>
+
handleTabChange("feeds")}
+ label="Feeds"
+ isActive={currentTab === "feeds"}
+ />
{currentTab === "latest" && (
@@ -60,6 +67,7 @@ export default function SearchList(props: Props) {
)}
{currentTab === "users" && }
+ {currentTab === "feeds" && }
);
}
diff --git a/src/containers/search/FeedSearchContainer.tsx b/src/containers/search/FeedSearchContainer.tsx
new file mode 100644
index 00000000..b54d45aa
--- /dev/null
+++ b/src/containers/search/FeedSearchContainer.tsx
@@ -0,0 +1,41 @@
+"use client";
+
+import { getPopularFeeds } from "@/lib/api/bsky/feed";
+import { useQuery } from "@tanstack/react-query";
+import FeedAlert from "@/components/feedback/feedAlert/FeedAlert";
+import { getAgentFromClient } from "@/lib/api/bsky/agent";
+import FeedListSkeleton from "@/components/contentDisplay/feedList/FeedListSkeleton";
+import FeedItem from "@/components/contentDisplay/feedItem/FeedItem";
+
+interface Props {
+ query: string;
+}
+
+export default function FeedSearchContainer(props: Props) {
+ const { query } = props;
+ const { data: feeds, isFetching } = useQuery({
+ queryKey: ["searchFeeds", query],
+ queryFn: async () => {
+ const agent = await getAgentFromClient();
+ return getPopularFeeds(query, agent);
+ },
+ });
+
+ const isEmpty = !isFetching && feeds?.length === 0;
+
+ return (
+
+ {feeds &&
+ feeds.map((feed) => (
+
+ ))}
+
+ {isEmpty && (
+
+
+
+ )}
+ {isFetching && }
+
+ );
+}
diff --git a/src/lib/api/bsky/feed/index.ts b/src/lib/api/bsky/feed/index.ts
index 33af1cb1..4d470340 100644
--- a/src/lib/api/bsky/feed/index.ts
+++ b/src/lib/api/bsky/feed/index.ts
@@ -2,8 +2,8 @@ import { type Agent, AppBskyActorDefs } from "@atproto/api";
import { getAgentFromServer } from "../agent";
import { SavedFeed } from "../../../../../types/feed";
-export const getPopularFeeds = async (search?: string) => {
- const agent = await getAgentFromServer();
+export const getPopularFeeds = async (search?: string, agent?: Agent) => {
+ if (!agent) agent = await getAgentFromServer();
const popularFeeds = await agent.app.bsky.unspecced.getPopularFeedGenerators({
query: search,
});