78 lines
2.8 KiB
JavaScript
78 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 () {
|
|
const { claim, fileName } = this.props;
|
|
if (!claim) {
|
|
this.setClaimName(fileName);
|
|
}
|
|
}
|
|
componentWillReceiveProps ({ claim, fileName }) {
|
|
if (!claim) {
|
|
return this.setClaimName(fileName);
|
|
}
|
|
this.checkClaimIsAvailable(claim);
|
|
}
|
|
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;
|
|
}
|
|
setClaimName (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(isAvailable => {
|
|
console.log('checkClaimIsAvailable request response:', isAvailable);
|
|
if (isAvailable) {
|
|
this.props.onUrlError(null);
|
|
} else {
|
|
this.props.onUrlError('That url has already been claimed');
|
|
}
|
|
})
|
|
.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;
|