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
import { NewDraftButton } from "./NewDraftButton";
7
import { Menu, MenuItem } from "components/Layout";
8
import { ArrowRightTiny, MoreOptionsTiny, ShareSmall } from "components/Icons";
9
10
export function CallToActionButton() {
11
let rel = usePublicationRelationship();
···
16
return (
17
<div className="flex gap-2">
18
<div className="font-bold">You're Subscribed!</div>
19
-
<ManageSubscriptionMenu />
20
</div>
21
);
22
return <SubscribeButton publication={publication.uri} />;
23
}
24
25
-
const ManageSubscriptionMenu = () => {
26
return (
27
<Menu trigger={<MoreOptionsTiny className="rotate-90" />}>
28
-
<MenuItem onSelect={() => {}}>Unsub!</MenuItem>
29
</Menu>
30
);
31
};
···
6
import { NewDraftButton } from "./NewDraftButton";
7
import { Menu, MenuItem } from "components/Layout";
8
import { ArrowRightTiny, MoreOptionsTiny, ShareSmall } from "components/Icons";
9
+
import { useIdentityData } from "components/IdentityProvider";
10
+
import { unsubscribeFromPublication } from "actions/unsubscribeFromPubliction";
11
12
export function CallToActionButton() {
13
let rel = usePublicationRelationship();
···
18
return (
19
<div className="flex gap-2">
20
<div className="font-bold">You're Subscribed!</div>
21
+
<ManageSubscriptionMenu publication_uri={publication.uri} />
22
</div>
23
);
24
return <SubscribeButton publication={publication.uri} />;
25
}
26
27
+
const ManageSubscriptionMenu = (props: { publication_uri: string }) => {
28
+
let { mutate } = useIdentityData();
29
return (
30
<Menu trigger={<MoreOptionsTiny className="rotate-90" />}>
31
+
<MenuItem
32
+
onSelect={async () => {
33
+
await unsubscribeFromPublication(props.publication_uri);
34
+
mutate();
35
+
}}
36
+
>
37
+
Unsub!
38
+
</MenuItem>
39
</Menu>
40
);
41
};