personal web client for Bluesky
mary.my.id
typescript
solidjs
bluesky
atcute
1import { Match, Switch } from 'solid-js';
2
3import type { ActorIdentifier, RecordKey } from '@atcute/lexicons';
4import { isDid } from '@atcute/lexicons/syntax';
5import { useQueryClient } from '@mary/solid-query';
6
7import { createListMetaQuery } from '~/api/queries/list';
8import { makeAtUri } from '~/api/types/at-uri';
9
10import { history } from '~/globals/navigation';
11
12import { useParams, useTitle } from '~/lib/navigation/router';
13
14import CircularProgressView from '~/components/circular-progress-view';
15import ErrorView from '~/components/error-view';
16import * as Page from '~/components/page';
17
18const ListStubPage = () => {
19 const { didOrHandle, rkey } = useParams<{
20 didOrHandle: ActorIdentifier;
21 rkey: RecordKey;
22 }>();
23
24 const queryClient = useQueryClient();
25
26 const uri = makeAtUri(didOrHandle, 'app.bsky.graph.list', rkey);
27 const meta = createListMetaQuery(() => uri);
28
29 useTitle(() => `List — ${import.meta.env.VITE_APP_NAME}`);
30
31 return (
32 <>
33 <Page.Header>
34 <Page.HeaderAccessory>
35 <Page.Back to={`/${didOrHandle}`} />
36 </Page.HeaderAccessory>
37
38 <Page.Heading
39 title={(() => {
40 const list = meta.data;
41 if (list) {
42 return list.name;
43 }
44
45 return `List`;
46 })()}
47 />
48 </Page.Header>
49
50 <Switch>
51 <Match when={meta.error} keyed>
52 {(error) => <ErrorView error={error} onRetry={() => meta.refetch()} />}
53 </Match>
54
55 <Match when={meta.data} keyed>
56 {(list) => {
57 const did = list.creator.did;
58 const uri = list.uri;
59
60 const purpose = list.purpose;
61
62 if (!isDid(didOrHandle)) {
63 queryClient.setQueryData(['list-meta', uri], list);
64 }
65
66 if (purpose === 'app.bsky.graph.defs#curatelist') {
67 history.navigate(`/${did}/curation-lists/${rkey}`, { replace: true });
68 } else if (purpose === 'app.bsky.graph.defs#modlist') {
69 history.navigate(`/${did}/moderation-lists/${rkey}`, { replace: true });
70 }
71
72 return <div class="grid h-13 place-items-center text-sm">Unsupported list type</div>;
73 }}
74 </Match>
75
76 <Match when>
77 <CircularProgressView />
78 </Match>
79 </Switch>
80 </>
81 );
82};
83
84export default ListStubPage;