75 lines
2.8 KiB
JavaScript
75 lines
2.8 KiB
JavaScript
import React from 'react';
|
|
import request from 'utils/request';
|
|
import UrlMiddle from 'components/PublishUrlMiddleDisplay';
|
|
|
|
class PublishUrlInput extends React.Component {
|
|
constructor (props) {
|
|
super(props);
|
|
this.handleInput = this.handleInput.bind(this);
|
|
}
|
|
componentDidMount () {
|
|
if (!this.props.claim || this.props.claim === '') {
|
|
this.setClaimNameFromFileName();
|
|
}
|
|
}
|
|
componentWillReceiveProps ({claim: newClaim}) {
|
|
if (newClaim) {
|
|
this.checkClaimIsAvailable(newClaim);
|
|
} else {
|
|
this.props.onUrlError('Please enter a URL');
|
|
}
|
|
}
|
|
handleInput (event) {
|
|
let value = event.target.value;
|
|
value = this.cleanseInput(value);
|
|
// update the state
|
|
this.props.onClaimChange(value);
|
|
}
|
|
cleanseInput (input) {
|
|
input = input.replace(/\s+/g, '-'); // replace spaces with dashes
|
|
input = input.replace(/[^A-Za-z0-9-]/g, ''); // remove all characters that are not A-Z, a-z, 0-9, or '-'
|
|
return input;
|
|
}
|
|
setClaimNameFromFileName () {
|
|
const fileName = this.props.fileName;
|
|
const fileNameWithoutEnding = fileName.substring(0, fileName.lastIndexOf('.'));
|
|
const cleanClaimName = this.cleanseInput(fileNameWithoutEnding);
|
|
this.props.onClaimChange(cleanClaimName);
|
|
}
|
|
checkClaimIsAvailable (claim) {
|
|
request(`/api/claim/availability/${claim}`)
|
|
.then(validatedClaimName => {
|
|
console.log('api/claim/availability response:', validatedClaimName);
|
|
this.props.onUrlError(null);
|
|
})
|
|
.catch((error) => {
|
|
this.props.onUrlError(error.message);
|
|
});
|
|
}
|
|
render () {
|
|
return (
|
|
<div>
|
|
<p id="input-error-claim-name" className="info-message-placeholder info-message--failure">{this.props.urlError}</p>
|
|
<div className="column column--3 column--sml-10">
|
|
<label className="label">URL:</label>
|
|
</div><div className="column column--7 column--sml-10 input-text--primary span--relative">
|
|
|
|
<span className="url-text--secondary">spee.ch / </span>
|
|
|
|
<UrlMiddle
|
|
publishInChannel={this.props.publishInChannel}
|
|
selectedChannel={this.props.selectedChannel}
|
|
loggedInChannelName={this.props.loggedInChannelName}
|
|
loggedInChannelShortId={this.props.loggedInChannelShortId}
|
|
/>
|
|
|
|
<input type="text" id="claim-name-input" className="input-text" name='claim' placeholder="your-url-here" onChange={this.handleInput} value={this.props.claim}/>
|
|
{ (this.props.claim && !this.props.urlError) && <span id="input-success-claim-name" className="info-message--success span--absolute">{'\u2713'}</span> }
|
|
{ this.props.urlError && <span id="input-success-channel-name" className="info-message--failure span--absolute">{'\u2716'}</span> }
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default PublishUrlInput;
|