Merge pull request #2426 from urbit/mp/os1/edit-publish

publish: edit notebook settings

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

@@ -2,8 +2,66 @@ import React, { Component } from 'react';
 
 export class Settings extends Component {
   constructor(props){
-    super(props)
+    super(props);
+    this.state = {
+      title: "",
+      description: "",
+      comments: false,
+      disabled: 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);
+  }
+
+  componentDidMount() {
+    const { props } = this;
+    if (props.notebook) {
+      this.setState({
+        title: props.notebook.title,
+        description: props.notebook.about,
+        comments: props.notebook.comments
+      })
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    const { props } = this;
+    if (prevProps !== this.props) {
+      if (props.notebook) {
+        this.setState({
+          title: props.notebook.title,
+          description: props.notebook.about,
+          comments: props.notebook.comments
+        })
+      }
+    }
+  }
+
+  changeTitle(event) {
+    this.setState({title: event.target.value});
+  }
+
+  changeDescription(event) {
+    this.setState({description: event.target.value});
+  }
+
+  changeComments() {
+    this.setState({comments: !this.state.comments}, (() => {
+      window.api.setSpinner(true);
+      window.api.action("publish", "publish-action", {
+        "edit-book": {
+          book: this.props.book,
+          title: this.props.notebook.title,
+          about: this.props.notebook.about,
+          coms: this.state.comments,
+          group: null
+        }
+      }).then(() => {
+        window.api.setSpinner(false);
+      })
+    }));
   }
 
   deleteNotebook(){
@@ -12,27 +70,145 @@ export class Settings extends Component {
         book: this.props.book
       }
     }
-    window.api.action("publish", "publish-action", action);
+    window.api.setSpinner(true);
-    this.props.history.push('/~publish');
+    window.api.action("publish", "publish-action", action).then(() => {
+      window.api.setSpinner(false);
+      this.props.history.push("/~publish");
+    });
   }
 
   render() {
+    let commentsSwitchClasses = (this.state.comments)
+      ? "relative checked bg-green2 br3 h1 toggle v-mid z-0"
+      : "relative bg-gray4 bg-gray1-d br3 h1 toggle v-mid z-0";
+
+    let copyShortcode = <div>
+      <p className="f9 mt3 lh-copy">Share</p>
+      <p className="f9 gray2 mb4">Share a shortcode to join this notebook</p>
+      <div className="relative w-100 flex" style={{ maxWidth: "29rem" }}>
+        <input
+          className={"f8 mono ba b--gray3 b--gray2-d bg-gray0-d white-d " +
+            "pa3 db w-100 flex-auto mr3"}
+          disabled={true}
+          value={`${this.props.host}/${this.props.book}` || ""}
+        />
+        <span className="f8 pointer absolute pa3 inter"
+          style={{ right: 12, top: 1 }}
+          ref="copy"
+          onClick={() => {
+            navigator.clipboard.writeText(`${this.props.host}/${this.props.book}`);
+            this.refs.copy.innerText = "Copied"
+          }}>
+            Copy
+          </span>
+      </div>
+    </div>
+
     if (this.props.host.slice(1) === window.ship) {
       return (
         <div className="flex-column">
-          <p className="f9 mt3 lh-copy db">Delete Notebook</p>
+          {copyShortcode}
+          <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 longer see this notebook)
+            Permanently delete this notebook. (All current members will no
+            longer see this notebook)
           </p>
-          <button className="bg-transparent b--red2 red2 pointer dib f9 ba pa2"
+          <button
+            className="bg-transparent b--red2 red2 pointer dib f9 ba pa2"
             onClick={this.deleteNotebook}>
             Delete this notebook
           </button>
+          <p className="f9 mt6 lh-copy">Rename</p>
+          <p className="f9 gray2 db mb4">Change the name of this notebook</p>
+          <div className="relative w-100 flex" style={{ maxWidth: "29rem" }}>
+            <input
+              className={
+                "f8 ba b--gray3 b--gray2-d bg-gray0-d white-d " +
+                "focus-b--black focus-b--white-d pa3 db w-100 flex-auto mr3"
+              }
+              value={this.state.title}
+              onChange={this.changeTitle}
+              disabled={this.state.disabled}
+            />
+            <span
+              className="f8 absolute pa3 inter pointer"
+              style={{ right: 12, top: 1 }}
+              ref="rename"
+              onClick={() => {
+                  this.setState({disabled: true});
+                  window.api.setSpinner(true);
+                  window.api
+                    .action("publish", "publish-action", {
+                      "edit-book": {
+                        book: this.props.book,
+                        title: this.state.title,
+                        about: this.props.notebook.about,
+                        coms: this.props.notebook.comments,
+                        group: null
+                      }
+                    })
+                    .then(() => {
+                      this.setState({disabled: false})
+                      this.refs.rename.innerText = "Saved";
+                      window.api.setSpinner(false);
+                    });
+              }}>
+              Save
+            </span>
+          </div>
+          <p className="f9 mt6 lh-copy">Change description</p>
+          <p className="f9 gray2 db mb4">Change the description of this notebook</p>
+          <div className="relative w-100 flex" style={{ maxWidth: "29rem" }}>
+            <input
+              className={
+                "f8 ba b--gray3 b--gray2-d bg-gray0-d white-d " +
+                "focus-b--black focus-b--white-d pa3 db w-100 flex-auto mr3"
+              }
+              value={this.state.description}
+              onChange={this.changeDescription}
+            />
+            <span
+              className="f8 absolute pa3 inter pointer"
+              style={{ right: 12, top: 1 }}
+              ref="description"
+              onClick={() => {
+                this.setState({ disabled: true });
+                  window.api.setSpinner(true);
+                  window.api
+                    .action("publish", "publish-action", {
+                      "edit-book": {
+                        book: this.props.book,
+                        title: this.props.notebook.title,
+                        about: this.state.description,
+                        coms: this.props.notebook.comments,
+                        group: null
+                      }
+                    })
+                    .then(() => {
+                      this.setState({ disabled: false });
+                      this.refs.description.innerText = "Saved";
+                      window.api.setSpinner(false);
+                    });
+              }}>
+              Save
+            </span>
+          </div>
+          <div className="mv6">
+            <input
+              type="checkbox"
+              style={{ WebkitAppearance: "none", width: 28 }}
+              className={commentsSwitchClasses}
+              onChange={this.changeComments}
+            />
+            <span className="dib f9 white-d inter ml3">Comments</span>
+            <p className="f9 gray2 pt1" style={{ paddingLeft: 40 }}>
+            Subscribers may comment when enabled
+            </p>
+          </div>
         </div>
-
+      );
-      )
     } else {
-      return null;
+      return copyShortcode;
     }
   }
 }

pkg/interface/publish/src/js/reducers/primary.js

@@ -109,6 +109,7 @@ export class PrimaryReducer {
     let host = Object.keys(json)[0];
     let book = Object.keys(json[host])[0];
     if (state.notebooks[host] && state.notebooks[host][book]) {
+      state.notebooks[host][book]["comments"] = json[host][book]["comments"];
       state.notebooks[host][book]["date-created"] = json[host][book]["date-created"];
       state.notebooks[host][book]["num-notes"] = json[host][book]["num-notes"];
       state.notebooks[host][book]["num-unread"] = json[host][book]["num-unread"];