tangled
alpha
login
or
join now
roost.moe
/
recipes.blue
2
fork
atom
The recipes.blue monorepo
recipes.blue
recipes
appview
atproto
2
fork
atom
overview
issues
1
pulls
pipelines
fix: resolve build fails
Hayden Young
1 year ago
5ccfb08b
ae6a08b6
+28
-37
4 changed files
expand all
collapse all
unified
split
apps
web
src
components
nav-user.tsx
queries
recipe.ts
self.ts
fly.toml
+7
-21
apps/web/src/components/nav-user.tsx
···
23
import { Button } from "./ui/button"
24
import { Link } from "@tanstack/react-router"
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
import { Skeleton } from "./ui/skeleton"
30
import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar"
0
31
32
export function NavUser() {
33
const { isMobile } = useSidebar()
34
const { isLoggedIn, agent } = useAuth();
35
-
const rpc = useXrpc(agent);
36
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
-
});
49
50
if (!isLoggedIn || !agent || userQuery.isError || !userQuery.data) {
51
return (
···
90
className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
91
>
92
<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>
95
</Avatar>
96
<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>
98
</div>
99
<ChevronsUpDown className="ml-auto size-4" />
100
</SidebarMenuButton>
···
108
<DropdownMenuLabel className="p-0 font-normal">
109
<div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
110
<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>
113
</Avatar>
114
</div>
115
</DropdownMenuLabel>
···
23
import { Button } from "./ui/button"
24
import { Link } from "@tanstack/react-router"
25
import { useAuth } from "@/state/auth"
0
0
0
26
import { Skeleton } from "./ui/skeleton"
27
import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar"
28
+
import { useUserQuery } from "@/queries/self"
29
30
export function NavUser() {
31
const { isMobile } = useSidebar()
32
const { isLoggedIn, agent } = useAuth();
0
33
34
+
const userQuery = useUserQuery();
0
0
0
0
0
0
0
0
0
0
0
35
36
if (!isLoggedIn || !agent || userQuery.isError || !userQuery.data) {
37
return (
···
76
className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
77
>
78
<Avatar className="h-8 w-8 rounded-lg">
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>
81
</Avatar>
82
<div className="grid flex-1 text-left text-sm leading-tight">
83
+
<span className="truncate font-semibold">{userQuery.data.displayName}</span>
84
</div>
85
<ChevronsUpDown className="ml-auto size-4" />
86
</SidebarMenuButton>
···
94
<DropdownMenuLabel className="p-0 font-normal">
95
<div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
96
<Avatar className="h-8 w-8 rounded-lg">
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>
99
</Avatar>
100
</div>
101
</DropdownMenuLabel>
+2
-2
apps/web/src/queries/recipe.ts
···
11
export const RQKEY = (cursor: string, did: string, rkey: string) => [RQKEY_ROOT, cursor, did, rkey];
12
13
export const useRecipesQuery = (cursor: string, did?: string) => {
14
-
const { rpc } = useXrpc();
15
return useQuery({
16
queryKey: RQKEY(cursor, did ?? '', ''),
17
queryFn: async () => {
···
43
};
44
45
export const useRecipeQuery = (did: string, rkey: string) => {
46
-
const { rpc } = useXrpc();
47
return useQuery(recipeQueryOptions(rpc, did, rkey));
48
};
49
···
11
export const RQKEY = (cursor: string, did: string, rkey: string) => [RQKEY_ROOT, cursor, did, rkey];
12
13
export const useRecipesQuery = (cursor: string, did?: string) => {
14
+
const rpc = useXrpc();
15
return useQuery({
16
queryKey: RQKEY(cursor, did ?? '', ''),
17
queryFn: async () => {
···
43
};
44
45
export const useRecipeQuery = (did: string, rkey: string) => {
46
+
const rpc = useXrpc();
47
return useQuery(recipeQueryOptions(rpc, did, rkey));
48
};
49
+17
-12
apps/web/src/queries/self.ts
···
1
-
import { AppBskyActorGetProfile } from "@atcute/client/lexicons";
0
0
0
2
import { useQuery } from "@tanstack/react-query";
3
-
import axios, { AxiosError } from "axios";
4
5
export const useUserQuery = () => {
0
0
0
6
return useQuery({
7
queryKey: ['self'],
8
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
-
}
19
},
0
20
});
21
}
···
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";
5
import { useQuery } from "@tanstack/react-query";
0
6
7
export const useUserQuery = () => {
8
+
const { isLoggedIn, agent } = useAuth();
9
+
const rpc = useXrpc(agent);
10
+
11
return useQuery({
12
queryKey: ['self'],
13
queryFn: async () => {
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;
0
23
},
24
+
enabled: isLoggedIn,
25
});
26
}
+2
-2
fly.toml
···
39
port = 443
40
41
[[statics]]
42
-
guest_path = "/usr/src/app/apps/web/dist/assets"
43
-
url_prefix = "/assets"
···
39
port = 443
40
41
[[statics]]
42
+
guest_path = "/usr/src/app/apps/web/dist"
43
+
url_prefix = "/"