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

added redux

Browse source
This commit is contained in:
bill bittner 2018-01-08 17:06:31 -08:00
parent 18ece02b57
commit 94cdb37a13
10 changed files with 154 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
package.json
View file

@ -43,6 +43,11 @@
"nodemon": "^1.11.0",
"passport": "^0.4.0",
"passport-local": "^1.0.0",
"prop-types": "^15.6.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-redux": "^5.0.6",
"redux": "^3.7.2",
"request": "^2.83.0",
"request-promise": "^4.2.2",
"sequelize": "^4.1.0",
@ -68,8 +73,7 @@
"eslint-plugin-standard": "3.0.1",
"husky": "^0.13.4",
"mocha": "^4.0.1",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"redux-devtools": "^3.4.1",
"webpack": "^3.10.0"
}
}

17
react/actions/index.js Normal file
View file

@ -0,0 +1,17 @@
// export action types
export const FILE_SELECTED = 'FILE_SELECTED';
export const FILE_CLEAR = 'FILE_CLEAR';
// export action creators
export function selectFile (file) {
return {
type : FILE_SELECTED,
payload: file,
};
};
export function clearFile () {
return {
type: FILE_CLEAR,
};
};

32
react/components/PublishDropzone.jsx
View file

@ -1,6 +1,8 @@
import React from 'react';
// import PropTypes from 'prop-types';
const DETAILS = 'DETAILS';
import { selectFile } from '../actions';
import { connect } from 'react-redux';
class PublishDropzone extends React.Component {
constructor (props) {
@ -16,7 +18,6 @@ class PublishDropzone extends React.Component {
this.handleDragLeave = this.handleDragLeave.bind(this);
this.handleClick = this.handleClick.bind(this);
this.handleFileInput = this.handleFileInput.bind(this);
this.stageFile = this.stageFile.bind(this);
this.setClaimNameFromFileName = this.setClaimNameFromFileName.bind(this);
}
validateFile (file) {
@ -73,7 +74,7 @@ class PublishDropzone extends React.Component {
}
// stage it so it will be ready when the publish button is clicked
this.setClaimNameFromFileName(droppedFile.name);
this.stageFile(droppedFile);
this.props.onFileSelect(droppedFile);
}
}
}
@ -113,16 +114,9 @@ class PublishDropzone extends React.Component {
}
// stage it so it will be ready when the publish button is clicked
this.setClaimNameFromFileName(chosenFile.name);
this.stageFile(chosenFile);
this.props.onFileSelect(chosenFile);
}
}
stageFile (selectedFile) {
console.log('stageFileAndShowDetails', selectedFile);
// store the selected file for upload
this.props.updateUploaderState('file', selectedFile);
// show the publish form
this.props.updateUploaderState('showComponent', DETAILS);
}
setClaimNameFromFileName (fileName) {
console.log('setClaimNameFromFileName', fileName);
const fileNameWithoutEnding = fileName.substring(0, fileName.lastIndexOf('.'));
@ -154,4 +148,18 @@ class PublishDropzone extends React.Component {
}
};
module.exports = PublishDropzone;
const mapStateToProps = state => {
return {
file: state.file,
};
};
const mapDispatchToProps = dispatch => {
return {
onFileSelect: (file) => {
dispatch(selectFile(file));
},
};
}
export default connect(mapStateToProps, mapDispatchToProps)(PublishDropzone);

35
react/components/PublishForm.jsx
View file

