leaflet.pub
a tool for shared writing and social publishing
add unsubscribe flow!
awarm.space
-2
actions/subscribeToPublicationWithEmail.ts
-2
actions/subscribeToPublicationWithEmail.ts
+13
-3
app/lish/[handle]/[publication]/CallToActionButton.tsx
+13
-3
app/lish/[handle]/[publication]/CallToActionButton.tsx
···
6
6
import { NewDraftButton } from "./NewDraftButton";
7
7
import { Menu, MenuItem } from "components/Layout";
8
8
import { ArrowRightTiny, MoreOptionsTiny, ShareSmall } from "components/Icons";
9
+
import { useIdentityData } from "components/IdentityProvider";
10
+
import { unsubscribeFromPublication } from "actions/unsubscribeFromPubliction";
9
11
10
12
export function CallToActionButton() {
11
13
let rel = usePublicationRelationship();
···
16
18
return (
17
19
<div className="flex gap-2">
18
20
<div className="font-bold">You're Subscribed!</div>
19
-
<ManageSubscriptionMenu />
21
+
<ManageSubscriptionMenu publication_uri={publication.uri} />
20
22
</div>
21
23
);
22
24
return <SubscribeButton publication={publication.uri} />;
23
25
}
24
26
25
-
const ManageSubscriptionMenu = () => {
27
+
const ManageSubscriptionMenu = (props: { publication_uri: string }) => {
28
+
let { mutate } = useIdentityData();
26
29
return (
27
30
<Menu trigger={<MoreOptionsTiny className="rotate-90" />}>
28
-
<MenuItem onSelect={() => {}}>Unsub!</MenuItem>
31
+
<MenuItem
32
+
onSelect={async () => {
33
+
await unsubscribeFromPublication(props.publication_uri);
34
+
mutate();
35
+
}}
36
+
>
37
+
Unsub!
38
+
</MenuItem>
29
39
</Menu>
30
40
);
31
41
};