fed history to publishFile for redirect ability
This commit is contained in:
parent
0c08f693b0
commit
54f342cd5e
8 changed files with 87 additions and 118 deletions
|
@ -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 },
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
@ -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}`;
|
|
||||||
|
|
||||||
}
|
|
|
@ -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);
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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));
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
0
react/utils/browserHistory.js
Normal file
0
react/utils/browserHistory.js
Normal file
28
react/utils/publish.js
Normal file
28
react/utils/publish.js
Normal 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
19
react/utils/validate.js
Normal 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');
|
||||||
|
}
|
||||||
|
};
|
Loading…
Reference in a new issue