React/Redux - publish component #323
|
@ -1,30 +1,22 @@
|
||||||
// export action types
|
import * as actions from '../constants/action_types.js';
|
||||||
export const FILE_SELECTED = 'FILE_SELECTED';
|
|
||||||
export const FILE_CLEAR = 'FILE_CLEAR';
|
|
||||||
export const METADATA_UPDATE = 'METADATA_UPDATE';
|
|
||||||
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 action creators
|
||||||
export function selectFile (file) {
|
export function selectFile (file) {
|
||||||
return {
|
return {
|
||||||
type: FILE_SELECTED,
|
type: actions.FILE_SELECTED,
|
||||||
file: file,
|
file: file,
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
export function clearFile () {
|
export function clearFile () {
|
||||||
return {
|
return {
|
||||||
type: FILE_CLEAR,
|
type: actions.FILE_CLEAR,
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
export function updateMetadata (name, value) {
|
export function updateMetadata (name, value) {
|
||||||
return {
|
return {
|
||||||
type: METADATA_UPDATE,
|
type: actions.METADATA_UPDATE,
|
||||||
name,
|
name,
|
||||||
value,
|
value,
|
||||||
};
|
};
|
||||||
|
@ -32,14 +24,14 @@ export function updateMetadata (name, value) {
|
||||||
|
|
||||||
export function updateClaim (value) {
|
export function updateClaim (value) {
|
||||||
return {
|
return {
|
||||||
type: CLAIM_UPDATE,
|
type: actions.CLAIM_UPDATE,
|
||||||
value,
|
value,
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
export function updateLoggedInChannel (name, shortId, longId) {
|
export function updateLoggedInChannel (name, shortId, longId) {
|
||||||
return {
|
return {
|
||||||
type: CHANNEL_UPDATE,
|
type: actions.CHANNEL_UPDATE,
|
||||||
name,
|
name,
|
||||||
shortId,
|
shortId,
|
||||||
longId,
|
longId,
|
||||||
|
@ -48,14 +40,14 @@ export function updateLoggedInChannel (name, shortId, longId) {
|
||||||
|
|
||||||
export function setPublishInChannel (channel) {
|
export function setPublishInChannel (channel) {
|
||||||
return {
|
return {
|
||||||
type: SET_PUBLISH_IN_CHANNEL,
|
type: actions.SET_PUBLISH_IN_CHANNEL,
|
||||||
channel,
|
channel,
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
export function updatePublishStatus (status, message) {
|
export function updatePublishStatus (status, message) {
|
||||||
return {
|
return {
|
||||||
type: PUBLISH_STATUS_UPDATE,
|
type: actions.PUBLISH_STATUS_UPDATE,
|
||||||
status,
|
status,
|
||||||
message,
|
message,
|
||||||
};
|
};
|
||||||
|
@ -63,7 +55,7 @@ export function updatePublishStatus (status, message) {
|
||||||
|
|
||||||
export function updateError (name, value) {
|
export function updateError (name, value) {
|
||||||
return {
|
return {
|
||||||
type: ERROR_UPDATE,
|
type: actions.ERROR_UPDATE,
|
||||||
name,
|
name,
|
||||||
value,
|
value,
|
||||||
};
|
};
|
||||||
|
|
9
react/constants/action_types.js
Normal file
|
@ -0,0 +1,9 @@
|
||||||
|
// export action types
|
||||||
|
export const FILE_SELECTED = 'FILE_SELECTED';
|
||||||
|
export const FILE_CLEAR = 'FILE_CLEAR';
|
||||||
|
export const METADATA_UPDATE = 'METADATA_UPDATE';
|
||||||
|
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';
|
6
react/constants/publishing_states.js
Normal file
|
@ -0,0 +1,6 @@
|
||||||
|
// publishing states
|
||||||
|
export const LOAD_START = 'LOAD_START';
|
||||||
|
export const LOADING = 'LOADING';
|
||||||
|
export const PUBLISHING = 'PUBLISHING';
|
||||||
|
export const SUCCESS = 'SUCCESS';
|
||||||
|
export const FAILED = 'FAILED';
|
|
@ -7,15 +7,10 @@ import PublishThumbnailInput from './PublishThumbnailInput.jsx';
|
||||||
These consts need to be shared across files These consts need to be shared across files
I suspect this shouldn't be necessary with addition of Redux I suspect this shouldn't be necessary with addition of Redux
|
|||||||
import PublishMetadataInputs from './PublishMetadataInputs.jsx';
|
import PublishMetadataInputs from './PublishMetadataInputs.jsx';
|
||||||
import AnonymousOrChannelSelect from './ChannelSelect.jsx';
|
import AnonymousOrChannelSelect from './ChannelSelect.jsx';
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
These consts need to be shared across files These consts need to be shared across files
I suspect this shouldn't be necessary with addition of Redux I suspect this shouldn't be necessary with addition of Redux
|
|||||||
import { getCookie } from '../utils/cookies.js';
|
import { getCookie } from '../utils/cookies.js';
|
||||||
import {selectFile, clearFile, updateLoggedInChannel, updatePublishStatus, updateError} from '../actions';
|
import {selectFile, clearFile, updateLoggedInChannel, updatePublishStatus, updateError} from '../actions';
|
||||||
import PropTypes from 'prop-types';
|
import * as states from '../constants/publishing_states';
|
||||||
These consts need to be shared across files These consts need to be shared across files
I suspect this shouldn't be necessary with addition of Redux I suspect this shouldn't be necessary with addition of Redux
These consts need to be shared across files These consts need to be shared across files
I suspect this shouldn't be necessary with addition of Redux I suspect this shouldn't be necessary with addition of Redux
|
|||||||
|
|
||||||
These consts need to be shared across files These consts need to be shared across files
I suspect this shouldn't be necessary with addition of Redux I suspect this shouldn't be necessary with addition of Redux
|
|||||||
const LOAD_START = 'LOAD_START';
|
|
||||||
These consts need to be shared across files These consts need to be shared across files
I suspect this shouldn't be necessary with addition of Redux I suspect this shouldn't be necessary with addition of Redux
|
|||||||
const LOADING = 'LOADING';
|
|
||||||
These consts need to be shared across files These consts need to be shared across files
I suspect this shouldn't be necessary with addition of Redux I suspect this shouldn't be necessary with addition of Redux
|
|||||||
const PUBLISHING = 'PUBLISHING';
|
|
||||||
These consts need to be shared across files These consts need to be shared across files
I suspect this shouldn't be necessary with addition of Redux I suspect this shouldn't be necessary with addition of Redux
|
|||||||
const SUCCESS = 'SUCCESS';
|
|
||||||
These consts need to be shared across files These consts need to be shared across files
I suspect this shouldn't be necessary with addition of Redux I suspect this shouldn't be necessary with addition of Redux
|
|||||||
const FAILED = 'FAILED';
|
|
||||||
These consts need to be shared across files These consts need to be shared across files
I suspect this shouldn't be necessary with addition of Redux I suspect this shouldn't be necessary with addition of Redux
|
|||||||
|
|
||||||
class PublishForm extends React.Component {
|
class PublishForm extends React.Component {
|
||||||
constructor (props) {
|
constructor (props) {
|
||||||
|
@ -60,18 +55,18 @@ class PublishForm extends React.Component {
|
||||||
These consts need to be shared across files These consts need to be shared across files
I suspect this shouldn't be necessary with addition of Redux I suspect this shouldn't be necessary with addition of Redux
These consts need to be shared across files These consts need to be shared across files
I suspect this shouldn't be necessary with addition of Redux I suspect this shouldn't be necessary with addition of Redux
|
|||||||
const fd = this.appendDataToFormData(file, metadata);
|
const fd = this.appendDataToFormData(file, metadata);
|
||||||
const that = this;
|
const that = this;
|
||||||
xhr.upload.addEventListener('loadstart', function () {
|
xhr.upload.addEventListener('loadstart', function () {
|
||||||
that.props.onPublishStatusChange(LOAD_START, 'upload started');
|
that.props.onPublishStatusChange(states.LOAD_START, 'upload started');
|
||||||
These consts need to be shared across files These consts need to be shared across files
I suspect this shouldn't be necessary with addition of Redux I suspect this shouldn't be necessary with addition of Redux
These consts need to be shared across files These consts need to be shared across files
I suspect this shouldn't be necessary with addition of Redux I suspect this shouldn't be necessary with addition of Redux
|
|||||||
});
|
});
|
||||||
xhr.upload.addEventListener('progress', function (e) {
|
xhr.upload.addEventListener('progress', function (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(LOADING, `${percentage}%`);
|
that.props.onPublishStatusChange(states.LOADING, `${percentage}%`);
|
||||||
These consts need to be shared across files These consts need to be shared across files
I suspect this shouldn't be necessary with addition of Redux I suspect this shouldn't be necessary with addition of Redux
These consts need to be shared across files These consts need to be shared across files
I suspect this shouldn't be necessary with addition of Redux I suspect this shouldn't be necessary with addition of Redux
|
|||||||
}
|
}
|
||||||
}, false);
|
}, false);
|
||||||
xhr.upload.addEventListener('load', function () {
|
xhr.upload.addEventListener('load', function () {
|
||||||
console.log('loaded 100%');
|
console.log('loaded 100%');
|
||||||
that.props.onPublishStatusChange(PUBLISHING, null);
|
that.props.onPublishStatusChange(states.PUBLISHING, null);
|
||||||
These consts need to be shared across files These consts need to be shared across files
I suspect this shouldn't be necessary with addition of Redux I suspect this shouldn't be necessary with addition of Redux
These consts need to be shared across files These consts need to be shared across files
I suspect this shouldn't be necessary with addition of Redux I suspect this shouldn't be necessary with addition of Redux
|
|||||||
}, false);
|
}, false);
|
||||||
xhr.open('POST', uri, true);
|
xhr.open('POST', uri, true);
|
||||||
xhr.onreadystatechange = function () {
|
xhr.onreadystatechange = function () {
|
||||||
|
@ -80,12 +75,12 @@ class PublishForm extends React.Component {
|
||||||
These consts need to be shared across files These consts need to be shared across files
I suspect this shouldn't be necessary with addition of Redux I suspect this shouldn't be necessary with addition of Redux
These consts need to be shared across files These consts need to be shared across files
I suspect this shouldn't be necessary with addition of Redux I suspect this shouldn't be necessary with addition of Redux
|
|||||||
if (xhr.status === 200) {
|
if (xhr.status === 200) {
|
||||||
console.log('publish complete!');
|
console.log('publish complete!');
|
||||||
const url = JSON.parse(xhr.response).message.url;
|
const url = JSON.parse(xhr.response).message.url;
|
||||||
that.props.onPublishStatusChange(SUCCESS, url);
|
that.props.onPublishStatusChange(states.SUCCESS, url);
|
||||||
These consts need to be shared across files These consts need to be shared across files
I suspect this shouldn't be necessary with addition of Redux I suspect this shouldn't be necessary with addition of Redux
These consts need to be shared across files These consts need to be shared across files
I suspect this shouldn't be necessary with addition of Redux I suspect this shouldn't be necessary with addition of Redux
|
|||||||
window.location = url;
|
window.location = url;
|
||||||
} else if (xhr.status === 502) {
|
} else if (xhr.status === 502) {
|
||||||
that.props.onPublishStatusChange(FAILED, 'Spee.ch was not able to get a response from the LBRY network.');
|
that.props.onPublishStatusChange(states.FAILED, 'Spee.ch was not able to get a response from the LBRY network.');
|
||||||
These consts need to be shared across files These consts need to be shared across files
I suspect this shouldn't be necessary with addition of Redux I suspect this shouldn't be necessary with addition of Redux
These consts need to be shared across files These consts need to be shared across files
I suspect this shouldn't be necessary with addition of Redux I suspect this shouldn't be necessary with addition of Redux
|
|||||||
} else {
|
} else {
|
||||||
that.props.onPublishStatusChange(FAILED, JSON.parse(xhr.response).message);
|
that.props.onPublishStatusChange(states.FAILED, JSON.parse(xhr.response).message);
|
||||||
These consts need to be shared across files These consts need to be shared across files
I suspect this shouldn't be necessary with addition of Redux I suspect this shouldn't be necessary with addition of Redux
These consts need to be shared across files These consts need to be shared across files
I suspect this shouldn't be necessary with addition of Redux I suspect this shouldn't be necessary with addition of Redux
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
These consts need to be shared across files These consts need to be shared across files
I suspect this shouldn't be necessary with addition of Redux I suspect this shouldn't be necessary with addition of Redux
These consts need to be shared across files These consts need to be shared across files
I suspect this shouldn't be necessary with addition of Redux I suspect this shouldn't be necessary with addition of Redux
|
|
@ -1,7 +1,4 @@
|
||||||
`import * as`
Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision). Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision).
`import * as`
Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision). Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision).
|
|||||||
import {
|
import * as actions from '../constants/action_types';
|
||||||
`import * as`
Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision). Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision).
`import * as`
Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision). Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision).
|
|||||||
CHANNEL_UPDATE, CLAIM_UPDATE, ERROR_UPDATE, FILE_CLEAR, FILE_SELECTED, METADATA_UPDATE, PUBLISH_STATUS_UPDATE,
|
|
||||||
`import * as`
Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision). Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision).
|
|||||||
SET_PUBLISH_IN_CHANNEL,
|
|
||||||
`import * as`
Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision). Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision).
|
|||||||
} from '../actions';
|
|
||||||
`import * as`
Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision). Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision).
|
|||||||
|
|
||||||
const initialState = {
|
const initialState = {
|
||||||
loggedInChannel: {
|
loggedInChannel: {
|
||||||
|
@ -36,23 +33,23 @@ Reducers describe how the application's state changes in response to actions
|
||||||
`import * as`
Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision). Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision).
`import * as`
Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision). Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision).
|
|||||||
|
|
||||||
export default function (state = initialState, action) {
|
export default function (state = initialState, action) {
|
||||||
switch (action.type) {
|
switch (action.type) {
|
||||||
case FILE_SELECTED:
|
case actions.FILE_SELECTED:
|
||||||
`import * as`
Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision). Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision).
`import * as`
Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision). Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision).
|
|||||||
return Object.assign({}, state, {
|
return Object.assign({}, state, {
|
||||||
file: action.file,
|
file: action.file,
|
||||||
});
|
});
|
||||||
case FILE_CLEAR:
|
case actions.FILE_CLEAR:
|
||||||
`import * as`
Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision). Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision).
`import * as`
Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision). Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision).
|
|||||||
return initialState;
|
return initialState;
|
||||||
case METADATA_UPDATE:
|
case actions.METADATA_UPDATE:
|
||||||
`import * as`
Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision). Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision).
`import * as`
Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision). Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision).
|
|||||||
return Object.assign({}, state, {
|
return Object.assign({}, state, {
|
||||||
metadata: Object.assign({}, state.metadata, {
|
metadata: Object.assign({}, state.metadata, {
|
||||||
[action.name]: action.value,
|
[action.name]: action.value,
|
||||||
}),
|
}),
|
||||||
});
|
});
|
||||||
case CLAIM_UPDATE:
|
case actions.CLAIM_UPDATE:
|
||||||
`import * as`
Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision). Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision).
`import * as`
Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision). Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision).
|
|||||||
return Object.assign({}, state, {
|
return Object.assign({}, state, {
|
||||||
claim: action.value,
|
claim: action.value,
|
||||||
});
|
});
|
||||||
case CHANNEL_UPDATE:
|
case actions.CHANNEL_UPDATE:
|
||||||
`import * as`
Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision). Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision).
`import * as`
Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision). Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision).
|
|||||||
return Object.assign({}, state, {
|
return Object.assign({}, state, {
|
||||||
loggedInChannel: {
|
loggedInChannel: {
|
||||||
name : action.name,
|
name : action.name,
|
||||||
|
@ -60,18 +57,18 @@ export default function (state = initialState, action) {
|
||||||
`import * as`
Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision). Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision).
`import * as`
Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision). Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision).
|
|||||||
longId : action.longId,
|
longId : action.longId,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
case SET_PUBLISH_IN_CHANNEL:
|
case actions.SET_PUBLISH_IN_CHANNEL:
|
||||||
`import * as`
Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision). Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision).
`import * as`
Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision). Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision).
|
|||||||
return Object.assign({}, state, {
|
return Object.assign({}, state, {
|
||||||
publishInChannel: action.channel,
|
publishInChannel: action.channel,
|
||||||
});
|
});
|
||||||
case PUBLISH_STATUS_UPDATE:
|
case actions.PUBLISH_STATUS_UPDATE:
|
||||||
`import * as`
Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision). Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision).
`import * as`
Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision). Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision).
|
|||||||
return Object.assign({}, state, {
|
return Object.assign({}, state, {
|
||||||
status: Object.assign({}, state.status, {
|
status: Object.assign({}, state.status, {
|
||||||
status : action.status,
|
status : action.status,
|
||||||
message: action.message,
|
message: action.message,
|
||||||
}),
|
}),
|
||||||
});
|
});
|
||||||
case ERROR_UPDATE:
|
case actions.ERROR_UPDATE:
|
||||||
`import * as`
Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision). Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision).
`import * as`
Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision). Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision).
|
|||||||
return Object.assign({}, state, {
|
return Object.assign({}, state, {
|
||||||
error: Object.assign({}, state.error, {
|
error: Object.assign({}, state.error, {
|
||||||
[action.name]: action.value,
|
[action.name]: action.value,
|
||||||
|
|
||||||
`import * as`
Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision). Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision).
`import * as`
Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision). Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision).
|
These consts need to be shared across files
I suspect this shouldn't be necessary with addition of Redux