@ -7,6 +7,9 @@ import PublishThumbnailInput from './PublishThumbnailInput.jsx';
import PublishMetadataInputs from './PublishMetadataInputs.jsx';
import AnonymousOrChannelSelect from './AnonymousOrChannelSelect.jsx';
import { selectFile, clearFile } from '../actions';
import { connect } from 'react-redux';
class PublishForm extends React.Component {
constructor (props) {
super(props);
@ -14,7 +17,7 @@ class PublishForm extends React.Component {
this.state = {
error : null,
showMetadataInputs: false,
}
};
this.publish = this.publish.bind(this);
}
publish () {
@ -80,7 +83,7 @@ class PublishForm extends React.Component {
</div>
<div className="row row--short align-content-center">
<button className="button--cancel" onClick={this.props.clearUploaderState}>Cancel</button>
<button className="button--cancel" onClick={this.props.onFileClear}>Cancel</button>
</div>
<div className="row row--short align-content-center">
@ -94,4 +97,30 @@ class PublishForm extends React.Component {
}
};
module.exports = PublishForm;
const mapStateToProps = state => {
return {
loggedInChannelName : state.loggedInChannelName,
loggedInChannelShortId: state.loggedInChannelShortId,
publishToChannel : state.publishToChannel,
file : state.file,
title : state.title,
claim : state.claim,
thumbnail : state.thumbnail,
description : state.description,
license : state.license,
nsfw : state.nsfw,
};
};
const mapDispatchToProps = dispatch => {
return {
onFileSelect: (file) => {
dispatch(selectFile(file));
},
onFileClear: () => {
dispatch(clearFile());
},
};
}
export default connect(mapStateToProps, mapDispatchToProps)(PublishForm);

18
react/components/PublishMetadataInputs.jsx
View file

@ -5,10 +5,10 @@ class MetadataInputs extends React.Component {
super(props);
this.state = {
showInputs : false,
description: null,
};
this.toggleShowInputs = this.toggleShowInputs.bind(this);
this.handleInput = this.handleInput.bind(this);
this.handleSelection = this.handleSelection.bind(this);
}
toggleShowInputs () {
if (this.state.showInputs) {
@ -19,10 +19,16 @@ class MetadataInputs extends React.Component {
}
handleInput (event) {
event.preventDefault();
const name = event.target.name;
const value = event.target.value;
const target = event.target;
const name = target.name;
const value = target.type === 'checkbox' ? target.checked : target.value;
this.props.updateUploaderState(name, value);
}
handleSelection (event) {
const selectedOption = event.target.selectedOptions[0].value;
this.props.updateUploaderState('', value);
}
render () {
return (
<div>
@ -37,7 +43,7 @@ class MetadataInputs extends React.Component {
<div className="column column--3 column--med-10 align-content-top">
<label htmlFor="publish-license" className="label">Description:</label>
</div><div className="column column--7 column--sml-10">
<textarea rows="1" id="publish-description" className="textarea textarea--primary textarea--full-width" name="description" placeholder="Optional description" onChange={this.handleInput}>{this.state.description}</textarea>
<textarea rows="1" id="publish-description" className="textarea textarea--primary textarea--full-width" name="description" placeholder="Optional description" value={this.props.description} onChange={this.handleInput} />
</div>
</div>
@ -45,7 +51,7 @@ class MetadataInputs extends React.Component {
<div className="column column--3 column--med-10">
<label htmlFor="publish-license" className="label">License:</label>
</div><div className="column column--7 column--sml-10">
<select type="text" id="publish-license" className="select select--primary">
<select type="text" name="license" id="publish-license" className="select select--primary" onSelect={this.handleSelection}>
<option value=" ">Unspecified</option>
<option value="Public Domain">Public Domain</option>
<option value="Creative Commons">Creative Commons</option>
@ -57,7 +63,7 @@ class MetadataInputs extends React.Component {
<div className="column column--3">
<label htmlFor="publish-nsfw" className="label">Mature:</label>
</div><div className="column column--7">
<input className="input-checkbox" type="checkbox" id="publish-nsfw" />
<input className="input-checkbox" type="checkbox" id="publish-nsfw" name="nsfw" checked={this.props.nsfw} onChange={this.handleInput} />
</div>
</div>

59
react/PublishTool.js → react/components/PublishTool.jsx
View file

@ -1,34 +1,14 @@
import React from 'react';
import ReactDOM from 'react-dom';
import PublishDropzone from './components/PublishDropzone.jsx';
import PublishForm from './components/PublishForm.jsx';
import PublishStatus from './components/PublishStatus.jsx';
const DROPZONE = 'DROPZONE';
const DETAILS = 'DETAILS';
const STATUS = 'STATUS';
const initialState = {
showComponent : DROPZONE, // DROPZONE, DETAILS, or PUBLISHING
loggedInChannelName : null,
loggedInChannelShortId: null,
publishToChannel : false,
error : null,
file : null,
title : '',
claim : '',
thumbnail : '',
description : '',
license : '',
nsfw : '',
};
import PublishDropzone from './PublishDropzone.jsx';
import PublishForm from './PublishForm.jsx';
import PublishStatus from './PublishStatus.jsx';
import {connect} from 'react-redux';
class PublishTool extends React.Component {
constructor (props) {
super(props);
this.state = initialState;
// bind class methods with `this`
this.updateUploaderState = this.updateUploaderState.bind(this);
this.clearUploaderState = this.clearUploaderState.bind(this);
this.makeGetRequest = this.makeGetRequest.bind(this);
this.makePostRequest = this.makePostRequest.bind(this);
this.cleanseInput = this.cleanseInput.bind(this);
@ -46,9 +26,6 @@ class PublishTool extends React.Component {
console.log(`updateUploaderState ${name} ${value}`);
this.setState({[name]: value});
}
clearUploaderState () {
this.setState(initialState);
}
makeGetRequest (url) {
return new Promise((resolve, reject) => {
let xhttp = new XMLHttpRequest();
@ -111,33 +88,22 @@ class PublishTool extends React.Component {
render () {
return (
<div className="row row--tall flex-container--column">
{ this.state.showComponent === DROPZONE &&
{ !this.props.file &&
<PublishDropzone
updateUploaderState={this.updateUploaderState}
cleanseInput={this.cleanseInput}
/>
}
{ this.state.showComponent === DETAILS &&
{ this.props.file &&
<PublishForm
updateUploaderState={this.updateUploaderState}
clearUploaderState={this.clearUploaderState}
makeGetRequest={this.makeGetRequest}
makePostRequest={this.makePostRequest}
cleanseInput={this.cleanseInput}
loggedInChannelName={this.state.loggedInChannelName}
loggedInChannelShortId={this.state.loggedInChannelShortId}
publishToChannel={this.state.publishToChannel}
error={this.state.error}
file={this.state.file}
title={this.state.title}
claim={this.state.claim}
thumbnail={this.state.thumbnail}
description={this.state.description}
license={this.state.license}
nsfw={this.state.nsfw}
/>
}
{ this.state.showComponent === STATUS &&
{ this.props.publishStatus &&
<PublishStatus />
}
</div>
@ -145,7 +111,10 @@ class PublishTool extends React.Component {
}
};
ReactDOM.render(
<PublishTool />,
document.getElementById('react-uploader')
);
const mapStateToProps = state => {
return {
file: state.file,
};
};
export default connect(mapStateToProps, null)(PublishTool);

15
react/index.js Normal file
View file

@ -0,0 +1,15 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import Reducers from './reducers/index.js';
import PublishTool from './components/PublishTool.jsx';
let store = createStore(Reducers)
ReactDOM.render(
<Provider store={store}>
<PublishTool />
</Provider>,
document.getElementById('react-publish-tool')
)

36
react/reducers/index.js Normal file
View file

@ -0,0 +1,36 @@
import {FILE_CLEAR, FILE_SELECTED} from '../actions';
const DROPZONE = 'DROPZONE';
const initialState = {
showComponent : DROPZONE,
loggedInChannelName : null,
loggedInChannelShortId: null,
publishToChannel : false,
publishStatus : null,
error : null,
file : null,
title : '',
claim : '',
thumbnail : '',
description : '',
license : '',
nsfw : '',
};
/*
Reducers describe how the application's state changes in response to actions
*/
export default function (state = initialState, action) {
switch (action.type) {
case FILE_SELECTED:
return Object.assign({}, state, {
file: action.payload,
});
case FILE_CLEAR:
return initialState;
default:
return state;
}
}

2
views/index.handlebars
View file

@ -1,5 +1,5 @@
<div class="row row--tall flex-container--column">
<div id="react-uploader" class="row row--padded row--tall flex-container--column">
<div id="react-publish-tool" class="row row--padded row--tall flex-container--column">
<div class="row row--padded row--tall flex-container--column flex-container--center-center">
<img src="/assets/img/loading.gif" alt="loading">
</div>

2
webpack.config.js
View file

@ -1,7 +1,7 @@
const path = require('path');
module.exports = {
entry : './react/PublishTool.js',
entry : './react/index.js',
output: {
path : path.join(__dirname, '/public/bundle/'),
filename: 'bundle.js',