fed history to publishFile for redirect ability

This commit is contained in:
bill bittner 2018-03-01 14:00:29 -08:00
parent 0c08f693b0
commit 54f342cd5e
8 changed files with 87 additions and 118 deletions

View file

@ -86,8 +86,9 @@ export function updateThumbnailSelectedFile (file) {
}; };
}; };
export function startPublish () { export function startPublish (history) {
return { return {
type: actions.PUBLISH_START, type: actions.PUBLISH_START,
data: { history },
}; };
} }

View file

@ -1,7 +0,0 @@
import Request from 'utils/request';
const { site: { host } } = require('../../config/speechConfig.js');
export function publish () {
// const url = `${host}/api/file/availability/${name}/${claimId}`;
}

View file

@ -1,38 +1,16 @@
import {connect} from 'react-redux'; import {connect} from 'react-redux';
import {clearFile, updateError, updatePublishStatus, startPublish} from 'actions/publish'; import {clearFile, startPublish} from 'actions/publish';
import View from './view'; import View from './view';
const mapStateToProps = ({ channel, publish }) => { const mapStateToProps = ({ channel, publish }) => {
return { return {
loggedInChannel : channel.loggedInChannel,
file: publish.file, file: publish.file,
claim : publish.claim,
title : publish.metadata.title,
thumbnail : publish.metadata.thumbnail,
description : publish.metadata.description,
license : publish.metadata.license,
nsfw : publish.metadata.nsfw,
publishInChannel : publish.publishInChannel,
selectedChannel : publish.selectedChannel,
fileError : publish.error.file,
urlError : publish.error.url,
publishSubmitError: publish.error.publishSubmit,
}; };
}; };
const mapDispatchToProps = dispatch => { const mapDispatchToProps = {
return { clearFile,
onFileClear: () => {
dispatch(clearFile());
},
onPublishStatusChange: (status, message) => {
dispatch(updatePublishStatus(status, message));
},
onPublishSubmitError: (value) => {
dispatch(updateError('publishSubmit', value));
},
startPublish, startPublish,
}; };
};
export default connect(mapStateToProps, mapDispatchToProps)(View); export default connect(mapStateToProps, mapDispatchToProps)(View);

View file

