publish: add groupify frontend

pkg/interface/publish/src/js/components/lib/notebook.js

@@ -99,7 +99,7 @@ export class Notebook extends Component {
                   list={notesList}
                   host={props.ship}
                   notebookName={props.book}
-                  contacts={props.contacts}
+                  contacts={props.notebookContacts}
                   />
         break;
       case "about":
@@ -119,6 +119,8 @@ export class Notebook extends Component {
                   book={this.props.book}
                   notebook={notebook}
                   groups={this.props.groups}
+                  contacts={this.props.contacts}
+                  associations={this.props.associations}
                   history={this.props.history}/>
         break;
       default:
@@ -126,8 +128,8 @@ export class Notebook extends Component {
     }
 
     // displaying nicknames, sigil colors for contacts
-    let contact = !!(props.ship.substr(1) in props.contacts)
-      ? props.contacts[props.ship.substr(1)] : false;
+    let contact = !!(props.ship.substr(1) in props.notebookContacts)
+      ? props.notebookContacts[props.ship.substr(1)] : false;
     let name = props.ship;
     if (contact) {
       name = (contact.nickname.length > 0)

pkg/interface/publish/src/js/components/lib/settings.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { writeText } from '../../lib/util';
 import { Spinner } from './icons/icon-spinner';
+import { InviteSearch } from '/components/lib/invite-search';
 
 export class Settings extends Component {
   constructor(props){
@@ -10,12 +11,16 @@ export class Settings extends Component {
       description: "",
       comments: false,
       disabled: false,
-      type: "Editing"
+      type: "Editing",
+      targetGroup: null,
+      inclusive: false,
     }
     this.deleteNotebook = this.deleteNotebook.bind(this);
     this.changeTitle = this.changeTitle.bind(this);
     this.changeDescription = this.changeDescription.bind(this);
     this.changeComments = this.changeComments.bind(this);
+    this.changeTargetGroup = this.changeTargetGroup.bind(this);
+    this.changeInclusive = this.changeInclusive.bind(this);
   }
 
   componentDidMount() {
@@ -84,6 +89,112 @@ export class Settings extends Component {
     });
   }
 
+  changeTargetGroup(target) {
+    if (target.groups.length === 1) {
+      this.setState({ targetGroup: target.groups[0] });
+    } else {
+      this.setState({ targetGroup: null });
+    }
+  }
+
+  changeInclusive(event) {
+    this.setState({ inclusive: !!event.target.checked });
+  }
+
+  groupifyNotebook() {
+    const { props, state } = this;
+
+    this.setState({
+      isLoading: true,
+      disabled: true,
+      type: 'Converting'
+    }, (() => {
+      window.api.action("publish", "publish-action", {
+        groupify: {
+          book: props.book,
+          target: state.targetGroup,
+          inclusive: state.inclusive,
+        }
+      }).then(() => this.setState({awaiting: false}));
+    }));
+  }
+
+  renderGroupify() {
+    const { props, state } = this;
+
+    const owner = (props.host.slice(1) === window.ship);
+
+    const ownedUnmanaged =
+      owner &&
+      props.notebook['writers-group-path'].slice(0, 3) === '/~/';
+
+    if (!ownedUnmanaged) {
+      return null;
+    } else {
+      // don't give the option to make inclusive if we don't own the target
+      // group
+      let targetOwned = (state.targetGroup)
+        ? state.targetGroup.slice(0, window.ship.length+3) === `/~${window.ship}/`
+        : false;
+      let inclusiveToggle = <div/>
+      if (targetOwned) {
+        //TODO toggle component into /lib
+        let inclusiveClasses = state.inclusive
+          ? "relative checked bg-green2 br3 h1 toggle v-mid z-0"
+          : "relative bg-gray4 bg-gray1-d br3 h1 toggle v-mid z-0";
+        inclusiveToggle = (
+          <div className="mt4">
+            <input
+              type="checkbox"
+              style={{ WebkitAppearance: "none", width: 28 }}
+              className={inclusiveClasses}
+              onChange={this.changeInclusive}
+            />
+            <span className="dib f9 white-d inter ml3">
+              Add all members to group
+            </span>
+            <p className="f9 gray2 pt1" style={{ paddingLeft: 40 }}>
+              Add notebook members to the group if they aren't in it yet
+            </p>
+          </div>
+        );
+      }
+
+      return (
+        <div>
+          <div className={"w-100 fl mt3 mb3"} style={{maxWidth: "29rem"}}>
+            <p className="f8 mt3 lh-copy db">Convert Notebook</p>
+            <p className="f9 gray2 db mb4">
+              Convert this notebook into a group with associated chat, or select a
+              group to add this notebook to.
+            </p>
+            <InviteSearch
+              groups={props.groups}
+              contacts={props.contacts}
+              associations={props.associations}
+              groupResults={true}
+              shipResults={false}
+              invites={{
+                groups: state.targetGroup ? [state.targetGroup] : [],
+                ships: []
+              }}
+              setInvite={this.changeTargetGroup}
+            />
+            {inclusiveToggle}
+            <button
+               onClick={this.groupifyNotebook.bind(this)}
+               className={"dib f9 black gray4-d bg-gray0-d ba pa2 mt4 b--black b--gray1-d pointer"}
+               disabled={this.state.disabled}>
+              Convert to group
+            </button>
+          </div>
+        </div>
+      );
+    }
+  }
+
+
+
   render() {
     let commentsSwitchClasses = (this.state.comments)
       ? "relative checked bg-green2 br3 h1 toggle v-mid z-0"
@@ -115,6 +226,7 @@ export class Settings extends Component {
       return (
         <div className="flex-column">
           {copyShortcode}
+          {this.renderGroupify()}
           <p className="f9 mt6 lh-copy db">Delete Notebook</p>
           <p className="f9 gray2 db mb4">
             Permanently delete this notebook. (All current members will no

pkg/interface/publish/src/js/components/root.js

@@ -120,6 +120,7 @@ export class Root extends Component {
 
           let bookGroupPath =
           state.notebooks[ship][notebook]["subscribers-group-path"];
+
           let notebookContacts = (bookGroupPath in contacts)
             ? contacts[bookGroupPath] : {};
 
@@ -166,7 +167,9 @@ export class Root extends Component {
                   ship={ship}
                   book={notebook}
                   groups={state.groups}
-                  contacts={notebookContacts}
+                  contacts={contacts}
+                  notebookContacts={notebookContacts}
+                  associations={associations.contacts}
                   sidebarShown={state.sidebarShown}
                   popout={popout}
                   permissions={state.permissions}
@@ -249,4 +252,4 @@ export class Root extends Component {
   }
 }
 
-export default Root;
+export default Root;