Marcus ShowTodo

ShowTodo.jsx

import React, { Component, PropTypes } from 'react';
import { reduxForm } from 'redux-form';
import { connect } from 'react-redux';
import LogoutHeader from 'LogoutHeader';
import { fetchTodo, updateTodo, deleteTodo } from 'Actions';
import { Link } from 'react-router';

var contextTypes = {
	router: PropTypes.object
};


var ShowTodo = React.createClass({

	getInitialState: function () {
		return {
			descriptionChanged: false,
			newDescription: '',
			newTitle: '',
			done: false,
			id: 0
		};
	},

	componentWillMount: function() {
		console.log('will mount')
	},

	render: function () {

		console.log("this.state.newTitle in State: ", this.state.newTitle);

		console.log("this.state.newDescription in state: ", this.state.newDescription);

		console.log("this.state.descriptionChanged: ", this.state.descriptionChanged);


		const { todo } = this.props;
		const { fields: {title, description}, handleSubmit } = this.props;


		if (!todo) {
			return (
				<h3>Loading...</h3>
			);
		}

		return (
			<input
				type="text"
				className="form-control"
				value={this.state.newTitle}
				{...title} />
		);
	},

	changeButtons: function () {
	//
	// 	if (!this.state.descriptionChanged) {
	// 		return null;
	// 	} else {
	//
	// 		return [
	// 		<button
	// 		  type="submit"
	// 		  id="editTodoSave"
	// 		  className="btn btn-custom"
	// 		  ><span className="glyphicon glyphicon-floppy-save"></span></button>,
	// 		<button
	// 		  id="editTodoRefresh"
	// 		  className="btn btn-custom"
	// 		  onClick={this.handleUndoClick}
	// 		  ><span className="glyphicon glyphicon-refresh"></span></button>
	// 	   ];
	// 	}
	},
	//
	handleDescriptionChange: function (event) {
	// 	this.setState({
	// 		descriptionChanged: true,
	// 		newDescription: event.target.value
	// 	});
	// 	console.log("This should get logged to the console if handleDescriptionChange gets called");
	},

	handleTitleChange: function (event) {
	// 	this.setState({
	// 		descriptionChanged: true,
	// 		newTitle: event.target.value
	// 	});
	// 	console.log("This should get logged to the console if handleTitleChange gets called");
	},

	handleDoneChange: function (event) {
	// 	this.setState({
	// 		done: !this.state.done
	// 	});
	//
	// 	var props = {
	// 		completed: this.state.done
	// 	};
	//
	// 	this.props.updateTodo(this.state.id, JSON.stringify(props));
	},

	handleDeleteClick: function () {
	// 	this.props.deleteTodo(this.state.id).then(() => {
	// 		this.context.router.push('/todos_index');
	// 	});
	},

	handleSaveClick: function(props) {
	// 	this.props.updateTodo(this.state.id, JSON.stringify(props)).then(() => {
	// 		alert("Todo updates should have been recieved in database");
	// 		this.context.router.push('/todos_index');
	// 	});
	},

	handleUndoClick: function() {
	// 	this.setState({
	// 		descriptionChanged: false,
	// 		newTitle: this.props.todo.title,
	// 		newDescription: this.props.todo.description,
	// 		errors: {
	// 			title: '',
	// 			description: ''
	// 		}
	//
	// 	});
	}

});

function validate(values) {
	const errors = {};

	if (!values.title) {
		errors.title = 'Please enter a title';
	}

	if (values.title) {
		if (values.title.length > 25){
			errors.title = 'You exceeded 25 characters';
		}

	}

	if (!values.description) {
		errors.description = 'Please enter your description';
	}

	if (values.description) {
		if (values.description.length > 500) {
			errors.description = "You exceeded 500 characters";
		}
	}

	return errors;
}

function mapStateToProps(state) {
	return { todo: state.todos.todo };
}

export default reduxForm({
	form: 'ShowTodoForm',
	fields: ['title', 'description'],
	validate								   //These configurations will be added to the application state, so reduxForm is very similar to the connect function.
											   //connect: first argument is mapStateToProps, second is mapDispatchToProps
											   //reduxForm: 1st is form configuration, 2nd is mapStateToProps, 3rd is mapDispatchToProps

}, mapStateToProps, { fetchTodo, updateTodo, deleteTodo })(ShowTodo);