LBRYCommunity/spee.ch
1
0
Fork 0
Code Issues 95 Pull requests 2 Packages Projects Releases 4 Wiki Activity

got create component working

Browse source
This commit is contained in:
bill bittner 2018-01-05 16:47:55 -08:00
parent 697501410b
commit 00ce9d62f1
7 changed files with 89 additions and 155 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
public/assets/js/createChannelFunctions.js
View file

@ -8,7 +8,7 @@ function showChannelCreateInProgressDisplay () {
createProgressBar(channelProgressBar, 12);
}
// display the content that shows channle creation is done
// display the content that shows channel creation is done
function showChannelCreateDoneDisplay() {
const inProgress = document.getElementById('channel-publish-in-progress');
inProgress.hidden=true;
@ -35,14 +35,7 @@ function publishNewChannel (event) {
.then(result => {
setUserCookies(result.channelName, result.channelClaimId, result.shortChannelId);
showChannelCreateDoneDisplay();
// if user is on the home page, update the needed elements without reloading
if (window.location.pathname === '/') {
replaceChannelOptionInPublishChannelSelect(result.channelName);
replaceChannelOptionInNavBarChannelSelect(result.channelName);
// if user is not on home page, redirect to home page
} else {
window.location = '/';
}
window.location = '/';
})
.catch(error => {
if (error.name === 'ChannelNameError' || error.name === 'ChannelPasswordError'){

49
public/assets/js/loginFunctions.js
View file

@ -1,43 +1,3 @@
function replaceChannelOptionInPublishChannelSelect(loggedInChannel) {
// remove the old channel option
const oldChannel = document.getElementById('publish-channel-select-channel-option')
if (oldChannel){
oldChannel.parentNode.removeChild(oldChannel);
}
// create new channel option
const newChannelOption = document.createElement('option');
newChannelOption.setAttribute('value', loggedInChannel);
newChannelOption.setAttribute('id', 'publish-channel-select-channel-option');
newChannelOption.setAttribute('selected', '');
newChannelOption.innerText = loggedInChannel;
// add the new option
const channelSelect = document.getElementById('channel-name-select');
channelSelect.insertBefore(newChannelOption, channelSelect.firstChild);
// carry out channel selection
toggleSelectedChannel(loggedInChannel);
}
function replaceChannelOptionInNavBarChannelSelect (loggedInChannel) {
// remove the old channel option
const oldChannel = document.getElementById('nav-bar-channel-select-channel-option');
if (oldChannel){
oldChannel.parentNode.removeChild(oldChannel);
}
// create new channel option & select it
const newChannelOption = document.createElement('option');
newChannelOption.setAttribute('value', loggedInChannel);
newChannelOption.setAttribute('id', 'nav-bar-channel-select-channel-option');
newChannelOption.setAttribute('selected', '');
newChannelOption.innerText = loggedInChannel;
// add the new option
const channelSelect = document.getElementById('nav-bar-channel-select');
channelSelect.style.display = 'inline-block';
channelSelect.insertBefore(newChannelOption, channelSelect.firstChild);
// hide login
const navBarLoginLink = document.getElementById('nav-bar-login-link');
navBarLoginLink.style.display = 'none';
}
function loginToChannel (event) {
const userName = document.getElementById('channel-login-name-input').value;
const password = document.getElementById('channel-login-password-input').value;
@ -50,14 +10,7 @@ function loginToChannel (event) {
.then(result => {
setUserCookies(result.channelName, result.channelClaimId, result.shortChannelId);
// if user is on the home page, update the needed elements without reloading
if (window.location.pathname === '/') {
replaceChannelOptionInPublishChannelSelect(result.channelName);
replaceChannelOptionInNavBarChannelSelect(result.channelName);
// if user is not on home page, redirect to home page
} else {
window.location = '/';
}
window.location = '/';
})
.catch(error => {
const loginErrorDisplayElement = document.getElementById('login-error-display-element');

41
public/assets/js/publishFileFunctions.js
View file

@ -1,16 +1,6 @@
var stagedFiles = null;
const publishFileFunctions = {
cancelPublish: function () {
window.location.href = '/';
},
hidePrimaryDropzone: function () {
const primaryDropzone = document.getElementById('primary-dropzone');
const publishForm = document.getElementById('publish-form');
primaryDropzone.setAttribute('class', 'hidden');
publishForm.setAttribute('class', 'row')
},
returnNullOrChannel: function () {
const channelRadio = document.getElementById('channel-radio');
if (channelRadio.checked) {
@ -146,37 +136,6 @@ const publishFileFunctions = {
// redirect the user
window.location.href = showUrl;
},
hidePublishTools: function () {
const publishFormWrapper = document.getElementById('publish-form');
publishFormWrapper.setAttribute('class', 'hidden');
},
// publish status functions
showPublishStatus: function () {
const publishStatus = document.getElementById('publish-status');
publishStatus.setAttribute('class', 'row row--tall flex-container--column flex-container--center-center');
},
updatePublishStatus: function (msg){
const publishUpdate = document.getElementById('publish-update');
publishUpdate.innerHTML = msg;
},
// progress bar functions
showPublishProgressBar: function (){
const publishProgressBar = document.getElementById('publish-progress-bar');
createProgressBar(publishProgressBar, 12);
},
hidePublishProgressBar: function (){
const publishProgressBar = document.getElementById('publish-progress-bar');
publishProgressBar.hidden = true;
},
// upload percent functions
updateUploadPercent: function (msg){
const uploadPercent = document.getElementById('upload-percent');
uploadPercent.innerHTML = msg;
},
hideUploadPercent: function (){
const uploadPercent = document.getElementById('upload-percent');
uploadPercent.hidden = true;
},
}

12
public/assets/js/validationFunctions.js
View file

@ -65,11 +65,6 @@ const validationFunctions = {
throw new ChannelPasswordError("You must enter a password for you channel");
}
},
cleanseClaimName: function (name) {
name = name.replace(/\s+/g, '-'); // replace spaces with dashes
name = name.replace(/[^A-Za-z0-9-]/g, ''); // remove all characters that are not A-Z, a-z, 0-9, or '-'
return name;
},
// validation functions to check claim & channel name eligibility as the inputs change
isNameAvailable: function (name, apiUrl) {
const url = apiUrl + name;
@ -116,11 +111,6 @@ const validationFunctions = {
that.showError(errorDisplayElement, error.message);
}
},
checkClaimName: function (name) {
const successDisplayElement = document.getElementById('input-success-claim-name');
const errorDisplayElement = document.getElementById('input-error-claim-name');
this.checkAvailability(name, successDisplayElement, errorDisplayElement, this.validateClaimName, 'Sorry, that ending is already taken', '/api/claim-is-available/');
},
checkChannelName: function (name) {
const successDisplayElement = document.getElementById('input-success-channel-name');
const errorDisplayElement = document.getElementById('input-error-channel-name');
@ -227,4 +217,4 @@ const validationFunctions = {
resolve();
});
}
};
};

103
react/components/channelCreateForm.jsx
View file

@ -1,24 +1,5 @@
import React from 'react';
function ChannelSuccess (message) {
return (
<div>
<p>{this.props.message}</p>
</div>
);
}
function ChannelInProgress () {
return (
<div id="channel-publish-in-progress">
<p>Creating your new channel. This may take a few seconds...</p>
<div id="create-channel-progress-bar"></div>
</div>
);
}
class ChannelCreateForm extends React.Component {
constructor (props) {
super(props);
@ -57,39 +38,75 @@ class ChannelCreateForm extends React.Component {
that.setState({error: error.message});
});
}
validatePassword (password) {
if (!password || password.length < 1) {
throw new Error('Please provide a password');
}
}
createChannel (event) {
event.preventDefault();
// publishNewChannel(event)
const params = `username=${this.state.channel}&password=${this.state.password}`;
const url = '/signup';
// validate submission data
try {
this.validatePassword(this.state.password);
} catch (error) {
return this.setState({error: error.message});
}
// publish the channel
const that = this;
this.setState({status: 'We are publishing your new channel. Sit tight...'});
this.props.makePostRequest(url, params)
.then(result => {
that.props.updateLoggedInChannelOutsideReact(result.channelName, result.channelClaimId, result.shortChannelId);
that.props.updateUploaderState('loggedInChannelName', result.channelName);
that.props.updateUploaderState('loggedInChannelShortId', result.shortChannelId);
that.props.selectOption(result.channelName);
})
.catch(error => {
console.log('create channel failure:', error);
if (error.message) {
this.setState({'error': error.message});
} else {
this.setState({'error': 'Unfortunately, we encountered an error while creating your channel. Please let us know in Discord!'});
}
});
}
render () {
return (
<form id="publish-channel-form">
<p id="input-error-channel-name" className="info-message-placeholder info-message--failure">{this.state.error}</p>
<div className="row row--wide row--short">
<div className="column column--3 column--sml-10">
<label className="label" htmlFor="new-channel-name">Name:</label>
</div><div className="column column--6 column--sml-10">
<div className="input-text--primary flex-container--row flex-container--left-bottom">
<span>@</span>
<input type="text" name="new-channel-name" id="new-channel-name" className="input-text" placeholder="exampleChannelName" value={this.channel} onChange={this.handleChannelInput} />
<div>
{ !this.state.status ? (
<form id="publish-channel-form">
<p id="input-error-channel-name" className="info-message-placeholder info-message--failure">{this.state.error}</p>
<div className="row row--wide row--short">
<div className="column column--3 column--sml-10">
<label className="label" htmlFor="new-channel-name">Name:</label>
</div><div className="column column--6 column--sml-10">
<div className="input-text--primary flex-container--row flex-container--left-bottom">
<span>@</span>
<input type="text" name="channel" id="new-channel-name" className="input-text" placeholder="exampleChannelName" value={this.channel} onChange={this.handleChannelInput} />
<span id="input-success-channel-name" className="info-message--success">{'\u2713'}</span>
</div>
</div>
</div>
<div className="row row--wide row--short">
<div className="column column--3 column--sml-10">
<label className="label" htmlFor="new-channel-password">Password:</label>
</div><div className="column column--6 column--sml-10">
<div className="input-text--primary">
<input type="password" name="password" id="new-channel-password" className="input-text" placeholder="" value={this.password} onChange={this.handleInput} />
</div>
</div>
</div>
</div>
<div className="row row--wide row--short">
<div className="column column--3 column--sml-10">
<label className="label" htmlFor="new-channel-password">Password:</label>
</div><div className="column column--6 column--sml-10">
<div className="input-text--primary">
<input type="password" name="new-channel-password" id="new-channel-password" className="input-text" placeholder="" value={this.password} onChange={this.handleInput} />
</div>
</div>
</div>
<div className="row row--wide">
<button className="button--primary" onClick={this.createChannel}>Create</button>
</div>
</form>
<div className="row row--wide">
<button className="button--primary" onClick={this.createChannel}>Create</button>
</div>
</form>
) : (
<p>{this.state.status}</p>
)}
</div>
);
}
}

26
react/components/channelSelector.jsx
View file

@ -13,11 +13,12 @@ class ChannelSelector extends React.Component {
};
this.handleSelection = this.handleSelection.bind(this);
this.selectOption = this.selectOption.bind(this);
this.replaceChannelSelectionInNavBar = this.replaceChannelSelectionInNavBar.bind(this);
this.updateLoggedInChannelOutsideReact = this.updateLoggedInChannelOutsideReact.bind(this);
}
componentWillMount () {
if (this.props.loggedInChannelName) {
this.setState({ optionState: null });
this.setState({ optionState: this.props.loggedInChannelName });
}
}
handleSelection (event) {
@ -27,10 +28,30 @@ class ChannelSelector extends React.Component {
selectOption (option) {
this.setState({optionState: option});
}
replaceChannelSelectionInNavBar (loggedInChannel) {
// remove the old channel option
const oldChannel = document.getElementById('nav-bar-channel-select-channel-option');
if (oldChannel) {
oldChannel.parentNode.removeChild(oldChannel);
}
// create new channel option & select it
const newChannelOption = document.createElement('option');
newChannelOption.setAttribute('value', loggedInChannel);
newChannelOption.setAttribute('id', 'nav-bar-channel-select-channel-option');
newChannelOption.setAttribute('selected', '');
newChannelOption.innerText = loggedInChannel;
// add the new option
const channelSelect = document.getElementById('nav-bar-channel-select');
channelSelect.style.display = 'inline-block';
channelSelect.insertBefore(newChannelOption, channelSelect.firstChild);
// hide login
const navBarLoginLink = document.getElementById('nav-bar-login-link');
navBarLoginLink.style.display = 'none';
}
updateLoggedInChannelOutsideReact (channelName, channelClaimId, shortChannelId) {
// update anywhere on page that needs to be updated outside of this component
setUserCookies(channelName, channelClaimId, shortChannelId);
replaceChannelOptionInNavBarChannelSelect(channelName);
this.replaceChannelSelectionInNavBar(channelName);
}
render () {
return (
@ -61,6 +82,7 @@ class ChannelSelector extends React.Component {
<ChannelCreateForm
cleanseInput={this.props.cleanseInput}
makeGetRequest={this.props.makeGetRequest}
makePostRequest={this.props.makePostRequest}
updateLoggedInChannelOutsideReact={this.updateLoggedInChannelOutsideReact}
updateUploaderState={this.props.updateUploaderState}
selectOption={this.selectOption}

2
react/components/publishForm.jsx
View file

@ -104,7 +104,7 @@ class PublishForm extends React.Component {
<div className="row row--padded row--wide">
<div className="input-error" id="input-error-publish-submit" hidden="true">{this.props.inputError}</div>
<button id="publish-submit" className="button--primary button--large" onClick={this.publish}>Upload</button>
<button id="publish-submit" className="button--primary button--large" onClick={this.publish}>Publish</button>
</div>
<div className="row row--short align-content-center">