the convert boilerplate code won't work with the instructions in section 5 video 72

[alanbo]

If you follow video 72 line by line it won't work as /src/components/ConvertPanel.js calls the action creator without any arguments. Video assumes that the convertVideos action creator is called with an array containing list of videos.

Solution: Change the ConvertPanel.js so that it calls convertVideos action creator with an array of objects containing the information like so:

class ConvertPanel extends Component {

  onCancelPressed = () => {
    this.props.removeAllVideos();
    this.props.history.push('/')
  }

  // 2. create convert videos function that passes array of videos to the action creator
  convertVideos = () => {
    console.log(this.props.videos);
    this.props.convertVideos(this.props.videos);
  }

  render() {

    // 3. replace this.props.convertVideos with this.convertVideos - the function you've just created
    return (
      <div className="convert-panel">
        <button className="btn red" onClick={this.onCancelPressed}>
          Cancel
        </button>
        <button className="btn" onClick={this.convertVideos}>
          Convert!
        </button>
      </div>
    );
  };
}

// 1. add action creator and turn object into array of video objects
const mapStateToProps = state => {
  return {
    videos: Object.values(state.videos)
  }
}

export default withRouter(
  connect(mapStateToProps, actions)(ConvertPanel)
);

[davidhooey]

I updated ConvertPanel.js to contain these changes but there still seems to be an issue. I noticed the actions/index.js has a different definition for the convertVideos function as compared to your instruction videos. The videos object doesn't seem to be available in the convertVideos function.

convertVideos definition on GitHub:

export const convertVideos = () => (dispatch, getState) => {
  ...
}

convertVideos definition in instructional video:

export const convertVideos = videos => dispatch => {
  ...
}

I tried both definitions with no luck. This issue showed up at section 5 video 71, when the outputDirectory could not be logged.

[lse123]

https://www.udemy.com/electron-react-tutorial/learn/v4/questions/3844878

thanks - you were right

instructor changed except from ​

index.js // electron side src/actions/index.js and src/components/ConvertPanel.js​

now app followed step by step works beyond 71 lecture till end... of course...

[HomoSapienLCY]

I have the same problem, and solve by looking at the complete code I think you need to: 1 bind the convertVideos with the videos: this.props.convertVideos.bind(null, this.props.videos). So that the reference will be in the right context 2 add mapStateToProps, so that the videos passed in will not be null:

function mapStateToProps(state) { const videos = _.map(state.videos); return { videos }; }

// need mapStateToProps, or the videos passing in will be null export default withRouter( connect(mapStateToProps, actions)(ConvertPanel) );

[Javadebi]

I updated ConvertPanel.js to contain these changes but there still seems to be an issue. I noticed the actions/index.js has a different definition for the convertVideos function as compared to your instruction videos. The videos object doesn't seem to be available in the convertVideos function.

convertVideos definition on GitHub:

export const convertVideos = () => (dispatch, getState) => {
  ...
}

convertVideos definition in instructional video:

export const convertVideos = videos => dispatch => {
  ...
}

I tried both definitions with no luck. This issue showed up at section 5 video 71, when the outputDirectory could not be logged.

Did you have any luck solving the issue?