Merge branch 'preview'

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,

src/containers/lists/ListMembersContainer.tsx

@@ -8,14 +8,15 @@ import LoadingSpinner from "@/components/status/loadingSpinner/LoadingSpinner";
 import { getListMembers } from "@/lib/api/bsky/list";
 import FeedAlert from "@/components/feedback/feedAlert/FeedAlert";
 import InfiniteScroll from "react-infinite-scroll-component";
-import { getAgentFromClient } from "@/lib/api/bsky/agent";
+import { useAgent } from "@/app/providers/agent";
 
 interface Props {
   list: string;
 }
 
 export default function ListMembersContainer(props: Props) {
   const { list } = props;
+  const agent = useAgent();
 
   const {
     status,
@@ -29,7 +30,6 @@ export default function ListMembersContainer(props: Props) {
   } = useInfiniteQuery({
     queryKey: ["list members", list],
     queryFn: async ({ pageParam }) => {
-      const agent = await getAgentFromClient();
       return getListMembers(agent, list, pageParam);
     },
     initialPageParam: "",

src/containers/lists/ListsContainer.tsx

@@ -1,11 +1,11 @@
 "use client";
 
+import { useAgent } from "@/app/providers/agent";
 import ListItem from "@/components/contentDisplay/listItem/ListItem";
 import ListsSkeleton from "@/components/contentDisplay/lists/ListsSkeleton";
 import FeedAlert from "@/components/feedback/feedAlert/FeedAlert";
 import LoadingSpinner from "@/components/status/loadingSpinner/LoadingSpinner";
 import { getProfile } from "@/lib/api/bsky/actor";
-import { getAgentFromClient } from "@/lib/api/bsky/agent";
 import { getLists } from "@/lib/api/bsky/list";
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { Fragment } from "react";
@@ -17,6 +17,7 @@ interface Props {
 
 export default function ListsContainer(props: Props) {
   const { handle } = props;
+  const agent = useAgent();
   const {
     status,
     data: lists,
@@ -29,7 +30,6 @@ export default function ListsContainer(props: Props) {
   } = useInfiniteQuery({
     queryKey: ["user lists", handle],
     queryFn: async ({ pageParam }) => {
-      const agent = await getAgentFromClient();
       const profile = await getProfile(handle, agent);
       if (!profile) throw new Error("Could not get user id to show lists");
       return getLists(profile.did, pageParam, agent);

src/containers/posts/UserPostsContainer.tsx

@@ -11,7 +11,7 @@ import usePreferences from "@/lib/hooks/bsky/actor/usePreferences";
 import ComposeButton from "@/components/actions/composeButton/ComposeButton";
 import LoadingSpinner from "@/components/status/loadingSpinner/LoadingSpinner";
 import InfiniteScroll from "react-infinite-scroll-component";
-import { getAgentFromClient } from "@/lib/api/bsky/agent";
+import { useAgent } from "@/app/providers/agent";
 
 interface Props {
   mode: UserPostMode;
@@ -20,6 +20,7 @@ interface Props {
 
 export default function UserPostsConatiner(props: Props) {
   const { mode, handle } = props;
+  const agent = useAgent();
   const {
     data: profile,
     isLoading,
@@ -28,7 +29,6 @@ export default function UserPostsConatiner(props: Props) {
   } = useQuery({
     queryKey: ["profile", handle],
     queryFn: async () => {
-      const agent = await getAgentFromClient();
       return getProfile(handle, agent);
     },
   });