StephenGrider · serjt12 · Jan 23, 2018 · Jan 24, 2018 · Jan 25, 2018 · Jan 25, 2018
diff --git a/index.html b/index.html
@@ -9,5 +9,5 @@
   <body>
     <div class="container"></div>
   </body>
-  <script src="/bundle.js"></script>
+  <script rel="text/babel" src="/bundle.js"></script>
 </html>
diff --git a/src/actions/index.js b/src/actions/index.js
@@ -0,0 +1,46 @@
+import axios from "axios";
+
+export const FETCH_POSTS = "fetch_posts";
+export const CREATE_POST = "create_posts";
+export const FETCH_POST = "fetch_post";
+export const DELETE_POST = "delete_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 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
+  };
+}
+
+export function deletePost(id, callback) {
+  const request = axios
+    .delete(`${ROOT_URL}/posts/${id}${API_KEY}`)
+    .then(() => callback());
+  return {
+    type: DELETE_POST,
+    payload: id
+  };
+}
diff --git a/src/components/app.js b/src/components/app.js
diff --git a/src/components/posts_index.js b/src/components/posts_index.js
@@ -0,0 +1,43 @@
+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}>
+          <Link to={`/posts/${post.id}`}>{post.title}</Link>
+        </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);
diff --git a/src/components/posts_new.js b/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 margin">
+            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)
+  );
+
diff --git a/src/components/posts_show.js b/src/components/posts_show.js
@@ -0,0 +1,52 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import { fetchPost, deletePost } from "../actions";
+import { Link } from "react-router-dom";
+
+class PostsShow extends Component {
+  componentDidMount() {
+    //To fetch info just once
+    // if (!this.props.post) {
+      const { id } = this.props.match.params;
+      this.props.fetchPost(id);
+    }
+  // }
+
+  onDeleteClick(){
+    const { id } = this.props.match.params;
+    this.props.deletePost(id, () => {
+      this.props.history.push('/');
+    });
+  }
+
+  render() {
+    const { post } = this.props;
+
+    if (!post) {
+      return <div>Loading...</div>;
+    }
+
+    return (
+      <div>
+        <Link className="btn btn-info" to="/">
+          Back to index
+        </Link>
+        <button
+        className="btn btn-danger pull-xs-right"
+        onClick={this.onDeleteClick.bind(this)}
+
+
+        >Delete Post</button>
+        <h3>{post.title}</h3>
+        <h6>Categories:{post.categories} </h6>
+        <p>{post.content}</p>
+      </div>
+    );
+  }
+}
+
+function mapStateToProps({ posts }, ownProps) {
+  return { post: posts[ownProps.match.params.id] };
+}
+
+export default connect(mapStateToProps, { fetchPost, deletePost })(PostsShow);
diff --git a/src/index.js b/src/index.js
@@ -1,15 +1,29 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { Provider } from 'react-redux';
-import { createStore, applyMiddleware } from 'redux';
+import React from "react";
+import ReactDOM from "react-dom";
+import { Provider } from "react-redux";
+import { createStore, applyMiddleware } from "redux";
+import { BrowserRouter, Route, Switch } from "react-router-dom";
+import promise from "redux-promise";
+import '/style/style.css';
 
-import App from './components/app';
-import reducers from './reducers';
+import reducers from "./reducers";
+import PostsIndex from "./components/posts_index";
+import PostsNew from "./components/posts_new";
+import PostsShow from "./components/posts_show";
 
-const createStoreWithMiddleware = applyMiddleware()(createStore);
+const createStoreWithMiddleware = applyMiddleware(promise)(createStore);
 
 ReactDOM.render(
   <Provider store={createStoreWithMiddleware(reducers)}>
-    <App />
-  </Provider>
-  , document.querySelector('.container'));
+    <BrowserRouter>
+      <div>
+        <Switch>
+          <Route path="/posts/new" component={PostsNew} />
+          <Route path="/posts/:id" component={PostsShow} />
+          <Route path="/" component={PostsIndex} />
+        </Switch>
+      </div>
+    </BrowserRouter>
+  </Provider>,
+  document.querySelector(".container")
+);
diff --git a/src/reducers/index.js b/src/reducers/index.js
@@ -1,7 +1,10 @@
 import { combineReducers } from 'redux';
+import { reducer as formReducer} from 'redux-form';
+import PostReducer from './reducer_posts'
 
 const rootReducer = combineReducers({
-  state: (state = {}) => state
+  posts: PostReducer,
+  form: formReducer
 });
 
 export default rootReducer;
diff --git a/src/reducers/reducer_posts.js b/src/reducers/reducer_posts.js
@@ -0,0 +1,23 @@
+import _ from "lodash";
+import { FETCH_POSTS, FETCH_POST, DELETE_POST } from "../actions";
+
+export default function(state = {}, action) {
+  switch (action.type) {
+    case DELETE_POST:
+      return _.omit(state, action.payload);
+
+    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:
+      return state;
+  }
+}
diff --git a/style/style.css b/style/style.css
@@ -0,0 +1,4 @@
+form a{
+  margin-left:10px;
+
+}