added controlled component with redux (title)

react/actions/index.js

@@ -1,12 +1,13 @@
 // export action types
 export const FILE_SELECTED = 'FILE_SELECTED';
 export const FILE_CLEAR = 'FILE_CLEAR';
+export const METADATA_UPDATE = 'TITLE_UPDATE';
 
 // export action creators
 export function selectFile (file) {
   return {
-    type   : FILE_SELECTED,
+    type: FILE_SELECTED,
-    payload: file,
+    file: file,
   };
 };
 
@@ -15,3 +16,11 @@ export function clearFile () {
     type: FILE_CLEAR,
   };
 };
+
+export function updateMetadata (name, value) {
+  return {
+    type: METADATA_UPDATE,
+    name,
+    value,
+  };
+};

react/components/PublishForm.jsx

@@ -28,10 +28,7 @@ class PublishForm extends React.Component {
       <div className="row row--no-bottom">
         <div className="column column--10">
 
-          <PublishTitleInput
+          <PublishTitleInput />
-            title={this.props.title}
-            updateUploaderState={this.props.updateUploaderState}
-          />
 
         </div>
         <div className="column column--5 column--sml-10" >
@@ -103,7 +100,6 @@ const mapStateToProps = state => {
     loggedInChannelShortId: state.loggedInChannelShortId,
     publishToChannel      : state.publishToChannel,
     file                  : state.file,
-    title                 : state.title,
     claim                 : state.claim,
     thumbnail             : state.thumbnail,
     description           : state.description,

react/components/PublishTitleInput.jsx

@@ -1,4 +1,6 @@
 import React from 'react';
+import {updateMetadata} from '../actions';
+import {connect} from 'react-redux';
 
 class TitleInput extends React.Component {
   constructor (props) {
@@ -9,7 +11,7 @@ class TitleInput extends React.Component {
     e.preventDefault();
     const name = e.target.name;
     const value = e.target.value;
-    this.props.updateUploaderState(name, value);
+    this.props.onMetadataChange(name, value);
   }
   render () {
     return (
@@ -18,4 +20,18 @@ class TitleInput extends React.Component {
   }
 }
 
-module.exports = TitleInput;
+const mapStateToProps = state => {
+  return {
+    title: state.metadata.title,
+  };
+};
+
+const mapDispatchToProps = dispatch => {
+  return {
+    onMetadataChange: (name, value) => {
+      dispatch(updateMetadata(name, value));
+    },
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(TitleInput);

react/components/PublishTool.jsx

@@ -97,7 +97,6 @@ class PublishTool extends React.Component {
         { this.props.file &&
           <PublishForm
             updateUploaderState={this.updateUploaderState}
-            clearUploaderState={this.clearUploaderState}
             makeGetRequest={this.makeGetRequest}
             makePostRequest={this.makePostRequest}
             cleanseInput={this.cleanseInput}

react/reducers/index.js

@@ -1,21 +1,20 @@
-import {FILE_CLEAR, FILE_SELECTED} from '../actions';
+import {FILE_CLEAR, FILE_SELECTED, METADATA_UPDATE} from '../actions';
-
-const DROPZONE = 'DROPZONE';
 
 const initialState = {
-  showComponent         : DROPZONE,
   loggedInChannelName   : null,
   loggedInChannelShortId: null,
   publishToChannel      : false,
   publishStatus         : null,
   error                 : null,
   file                  : null,
-  title                 : '',
+  metadata              : {
-  claim                 : '',
+    title      : '',
-  thumbnail             : '',
+    claim      : '',
-  description           : '',
+    thumbnail  : '',
-  license               : '',
+    description: '',
-  nsfw                  : '',
+    license    : '',
+    nsfw       : '',
+  },
 };
 
 /*
@@ -26,10 +25,17 @@ export default function (state = initialState, action) {
   switch (action.type) {
     case FILE_SELECTED:
       return Object.assign({}, state, {
-        file: action.payload,
+        file: action.file,
       });
     case FILE_CLEAR:
       return initialState;
+    case METADATA_UPDATE:
+      console.log(`reducer for ${action.name} ${action.value}`);
+      return Object.assign({}, state, {
+        metadata: {
+          [action.name]: action.value,
+        },
+      })
     default:
       return state;
   }