added redux to metadata inputs

react/components/PublishForm.jsx

@@ -63,9 +63,9 @@ class PublishForm extends React.Component {
               <ChannelSelector />
             </div>
 
-            <PublishMetadataInputs
-              updateUploaderState={this.props.updateUploaderState}
-            />
+            <div className="row row--padded row--no-top row--no-bottom row--wide">
+              <PublishMetadataInputs />
+            </div>
 
             <div className="row row--padded row--wide">
               <div className="input-error" id="input-error-publish-submit" hidden="true">{this.state.error}</div>
@@ -92,9 +92,6 @@ const mapStateToProps = state => {
     fileType : state.file.type,
     claim    : state.claim,
     thumbnail: state.thumbnail,
-    description: state.description,
-    license    : state.license,
-    nsfw       : state.nsfw,
   };
 };
 

react/components/PublishMetadataInputs.jsx

@@ -1,4 +1,6 @@
 import React from 'react';
+import { connect } from 'react-redux';
+import { updateMetadata } from '../actions';
 
 class MetadataInputs extends React.Component {
   constructor (props) {
@@ -8,31 +10,33 @@ class MetadataInputs extends React.Component {
     };
     this.toggleShowInputs = this.toggleShowInputs.bind(this);
     this.handleInput = this.handleInput.bind(this);
+    this.handleCheck = this.handleCheck.bind(this);
     this.handleSelection = this.handleSelection.bind(this);
   }
   toggleShowInputs () {
-    if (this.state.showInputs) {
-      this.setState({'showInputs': false});
-    } else {
-      this.setState({'showInputs': true});
-    }
+    this.setState({'showInputs': !this.state.showInputs});
   }
   handleInput (event) {
     event.preventDefault();
-    const target = event.target;
-    const name = target.name;
-    const value = target.type === 'checkbox' ? target.checked : target.value;
-    this.props.updateUploaderState(name, value);
+    const name = event.target.name;
+    const value = event.target.value;
+    this.props.onMetadataChange(name, value);
+  }
+  handleCheck (event) {
+    console.log('handle input', event);
+    event.preventDefault();
+    const name = event.target.name;
+    const value = event.target.checked;
+    this.props.onMetadataChange(name, value);
   }
   handleSelection (event) {
+    const name = event.target.name;
     const selectedOption = event.target.selectedOptions[0].value;
-    this.props.updateUploaderState('', value);
+    this.props.onMetadataChange(name, selectedOption);
   }
-
   render () {
     return (
       <div>
-        <div className="row row--padded row--no-top row--no-bottom row--wide">
         <div className="column column--10">
           <a className="label link--primary" id="publish-details-toggle" href="#" onClick={this.toggleShowInputs}>{this.state.showInputs ? '[less]' : '[more]'}</a>
         </div>
@@ -51,7 +55,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" name="license" id="publish-license" className="select select--primary" onSelect={this.handleSelection}>
+                <select type="text" name="license" id="publish-license" className="select select--primary" onChange={this.handleSelection}>
                   <option value=" ">Unspecified</option>
                   <option value="Public Domain">Public Domain</option>
                   <option value="Creative Commons">Creative Commons</option>
@@ -63,16 +67,30 @@ 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" name="nsfw" checked={this.props.nsfw} onChange={this.handleInput} />
+                <input className="input-checkbox" type="checkbox" id="publish-nsfw" name="nsfw" checked={this.props.nsfw} onChange={this.handleCheck} />
               </div>
             </div>
-
           </div>
         )}
       </div>
-      </div>
     );
   }
 }
 
-module.exports = MetadataInputs;
+const mapStateToProps = state => {
+  return {
+    description: state.metadata.description,
+    license    : state.metadata.license,
+    nsfw       : state.metadata.nsfw,
+  };
+};
+
+const mapDispatchToProps = dispatch => {
+  return {
+    onMetadataChange: (name, value) => {
+      dispatch(updateMetadata(name, value));
+    },
+  };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(MetadataInputs);

react/index.js

@@ -5,7 +5,10 @@ import { createStore } from 'redux';
 import Reducers from './reducers/index.js';
 import PublishTool from './components/PublishTool.jsx';
 
-let store = createStore(Reducers)
+let store = createStore(
+  Reducers,
+  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+);
 
 ReactDOM.render(
   <Provider store={store}>

react/reducers/index.js

@@ -19,7 +19,7 @@ const initialState = {
     thumbnail  : '',
     description: '',
     license    : '',
-    nsfw       : '',
+    nsfw       : false,
   },
 };
 
@@ -38,9 +38,9 @@ export default function (state = initialState, action) {
     case METADATA_UPDATE:
       console.log(`reducer for ${action.name} ${action.value}`);
       return Object.assign({}, state, {
-        metadata: {
+        metadata: Object.assign({}, state.metadata, {
           [action.name]: action.value,
-        },
+        }),
       });
     case CLAIM_UPDATE:
       return Object.assign({}, state, {