zeu.dev
Read-it-later social network
implement subscribe button
+71
-16
src/lib/components/PublicationCard.svelte
+71
-16
src/lib/components/PublicationCard.svelte
···
1
<script lang="ts">
2
import { getContext } from "svelte";
3
import { createQuery } from "@tanstack/svelte-query";
4
-
import { resolveHandle, type MiniDoc, type PublicationNode, type StandardSiteThemeColorRGB } from "$lib/utils";
5
import type { QuicksliceClient } from "quickslice-client-js";
6
7
const user = getContext("user") as MiniDoc;
8
const atclient = getContext("atclient") as QuicksliceClient;
9
10
let { publication, showEmpty = false }: { publication: PublicationNode, showEmpty?: boolean } = $props();
11
12
let isSubscribeButtonHovered = $state(false);
13
14
const miniDocQuery = createQuery(() => ({
···
40
const subscribers = Number(data.links["site.standard.graph.subscription"]?.[".publication"]?.records) || 0;
41
42
return { documents, subscribers }
43
-
}
44
}));
45
46
-
const isSubscribedQuery = createQuery(() => ({
47
queryKey: ["isSubscribed", publication.uri, user.did],
48
queryFn: async () => {
49
const constellationUrl = new URL("https://constellation.microcosm.blue/xrpc/blue.microcosm.links.getBacklinks");
···
57
});
58
59
60
-
const json = await response.json() as { total: number };
61
return json;
62
},
63
}));
64
65
let documents = $derived(countQuery.data?.documents || 0);
66
let subscribers = $derived(countQuery.data?.subscribers || 0);
67
-
let isSubscribed = $derived((isSubscribedQuery.data?.total ?? 0) === 1);
68
let blobSyncUrl = $derived((`${miniDocQuery.data?.pds}/xrpc/com.atproto.sync.getBlob?did=${publication.did}&cid=${publication.value.icon?.ref.$link}`));
69
const theme = publication.value.basicTheme || {
70
$type: "site.standard.theme.basic",
···
94
},
95
};
96
97
-
// TODO: update with `site.standard.graph.subscription` create or delete on click with auth
98
-
function toggleSubscribe() {
99
-
const past = isSubscribed;
100
-
isSubscribed = !isSubscribed;
101
-
if (subscribers) {
102
-
if (past) {
103
-
subscribers--;
104
}
105
else {
106
subscribers++;
107
}
108
}
109
}
110
</script>
···
159
</div>
160
<button
161
onclick={toggleSubscribe}
162
onmouseenter={() => isSubscribeButtonHovered = true}
163
onmouseleave={() => isSubscribeButtonHovered = false}
164
-
class={["flex flex-1 flex-col items-center justify-center gap-1 p-4 hover:cursor-pointer transition-all duration-150 hover:bg-green-500", isSubscribed && "bg-green-500 hover:bg-red-400"]}>
165
-
<span class="text-2xl font-bold">
166
{subscribers}
167
</span>
168
-
<span class="text-xs uppercase tracking-wide">
169
-
{#if isSubscribed}
170
{#if isSubscribeButtonHovered}
171
Unsubscribe?
172
{:else}
···
178
{:else}
179
Subscribers
180
{/if}
181
{/if}
182
</span>
183
</button>
···
1
<script lang="ts">
2
import { getContext } from "svelte";
3
import { createQuery } from "@tanstack/svelte-query";
4
import type { QuicksliceClient } from "quickslice-client-js";
5
+
import { parseAtUri, resolveHandle, type MiniDoc, type PublicationNode } from "$lib/utils";
6
7
const user = getContext("user") as MiniDoc;
8
const atclient = getContext("atclient") as QuicksliceClient;
9
10
let { publication, showEmpty = false }: { publication: PublicationNode, showEmpty?: boolean } = $props();
11
12
+
let disableSubscribeButton = $state(false);
13
let isSubscribeButtonHovered = $state(false);
14
15
const miniDocQuery = createQuery(() => ({
···
41
const subscribers = Number(data.links["site.standard.graph.subscription"]?.[".publication"]?.records) || 0;
42
43
return { documents, subscribers }
44
+
},
45
}));
46
47
+
const subscriptionQuery = createQuery(() => ({
48
queryKey: ["isSubscribed", publication.uri, user.did],
49
queryFn: async () => {
50
const constellationUrl = new URL("https://constellation.microcosm.blue/xrpc/blue.microcosm.links.getBacklinks");
···
58
});
59
60
61
+
const json = await response.json() as { records: { did: string, collection: string, rkey: string }[] };
62
return json;
63
},
64
+
select: (data) => data.records[0] && data.records[0].rkey
65
}));
66
67
let documents = $derived(countQuery.data?.documents || 0);
68
let subscribers = $derived(countQuery.data?.subscribers || 0);
69
+
let subscriptionRkey = $derived(subscriptionQuery.data);
70
let blobSyncUrl = $derived((`${miniDocQuery.data?.pds}/xrpc/com.atproto.sync.getBlob?did=${publication.did}&cid=${publication.value.icon?.ref.$link}`));
71
const theme = publication.value.basicTheme || {
72
$type: "site.standard.theme.basic",
···
96
},
97
};
98
99
+
async function toggleSubscribe() {
100
+
disableSubscribeButton = true;
101
+
102
+
const pastRkey = subscriptionRkey;
103
+
if (pastRkey) {
104
+
subscribers--;
105
+
subscriptionRkey = undefined;
106
+
}
107
+
else {
108
+
subscribers++;
109
+
subscriptionRkey = "placeholder_rkey";
110
+
}
111
+
112
+
try {
113
+
if (pastRkey) {
114
+
const mutation = `
115
+
mutation {
116
+
deleteSiteStandardGraphSubscription(rkey: "${pastRkey}") {
117
+
uri
118
+
}
119
+
}
120
+
`;
121
+
await atclient.mutate(mutation) as { createSiteStandardGraphSubscription: { uri: string }};
122
+
subscriptionRkey = undefined;
123
}
124
else {
125
+
const mutation = `
126
+
mutation {
127
+
createSiteStandardGraphSubscription(input: {
128
+
publication: "${publication.uri}"
129
+
}) {
130
+
uri
131
+
}
132
+
}
133
+
`;
134
+
const result = await atclient.mutate(mutation) as { createSiteStandardGraphSubscription: { uri: string }};
135
+
const { rkey } = parseAtUri(result.createSiteStandardGraphSubscription.uri);
136
+
subscriptionRkey = rkey;
137
+
}
138
+
139
+
disableSubscribeButton = false;
140
+
}
141
+
catch (e) {
142
+
console.log(e);
143
+
// rollback initial changes
144
+
if (pastRkey) {
145
subscribers++;
146
+
subscriptionRkey = pastRkey;
147
}
148
+
else {
149
+
subscribers--;
150
+
subscriptionRkey = undefined;
151
+
}
152
+
153
+
disableSubscribeButton = false;
154
}
155
}
156
</script>
···
205
</div>
206
<button
207
onclick={toggleSubscribe}
208
+
disabled={disableSubscribeButton}
209
onmouseenter={() => isSubscribeButtonHovered = true}
210
onmouseleave={() => isSubscribeButtonHovered = false}
211
+
class={[
212
+
"flex flex-1 flex-col items-center justify-center gap-1 p-4 hover:cursor-pointer transition-all duration-150 hover:bg-green-500",
213
+
subscriptionRkey && "bg-green-500 hover:bg-red-400"
214
+
]}
215
+
>
216
+
<span class="gap-[0.5rem] text-2xl font-bold">
217
{subscribers}
218
</span>
219
+
<span class="text-xs uppercase tracking-wide flex">
220
+
{#if subscriptionRkey}
221
{#if isSubscribeButtonHovered}
222
Unsubscribe?
223
{:else}
···
229
{:else}
230
Subscribers
231
{/if}
232
+
{/if}
233
+
234
+
{#if disableSubscribeButton}
235
+
<p class="animate-spin">◝</p>
236
{/if}
237
</span>
238
</button>
+7
src/lib/utils.ts
+7
src/lib/utils.ts
···
9
}
10
}
11
12
+
export function createAtUri({ did, collection, rkey }: { did: string, collection: string, rkey: string }) {
13
+
if (did && collection && rkey) {
14
+
return `at://${did}/${collection}/${rkey}`;
15
+
}
16
+
return undefined;
17
+
}
18
+
19
export type MiniDoc = {
20
did: string;
21
handle: string;
+1
-1
src/routes/+page.svelte
+1
-1
src/routes/+page.svelte