slate/components/sidebars/SidebarCreateSlate.js
2020-10-21 13:26:17 -07:00

236 lines
5.8 KiB
JavaScript

import * as React from "react";
import * as Strings from "~/common/strings";
import * as Constants from "~/common/constants";
import * as System from "~/components/system";
import * as Validations from "~/common/validations";
import * as Actions from "~/common/actions";
import { dispatchCustomEvent } from "~/common/custom-events";
import { css } from "@emotion/react";
const SLATE_LIMIT = 50;
const STYLES_GROUP = css`
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
overflow-wrap: break-word;
white-space: pre-wrap;
margin-top: 8px;
`;
const STYLES_HEADER = css`
font-family: ${Constants.font.semiBold};
margin-top: 32px;
`;
export default class SidebarCreateSlate extends React.Component {
state = {
name: "",
public: true,
body: "",
loading: false,
};
_handleSubmit = async () => {
if (this.props.viewer.slates.length >= SLATE_LIMIT) {
dispatchCustomEvent({
name: "create-alert",
detail: {
alert: {
message: `You have reached the limit of ${SLATE_LIMIT} Slates!`,
},
},
});
return;
}
this.setState({ loading: true });
if (!Validations.slatename(this.state.name)) {
dispatchCustomEvent({
name: "create-alert",
detail: {
alert: { message: "Please provide a name between 1-48 characters." },
},
});
this.setState({ loading: false });
return;
}
const response = await this.props.onSubmit({
type: "CREATE_SLATE",
name: this.state.name,
public: this.state.public,
body: this.state.body,
});
if (!response) {
dispatchCustomEvent({
name: "create-alert",
detail: {
alert: {
message:
"We're having trouble connecting right now. Please try again later",
},
},
});
return;
}
if (response.error) {
dispatchCustomEvent({
name: "create-alert",
detail: { alert: { decorator: response.decorator } },
});
return;
}
if (this.props.sidebarData && this.props.sidebarData.files) {
let data = this.props.sidebarData.files.map((file) => {
return { title: file.name, ...file };
});
const addResponse = await Actions.addFileToSlate({
slate: response.slate,
data,
repost: this.props.sidebarData.repost,
});
if (!addResponse) {
dispatchCustomEvent({
name: "create-alert",
detail: {
alert: {
message:
"We're having trouble connecting right now. Please try again later",
},
},
});
return;
}
if (addResponse.error) {
dispatchCustomEvent({
name: "create-alert",
detail: { alert: { decorator: response.decorator } },
});
return;
}
const { added, skipped } = addResponse;
let message = `${added || 0} file${added !== 1 ? "s" : ""} uploaded. `;
if (skipped) {
message += `${skipped || 0} duplicate / existing file${
added !== 1 ? "s were" : " was"
} skipped.`;
}
if (message) {
dispatchCustomEvent({
name: "create-alert",
detail: {
alert: { message, status: !added ? null : "INFO" },
},
});
}
await this.props.onRehydrate();
dispatchCustomEvent({
name: "remote-update-carousel",
detail: null,
});
}
this.setState({ loading: false });
this.props.onAction({
type: "NAVIGATE",
value: response.slate.id,
data: response.slate,
});
};
_handleCancel = () => {
this.props.onCancel();
};
_handleChange = (e) => {
this.setState({ [e.target.name]: e.target.value });
};
render() {
return (
<div>
<System.P
style={{
fontFamily: Constants.font.semiBold,
fontSize: Constants.typescale.lvl3,
marginBottom: "64px",
}}
>
Create slate
</System.P>
<System.P css={STYLES_HEADER}>Name</System.P>
<System.Input
name="name"
style={{ marginTop: 12 }}
placeholder="Slate name..."
value={this.state.name}
onChange={this._handleChange}
onSubmit={this._handleSubmit}
/>
<System.P style={{ marginTop: 12 }}>
Your slate URL will be:{" "}
<a
href={`${this.props.viewer.username}/${Strings.createSlug(
this.state.name
)}`}
target="_blank"
>
https://slate.host/
{this.props.viewer.username}/{Strings.createSlug(this.state.name)}
</a>
</System.P>
<System.P css={STYLES_HEADER}>Description</System.P>
<System.Textarea
style={{ marginTop: 12 }}
name="body"
value={this.state.body}
placeholder="Slate description..."
onChange={this._handleChange}
onSubmit={this._handleSubmit}
/>
<System.P css={STYLES_HEADER} style={{ marginTop: 48 }}>
Privacy
</System.P>
<div css={STYLES_GROUP}>
<System.P style={{ marginRight: 16 }}>
{this.state.public
? "Public. Anyone can search for and view this slate."
: "Private. Only you can view this slate."}
</System.P>
<System.Toggle
name="public"
onChange={this._handleChange}
active={this.state.public}
/>
</div>
<System.ButtonPrimary
full
style={{ marginTop: 48 }}
onClick={this._handleSubmit}
loading={this.state.loading}
>
Create {this.state.name}
</System.ButtonPrimary>
</div>
);
}
}