A decentralized music tracking and discovery platform built on AT Protocol 🎵
rocksky.app
spotify
atproto
lastfm
musicbrainz
scrobbling
listenbrainz
[web] update profile routes
+260
-28
+12
-3
apps/web/src/pages/profile/Profile.tsx
+12
-3
apps/web/src/pages/profile/Profile.tsx
···
6
6
import { HeadingMedium, LabelLarge } from "baseui/typography";
7
7
import dayjs from "dayjs";
8
8
import { useAtom, useSetAtom } from "jotai";
9
+
import _ from "lodash";
9
10
import { Key, useEffect, useState } from "react";
10
11
import { profilesAtom } from "../../atoms/profiles";
11
12
import { userAtom } from "../../atoms/user";
···
24
25
margin-bottom: 50px;
25
26
`;
26
27
27
-
function Profile() {
28
+
export type ProfileProps = {
29
+
activeKey?: string;
30
+
};
31
+
32
+
function Profile(props: ProfileProps) {
28
33
const [profiles, setProfiles] = useAtom(profilesAtom);
29
-
const [activeKey, setActiveKey] = useState<Key>("0");
34
+
const [activeKey, setActiveKey] = useState<Key>(
35
+
_.get(props, "activeKey", "0").split("/")[0]
36
+
);
30
37
const { did } = useParams({ strict: false });
31
38
const profile = useProfileByDidQuery(did!);
32
39
const setUser = useSetAtom(userAtom);
···
167
174
},
168
175
}}
169
176
>
170
-
<Library />
177
+
<Library
178
+
activeKey={_.get(props, "activeKey", "0").split("/")[1] || "0"}
179
+
/>
171
180
</Tab>
172
181
<Tab
173
182
title="Playlists"
+9
-2
apps/web/src/pages/profile/library/Library.tsx
+9
-2
apps/web/src/pages/profile/library/Library.tsx
···
1
1
import { useSearch } from "@tanstack/react-router";
2
2
import { Tab, Tabs } from "baseui/tabs-motion";
3
3
import { HeadingSmall } from "baseui/typography";
4
+
import _ from "lodash";
4
5
import { Key, useEffect, useState } from "react";
5
6
import RecentTracks from "../overview/recenttracks";
6
7
import TopArtists from "../overview/topartists";
7
8
import TopTracks from "../overview/toptracks";
8
9
import Albums from "./albums";
9
10
10
-
function Library() {
11
-
const [activeKey, setActiveKey] = useState<Key>("0");
11
+
export type LibraryProps = {
12
+
activeKey?: string;
13
+
};
14
+
15
+
function Library(props: LibraryProps) {
16
+
const [activeKey, setActiveKey] = useState<Key>(
17
+
_.get(props, "activeKey", "0")
18
+
);
12
19
const { tab } = useSearch({ strict: false });
13
20
console.log("tab", tab);
14
21
+189
-21
apps/web/src/routeTree.gen.ts
+189
-21
apps/web/src/routeTree.gen.ts
···
15
15
import { Route as IndexRouteImport } from './routes/index'
16
16
import { Route as GoogledriveIndexRouteImport } from './routes/googledrive/index'
17
17
import { Route as DropboxIndexRouteImport } from './routes/dropbox/index'
18
-
import { Route as ProfileDidRouteImport } from './routes/profile.$did'
19
18
import { Route as GoogledriveIdRouteImport } from './routes/googledrive/$id'
20
19
import { Route as DropboxIdRouteImport } from './routes/dropbox/$id'
20
+
import { Route as ProfileDidIndexRouteImport } from './routes/profile/$did/index'
21
+
import { Route as ProfileDidTracksRouteImport } from './routes/profile/$did/tracks'
22
+
import { Route as ProfileDidTagsRouteImport } from './routes/profile/$did/tags'
23
+
import { Route as ProfileDidScrobblesRouteImport } from './routes/profile/$did/scrobbles'
24
+
import { Route as ProfileDidPlaylistsRouteImport } from './routes/profile/$did/playlists'
25
+
import { Route as ProfileDidLikesRouteImport } from './routes/profile/$did/likes'
26
+
import { Route as ProfileDidLibraryRouteImport } from './routes/profile/$did/library'
27
+
import { Route as ProfileDidArtistsRouteImport } from './routes/profile/$did/artists'
28
+
import { Route as ProfileDidAlbumsRouteImport } from './routes/profile/$did/albums'
21
29
import { Route as DidSongRkeyRouteImport } from './routes/$did.song.$rkey'
22
30
import { Route as DidScrobbleRkeyRouteImport } from './routes/$did.scrobble.$rkey'
23
31
import { Route as DidPlaylistRkeyRouteImport } from './routes/$did.playlist.$rkey'
···
54
62
path: '/dropbox/',
55
63
getParentRoute: () => rootRouteImport,
56
64
} as any)
57
-
const ProfileDidRoute = ProfileDidRouteImport.update({
58
-
id: '/profile/$did',
59
-
path: '/profile/$did',
60
-
getParentRoute: () => rootRouteImport,
61
-
} as any)
62
65
const GoogledriveIdRoute = GoogledriveIdRouteImport.update({
63
66
id: '/googledrive/$id',
64
67
path: '/googledrive/$id',
···
69
72
path: '/dropbox/$id',
70
73
getParentRoute: () => rootRouteImport,
71
74
} as any)
75
+
const ProfileDidIndexRoute = ProfileDidIndexRouteImport.update({
76
+
id: '/profile/$did/',
77
+
path: '/profile/$did/',
78
+
getParentRoute: () => rootRouteImport,
79
+
} as any)
80
+
const ProfileDidTracksRoute = ProfileDidTracksRouteImport.update({
81
+
id: '/profile/$did/tracks',
82
+
path: '/profile/$did/tracks',
83
+
getParentRoute: () => rootRouteImport,
84
+
} as any)
85
+
const ProfileDidTagsRoute = ProfileDidTagsRouteImport.update({
86
+
id: '/profile/$did/tags',
87
+
path: '/profile/$did/tags',
88
+
getParentRoute: () => rootRouteImport,
89
+
} as any)
90
+
const ProfileDidScrobblesRoute = ProfileDidScrobblesRouteImport.update({
91
+
id: '/profile/$did/scrobbles',
92
+
path: '/profile/$did/scrobbles',
93
+
getParentRoute: () => rootRouteImport,
94
+
} as any)
95
+
const ProfileDidPlaylistsRoute = ProfileDidPlaylistsRouteImport.update({
96
+
id: '/profile/$did/playlists',
97
+
path: '/profile/$did/playlists',
98
+
getParentRoute: () => rootRouteImport,
99
+
} as any)
100
+
const ProfileDidLikesRoute = ProfileDidLikesRouteImport.update({
101
+
id: '/profile/$did/likes',
102
+
path: '/profile/$did/likes',
103
+
getParentRoute: () => rootRouteImport,
104
+
} as any)
105
+
const ProfileDidLibraryRoute = ProfileDidLibraryRouteImport.update({
106
+
id: '/profile/$did/library',
107
+
path: '/profile/$did/library',
108
+
getParentRoute: () => rootRouteImport,
109
+
} as any)
110
+
const ProfileDidArtistsRoute = ProfileDidArtistsRouteImport.update({
111
+
id: '/profile/$did/artists',
112
+
path: '/profile/$did/artists',
113
+
getParentRoute: () => rootRouteImport,
114
+
} as any)
115
+
const ProfileDidAlbumsRoute = ProfileDidAlbumsRouteImport.update({
116
+
id: '/profile/$did/albums',
117
+
path: '/profile/$did/albums',
118
+
getParentRoute: () => rootRouteImport,
119
+
} as any)
72
120
const DidSongRkeyRoute = DidSongRkeyRouteImport.update({
73
121
id: '/$did/song/$rkey',
74
122
path: '/$did/song/$rkey',
···
102
150
'/scrobble': typeof ScrobbleRoute
103
151
'/dropbox/$id': typeof DropboxIdRoute
104
152
'/googledrive/$id': typeof GoogledriveIdRoute
105
-
'/profile/$did': typeof ProfileDidRoute
106
153
'/dropbox': typeof DropboxIndexRoute
107
154
'/googledrive': typeof GoogledriveIndexRoute
108
155
'/$did/album/$rkey': typeof DidAlbumRkeyRoute
···
110
157
'/$did/playlist/$rkey': typeof DidPlaylistRkeyRoute
111
158
'/$did/scrobble/$rkey': typeof DidScrobbleRkeyRoute
112
159
'/$did/song/$rkey': typeof DidSongRkeyRoute
160
+
'/profile/$did/albums': typeof ProfileDidAlbumsRoute
161
+
'/profile/$did/artists': typeof ProfileDidArtistsRoute
162
+
'/profile/$did/library': typeof ProfileDidLibraryRoute
163
+
'/profile/$did/likes': typeof ProfileDidLikesRoute
164
+
'/profile/$did/playlists': typeof ProfileDidPlaylistsRoute
165
+
'/profile/$did/scrobbles': typeof ProfileDidScrobblesRoute
166
+
'/profile/$did/tags': typeof ProfileDidTagsRoute
167
+
'/profile/$did/tracks': typeof ProfileDidTracksRoute
168
+
'/profile/$did': typeof ProfileDidIndexRoute
113
169
}
114
170
export interface FileRoutesByTo {
115
171
'/': typeof IndexRoute
···
118
174
'/scrobble': typeof ScrobbleRoute
119
175
'/dropbox/$id': typeof DropboxIdRoute
120
176
'/googledrive/$id': typeof GoogledriveIdRoute
121
-
'/profile/$did': typeof ProfileDidRoute
122
177
'/dropbox': typeof DropboxIndexRoute
123
178
'/googledrive': typeof GoogledriveIndexRoute
124
179
'/$did/album/$rkey': typeof DidAlbumRkeyRoute
···
126
181
'/$did/playlist/$rkey': typeof DidPlaylistRkeyRoute
127
182
'/$did/scrobble/$rkey': typeof DidScrobbleRkeyRoute
128
183
'/$did/song/$rkey': typeof DidSongRkeyRoute
184
+
'/profile/$did/albums': typeof ProfileDidAlbumsRoute
185
+
'/profile/$did/artists': typeof ProfileDidArtistsRoute
186
+
'/profile/$did/library': typeof ProfileDidLibraryRoute
187
+
'/profile/$did/likes': typeof ProfileDidLikesRoute
188
+
'/profile/$did/playlists': typeof ProfileDidPlaylistsRoute
189
+
'/profile/$did/scrobbles': typeof ProfileDidScrobblesRoute
190
+
'/profile/$did/tags': typeof ProfileDidTagsRoute
191
+
'/profile/$did/tracks': typeof ProfileDidTracksRoute
192
+
'/profile/$did': typeof ProfileDidIndexRoute
129
193
}
130
194
export interface FileRoutesById {
131
195
__root__: typeof rootRouteImport
···
135
199
'/scrobble': typeof ScrobbleRoute
136
200
'/dropbox/$id': typeof DropboxIdRoute
137
201
'/googledrive/$id': typeof GoogledriveIdRoute
138
-
'/profile/$did': typeof ProfileDidRoute
139
202
'/dropbox/': typeof DropboxIndexRoute
140
203
'/googledrive/': typeof GoogledriveIndexRoute
141
204
'/$did/album/$rkey': typeof DidAlbumRkeyRoute
···
143
206
'/$did/playlist/$rkey': typeof DidPlaylistRkeyRoute
144
207
'/$did/scrobble/$rkey': typeof DidScrobbleRkeyRoute
145
208
'/$did/song/$rkey': typeof DidSongRkeyRoute
209
+
'/profile/$did/albums': typeof ProfileDidAlbumsRoute
210
+
'/profile/$did/artists': typeof ProfileDidArtistsRoute
211
+
'/profile/$did/library': typeof ProfileDidLibraryRoute
212
+
'/profile/$did/likes': typeof ProfileDidLikesRoute
213
+
'/profile/$did/playlists': typeof ProfileDidPlaylistsRoute
214
+
'/profile/$did/scrobbles': typeof ProfileDidScrobblesRoute
215
+
'/profile/$did/tags': typeof ProfileDidTagsRoute
216
+
'/profile/$did/tracks': typeof ProfileDidTracksRoute
217
+
'/profile/$did/': typeof ProfileDidIndexRoute
146
218
}
147
219
export interface FileRouteTypes {
148
220
fileRoutesByFullPath: FileRoutesByFullPath
···
153
225
| '/scrobble'
154
226
| '/dropbox/$id'
155
227
| '/googledrive/$id'
156
-
| '/profile/$did'
157
228
| '/dropbox'
158
229
| '/googledrive'
159
230
| '/$did/album/$rkey'
···
161
232
| '/$did/playlist/$rkey'
162
233
| '/$did/scrobble/$rkey'
163
234
| '/$did/song/$rkey'
235
+
| '/profile/$did/albums'
236
+
| '/profile/$did/artists'
237
+
| '/profile/$did/library'
238
+
| '/profile/$did/likes'
239
+
| '/profile/$did/playlists'
240
+
| '/profile/$did/scrobbles'
241
+
| '/profile/$did/tags'
242
+
| '/profile/$did/tracks'
243
+
| '/profile/$did'
164
244
fileRoutesByTo: FileRoutesByTo
165
245
to:
166
246
| '/'
···
169
249
| '/scrobble'
170
250
| '/dropbox/$id'
171
251
| '/googledrive/$id'
172
-
| '/profile/$did'
173
252
| '/dropbox'
174
253
| '/googledrive'
175
254
| '/$did/album/$rkey'
···
177
256
| '/$did/playlist/$rkey'
178
257
| '/$did/scrobble/$rkey'
179
258
| '/$did/song/$rkey'
259
+
| '/profile/$did/albums'
260
+
| '/profile/$did/artists'
261
+
| '/profile/$did/library'
262
+
| '/profile/$did/likes'
263
+
| '/profile/$did/playlists'
264
+
| '/profile/$did/scrobbles'
265
+
| '/profile/$did/tags'
266
+
| '/profile/$did/tracks'
267
+
| '/profile/$did'
180
268
id:
181
269
| '__root__'
182
270
| '/'
···
185
273
| '/scrobble'
186
274
| '/dropbox/$id'
187
275
| '/googledrive/$id'
188
-
| '/profile/$did'
189
276
| '/dropbox/'
190
277
| '/googledrive/'
191
278
| '/$did/album/$rkey'
···
193
280
| '/$did/playlist/$rkey'
194
281
| '/$did/scrobble/$rkey'
195
282
| '/$did/song/$rkey'
283
+
| '/profile/$did/albums'
284
+
| '/profile/$did/artists'
285
+
| '/profile/$did/library'
286
+
| '/profile/$did/likes'
287
+
| '/profile/$did/playlists'
288
+
| '/profile/$did/scrobbles'
289
+
| '/profile/$did/tags'
290
+
| '/profile/$did/tracks'
291
+
| '/profile/$did/'
196
292
fileRoutesById: FileRoutesById
197
293
}
198
294
export interface RootRouteChildren {
···
202
298
ScrobbleRoute: typeof ScrobbleRoute
203
299
DropboxIdRoute: typeof DropboxIdRoute
204
300
GoogledriveIdRoute: typeof GoogledriveIdRoute
205
-
ProfileDidRoute: typeof ProfileDidRoute
206
301
DropboxIndexRoute: typeof DropboxIndexRoute
207
302
GoogledriveIndexRoute: typeof GoogledriveIndexRoute
208
303
DidAlbumRkeyRoute: typeof DidAlbumRkeyRoute
···
210
305
DidPlaylistRkeyRoute: typeof DidPlaylistRkeyRoute
211
306
DidScrobbleRkeyRoute: typeof DidScrobbleRkeyRoute
212
307
DidSongRkeyRoute: typeof DidSongRkeyRoute
308
+
ProfileDidAlbumsRoute: typeof ProfileDidAlbumsRoute
309
+
ProfileDidArtistsRoute: typeof ProfileDidArtistsRoute
310
+
ProfileDidLibraryRoute: typeof ProfileDidLibraryRoute
311
+
ProfileDidLikesRoute: typeof ProfileDidLikesRoute
312
+
ProfileDidPlaylistsRoute: typeof ProfileDidPlaylistsRoute
313
+
ProfileDidScrobblesRoute: typeof ProfileDidScrobblesRoute
314
+
ProfileDidTagsRoute: typeof ProfileDidTagsRoute
315
+
ProfileDidTracksRoute: typeof ProfileDidTracksRoute
316
+
ProfileDidIndexRoute: typeof ProfileDidIndexRoute
213
317
}
214
318
215
319
declare module '@tanstack/react-router' {
···
256
360
preLoaderRoute: typeof DropboxIndexRouteImport
257
361
parentRoute: typeof rootRouteImport
258
362
}
259
-
'/profile/$did': {
260
-
id: '/profile/$did'
261
-
path: '/profile/$did'
262
-
fullPath: '/profile/$did'
263
-
preLoaderRoute: typeof ProfileDidRouteImport
264
-
parentRoute: typeof rootRouteImport
265
-
}
266
363
'/googledrive/$id': {
267
364
id: '/googledrive/$id'
268
365
path: '/googledrive/$id'
···
277
374
preLoaderRoute: typeof DropboxIdRouteImport
278
375
parentRoute: typeof rootRouteImport
279
376
}
377
+
'/profile/$did/': {
378
+
id: '/profile/$did/'
379
+
path: '/profile/$did'
380
+
fullPath: '/profile/$did'
381
+
preLoaderRoute: typeof ProfileDidIndexRouteImport
382
+
parentRoute: typeof rootRouteImport
383
+
}
384
+
'/profile/$did/tracks': {
385
+
id: '/profile/$did/tracks'
386
+
path: '/profile/$did/tracks'
387
+
fullPath: '/profile/$did/tracks'
388
+
preLoaderRoute: typeof ProfileDidTracksRouteImport
389
+
parentRoute: typeof rootRouteImport
390
+
}
391
+
'/profile/$did/tags': {
392
+
id: '/profile/$did/tags'
393
+
path: '/profile/$did/tags'
394
+
fullPath: '/profile/$did/tags'
395
+
preLoaderRoute: typeof ProfileDidTagsRouteImport
396
+
parentRoute: typeof rootRouteImport
397
+
}
398
+
'/profile/$did/scrobbles': {
399
+
id: '/profile/$did/scrobbles'
400
+
path: '/profile/$did/scrobbles'
401
+
fullPath: '/profile/$did/scrobbles'
402
+
preLoaderRoute: typeof ProfileDidScrobblesRouteImport
403
+
parentRoute: typeof rootRouteImport
404
+
}
405
+
'/profile/$did/playlists': {
406
+
id: '/profile/$did/playlists'
407
+
path: '/profile/$did/playlists'
408
+
fullPath: '/profile/$did/playlists'
409
+
preLoaderRoute: typeof ProfileDidPlaylistsRouteImport
410
+
parentRoute: typeof rootRouteImport
411
+
}
412
+
'/profile/$did/likes': {
413
+
id: '/profile/$did/likes'
414
+
path: '/profile/$did/likes'
415
+
fullPath: '/profile/$did/likes'
416
+
preLoaderRoute: typeof ProfileDidLikesRouteImport
417
+
parentRoute: typeof rootRouteImport
418
+
}
419
+
'/profile/$did/library': {
420
+
id: '/profile/$did/library'
421
+
path: '/profile/$did/library'
422
+
fullPath: '/profile/$did/library'
423
+
preLoaderRoute: typeof ProfileDidLibraryRouteImport
424
+
parentRoute: typeof rootRouteImport
425
+
}
426
+
'/profile/$did/artists': {
427
+
id: '/profile/$did/artists'
428
+
path: '/profile/$did/artists'
429
+
fullPath: '/profile/$did/artists'
430
+
preLoaderRoute: typeof ProfileDidArtistsRouteImport
431
+
parentRoute: typeof rootRouteImport
432
+
}
433
+
'/profile/$did/albums': {
434
+
id: '/profile/$did/albums'
435
+
path: '/profile/$did/albums'
436
+
fullPath: '/profile/$did/albums'
437
+
preLoaderRoute: typeof ProfileDidAlbumsRouteImport
438
+
parentRoute: typeof rootRouteImport
439
+
}
280
440
'/$did/song/$rkey': {
281
441
id: '/$did/song/$rkey'
282
442
path: '/$did/song/$rkey'
···
322
482
ScrobbleRoute: ScrobbleRoute,
323
483
DropboxIdRoute: DropboxIdRoute,
324
484
GoogledriveIdRoute: GoogledriveIdRoute,
325
-
ProfileDidRoute: ProfileDidRoute,
326
485
DropboxIndexRoute: DropboxIndexRoute,
327
486
GoogledriveIndexRoute: GoogledriveIndexRoute,
328
487
DidAlbumRkeyRoute: DidAlbumRkeyRoute,
···
330
489
DidPlaylistRkeyRoute: DidPlaylistRkeyRoute,
331
490
DidScrobbleRkeyRoute: DidScrobbleRkeyRoute,
332
491
DidSongRkeyRoute: DidSongRkeyRoute,
492
+
ProfileDidAlbumsRoute: ProfileDidAlbumsRoute,
493
+
ProfileDidArtistsRoute: ProfileDidArtistsRoute,
494
+
ProfileDidLibraryRoute: ProfileDidLibraryRoute,
495
+
ProfileDidLikesRoute: ProfileDidLikesRoute,
496
+
ProfileDidPlaylistsRoute: ProfileDidPlaylistsRoute,
497
+
ProfileDidScrobblesRoute: ProfileDidScrobblesRoute,
498
+
ProfileDidTagsRoute: ProfileDidTagsRoute,
499
+
ProfileDidTracksRoute: ProfileDidTracksRoute,
500
+
ProfileDidIndexRoute: ProfileDidIndexRoute,
333
501
}
334
502
export const routeTree = rootRouteImport
335
503
._addFileChildren(rootRouteChildren)
+2
-2
apps/web/src/routes/profile.$did.tsx
apps/web/src/routes/profile/$did/index.tsx
+2
-2
apps/web/src/routes/profile.$did.tsx
apps/web/src/routes/profile/$did/index.tsx
···
1
1
import { createFileRoute } from "@tanstack/react-router";
2
2
import { zodValidator } from "@tanstack/zod-adapter";
3
3
import z from "zod";
4
-
import ProfilePage from "../pages/profile";
4
+
import ProfilePage from "../../../pages/profile";
5
5
6
6
const validateSearch = z.object({
7
7
tab: z.number().optional(),
8
8
});
9
9
10
-
export const Route = createFileRoute("/profile/$did")({
10
+
export const Route = createFileRoute("/profile/$did/")({
11
11
component: ProfilePage,
12
12
validateSearch: zodValidator(validateSearch),
13
13
});
+6
apps/web/src/routes/profile/$did/albums.tsx
+6
apps/web/src/routes/profile/$did/albums.tsx
+6
apps/web/src/routes/profile/$did/artists.tsx
+6
apps/web/src/routes/profile/$did/artists.tsx
+6
apps/web/src/routes/profile/$did/library.tsx
+6
apps/web/src/routes/profile/$did/library.tsx
+6
apps/web/src/routes/profile/$did/likes.tsx
+6
apps/web/src/routes/profile/$did/likes.tsx
+6
apps/web/src/routes/profile/$did/playlists.tsx
+6
apps/web/src/routes/profile/$did/playlists.tsx
+6
apps/web/src/routes/profile/$did/scrobbles.tsx
+6
apps/web/src/routes/profile/$did/scrobbles.tsx