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

fixed @undefined bug in channel creator

Browse source
This commit is contained in:
bill bittner 2018-01-12 14:27:34 -08:00
parent ac5d95f674
commit 6b51c9ebd0
6 changed files with 68 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
react/actions/index.js
View file

@ -6,6 +6,7 @@ export const CLAIM_UPDATE = 'CLAIM_UPDATE';
export const CHANNEL_UPDATE = 'CHANNEL_UPDATE';
export const SET_PUBLISH_IN_CHANNEL = 'SET_PUBLISH_IN_CHANNEL';
export const PUBLISH_STATUS_UPDATE = 'PUBLISH_STATUS_UPDATE';
export const ERROR_UPDATE = 'ERROR_UPDATE';
// export action creators
export function selectFile (file) {
@ -59,3 +60,11 @@ export function updatePublishStatus (status, message) {
message,
};
};
export function updateError (name, value) {
return {
type: ERROR_UPDATE,
name,
value,
};
};

7
react/containers/ChannelCreateForm.jsx
View file

@ -20,6 +20,7 @@ class ChannelCreateForm extends React.Component {
this.updateIsChannelAvailable = this.updateIsChannelAvailable.bind(this);
this.checkIsChannelAvailable = this.checkIsChannelAvailable.bind(this);
this.checkIsPasswordProvided = this.checkIsPasswordProvided.bind(this);
this.makePublishChannelRequest = this.makePublishChannelRequest.bind(this);
this.createChannel = this.createChannel.bind(this);
}
cleanseChannelInput (input) {
@ -88,12 +89,12 @@ class ChannelCreateForm extends React.Component {
resolve();
});
}
makeCreateChannelRequest (channel, password) {
makePublishChannelRequest (channel, password) {
const params = `username=${channel}&password=${password}`;
return new Promise((resolve, reject) => {
makePostRequest('/signup', params)
.then(result => {
resolve(result);
return resolve(result);
})
.catch(error => {
console.log('create channel request failed:', error);
@ -110,7 +111,7 @@ class ChannelCreateForm extends React.Component {
})
.then(() => {
that.setState({status: 'We are publishing your new channel. Sit tight...'});
return that.makeCreateChannelRequest();
return that.makePublishChannelRequest(that.state.channel, that.state.password);
})
.then(result => {
that.setState({status: null});

16
react/containers/Dropzone.jsx
View file

@ -1,16 +1,14 @@
import React from 'react';
// import PropTypes from 'prop-types';
import { selectFile } from '../actions/index';
import { selectFile, updateError } from '../actions';
import { connect } from 'react-redux';
import Preview from '../components/Preview.jsx';
import { validateFile } from '../utils/file.js';
class Dropzone extends React.Component {
constructor (props) {
super(props);
this.state = {
fileError : null,
dragOver : false,
mouseOver : false,
dimPreview: false,
@ -79,10 +77,10 @@ class Dropzone extends React.Component {
try {
validateFile(file); // validate the file's name, type, and size
} catch (error) {
return this.setState({fileError: error.message});
return this.props.onFileError(error.message);
}
// stage it so it will be ready when the publish button is clicked
this.setState({fileError: null});
this.props.onFileError(null);
this.props.onFileSelect(file);
}
}
@ -110,7 +108,7 @@ class Dropzone extends React.Component {
)}
{ this.state.mouseOver ? (
<div id="dropzone-instructions">
<p className="info-message-placeholder info-message--failure" id="input-error-file-selection">{this.state.fileError}</p>
<p className="info-message-placeholder info-message--failure" id="input-error-file-selection">{this.props.fileError}</p>
<p>Drag & drop image or video here to publish</p>
<p className="fine-print">OR</p>
<p className="blue--underlined">CHOOSE FILE</p>
@ -128,7 +126,7 @@ class Dropzone extends React.Component {
</div>
) : (
<div id="dropzone-instructions">
<p className="info-message-placeholder info-message--failure" id="input-error-file-selection">{this.state.fileError}</p>
<p className="info-message-placeholder info-message--failure" id="input-error-file-selection">{this.props.fileError}</p>
<p>Drag & drop image or video here to publish</p>
<p className="fine-print">OR</p>
<p className="blue--underlined">CHOOSE FILE</p>
@ -146,6 +144,7 @@ const mapStateToProps = state => {
return {
file : state.file,
thumbnail: state.metadata.thumbnail,
fileError: state.error.file,
};
};
@ -154,6 +153,9 @@ const mapDispatchToProps = dispatch => {
onFileSelect: (file) => {
dispatch(selectFile(file));
},
onFileError: (value) => {
dispatch(updateError('file', value));
},
};
}

39
react/containers/PublishForm.jsx
View file

@ -8,7 +8,7 @@ import PublishMetadataInputs from './PublishMetadataInputs.jsx';
import AnonymousOrChannelSelect from './AnonymousOrChannelSelect.jsx';
import { connect } from 'react-redux';
import { getCookie } from '../utils/cookies.js';
import { selectFile, clearFile, updateLoggedInChannel, updatePublishStatus } from '../actions';
import {selectFile, clearFile, updateLoggedInChannel, updatePublishStatus, updateError} from '../actions';
const LOAD_START = 'LOAD_START';
const LOADING = 'LOADING';
@ -19,10 +19,6 @@ const FAILED = 'FAILED';
class PublishForm extends React.Component {
constructor (props) {
super(props);
// set defaults
this.state = {
publishRequestError: null,
};
this.validatePublishRequest = this.validatePublishRequest.bind(this);
this.makePublishRequest = this.makePublishRequest.bind(this);
this.publish = this.publish.bind(this);
@ -46,11 +42,14 @@ class PublishForm extends React.Component {
if (!this.props.claim) {
return reject(new Error('Please enter a URL'));
}
if (this.props.urlError) {
return reject(new Error('Fix the url'));
}
// if publishInChannel is true, is a channel logged in (or selected)
if (this.props.publishInChannel && !this.props.loggedInChannel.name) {
return reject(new Error('Select "Anonymous" or log in to a channel'));
}
// tbd: is the claim available?
// is the claim available?
resolve();
});
}
@ -131,7 +130,7 @@ class PublishForm extends React.Component {
that.props.onPublishStatusChange('publish request made');
})
.catch((error) => {
that.setState({publishRequestError: error.message});
that.props.onPublishRequestError(error.message);
});
}
render () {
@ -175,7 +174,7 @@ class PublishForm extends React.Component {
</div>
<div className="row row--padded row--wide align-content-center">
<p className="info-message-placeholder info-message--failure">{this.state.publishRequestError}</p>
<p className="info-message-placeholder info-message--failure">{this.props.publishRequestError}</p>
<button id="publish-submit" className="button--primary button--large" onClick={this.publish}>Publish</button>
</div>
@ -196,15 +195,18 @@ class PublishForm extends React.Component {
const mapStateToProps = state => {
return {
file : state.file,
claim : state.claim,
title : state.metadata.title,
thumbnail : state.metadata.thumbnail,
description : state.metadata.description,
license : state.metadata.license,
nsfw : state.metadata.nsfw,
loggedInChannel : state.loggedInChannel,
publishInChannel: state.publishInChannel,
file : state.file,
claim : state.claim,
title : state.metadata.title,
thumbnail : state.metadata.thumbnail,
description : state.metadata.description,
license : state.metadata.license,
nsfw : state.metadata.nsfw,
loggedInChannel : state.loggedInChannel,
publishInChannel : state.publishInChannel,
fileError : state.error.file,
urlError : state.error.url,
publishRequestError: state.error.publishRequest,
};
};
@ -222,6 +224,9 @@ const mapDispatchToProps = dispatch => {
onPublishStatusChange: (status, message) => {
dispatch(updatePublishStatus(status, message));
},
onPublishRequestError: (value) => {
dispatch(updateError('publishRequest', value));
},
};
};

18
react/containers/PublishUrlInput.jsx
View file

@ -3,12 +3,12 @@ import { updateClaim } from '../actions/index';
import { connect } from 'react-redux';
import { makeGetRequest } from '../utils/xhr.js';
import UrlMiddle from '../components/PublishUrlMiddle.jsx';
import {updateError} from '../actions';
class UrlChooser extends React.Component {
constructor (props) {
super(props);
this.state = {
error : null,
host : 'spee.ch',
urlMiddle: null,
};
@ -27,7 +27,7 @@ class UrlChooser extends React.Component {
if (newClaim) {
this.checkClaimIsAvailable(newClaim);
} else {
this.setState({error: 'Please enter a URL'});
this.props.onUrlError('Please enter a URL');
}
}
handleInput (event) {
@ -53,19 +53,19 @@ class UrlChooser extends React.Component {
makeGetRequest(`/api/claim-is-available/${claim}`)
.then(response => {
if (response) {
that.setState({'error': null});
this.props.onUrlError(null);
} else {
that.setState({'error': 'That url has already been claimed'});
this.props.onUrlError('That url has already been claimed');
}
})
.catch((error) => {
that.setState({'error': error.message});
this.props.onUrlError(error.message);
});
}
render () {
return (
<div>
<p id="input-error-claim-name" className="info-message-placeholder info-message--failure">{this.state.error}</p>
<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">
@ -75,7 +75,7 @@ class UrlChooser extends React.Component {
<UrlMiddle publishInChannel={this.props.publishInChannel} 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.state.error) && <span id="input-success-claim-name" className="info-message--success span--absolute">{'\u2713'}</span> }
{ (this.props.claim && !this.props.urlError) && <span id="input-success-claim-name" className="info-message--success span--absolute">{'\u2713'}</span> }
</div>
</div>
);
@ -89,6 +89,7 @@ const mapStateToProps = state => {
loggedInChannelShortId: state.loggedInChannel.shortId,
publishInChannel : state.publishInChannel,
claim : state.claim,
urlError : state.error.url,
};
};
@ -97,6 +98,9 @@ const mapDispatchToProps = dispatch => {
onClaimChange: (value) => {
dispatch(updateClaim(value));
},
onUrlError: (value) => {
dispatch(updateError('url', value));
},
};
}

16
react/reducers/index.js
View file

@ -1,5 +1,5 @@
import {
CHANNEL_UPDATE, CLAIM_UPDATE, FILE_CLEAR, FILE_SELECTED, METADATA_UPDATE, PUBLISH_STATUS_UPDATE,
CHANNEL_UPDATE, CLAIM_UPDATE, ERROR_UPDATE, FILE_CLEAR, FILE_SELECTED, METADATA_UPDATE, PUBLISH_STATUS_UPDATE,
SET_PUBLISH_IN_CHANNEL,
} from '../actions';
@ -14,7 +14,11 @@ const initialState = {
status : null,
message: null,
},
error : null,
error: {
file : null,
url : null,
publishRequest: null,
},
file : null,
claim : '',
metadata: {
@ -62,11 +66,17 @@ export default function (state = initialState, action) {
});
case PUBLISH_STATUS_UPDATE:
return Object.assign({}, state, {
status: Object.assign({}, state.metadata, {
status: Object.assign({}, state.status, {
status : action.status,
message: action.message,
}),
});
case ERROR_UPDATE:
return Object.assign({}, state, {
error: Object.assign({}, state.error, {
[action.name]: action.value,
}),
});
default:
return state;
}