import PropTypes from 'prop-types';
|
import { Component } from "react";
|
import { Modal, Button, FormGroup, ControlLabel, FormControl, HelpBlock } from "react-bootstrap";
|
import "./PlatformDialog.scss";
|
|
export default class PlatformDialog extends Component {
|
static defaultProps = {
|
platform: null,
|
};
|
static propTypes = {
|
onHide: PropTypes.func.isRequired,
|
onSubmit: PropTypes.func.isRequired,
|
platform: PropTypes.object,
|
apiURL: PropTypes.string.isRequired,
|
}
|
|
constructor(props){
|
super(props);
|
|
this.state = {
|
folderUrl: "",
|
fetchedFolder: null,
|
fetching: false,
|
};
|
}
|
|
handleChange = e => {
|
this.setState({folderUrl: e.target.value});
|
this.verifyFolderUrl(e.target.value);
|
}
|
handleSubmit = e => this.props.onSubmit(this.state.fetchedFolder);
|
|
verifyFolderUrl = (folderUrl) => {
|
if (this.props.platform == null) {
|
this.setState({fetching: false, fetchedFolder: null});
|
} else {
|
this.setState({fetching: true});
|
$.getJSON(`${this.props.apiURL}/platforms/${this.props.platform.name}/verify`, {folderUrl: folderUrl})
|
.done(data => this.setState({fetching: false, fetchedFolder: data.folder}))
|
.fail(() => this.setState({fetching: false, fetchedFolder: null}))
|
}
|
}
|
|
getValidationState = () => {
|
if (this.state.folderUrl === "" || this.state.fetching === true) {
|
return null;
|
} else if (this.state.fetchedFolder == null){
|
return "error";
|
} else {
|
return "success";
|
}
|
}
|
|
render() {
|
const {
|
onHide,
|
platform,
|
} = this.props;
|
|
const title = "Import from " + (platform !== null ? platform.name : "Platform");
|
const isVisible = platform !== null && platform.type === "platform";
|
return (
|
<Modal className={"folder-select"} onHide={onHide} show={isVisible}>
|
<Modal.Header closeButton>
|
<Modal.Title>
|
{title}
|
</Modal.Title>
|
</Modal.Header>
|
<Modal.Body>
|
<form>
|
<FormGroup controlId="folderUrl" validationState={this.getValidationState()}>
|
<ControlLabel>Folder/Album URL</ControlLabel>
|
<FormControl
|
type="url"
|
placeholder={platform !== null ? platform.folder_url_example : "Enter a folder url"}
|
onChange={this.handleChange}
|
/>
|
<FormControl.Feedback />
|
<HelpBlock>Please enter a valid folder/album URL. We will import all images from that folder.</HelpBlock>
|
</FormGroup>
|
</form>
|
</Modal.Body>
|
<Modal.Footer>
|
<Button onClick={onHide}>Close</Button>
|
<Button
|
bsStyle="primary"
|
disabled={this.state.fetchedFolder === null}
|
onClick={this.handleSubmit}
|
>
|
<i className={"fa fa-upload"} />
|
Import
|
</Button>
|
</Modal.Footer>
|
</Modal>
|
);
|
}
|
}
|