@ -6,9 +6,15 @@ import PublishUrlInput from 'containers/PublishUrlInput';
import PublishThumbnailInput from 'containers/PublishThumbnailInput'; import PublishThumbnailInput from 'containers/PublishThumbnailInput';
import PublishMetadataInputs from 'containers/PublishMetadataInputs'; import PublishMetadataInputs from 'containers/PublishMetadataInputs';
import ChannelSelect from 'containers/ChannelSelect'; import ChannelSelect from 'containers/ChannelSelect';
import * as publishStates from 'constants/publish_claim_states';
class PublishForm extends React.Component { class PublishForm extends React.Component {
constructor (props) {
super(props)
this.onPublishSubmit = this.onPublishSubmit.bind(this);
}
onPublishSubmit () {
this.props.startPublish(this.props.history);
}
render () { render () {
return ( return (
<div className='row row--no-bottom'> <div className='row row--no-bottom'>
@ -39,10 +45,10 @@ class PublishForm extends React.Component {
<PublishMetadataInputs /> <PublishMetadataInputs />
</div> </div>
<div className='row row--wide align-content-center'> <div className='row row--wide align-content-center'>
<button id='publish-submit' className='button--primary button--large' onClick={this.props.startPublish}>Publish</button> <button id='publish-submit' className='button--primary button--large' onClick={this.onPublishSubmit}>Publish</button>
</div> </div>
<div className='row row--padded row--no-bottom align-content-center'> <div className='row row--padded row--no-bottom align-content-center'>
<button className='button--cancel' onClick={this.props.onFileClear}>Cancel</button> <button className='button--cancel' onClick={this.props.clearFile}>Cancel</button>
</div> </div>
<div className='row row--short align-content-center'> <div className='row row--short align-content-center'>
<p className='fine-print'>By clicking 'Publish', you affirm that you have the rights to publish this content to the LBRY network, and that you understand the properties of publishing it to a decentralized, user-controlled network. <a className='link--primary' target='_blank' href='https://lbry.io/learn'>Read more.</a></p> <p className='fine-print'>By clicking 'Publish', you affirm that you have the rights to publish this content to the LBRY network, and that you understand the properties of publishing it to a decentralized, user-controlled network. <a className='link--primary' target='_blank' href='https://lbry.io/learn'>Read more.</a></p>

View file

@ -1,70 +1,11 @@
import { call, put, select, takeLatest } from 'redux-saga/effects'; import { call, put, select, takeLatest } from 'redux-saga/effects';
import * as actions from 'constants/publish_action_types'; import * as actions from 'constants/publish_action_types';
import { updateError } from 'actions/publish'; import * as publishStates from 'constants/publish_claim_states';
// import { publish } from 'api/fileApi'; import { updateError, updatePublishStatus, clearFile } from 'actions/publish';
import { selectPublishState } from '../selectors/publish'; import { selectPublishState } from 'selectors/publish';
import { selectChannelState } from '../selectors/channel'; import { selectChannelState } from 'selectors/channel';
import * as publishStates from '../constants/publish_claim_states'; import { validateChannelSelection, validatePublishParams } from 'utils/validate';
import { createPublishMetadata, createPublishFormData } from 'utils/publish';
const validateChannelSelection = (publishInChannel, selectedChannel, loggedInChannel) => {
console.log('validating channel selection');
// make sure all required data is provided
return new Promise((resolve, reject) => {
// if publishInChannel is true, is a channel selected & logged in?
if (publishInChannel && (selectedChannel !== loggedInChannel.name)) {
return reject('Log in to a channel or select Anonymous');
}
resolve();
});
}
const validatePublishParams = (file, claim, urlError) => {
console.log('validating publish params');
// make sure all required data is provided
return new Promise((resolve, reject) => {
// is there a file?
if (!file) {
return reject('Please choose a file');
}
// is there a claim chosen?
if (!claim) {
return reject('Please enter a URL');
}
if (urlError) {
return reject('Fix the url');
}
resolve();
});
}
const createPublishMetadata = (claim, { type }, { title, thumbnail, description, license, nsfw }, publishInChannel, selectedChannel) => {
let metadata = {
name: claim,
title,
thumbnail,
description,
license,
nsfw,
type,
};
if (publishInChannel) {
metadata['channelName'] = selectedChannel;
}
return metadata;
}
const createPublishFormData = (file, metadata) => {
var fd = new FormData();
// append file
fd.append('file', file);
// append metadata
for (var key in metadata) {
if (metadata.hasOwnProperty(key)) {
fd.append(key, metadata[key]);
}
}
return fd;
}
const makePublishRequest = (fd) => { const makePublishRequest = (fd) => {
console.log('making publish request'); console.log('making publish request');
@ -72,62 +13,65 @@ const makePublishRequest = (fd) => {
const uri = '/api/claim/publish'; const uri = '/api/claim/publish';
const xhr = new XMLHttpRequest(); const xhr = new XMLHttpRequest();
xhr.upload.addEventListener('loadstart', () => { xhr.upload.addEventListener('loadstart', () => {
this.props.onPublishStatusChange(publishStates.LOAD_START, 'upload started'); put(updatePublishStatus(publishStates.LOAD_START, 'upload started'));
}); });
xhr.upload.addEventListener('progress', (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);
this.props.onPublishStatusChange(publishStates.LOADING, `${percentage}%`); put(updatePublishStatus(publishStates.LOADING, `${percentage}%`));
} }
}, false); }, false);
xhr.upload.addEventListener('load', () => { xhr.upload.addEventListener('load', () => {
console.log('loaded 100%'); console.log('loaded 100%');
this.props.onPublishStatusChange(publishStates.PUBLISHING, null); put(updatePublishStatus(publishStates.PUBLISHING, null));
}, false); }, false);
xhr.open('POST', uri, true); xhr.open('POST', uri, true);
xhr.onreadystatechange = () => { 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) {
this.props.history.push(`/${response.data.claimId}/${response.data.name}`); resolve(response);
this.props.onFileClear();
} else { } else {
this.props.onPublishStatusChange(publishStates.FAILED, response.message); reject(new Error(response.message));
} }
} }
}; };
// Initiate a multipart/form-data upload // Initiate a multipart/form-data upload
xhr.send(fd); xhr.send(fd);
}); });
} };
function * publishFile () { function * publishFile (action) {
const { history } = action.data;
console.log('publishing file'); console.log('publishing file');
const { publishInChannel, selectedChannel, file, claim, metadata, error: { url: urlError } } = yield select(selectPublishState); const { publishInChannel, selectedChannel, file, claim, metadata, error: { url: urlError } } = yield select(selectPublishState);
const { loggedInChannel } = yield select(selectChannelState); const { loggedInChannel } = yield select(selectChannelState);
// validate the channel selection // validate the channel selection
try { try {
yield call(validateChannelSelection, publishInChannel, selectedChannel, loggedInChannel); validateChannelSelection(publishInChannel, selectedChannel, loggedInChannel);
} catch (error) { } catch (error) {
return yield put(updateError('channel', error)); return yield put(updateError('channel', error.message));
}; };
// validate publish parameters // validate publish parameters
try { try {
yield call(validatePublishParams, file, claim, urlError); validatePublishParams(file, claim, urlError);
} catch (error) { } catch (error) {
return yield put(updateError('publishSubmit', error)); return yield put(updateError('publishSubmit', error.message));
} }
// create metadata // create metadata
const publishMetadata = createPublishMetadata(claim, file, metadata, publishInChannel, selectedChannel); const publishMetadata = createPublishMetadata(claim, file, metadata, publishInChannel, selectedChannel);
// create form data // create form data
const publishFormData = createPublishFormData(file, publishMetadata); const publishFormData = createPublishFormData(file, publishMetadata);
// make the publish request // make the publish request
let response;
try { try {
yield call(makePublishRequest, publishFormData); response = yield call(makePublishRequest, publishFormData);
yield put(clearFile());
history.push(`/${response.data.claimId}/${response.data.name}`);
} catch (error) { } catch (error) {
return yield put(updateError('publishSubmit', error)); return yield put(updatePublishStatus(publishStates.FAILED, error.message));
} }
}; };

