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

removed use of "that" where unecessary

Browse source
This commit is contained in:
bill bittner 2018-02-06 15:05:31 -08:00
parent ca4311450d
commit ae5cfa39a1
11 changed files with 57 additions and 90 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
react/components/AssetDisplay/index.js
View file

@ -11,24 +11,20 @@ class AssetDisplay extends React.Component {
error : null, error : null,
status: LOCAL_CHECK, status: LOCAL_CHECK,
}; };
this.isLocalFileAvailableOnServer = this.isLocalFileAvailableOnServer.bind(this);
this.triggerGetAssetOnServer = this.triggerGetAssetOnServer.bind(this);
} }
componentDidMount () { componentDidMount () {
const that = this;
this.isLocalFileAvailableOnServer() this.isLocalFileAvailableOnServer()
.then(isAvailable => { .then(isAvailable => {
if (!isAvailable) { if (!isAvailable) {
console.log('file is not yet available'); this.setState({status: SEARCHING});
that.setState({status: SEARCHING}); return this.triggerGetAssetOnServer();
return that.triggerGetAssetOnServer();
} }
}) })
.then(() => { .then(() => {
that.setState({status: AVAILABLE}); this.setState({status: AVAILABLE});
}) })
.catch(error => { .catch(error => {
that.setState({ this.setState({
status: UNAVAILABLE, status: UNAVAILABLE,
error : error.message, error : error.message,
}); });

5
react/components/AssetInfo/index.js
View file

@ -1,5 +1,6 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
class AssetInfo extends React.Component { class AssetInfo extends React.Component {
constructor (props) { constructor (props) {
@ -49,8 +50,8 @@ class AssetInfo extends React.Component {
<div className="row row--padded row--wide row--no-top"> <div className="row row--padded row--wide row--no-top">
<div id="show-short-link"> <div id="show-short-link">
<div className="column column--2 column--med-10"> <div className="column column--2 column--med-10">
<a className="link--primary" href={`/${this.props.shortClaimId}/${this.props.name}.${this.props.fileExt}`}><span <Link className="link--primary" to={`/${this.props.shortClaimId}/${this.props.name}.${this.props.fileExt}`}><span
className="text">Link:</span></a> className="text">Link:</span></Link>
</div> </div>
<div className="column column--8 column--med-10"> <div className="column column--8 column--med-10">
<div className="row row--short row--wide"> <div className="row row--short row--wide">

8
react/components/Preview/index.jsx
View file

@ -8,7 +8,6 @@ class Preview extends React.Component {
imgSource : '', imgSource : '',
defaultThumbnail: '/assets/img/video_thumb_default.png', defaultThumbnail: '/assets/img/video_thumb_default.png',
}; };
this.previewFile = this.previewFile.bind(this);
} }
componentDidMount () { componentDidMount () {
this.previewFile(this.props.file); this.previewFile(this.props.file);
@ -22,15 +21,14 @@ class Preview extends React.Component {
} }
} }
previewFile (file) { previewFile (file) {
const that = this;
if (file.type !== 'video/mp4') { if (file.type !== 'video/mp4') {
const previewReader = new FileReader(); const previewReader = new FileReader();
previewReader.readAsDataURL(file); previewReader.readAsDataURL(file);
previewReader.onloadend = function () { previewReader.onloadend = () => {
that.setState({imgSource: previewReader.result}); this.setState({imgSource: previewReader.result});
}; };
} else { } else {
that.setState({imgSource: (this.props.thumbnail || this.state.defaultThumbnail)}); this.setState({imgSource: (this.props.thumbnail || this.state.defaultThumbnail)});
} }
} }
render () { render () {

12
react/containers/ChannelClaimsDisplay/view.jsx
View file

@ -8,9 +8,6 @@ class ChannelClaimsDisplay extends React.Component {
this.state = { this.state = {
error: null, error: null,
}; };
this.updateClaimsData = this.updateClaimsData.bind(this);
this.showPreviousResultsPage = this.showPreviousResultsPage.bind(this);
this.showNextResultsPage = this.showNextResultsPage.bind(this);
} }
componentDidMount () { componentDidMount () {
const name = this.props.name; const name = this.props.name;
@ -24,18 +21,17 @@ class ChannelClaimsDisplay extends React.Component {
} }
updateClaimsData (name, longId, page) { updateClaimsData (name, longId, page) {
const url = `/api/channel-claims/${name}/${longId}/${page}`; const url = `/api/channel-claims/${name}/${longId}/${page}`;
const that = this;
return request(url) return request(url)
.then(({ success, message, data }) => { .then(({ success, message, data }) => {
console.log('api/channel-claims response:', data); console.log('api/channel-claims response:', data);
if (!success) { if (!success) {
return that.setState({error: message}); return this.setState({error: message});
} }
that.setState({error: null}); // move this error to redux state this.setState({error: null}); // move this error to redux state
that.props.onChannelClaimsDataUpdate(data.claims, data.currentPage, data.totalPages, data.totalResults); this.props.onChannelClaimsDataUpdate(data.claims, data.currentPage, data.totalPages, data.totalResults);
}) })
.catch((error) => { .catch((error) => {
that.setState({error: error.message}); this.setState({error: error.message});
}); });
} }
componentWillUnmount () { componentWillUnmount () {

25
react/containers/ChannelCreateForm/view.jsx
View file

@ -11,13 +11,8 @@ class ChannelCreateForm extends React.Component {
password: '', password: '',
status : null, status : null,
}; };
this.cleanseChannelInput = this.cleanseChannelInput.bind(this);
this.handleChannelInput = this.handleChannelInput.bind(this); this.handleChannelInput = this.handleChannelInput.bind(this);
this.handleInput = this.handleInput.bind(this); this.handleInput = this.handleInput.bind(this);
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); this.createChannel = this.createChannel.bind(this);
} }
cleanseChannelInput (input) { cleanseChannelInput (input) {
@ -41,18 +36,17 @@ class ChannelCreateForm extends React.Component {
this.setState({[name]: value}); this.setState({[name]: value});
} }
updateIsChannelAvailable (channel) { updateIsChannelAvailable (channel) {
const that = this;
const channelWithAtSymbol = `@${channel}`; const channelWithAtSymbol = `@${channel}`;
request(`/api/channel-is-available/${channelWithAtSymbol}`) request(`/api/channel-is-available/${channelWithAtSymbol}`)
.then(isAvailable => { .then(isAvailable => {
if (isAvailable) { if (isAvailable) {
that.setState({'error': null}); this.setState({'error': null});
} else { } else {
that.setState({'error': 'That channel has already been claimed'}); this.setState({'error': 'That channel has already been claimed'});
} }
}) })
.catch((error) => { .catch((error) => {
that.setState({'error': error.message}); this.setState({'error': error.message});
}); });
} }
checkIsChannelAvailable (channel) { checkIsChannelAvailable (channel) {
@ -105,21 +99,20 @@ class ChannelCreateForm extends React.Component {
} }
createChannel (event) { createChannel (event) {
event.preventDefault(); event.preventDefault();
const that = this;
this.checkIsPasswordProvided() this.checkIsPasswordProvided()
.then(() => { .then(() => {
return that.checkIsChannelAvailable(that.state.channel, that.state.password); return this.checkIsChannelAvailable(this.state.channel, this.state.password);
}) })
.then(() => { .then(() => {
that.setState({status: 'We are publishing your new channel. Sit tight...'}); this.setState({status: 'We are publishing your new channel. Sit tight...'});
return that.makePublishChannelRequest(that.state.channel, that.state.password); return this.makePublishChannelRequest(this.state.channel, this.state.password);
}) })
.then(result => { .then(result => {
that.setState({status: null}); this.setState({status: null});
that.props.onChannelLogin(result.channelName, result.shortChannelId, result.channelClaimId); this.props.onChannelLogin(result.channelName, result.shortChannelId, result.channelClaimId);
}) })
.catch((error) => { .catch((error) => {
that.setState({'error': error.message, status: null}); this.setState({'error': error.message, status: null});
}); });
} }
render () { render () {

9
react/containers/ChannelLoginForm/view.jsx
View file

@ -27,22 +27,21 @@ class ChannelLoginForm extends React.Component {
}), }),
credentials: 'include', credentials: 'include',
} }
const that = this;
request('login', params) request('login', params)
.then(({success, channelName, shortChannelId, channelClaimId, message}) => { .then(({success, channelName, shortChannelId, channelClaimId, message}) => {
console.log('loginToChannel success:', success); console.log('loginToChannel success:', success);
if (success) { if (success) {
that.props.onChannelLogin(channelName, shortChannelId, channelClaimId); this.props.onChannelLogin(channelName, shortChannelId, channelClaimId);
} else { } else {
that.setState({'error': message}); this.setState({'error': message});
}; };
}) })
.catch(error => { .catch(error => {
console.log('login error', error); console.log('login error', error);
if (error.message) { if (error.message) {
that.setState({'error': error.message}); this.setState({'error': error.message});
} else { } else {
that.setState({'error': error}); this.setState({'error': error});
} }
}); });
} }

38
react/containers/PublishForm/view.jsx
View file

@ -11,9 +11,7 @@ import * as publishStates from 'constants/publish_claim_states';
class PublishForm extends React.Component { class PublishForm extends React.Component {
constructor (props) { constructor (props) {
super(props); super(props);
this.validateChannelSelection = this.validateChannelSelection.bind(this); // this.makePublishRequest = this.makePublishRequest.bind(this);
this.validatePublishParams = this.validatePublishParams.bind(this);
this.makePublishRequest = this.makePublishRequest.bind(this);
this.publish = this.publish.bind(this); this.publish = this.publish.bind(this);
} }
validateChannelSelection () { validateChannelSelection () {
@ -53,32 +51,30 @@ class PublishForm extends React.Component {
const uri = '/api/claim-publish'; const uri = '/api/claim-publish';
const xhr = new XMLHttpRequest(); const xhr = new XMLHttpRequest();
const fd = this.appendDataToFormData(file, metadata); const fd = this.appendDataToFormData(file, metadata);
const that = this; xhr.upload.addEventListener('loadstart', () => {
xhr.upload.addEventListener('loadstart', function () { this.props.onPublishStatusChange(publishStates.LOAD_START, 'upload started');
that.props.onPublishStatusChange(publishStates.LOAD_START, 'upload started');
}); });
xhr.upload.addEventListener('progress', function (e) { xhr.upload.addEventListener('progress', (e) => {
if (e.lengthComputable) { if (e.lengthComputable) {
const percentage = Math.round((e.loaded * 100) / e.total); const percentage = Math.round((e.loaded * 100) / e.total);
console.log('progress:', percentage); console.log('progress:', percentage);
that.props.onPublishStatusChange(publishStates.LOADING, `${percentage}%`); this.props.onPublishStatusChange(publishStates.LOADING, `${percentage}%`);
} }
}, false); }, false);
xhr.upload.addEventListener('load', function () { xhr.upload.addEventListener('load', () => {
console.log('loaded 100%'); console.log('loaded 100%');
that.props.onPublishStatusChange(publishStates.PUBLISHING, null); this.props.onPublishStatusChange(publishStates.PUBLISHING, null);
}, false); }, false);
xhr.open('POST', uri, true); xhr.open('POST', uri, true);
xhr.onreadystatechange = function () { xhr.onreadystatechange = () => {
if (xhr.readyState === 4) { if (xhr.readyState === 4) {
const response = JSON.parse(xhr.response); const response = JSON.parse(xhr.response);
console.log('publish response:', response); console.log('publish response:', response);
if ((xhr.status === 200) && response.success) { if ((xhr.status === 200) && response.success) {
that.props.onPublishStatusChange(publishStates.SUCCESS, response.data.url); this.props.onPublishStatusChange(publishStates.SUCCESS, response.data.url);
// redirect to the published asset's show page this.props.history.push(`/${response.data.claimId}/${response.data.name}`);
that.props.history.push(`/${response.data.claimId}/${response.data.name}`);
} else { } else {
that.props.onPublishStatusChange(publishStates.FAILED, response.message); this.props.onPublishStatusChange(publishStates.FAILED, response.message);
} }
} }
}; };
@ -106,7 +102,6 @@ class PublishForm extends React.Component {
fd.append('file', file); fd.append('file', file);
for (var key in metadata) { for (var key in metadata) {
if (metadata.hasOwnProperty(key)) { if (metadata.hasOwnProperty(key)) {
console.log('adding form data', key, metadata[key]);
fd.append(key, metadata[key]); fd.append(key, metadata[key]);
} }
} }
@ -115,21 +110,20 @@ class PublishForm extends React.Component {
publish () { publish () {
console.log('publishing file'); console.log('publishing file');
// publish the asset // publish the asset
const that = this;
this.validateChannelSelection() this.validateChannelSelection()
.then(() => { .then(() => {
return that.validatePublishParams(); return this.validatePublishParams();
}) })
.then(() => { .then(() => {
const metadata = that.createMetadata(); const metadata = this.createMetadata();
// publish the claim // publish the claim
return that.makePublishRequest(that.props.file, metadata); return this.makePublishRequest(this.props.file, metadata);
}) })
.then(() => { .then(() => {
that.props.onPublishStatusChange('publish request made'); this.props.onPublishStatusChange('publish request made');
}) })
.catch((error) => { .catch((error) => {
that.props.onPublishSubmitError(error.message); this.props.onPublishSubmitError(error.message);
}); });
} }
render () { render () {

15
react/containers/PublishThumbnailInput/view.jsx
View file

@ -9,8 +9,6 @@ class PublishThumbnailInput extends React.Component {
thumbnailInput : '', thumbnailInput : '',
} }
this.handleInput = this.handleInput.bind(this); this.handleInput = this.handleInput.bind(this);
this.urlIsAnImage = this.urlIsAnImage.bind(this);
this.testImage = this.testImage.bind(this);
this.updateVideoThumb = this.updateVideoThumb.bind(this); this.updateVideoThumb = this.updateVideoThumb.bind(this);
} }
handleInput (event) { handleInput (event) {
@ -38,22 +36,21 @@ class PublishThumbnailInput extends React.Component {
} }
updateVideoThumb (event) { updateVideoThumb (event) {
const imageUrl = event.target.value; const imageUrl = event.target.value;
const that = this;
if (this.urlIsAnImage(imageUrl)) { if (this.urlIsAnImage(imageUrl)) {
this.testImage(imageUrl, 3000) this.testImage(imageUrl, 3000)
.then(() => { .then(() => {
console.log('thumbnail is a valid image'); console.log('thumbnail is a valid image');
that.props.onThumbnailChange('thumbnail', imageUrl); this.props.onThumbnailChange('thumbnail', imageUrl);
that.setState({thumbnailError: null}); this.setState({thumbnailError: null});
}) })
.catch(error => { .catch(error => {
console.log('encountered an error loading thumbnail image url:', error); console.log('encountered an error loading thumbnail image url:', error);
that.props.onThumbnailChange('thumbnail', null); this.props.onThumbnailChange('thumbnail', null);
that.setState({thumbnailError: 'That is an invalid image url'}); this.setState({thumbnailError: 'That is an invalid image url'});
}); });
} else { } else {
that.props.onThumbnailChange('thumbnail', null); this.props.onThumbnailChange('thumbnail', null);
that.setState({thumbnailError: null}); this.setState({thumbnailError: null});
} }
} }
render () { render () {

10
react/containers/PublishUrlInput/view.jsx
View file

@ -6,9 +6,6 @@ class PublishUrlInput extends React.Component {
constructor (props) { constructor (props) {
super(props); super(props);
this.handleInput = this.handleInput.bind(this); this.handleInput = this.handleInput.bind(this);
this.cleanseInput = this.cleanseInput.bind(this);
this.setClaimNameFromFileName = this.setClaimNameFromFileName.bind(this);
this.checkClaimIsAvailable = this.checkClaimIsAvailable.bind(this);
} }
componentDidMount () { componentDidMount () {
if (!this.props.claim || this.props.claim === '') { if (!this.props.claim || this.props.claim === '') {
@ -40,18 +37,17 @@ class PublishUrlInput extends React.Component {
this.props.onClaimChange(cleanClaimName); this.props.onClaimChange(cleanClaimName);
} }
checkClaimIsAvailable (claim) { checkClaimIsAvailable (claim) {
const that = this;
request(`/api/claim-is-available/${claim}`) request(`/api/claim-is-available/${claim}`)
.then(isAvailable => { .then(isAvailable => {
// console.log('checkClaimIsAvailable request response:', isAvailable); // console.log('checkClaimIsAvailable request response:', isAvailable);
if (isAvailable) { if (isAvailable) {
that.props.onUrlError(null); this.props.onUrlError(null);
} else { } else {
that.props.onUrlError('That url has already been claimed'); this.props.onUrlError('That url has already been claimed');
} }
}) })
.catch((error) => { .catch((error) => {
that.props.onUrlError(error.message); this.props.onUrlError(error.message);
}); });
} }
render () { render () {

3
react/containers/ShowAsset/view.jsx
View file

@ -36,10 +36,9 @@ class ShowAsset extends React.Component {
body: JSON.stringify(body), body: JSON.stringify(body),
} }
// make request // make request
const that = this;
this.getLongClaimId(params) this.getLongClaimId(params)
.then(claimLongId => { .then(claimLongId => {
return Promise.all([that.getShortClaimId(claimLongId, name), that.getClaimData(claimLongId, name)]); return Promise.all([this.getShortClaimId(claimLongId, name), this.getClaimData(claimLongId, name)]);
}) })
.then(([shortId, claimData]) => { .then(([shortId, claimData]) => {
this.setState({error: null}); // note: move this to redux level this.setState({error: null}); // note: move this to redux level

10
react/containers/ShowChannel/view.jsx
View file

@ -9,7 +9,6 @@ class ShowChannel extends React.Component {
this.state = { this.state = {
error: null, error: null,
}; };
this.getAndStoreChannelData = this.getAndStoreChannelData.bind(this);
} }
componentDidMount () { componentDidMount () {
this.getAndStoreChannelData(this.props.requestName, this.props.requestId); this.getAndStoreChannelData(this.props.requestName, this.props.requestId);
@ -22,18 +21,17 @@ class ShowChannel extends React.Component {
getAndStoreChannelData (name, id) { getAndStoreChannelData (name, id) {
if (!id) id = 'none'; if (!id) id = 'none';
const url = `/api/channel-data/${name}/${id}`; const url = `/api/channel-data/${name}/${id}`;
const that = this;
return request(url) return request(url)
.then(({ success, message, data }) => { .then(({ success, message, data }) => {
console.log('api/channel-data response:', data); console.log('api/channel-data response:', data);
if (!success) { if (!success) {
return that.setState({error: message}); return this.setState({error: message});
} }
that.setState({error: null}); // note: store this error at app level also this.setState({error: null}); // note: store this error at app level also
that.props.onChannelDataUpdate(data.channelName, data.longChannelClaimId, data.shortChannelClaimId); this.props.onChannelDataUpdate(data.channelName, data.longChannelClaimId, data.shortChannelClaimId);
}) })
.catch((error) => { .catch((error) => {
that.setState({error: error.message}); this.setState({error: error.message});
}); });
} }
componentWillUnmount () { componentWillUnmount () {