publish: allow unsubscribing from notebooks

fixes #3505

pkg/interface/src/views/apps/publish/components/lib/Join.tsx

@@ -4,6 +4,7 @@ import { Spinner } from "~/views/components/Spinner";
 import { Notebooks } from "~/types/publish-update";
 import { useWaitForProps } from "~/logic/lib/useWaitForProps";
 import { RouteComponentProps } from "react-router-dom";
+import { deSig } from "~/logic/lib/util";
 
 interface JoinScreenProps {
   api: any; // GlobalApi;
@@ -21,15 +22,9 @@ export function JoinScreen(props: JoinScreenProps & RouteComponentProps) {
 
   const onJoin = useCallback(async () => {
     joining.current = true;
-    const action = {
-      subscribe: {
-        who: ship.replace("~", ""),
-        book,
-      },
-    };
 
     try {
-      await api.publish.publishAction(action);
+      await api.publish.subscribeNotebook(deSig(ship), book);
       await waiter((p) => !!p.notebooks?.[ship]?.[book]);
       props.history.replace(`/~publish/notebook/${ship}/${book}`);
     } catch (e) {

pkg/interface/src/views/apps/publish/components/lib/Notebook.tsx

@@ -1,8 +1,9 @@
-import React from "react";
+import React, { PureComponent } from "react";
 import { Link, RouteComponentProps, Route, Switch } from "react-router-dom";
 import { NotebookPosts } from "./NotebookPosts";
 import { Subscribers } from "./Subscribers";
 import { Settings } from "./Settings";
+import { Spinner } from '~/views/components/Spinner';
 import { roleForShip } from "~/logic/lib/group";
 import {
   Box,
@@ -21,6 +22,7 @@ import { Contacts, Rolodex } from "~/types/contact-update";
 import GlobalApi from "~/logic/api/global";
 import styled from "styled-components";
 import {Associations} from "~/types";
+import { deSig } from "~/logic/lib/util";
 
 const TabList = styled(_TabList)`
   margin-bottom: ${(p) => p.theme.space[4]}px;
@@ -42,8 +44,20 @@ interface NotebookProps {
   associations: Associations;
 }
 
-export function Notebook(props: NotebookProps & RouteComponentProps) {
+interface NotebookState {
-  const { api, ship, book, notebook, notebookContacts, groups } = props;
+  isUnsubscribing: boolean;
+}
+
+export class Notebook extends PureComponent<NotebookProps & RouteComponentProps, NotebookState> {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isUnsubscribing: false
+    };
+  }
+
+  render() {
+    const { api, ship, book, notebook, notebookContacts, groups, history, hideNicknames, associations } = this.props;
 
     const contact = notebookContacts[ship];
     const group = groups[notebook?.["writers-group-path"]];
@@ -56,7 +70,7 @@ export function Notebook(props: NotebookProps & RouteComponentProps) {
   
     const notesList = notebook?.["notes-by-date"] || [];
     const notes = notebook?.notes || {};
-  const showNickname = contact?.nickname && !props.hideNicknames;
+    const showNickname = contact?.nickname && !hideNicknames;
   
     return (
       <Box
@@ -88,11 +102,21 @@ export function Notebook(props: NotebookProps & RouteComponentProps) {
               </Button>
             </Link>
           )}
-        {!isOwn && (
+          {!isOwn
-          <Button ml={isWriter ? 2 : 0} error border>
+            ? this.state.isUnsubscribing
+              ? <Spinner awaiting={this.state.isUnsubscribing} classes="mt2 ml2" text="Unsubscribing..." />
+              : <Button ml={isWriter ? 2 : 0} error border onClick={() => {
+                this.setState({ isUnsubscribing: true });
+                api.publish.unsubscribeNotebook(deSig(ship), book).then(() => {
+                  history.push("/~publish");
+                }).catch(() => {
+                  this.setState({ isUnsubscribing: false });
+                });
+              }}>
                 Unsubscribe
               </Button>
-        )}
+            : null
+          }
         </Row>
         <Box gridColumn={["1/2", "1/3"]}>
           <Tabs>
@@ -110,7 +134,7 @@ export function Notebook(props: NotebookProps & RouteComponentProps) {
                   host={ship}
                   book={book}
                   contacts={notebookContacts}
-                hideNicknames={props.hideNicknames}
+                  hideNicknames={hideNicknames}
                 />
               </TabPanel>
               <TabPanel>
@@ -132,7 +156,7 @@ export function Notebook(props: NotebookProps & RouteComponentProps) {
                   api={api}
                   notebook={notebook}
                   contacts={notebookContacts}
-                associations={props.associations}
+                  associations={associations}
                   groups={groups}
                 />
               </TabPanel>
@@ -141,6 +165,6 @@ export function Notebook(props: NotebookProps & RouteComponentProps) {
         </Box>
       </Box>
     );
+  }
 }
-
 export default Notebook;