publish: address review comments

pkg/interface/src/logic/api/publish.ts

@@ -99,6 +99,26 @@ export default class PublishApi extends BaseApi {
     });
   }
 
+  editBook(bookId: string, title: string, description: string, coms: boolean) {
+    return this.publishAction({
+      "edit-book": {
+        book: bookId,
+        title: title,
+        about: description,
+        coms,
+        group: null
+      }
+    });
+  }
+
+  delBook(book: string) {
+    return this.publishAction({
+      "del-book": {
+        book
+      }
+    });
+  }
+
   newNote(who: PatpNoSig, book: string, note: string, title: string, body: string) {
     return this.publishAction({
       'new-note': {

pkg/interface/src/views/apps/publish/app.tsx

@@ -8,13 +8,9 @@ import "./css/custom.css";
 import { Skeleton } from "./components/skeleton";
 import { NewScreen } from "./components/lib/new";
 import { JoinScreen } from "./components/lib/Join";
-import { Notebook } from "./components/lib/Notebook";
-import { Note } from "./components/lib/Note";
-import { NewPost } from "./components/lib/new-post";
-import { EditPost } from "./components/lib/edit-post";
-import { StoreState } from "../../store/type";
-import GlobalApi from "../../api/global";
-import GlobalSubscription from "../../subscription/global";
+import { StoreState } from "~/logic/store/type";
+import GlobalApi from "~/logic/api/global";
+import GlobalSubscription from "~/logic/subscription/global";
 import {NotebookRoutes} from "./components/lib/NotebookRoutes";
 
 type PublishAppProps = StoreState & {
@@ -45,7 +41,6 @@ export default function PublishApp(props: PublishAppProps) {
   }, []);
 
   const contacts = props.contacts ? props.contacts : {};
-  const selectedGroups = props.selectedGroups ? props.selectedGroups : [];
 
   const notebooks = props.notebooks ? props.notebooks : {};
 
@@ -55,15 +50,6 @@ export default function PublishApp(props: PublishAppProps) {
     .values()
     .map(_.values)
     .flatten() // flatten into array of notebooks
-    .filter((each) => {
-      return (
-        selectedGroups
-          .map((e) => {
-            return e[0];
-          })
-          .includes(each?.["writers-group-path"]) || selectedGroups.length === 0
-      );
-    })
     .map("num-unread")
     .reduce((acc, count) => acc + count, 0)
     .value();
@@ -90,7 +76,6 @@ export default function PublishApp(props: PublishAppProps) {
         invites={invites}
         notebooks={notebooks}
         associations={associations}
-        selectedGroups={selectedGroups}
         contacts={contacts}
         api={api}
       >

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

@@ -79,7 +79,7 @@ export function Note(props: NoteProps & RouteComponentProps) {
         <Text>{"<- Notebook Index"}</Text>
       </Link>
       <Col>
-        <Box mb={2}>{note?.title || ""}</Box>
+        <Text display="block" mb={2}>{note?.title || ""}</Text>
         <Box display="flex">
           <Author
             ship={ship}
@@ -89,7 +89,7 @@ export function Note(props: NoteProps & RouteComponentProps) {
           <Text ml={2}>{editPost}</Text>
         </Box>
       </Col>
-      <Box className="md" style={{ overflowWrap: "break-word" }}>
+      <Box color="black" className="md" style={{ overflowWrap: "break-word" }}>
         <ReactMarkdown source={newfile} linkTarget={"_blank"} />
       </Box>
       <NoteNavigation

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

@@ -1,45 +0,0 @@
-import React, { ReactNode, forwardRef } from "react";
-import { Box } from "@tlon/indigo-react";
-import { Link } from "react-router-dom";
-import { SidebarSwitcher } from "../../../../components/SidebarSwitch";
-import { useQuery } from "../../../../lib/useQuery";
-import GlobalApi from "../../../../api/global";
-
-interface PublishContentProps {
-  children: ReactNode;
-  sidebarShown: boolean;
-  api: GlobalApi;
-}
-
-export const PublishContent = forwardRef((props: PublishContentProps) => {
-  const { children, sidebarShown, api, onScroll } = props;
-  
-
-  const { query } = useQuery();
-  const popout = !!query.get("popout");
-
-  const popoutDisplay = popout ? [] : ["none", "block"];
-
-  return (
-    <Box
-      py={2}
-      px={3}
-      fontSize={0}
-      height="100%"
-      width="100%"
-      display="grid"
-      gridTemplateColumns="1fr"
-      gridAutoRows="auto"
-      justifyItems="center"
-      overflowY="scroll"
-    >
-      {/*<SidebarSwitcher popout={popout} sidebarShown={sidebarShown} api={api} />*/}
-      {children}
-  {/*<Box pt={2} justifySelf="end" display={popoutDisplay}>
-        <Link target="_blank" to="">
-          <img src="/~landscape/img/popout.png" height={16} width={16} />
-        </Link>
-      </Box>*/}
-    </Box>
-  );
-};

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

@@ -58,15 +58,6 @@ export function Sidebar(props: any) {
 
   const selectedGroups = props.selectedGroups ? props.selectedGroups : [];
   const groupedItems = Object.keys(associations)
-    .filter((each) => {
-      if (selectedGroups.length === 0) {
-        return true;
-      }
-      const selectedPaths = selectedGroups.map((e) => {
-        return e[0];
-      });
-      return selectedPaths.includes(each);
-    })
     .map((each, i) => {
       const books = groupedNotebooks[each] || [];
       if (books.length === 0) return;

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

@@ -1,8 +1,22 @@
 import React, { Component } from 'react';
 import { GroupView } from '~/views/components/Group';
 import { resourceFromPath } from '~/logic/lib/group';
+import {Notebook} from '~/types/publish-update';
+import GlobalApi from '~/logic/api/global';
+import {Groups} from '~/types/group-update';
+import {Associations} from '~/types/metadata-update';
+import {Rolodex} from '~/types/contact-update';
 
-export class Subscribers extends Component {
+interface SubscribersProps {
+  notebook: Notebook;
+  api: GlobalApi;
+  groups: Groups;
+  book: string;
+  associations: Associations;
+  contacts: Rolodex;
+}
+
+export class Subscribers extends Component<SubscribersProps> {
   constructor(props) {
     super(props);
     this.redirect = this.redirect.bind(this);
@@ -57,6 +71,7 @@ export class Subscribers extends Component {
         addDesc: 'Allow user to write to this notebook'
       },
     ];
+    
 
     return (
       <div>

pkg/interface/src/views/apps/publish/components/skeleton.tsx

@@ -1,13 +1,12 @@
 import React, { useRef, SyntheticEvent } from "react";
 import { Box, Center } from "@tlon/indigo-react";
 import { Sidebar } from "./lib/Sidebar";
-import ErrorBoundary from "../../../components/ErrorBoundary";
-import { Notebooks } from "../../../types/publish-update";
-import { SelectedGroup } from "../../../types/local-update";
-import { Rolodex } from "../../../types/contact-update";
-import { Invites } from "../../../types/invite-update";
-import GlobalApi from "../../../api/global";
-import { Associations } from "../../../types/metadata-update";
+import ErrorBoundary from "~/views/components/ErrorBoundary";
+import { Notebooks } from "~/types/publish-update";
+import { Rolodex } from "~/types/contact-update";
+import { Invites } from "~/types/invite-update";
+import GlobalApi from "~/logic/api/global";
+import { Associations } from "~/types/metadata-update";
 import { RouteComponentProps } from "react-router-dom";
 
 type SkeletonProps = RouteComponentProps<{
@@ -18,7 +17,6 @@ type SkeletonProps = RouteComponentProps<{
   notebooks: Notebooks;
   invites: Invites;
   associations: Associations;
-  selectedGroups: SelectedGroup[];
   contacts: Rolodex;
   api: GlobalApi;
   children: React.ReactNode;
@@ -34,8 +32,8 @@ export function Skeleton(props: SkeletonProps) {
       `${props.match.params.ship}/${props.match.params.notebook}`) ||
     undefined;
 
-  const onScroll = (e: SyntheticEvent<HTMLDivElement>) => {
-    const { scrollHeight, scrollTop, clientHeight } = e.target;
+  const onScroll = (e: React.UIEvent<HTMLDivElement>) => {
+    const { scrollHeight, scrollTop, clientHeight } = e.target as HTMLDivElement;
     const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
     if (noteId && notebook && ship) {
       const note = notebooks?.[ship]?.[notebook]?.notes?.[noteId];
@@ -85,7 +83,6 @@ export function Skeleton(props: SkeletonProps) {
           path={path}
           invites={props.invites}
           associations={props.associations}
-          selectedGroups={props.selectedGroups}
           api={props.api}
         />
         <Box

pkg/interface/src/views/components/ErrorBoundary.tsx

@@ -21,7 +21,6 @@ class ErrorBoundary extends Component<
 
   componentDidCatch(error) {
     this.setState({ error });
-    debugger;
     return false;
   }
 

pkg/interface/src/views/components/Group.tsx

@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import _, { capitalize } from 'lodash';
 import { FixedSizeList as List } from 'react-window';
 
-import { Dropdown } from '../apps/publish/components/lib/dropdown';
 import { cite, deSig } from '~/logic/lib/util';
 import { roleForShip, resourceFromPath } from '~/logic/lib/group';
 import {
@@ -13,7 +12,7 @@ import {
   Groups,
 } from '~/types/group-update';
 import { Path, PatpNoSig, Patp } from '~/types/noun';
-import GlobalApi from '../api/global';
+import GlobalApi from '~/logic/api/global';
 import { Menu, MenuButton, MenuList, MenuItem } from '@tlon/indigo-react';
 import InviteSearch, { Invites } from './InviteSearch';
 import { Spinner } from './Spinner';

pkg/interface/src/views/components/GroupSearch.tsx

@@ -5,7 +5,7 @@ import { useField } from "formik";
 import styled from "styled-components";
 
 import { DropdownSearch } from "./DropdownSearch";
-import { Associations, Association } from "../types/metadata-update";
+import { Associations, Association } from "~/types/metadata-update";
 
 interface InviteSearchProps {
   disabled?: boolean;
@@ -24,6 +24,11 @@ const CandidateBox = styled(Box)<{ selected: boolean }>`
   }
 `;
 
+const ClickableText = styled(Text)`
+  pointer: cursor;
+
+`;
+
 const Candidate = ({ title, selected, onClick }) => (
   <CandidateBox
     onClick={onClick}
@@ -92,9 +97,9 @@ export function GroupSearch(props: InviteSearchProps) {
       renderChoice={({ candidate, onRemove }) => (
         <Box px={2} py={1} border={1} borderColor="washedGrey" fontSize={0}>
           {candidate.metadata.title}
-          <Text ml={2} onClick={onRemove}>
+          <ClickableText ml={2} onClick={onRemove}>
             x
-          </Text>
+          </ClickableText>
         </Box>
       )}
       value={group}