Merge branch 'preview'

Author: pdelfan

src/app/dashboard/layout.tsx

@@ -6,6 +6,7 @@ import TopBar from "@/components/navigational/topBar/TopBar";
 import Composer from "@/components/actions/composer/Composer";
 import { getProfile } from "@/lib/api/bsky/actor";
 import { getSessionFromServer } from "@/lib/api/auth/session";
+import { AgentProvider } from "../providers/agent";
 
 export const metadata: Metadata = {
   title: { template: "%s — Ouranos", default: "Ouranos" },
@@ -21,15 +22,17 @@ export default async function DashboardLayout({
   const profile = await getProfile(session?.user.bskySession.handle);
 
   return (
-    <main className="bg-skin-base flex justify-center gap-6 pb-20 md:mt-6 lg:gap-16 animate-fade">
-      {profile && <Composer author={profile} />}
-      <SidePanel />
-      <section className="w-full md:max-w-xl">
-        {profile && <TopBar profile={profile} />}
-        {children}
-      </section>
-      {profile && <Aside avatar={profile?.avatar} handle={profile?.handle} />}
-      <AppBar />
-    </main>
+    <AgentProvider session={session}>
+      <main className="bg-skin-base flex justify-center gap-6 pb-20 md:mt-6 lg:gap-16 animate-fade">
+        {profile && <Composer author={profile} />}
+        <SidePanel />
+        <section className="w-full md:max-w-xl">
+          {profile && <TopBar profile={profile} />}
+          {children}
+        </section>
+        {profile && <Aside avatar={profile?.avatar} handle={profile?.handle} />}
+        <AppBar />
+      </main>
+    </AgentProvider>
   );
 }

src/app/providers/agent.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { ReactNode, createContext, useContext, useEffect, useRef } from "react";
+import { createAgent } from "@/lib/api/bsky/agent";
+import AtpAgent from "@atproto/api";
+import type { Session } from "next-auth";
+import { isSessionExpired } from "@/lib/utils/session";
+import { useSession } from "next-auth/react";
+
+const AgentContext = createContext<AtpAgent | null>(null);
+
+interface AgentProviderProps {
+  children: ReactNode;
+  session: Session | null;
+}
+
+export const AgentProvider = (props: AgentProviderProps) => {
+  const { children, session } = props;
+
+  if (!session) return;
+  const agent = createAgent(session.user.service);
+  agent.sessionManager.session = session.user.bskySession;
+
+  return (
+    <AgentContext.Provider value={agent}>{children}</AgentContext.Provider>
+  );
+};
+
+export const useAgent = () => {
+  const { data: session, status } = useSession();
+  const agent = useContext(AgentContext);
+
+  useEffect(() => {
+    if (!session || !agent) return;
+
+    const getSession = async () => {
+      if (isSessionExpired(session.user.bskySession)) {
+        const result = await agent.resumeSession(session.user.bskySession);
+
+        if (!result.success) {
+          throw new Error("Could not resume session");
+        }
+      }
+
+      agent.sessionManager.session = session.user.bskySession;
+    };
+
+    getSession();
+  }, [agent, session]);
+
+  if (status !== "authenticated" || !agent || !session?.user) {
+    throw new Error("AgentProvider must be used inside SessionProvider");
+  }
+
+  return agent;
+};

src/components/contentDisplay/feedHeader/FeedHeader.tsx

@@ -20,14 +20,15 @@ import { BiSolidBookmarkAlt } from "react-icons/bi";
 import { BiPlus } from "react-icons/bi";
 import { BiSolidHeart } from "react-icons/bi";
 import Link from "next/link";
-import { getAgentFromClient } from "@/lib/api/bsky/agent";
+import { useAgent } from "@/app/providers/agent";
 
 interface Props {
   feed: string;
 }
 
 export default function FeedHeader(props: Props) {
   const { feed } = props;
+  const agent = useAgent();
   const router = useRouter();
   const [isSaved, setIsSaved] = useState<boolean | null>(null);
   const [isPinned, setIsPinned] = useState<boolean | null>(null);
@@ -55,7 +56,6 @@ export default function FeedHeader(props: Props) {
   const toggleSave = async () => {
     setIsSaved((prev) => !prev);
     try {
-      const agent = await getAgentFromClient();
       const response = await toggleSaveFeed(agent, feed);
       if (!response.success) {
         setIsSaved((prev) => !prev);
@@ -71,7 +71,6 @@ export default function FeedHeader(props: Props) {
   const togglePin = async () => {
     setIsPinned((prev) => !prev);
     try {
-      const agent = await getAgentFromClient();
       const response = await togglePinFeed(agent, feed);
       if (!response.success) {
         setIsPinned((prev) => !prev);
@@ -85,7 +84,6 @@ export default function FeedHeader(props: Props) {
   };
 
   const toggleLike = async () => {
-    const agent = await getAgentFromClient();
     setIsLiked((prev) => !prev);
     if (!likeUri && feedInfo) {
       try {

src/components/contentDisplay/feedItem/FeedItem.tsx

@@ -11,7 +11,7 @@ import { toggleSaveFeed } from "@/lib/api/bsky/feed";
 import Link from "next/link";
 import { useQueryClient } from "@tanstack/react-query";
 import { savedFeedsQueryKey } from "@/containers/settings/myFeedsContainer/MyFeedsContainer";
-import { getAgentFromClient } from "@/lib/api/bsky/agent";
+import { useAgent } from "@/app/providers/agent";
 
 interface Props {
   feedItem: GeneratorView;
@@ -21,6 +21,7 @@ interface Props {
 
 export default function FeedItem(props: Props) {
   const { feedItem, saved, rounded = true } = props;
+  const agent = useAgent();
   const { avatar, displayName, description, likeCount, creator } = feedItem;
   const [isSaved, setIsSaved] = useState(saved);
   const router = useRouter();
@@ -29,7 +30,6 @@ export default function FeedItem(props: Props) {
   const handleSave = async () => {
     setIsSaved((prev) => !prev);
     try {
-      const agent = await getAgentFromClient();
       const response = await toggleSaveFeed(agent, feedItem.uri);
       if (!response.success) {
         setIsSaved((prev) => !prev);
@@ -46,7 +46,7 @@ export default function FeedItem(props: Props) {
     <Link
       href={{
         pathname: `/dashboard/feeds/${encodeURIComponent(
-          feedItem.uri.split(":")[3].split("/")[0]
+          feedItem.uri.split(":")[3].split("/")[0],
         )}`,
         query: { uri: feedItem.uri },
       }}

src/components/contentDisplay/lists/Lists.tsx

@@ -9,10 +9,11 @@ import FeedAlert from "@/components/feedback/feedAlert/FeedAlert";
 import LoadingSpinner from "@/components/status/loadingSpinner/LoadingSpinner";
 import ListsSkeleton from "./ListsSkeleton";
 import InfiniteScroll from "react-infinite-scroll-component";
-import { getAgentFromClient } from "@/lib/api/bsky/agent";
+import { useAgent } from "@/app/providers/agent";
 
 export default function Lists() {
   const { data: session } = useSession();
+  const agent = useAgent();
 
   const {
     status,
@@ -27,7 +28,6 @@ export default function Lists() {
     queryKey: ["lists"],
     queryFn: async ({ pageParam }) => {
       if (!session?.user.id) return;
-      const agent = await getAgentFromClient();
       return getLists(session.user.id, pageParam, agent);
     },
     initialPageParam: "",

src/components/contentDisplay/notification/NotificationContent.tsx

@@ -11,7 +11,7 @@ import { useEffect, useState } from "react";
 import PostHider from "@/components/dataDisplay/postHider/PostHider";
 import FeedAlert from "@/components/feedback/feedAlert/FeedAlert";
 import NotificationContentSkeleton from "./NotificationContentSkeleton";
-import { getAgentFromClient } from "@/lib/api/bsky/agent";
+import { useAgent } from "@/app/providers/agent";
 
 interface Props {
   uri: string;
@@ -20,12 +20,12 @@ interface Props {
 
 export default function NotificationContnet(props: Props) {
   const { uri, filter } = props;
+  const agent = useAgent();
   const router = useRouter();
 
   const { status, data, error, isLoading, isFetching } = useQuery({
     queryKey: ["notificationContent", uri],
     queryFn: async () => {
-      const agent = await getAgentFromClient();
       return getPost(agent, uri);
     },
   });

src/components/contentDisplay/notification/NotificationPost.tsx

@@ -6,7 +6,7 @@ import { AppBskyFeedDefs } from "@atproto/api";
 import { ContentFilterResult } from "../../../../types/feed";
 import { useQuery } from "@tanstack/react-query";
 import NotificationPostSkeleton from "./NotificationPostSkeleton";
-import { getAgentFromClient } from "@/lib/api/bsky/agent";
+import { useAgent } from "@/app/providers/agent";
 
 interface Props {
   uri: string;
@@ -15,6 +15,7 @@ interface Props {
 
 export default function NotificationPost(props: Props) {
   const { uri, filter } = props;
+  const agent = useAgent();
 
   const {
     status,
@@ -25,7 +26,6 @@ export default function NotificationPost(props: Props) {
   } = useQuery({
     queryKey: ["notificationPost", uri],
     queryFn: async () => {
-      const agent = await getAgentFromClient();
       return getPost(agent, uri);
     },
   });

src/components/navigational/appBar/AppBar.tsx

@@ -9,18 +9,19 @@ import { PiMagnifyingGlassBold, PiMagnifyingGlassFill } from "react-icons/pi";
 import { FaRegBell } from "react-icons/fa6";
 import { FaBell } from "react-icons/fa";
 import { HiClipboardList, HiOutlineClipboardList } from "react-icons/hi";
-import { getAgentFromClient } from "@/lib/api/bsky/agent";
+import { useAgent } from "@/app/providers/agent";
 
 export default function AppBar() {
   const pathname = usePathname();
+  const agent = useAgent();
+
   const {
     data: notificationsCount,
     error,
     isFetching,
   } = useQuery({
     queryKey: ["notificationsCount"],
     queryFn: async () => {
-      const agent = await getAgentFromClient();
       return getUnreadNotificationsCount(agent);
     },
     refetchInterval: 10000,

src/components/navigational/feedTabs/FeedTabs.tsx

@@ -8,9 +8,10 @@ import FeedTabsSkeleton from "./FeedTabsSkeleton";
 import React from "react";
 import { useQuery } from "@tanstack/react-query";
 import { useScrollContext } from "@/app/providers/scroll";
-import { getAgentFromClient } from "@/lib/api/bsky/agent";
+import { useAgent } from "@/app/providers/agent";
 
 export default function FeedTabs() {
+  const agent = useAgent();
   const pathname = usePathname();
   const searchParams = useSearchParams();
   const uri = searchParams.get("uri");
@@ -26,7 +27,6 @@ export default function FeedTabs() {
   } = useQuery({
     queryKey: ["savedFeeds"],
     queryFn: async () => {
-      const agent = await getAgentFromClient();
       return getSavedFeeds(agent);
     },
   });

src/components/navigational/navbar/Navbar.tsx

@@ -16,18 +16,19 @@ import { HiClipboardList, HiOutlineClipboardList } from "react-icons/hi";
 import { FaBell, FaRegBell } from "react-icons/fa6";
 import { getUnreadNotificationsCount } from "@/lib/api/bsky/notification";
 import { useQuery } from "@tanstack/react-query";
-import { getAgentFromClient } from "@/lib/api/bsky/agent";
+import { useAgent } from "@/app/providers/agent";
 
 export default function Navbar() {
+  const agent = useAgent();
   const pathname = usePathname();
+
   const {
     data: notificationsCount,
     error,
     isFetching,
   } = useQuery({
     queryKey: ["notificationsCount"],
     queryFn: async () => {
-      const agent = await getAgentFromClient();
       return getUnreadNotificationsCount(agent);
     },
     refetchInterval: 10000,