mirror of
https://github.com/ilyakooo0/urbit.git
synced 2024-12-11 08:55:23 +03:00
Merge pull request #2426 from urbit/mp/os1/edit-publish
publish: edit notebook settings
This commit is contained in:
ixv
GitHub
commit
cd2e57a9c2
@ -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);
|
||||
this.props.history.push('/~publish');
|
||||
window.api.setSpinner(true);
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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"];
|
||||
|
||||
Loading…
Reference in New Issue
Block a user