blog with glitch

src/actions/index.js

@@ -1,15 +1,41 @@
 import axios from "axios";
 
 export const FETCH_POSTS = "fetch_posts";
+export const CREATE_POST = "create_posts";
+export const FETCH_POST = "fetch_post";
+
+
+
 const ROOT_URL = "https://reduxblog.herokuapp.com/api";
 const API_KEY = "?key=mykey4445";
+const url = `${ROOT_URL}/posts${API_KEY}`;
+
 
 export function fetchPosts() {
-  const url = `${ROOT_URL}/posts${API_KEY}`;
+
   const request = axios.get(url);
 
   return {
     type: FETCH_POSTS,
     payload: request
   };
 }
+
+
+export function createPost(values, callback){
+const request = axios.post(url, values)
+.then(() => callback());
+  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
+  };
+}

src/components/posts_index.js

@@ -0,0 +1,41 @@
+import _ from "lodash";
+import React, { Component } from "react";
+
+import { connect } from "react-redux";
+import { Link } from "react-router-dom";
+import { fetchPosts } from "../actions";
+
+class PostIndex extends Component {
+  componentDidMount() {
+    this.props.fetchPosts();
+  }
+
+  renderPosts() {
+    return _.map(this.props.posts, post => {
+      return (
+        <li className="list-group-item" key={post.id}>
+          {post.title}
+        </li>
+      );
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <div className="text-xs-right">
+          <Link className="btn btn-primary" to="/posts/new">add a Post</Link>
+        </div>
+
+        <h3>Posts:</h3>
+        <ul className="list-group">{this.renderPosts()}</ul>
+      </div>
+    );
+  }
+}
+
+function mapStateToProps(state) {
+  return { posts: state.posts };
+}
+
+export default connect(mapStateToProps, { fetchPosts })(PostIndex);

src/components/posts_new.js

@@ -0,0 +1,91 @@
+import React, { Component } from "react";
+import { Link } from "react-router-dom";
+import { Field, reduxForm } from "redux-form";
+import {connect} from 'react-redux';
+import {createPost} from '../actions';
+
+class PostsNew extends Component {
+  renderField(field) {
+    const { meta: { touched, error} } =field;
+    const className=`form-group ${touched && error ? 'has-danger': ''}`;
+    return (
+      <div className={className}>
+        <label>{field.label}</label>
+        <input className="form-control" type="text" {...field.input} />
+      <div className="text-help">
+        {touched ? error: ''}
+      </div>
+
+      </div>
+    );
+  }
+
+onSubmit(values){
+
+this.props.createPost(values, () => {
+  this.props.history.push('/');
+
+});
+
+}
+
+  render() {
+    const { handleSubmit } = this.props
+    return (
+      <div>
+
+
+        <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
+          <Field
+            label="Title of your post"
+            name="title"
+            component={this.renderField}
+          />
+          <Field
+            label="Categories"
+            name="categories"
+            component={this.renderField}
+          />
+          <Field
+            label="Post Content"
+            name="content"
+            component={this.renderField}
+          />
+          <button type="submit" className="btn btn-primary">
+            Submit
+          </button>
+          <Link to="/" className="btn btn-danger">
+            Cancel
+          </Link>
+        </form>
+      </div>
+    );
+  }
+}
+
+function validate(values) {
+  const errors = {};
+
+  //Validate the inputs from 'values'
+  if (!values.title) {
+    errors.title = "Enter a title!";
+  }
+  if (!values.categories) {
+    errors.categories = "Enter a categories!";
+  }
+  if (!values.content) {
+    errors.content = "Enter some content!";
+  }
+
+  // If errors is empty the form is fine to submit
+  //If errors has *any* properties, redux form assumes form is valid
+  return errors;
+}
+
+export default reduxForm({
+  validate,
+  form: "PostsNewForm"
+})(
+  connect(null,{ createPost })(PostsNew)
+  );
+

src/components/posts_show.js

@@ -0,0 +1,27 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import { fetchPost } from "../actions";
+
+class PostsShow extends Component {
+  componentDidMount() {
+    const { id } = this.props.match.params;
+    this.props.fetchPost(id);
+  }
+
+  render() {
+    const { post } = this.props;
+    return (
+      <div>
+        <h3>Title</h3>
+        <h6>Categories: </h6>
+        <p>Content</p>
+      </div>
+    );
+  }
+}
+
+function mapStateToProps({ posts }, ownProps) {
+  return { post: posts[ownProps.match.params.id] };
+}
+
+export default connect(mapStateToProps, { fetchPost })(PostsShow);

src/index.js

@@ -2,19 +2,26 @@ import React from "react";
 import ReactDOM from "react-dom";
 import { Provider } from "react-redux";
 import { createStore, applyMiddleware } from "redux";
-import { BrowserRouter, Route } from "react-router-dom";
+import { BrowserRouter, Route, Switch } from "react-router-dom";
 import promise from "redux-promise";
 
 import reducers from "./reducers";
-import PostIndex from "./components/post_index";
+import PostsIndex from "./components/posts_index";
+import PostsNew from "./components/posts_new";
+import PostsShow from "./components/posts_show";
 
 const createStoreWithMiddleware = applyMiddleware(promise)(createStore);
 
 ReactDOM.render(
   <Provider store={createStoreWithMiddleware(reducers)}>
     <BrowserRouter>
       <div>
-        <Route path="/" component={PostIndex} />
+        <Switch>
+          <Route path="/posts/new" component={PostsNew} />
+          <Route path="/posts/:id" component={PostsShow} />
+          <Route path="/" component={PostsIndex} />
+
+        </Switch>
       </div>
     </BrowserRouter>
   </Provider>,

src/reducers/index.js

@@ -1,8 +1,10 @@
 import { combineReducers } from 'redux';
+import { reducer as formReducer} from 'redux-form';
 import PostReducer from './reducer_posts'
 
 const rootReducer = combineReducers({
-  posts: PostReducer
+  posts: PostReducer,
+  form: formReducer
 });
 
 export default rootReducer;

src/reducers/reducer_posts.js

@@ -1,9 +1,18 @@
 import _ from "lodash";
-import { FETCH_POSTS } from "../actions";
+import { FETCH_POSTS,FETCH_POST } from "../actions";
 
 export default function(state = {}, action) {
   switch (action.type) {
+    case FETCH_POST:
+    // const post = action.payload.data;
+    // const newState = { ...state };
+    // newState[post.id] = post;
+    // return newState;
+
+    return{...state, [action.payload.data.id]: action.payload.data};
+
     case FETCH_POSTS:
+
       return _.mapKeys(action.payload.data, 'id');
 
     default:

style/style.css

@@ -0,0 +1,3 @@
+form a{
+  margin-left:10px;
+}