The recipes.blue monorepo recipes.blue
recipes appview atproto

fix: resolve build fails

+28 -37
+7 -21
apps/web/src/components/nav-user.tsx
··· 23 23 import { Button } from "./ui/button" 24 24 import { Link } from "@tanstack/react-router" 25 25 import { useAuth } from "@/state/auth" 26 - import { useXrpc } from "@/hooks/use-xrpc" 27 - import { useQuery } from "@tanstack/react-query" 28 - import { At } from "@atcute/client/lexicons" 29 26 import { Skeleton } from "./ui/skeleton" 30 27 import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar" 28 + import { useUserQuery } from "@/queries/self" 31 29 32 30 export function NavUser() { 33 31 const { isMobile } = useSidebar() 34 32 const { isLoggedIn, agent } = useAuth(); 35 - const rpc = useXrpc(agent); 36 33 37 - const userQuery = useQuery({ 38 - queryKey: ['self'], 39 - queryFn: async () => rpc 40 - .get('com.atproto.repo.getRecord', { 41 - params: { 42 - repo: agent?.sub as At.DID, 43 - collection: 'app.bsky.actor.profile', 44 - rkey: 'self', 45 - }, 46 - }), 47 - enabled: isLoggedIn, 48 - }); 34 + const userQuery = useUserQuery(); 49 35 50 36 if (!isLoggedIn || !agent || userQuery.isError || !userQuery.data) { 51 37 return ( ··· 90 76 className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground" 91 77 > 92 78 <Avatar className="h-8 w-8 rounded-lg"> 93 - <AvatarImage src={`https://cdn.bsky.app/img/avatar_thumbnail/plain/${agent.sub}/${userQuery.data.data.value.avatar.ref.$link}@jpeg`} alt={userQuery.data.data.value.displayName ?? `@${userQuery.data.data.value.handle}`} /> 94 - <AvatarFallback className="rounded-lg">{userQuery.data.data.value.handle}</AvatarFallback> 79 + <AvatarImage src={`https://cdn.bsky.app/img/avatar_thumbnail/plain/${agent.sub}/${userQuery.data.avatar?.ref.$link}@jpeg`} alt={userQuery.data.displayName} /> 80 + <AvatarFallback className="rounded-lg">{userQuery.data.displayName}</AvatarFallback> 95 81 </Avatar> 96 82 <div className="grid flex-1 text-left text-sm leading-tight"> 97 - <span className="truncate font-semibold">{userQuery.data.data.value.displayName ?? `@${userQuery.data.data.value.handle}`}</span> 83 + <span className="truncate font-semibold">{userQuery.data.displayName}</span> 98 84 </div> 99 85 <ChevronsUpDown className="ml-auto size-4" /> 100 86 </SidebarMenuButton> ··· 108 94 <DropdownMenuLabel className="p-0 font-normal"> 109 95 <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm"> 110 96 <Avatar className="h-8 w-8 rounded-lg"> 111 - <AvatarImage src={`https://cdn.bsky.app/img/avatar_thumbnail/plain/${agent.sub}/${userQuery.data.data.value.avatar.ref.$link}@jpeg`} alt={userQuery.data.data.value.displayName ?? `@${userQuery.data.data.value.handle}`} /> 112 - <AvatarFallback className="rounded-lg">{userQuery.data.data.value.handle}</AvatarFallback> 97 + <AvatarImage src={`https://cdn.bsky.app/img/avatar_thumbnail/plain/${agent.sub}/${userQuery.data.avatar?.ref.$link}@jpeg`} alt={userQuery.data.displayName} /> 98 + <AvatarFallback className="rounded-lg">{userQuery.data.displayName}</AvatarFallback> 113 99 </Avatar> 114 100 </div> 115 101 </DropdownMenuLabel>
+2 -2
apps/web/src/queries/recipe.ts
··· 11 11 export const RQKEY = (cursor: string, did: string, rkey: string) => [RQKEY_ROOT, cursor, did, rkey]; 12 12 13 13 export const useRecipesQuery = (cursor: string, did?: string) => { 14 - const { rpc } = useXrpc(); 14 + const rpc = useXrpc(); 15 15 return useQuery({ 16 16 queryKey: RQKEY(cursor, did ?? '', ''), 17 17 queryFn: async () => { ··· 43 43 }; 44 44 45 45 export const useRecipeQuery = (did: string, rkey: string) => { 46 - const { rpc } = useXrpc(); 46 + const rpc = useXrpc(); 47 47 return useQuery(recipeQueryOptions(rpc, did, rkey)); 48 48 }; 49 49
+17 -12
apps/web/src/queries/self.ts
··· 1 - import { AppBskyActorGetProfile } from "@atcute/client/lexicons"; 1 + import { useXrpc } from "@/hooks/use-xrpc"; 2 + import { useAuth } from "@/state/auth"; 3 + import { AppBskyActorProfile } from "@atcute/client/lexicons"; 4 + import { At } from "@atcute/client/lexicons"; 2 5 import { useQuery } from "@tanstack/react-query"; 3 - import axios, { AxiosError } from "axios"; 4 6 5 7 export const useUserQuery = () => { 8 + const { isLoggedIn, agent } = useAuth(); 9 + const rpc = useXrpc(agent); 10 + 6 11 return useQuery({ 7 12 queryKey: ['self'], 8 13 queryFn: async () => { 9 - try { 10 - const res = await axios.get<AppBskyActorGetProfile.Output>('/oauth/me'); 11 - return res.data; 12 - } catch(err) { 13 - if (err instanceof AxiosError && err.status == 401) { 14 - // If we get a 401, we're just unauthenticated. 15 - return null; 16 - } 17 - throw err; 18 - } 14 + const res = await rpc.get('com.atproto.repo.getRecord', { 15 + params: { 16 + repo: agent?.sub as At.DID, 17 + collection: 'app.bsky.actor.profile', 18 + rkey: 'self', 19 + }, 20 + }); 21 + 22 + return res.data.value as AppBskyActorProfile.Record; 19 23 }, 24 + enabled: isLoggedIn, 20 25 }); 21 26 }
+2 -2
fly.toml
··· 39 39 port = 443 40 40 41 41 [[statics]] 42 - guest_path = "/usr/src/app/apps/web/dist/assets" 43 - url_prefix = "/assets" 42 + guest_path = "/usr/src/app/apps/web/dist" 43 + url_prefix = "/"