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
23
import { Button } from "./ui/button"
24
24
import { Link } from "@tanstack/react-router"
25
25
import { useAuth } from "@/state/auth"
26
26
-
import { useXrpc } from "@/hooks/use-xrpc"
27
27
-
import { useQuery } from "@tanstack/react-query"
28
28
-
import { At } from "@atcute/client/lexicons"
29
26
import { Skeleton } from "./ui/skeleton"
30
27
import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar"
28
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
35
-
const rpc = useXrpc(agent);
36
33
37
37
-
const userQuery = useQuery({
38
38
-
queryKey: ['self'],
39
39
-
queryFn: async () => rpc
40
40
-
.get('com.atproto.repo.getRecord', {
41
41
-
params: {
42
42
-
repo: agent?.sub as At.DID,
43
43
-
collection: 'app.bsky.actor.profile',
44
44
-
rkey: 'self',
45
45
-
},
46
46
-
}),
47
47
-
enabled: isLoggedIn,
48
48
-
});
34
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
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
94
-
<AvatarFallback className="rounded-lg">{userQuery.data.data.value.handle}</AvatarFallback>
79
79
+
<AvatarImage src={`https://cdn.bsky.app/img/avatar_thumbnail/plain/${agent.sub}/${userQuery.data.avatar?.ref.$link}@jpeg`} alt={userQuery.data.displayName} />
80
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
97
-
<span className="truncate font-semibold">{userQuery.data.data.value.displayName ?? `@${userQuery.data.data.value.handle}`}</span>
83
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
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
112
-
<AvatarFallback className="rounded-lg">{userQuery.data.data.value.handle}</AvatarFallback>
97
97
+
<AvatarImage src={`https://cdn.bsky.app/img/avatar_thumbnail/plain/${agent.sub}/${userQuery.data.avatar?.ref.$link}@jpeg`} alt={userQuery.data.displayName} />
98
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
14
-
const { rpc } = useXrpc();
14
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
46
-
const { rpc } = useXrpc();
46
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
1
-
import { AppBskyActorGetProfile } from "@atcute/client/lexicons";
1
1
+
import { useXrpc } from "@/hooks/use-xrpc";
2
2
+
import { useAuth } from "@/state/auth";
3
3
+
import { AppBskyActorProfile } from "@atcute/client/lexicons";
4
4
+
import { At } from "@atcute/client/lexicons";
2
5
import { useQuery } from "@tanstack/react-query";
3
3
-
import axios, { AxiosError } from "axios";
4
6
5
7
export const useUserQuery = () => {
8
8
+
const { isLoggedIn, agent } = useAuth();
9
9
+
const rpc = useXrpc(agent);
10
10
+
6
11
return useQuery({
7
12
queryKey: ['self'],
8
13
queryFn: async () => {
9
9
-
try {
10
10
-
const res = await axios.get<AppBskyActorGetProfile.Output>('/oauth/me');
11
11
-
return res.data;
12
12
-
} catch(err) {
13
13
-
if (err instanceof AxiosError && err.status == 401) {
14
14
-
// If we get a 401, we're just unauthenticated.
15
15
-
return null;
16
16
-
}
17
17
-
throw err;
18
18
-
}
14
14
+
const res = await rpc.get('com.atproto.repo.getRecord', {
15
15
+
params: {
16
16
+
repo: agent?.sub as At.DID,
17
17
+
collection: 'app.bsky.actor.profile',
18
18
+
rkey: 'self',
19
19
+
},
20
20
+
});
21
21
+
22
22
+
return res.data.value as AppBskyActorProfile.Record;
19
23
},
24
24
+
enabled: isLoggedIn,
20
25
});
21
26
}
+2
-2
fly.toml
···
39
39
port = 443
40
40
41
41
[[statics]]
42
42
-
guest_path = "/usr/src/app/apps/web/dist/assets"
43
43
-
url_prefix = "/assets"
42
42
+
guest_path = "/usr/src/app/apps/web/dist"
43
43
+
url_prefix = "/"