From 94cdb37a1320fed30db52f676888aeddb8e311ec Mon Sep 17 00:00:00 2001 From: bill bittner Date: Mon, 8 Jan 2018 17:06:31 -0800 Subject: [PATCH] added redux --- package.json | 8 ++- react/actions/index.js | 17 ++++++ react/components/PublishDropzone.jsx | 32 ++++++---- react/components/PublishForm.jsx | 35 ++++++++++- react/components/PublishMetadataInputs.jsx | 18 ++++-- .../PublishTool.jsx} | 59 +++++-------------- react/index.js | 15 +++++ react/reducers/index.js | 36 +++++++++++ views/index.handlebars | 2 +- webpack.config.js | 2 +- 10 files changed, 154 insertions(+), 70 deletions(-) create mode 100644 react/actions/index.js rename react/{PublishTool.js => components/PublishTool.jsx} (67%) create mode 100644 react/index.js create mode 100644 react/reducers/index.js diff --git a/package.json b/package.json index a211350b..0d869e4d 100644 --- a/package.json +++ b/package.json @@ -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" } } diff --git a/react/actions/index.js b/react/actions/index.js new file mode 100644 index 00000000..e20a077d --- /dev/null +++ b/react/actions/index.js @@ -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, + }; +}; diff --git a/react/components/PublishDropzone.jsx b/react/components/PublishDropzone.jsx index 90bdd256..a0158ac3 100644 --- a/react/components/PublishDropzone.jsx +++ b/react/components/PublishDropzone.jsx @@ -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); diff --git a/react/components/PublishForm.jsx b/react/components/PublishForm.jsx index f8b1dfbc..f7529c2e 100644 --- a/react/components/PublishForm.jsx +++ b/react/components/PublishForm.jsx @@ -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 {
- +
@@ -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); diff --git a/react/components/PublishMetadataInputs.jsx b/react/components/PublishMetadataInputs.jsx index a57b0f0e..4cb28b48 100644 --- a/react/components/PublishMetadataInputs.jsx +++ b/react/components/PublishMetadataInputs.jsx @@ -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 (
@@ -37,7 +43,7 @@ class MetadataInputs extends React.Component {
- +