section 12 13 added

Author: indiTechCoder

Section-03-ES6 for React JS/ES6-Starter App/app/app.js

@@ -0,0 +1,38 @@
+import axios from 'axios';
+
+export const FETCH_POSTS = 'FETCH_POSTS';
+export const CREATE_POST = 'CREATE_POST';
+export const FETCH_POST = 'FETCH_POST';
+export const DELETE_POST = 'DELETE_POST';
+
+const ROOT_URL = 'http://reduxblog.herokuapp.com/';
+const API_KEY = 'jjkgjg76757qasx77868sx';
+
+export function fetchPosts(){
+	const request = axios.get(`${ROOT_URL}/posts${API_KEY}`);
+	return {
+	type: FETCH_POSTS,
+	payload : request
+	};
+}
+export function createPosts(props){
+	const request = axios.post(`${ROOT_URL}/posts${API_KEY}` , props);
+	return {
+	type: CREATE_POST,
+	payload : request
+	};
+}
+export function fetchPost(id){
+	const request = axios.get(`${ROOT_URL}/posts${id}${API_KEY}`);
+	return {
+	type: FETCH_POST,
+	payload : request
+	};
+}
+export function deletePost(id){
+	const request = axios.delete(`${ROOT_URL}/posts${id}${API_KEY}`);
+	return {
+	type: DELETE_POST,
+	payload : request
+	};
+}

Section-04 -React.js Fundamentals with ES6 & Web pack/ES6 Webpack React Router/lessons/07-more-nesting/modules/NavLink.js

@@ -0,0 +1,81 @@
+import React, { Component, PropTypes } from 'react';
+import { reduxForm } from 'redux-form';
+import { createPost } from '../actions/index';
+import { Link } from 'react-router';
+
+class PostsNew extends Component {
+  
+  static contextTypes = {
+    router: PropTypes.object
+  };
+
+  onSubmit(props) {
+    this.props.createPost(props)
+      .then(() => {
+        // blog post has been created, navigate the user to the index
+        // We navigate by calling this.context.router.push with the
+        // new path to navigate to.
+        this.context.router.push('/');
+      });
+  }
+
+  render() {
+    const { fields: { title, categories, content }, handleSubmit } = this.props;
+
+    return (
+      <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
+        <h3>Create A New Post</h3>
+
+        <div className={`form-group ${title.touched && title.invalid ? 'has-danger' : ''}`}>
+          <label>Title</label>
+          <input type="text" className="form-control" {...title} />
+          <div className="text-help">
+            {title.touched ? title.error : ''}
+          </div>
+        </div>
+
+        <div className={`form-group ${categories.touched && categories.invalid ? 'has-danger' : ''}`}>
+          <label>Categories</label>
+          <input type="text" className="form-control" {...categories} />
+          <div className="text-help">
+            {categories.touched ? categories.error : ''}
+          </div>
+        </div>
+
+        <div className={`form-group ${content.touched && content.invalid ? 'has-danger' : ''}`}>
+          <label>Content</label>
+          <textarea className="form-control" {...content} />
+          <div className="text-help">
+            {content.touched ? content.error : ''}
+          </div>
+        </div>
+
+        <button type="submit" className="btn btn-primary">Submit</button>
+        <Link to="/" className="btn btn-danger">Cancel</Link>
+      </form>
+    );
+  }
+}
+
+function validate(values) {
+  const errors = {};
+  if (!values.title) {
+    errors.title = 'Enter a username';
+  }
+  if (!values.categories) {
+    errors.categories = 'Enter categories';
+  }
+  if(!values.content) {
+    errors.content = 'Enter some content';
+  }
+
+  return errors;
+}
+
+// connect: first argument is mapStateToProps, 2nd is mapDispatchToProps
+// reduxForm: 1st is form config, 2nd is mapStateToProps, 3rd is mapDispatchToProps
+export default reduxForm({
+  form: 'PostsNewForm',
+  fields: ['title', 'categories', 'content'],
+  validate
+}, null, { createPost })(PostsNew);