View file

28
react/utils/publish.js Normal file
View file

@ -0,0 +1,28 @@
export const createPublishMetadata = (claim, { type }, { title, thumbnail, description, license, nsfw }, publishInChannel, selectedChannel) => {
let metadata = {
name: claim,
title,
thumbnail,
description,
license,
nsfw,
type,
};
if (publishInChannel) {
metadata['channelName'] = selectedChannel;
}
return metadata;
};
export const createPublishFormData = (file, metadata) => {
let fd = new FormData();
// append file
fd.append('file', file);
// append metadata
for (let key in metadata) {
if (metadata.hasOwnProperty(key)) {
fd.append(key, metadata[key]);
}
}
return fd;
};

19
react/utils/validate.js Normal file
View file

@ -0,0 +1,19 @@
export const validateChannelSelection = (publishInChannel, selectedChannel, loggedInChannel) => {
console.log('validating channel selection');
if (publishInChannel && (selectedChannel !== loggedInChannel.name)) {
throw new Error('Log in to a channel or select Anonymous');
}
};
export const validatePublishParams = (file, claim, urlError) => {
console.log('validating publish params');
if (!file) {
throw new Error('Please choose a file');
}
if (!claim) {
throw new Error('Please enter a URL');
}
if (urlError) {
throw new Error('Fix the url');
}
};