first commit

package.json

@@ -1,12 +1,14 @@
 {
-  "name": "redux-simple-starter",
+  "name": "blog",
   "version": "1.0.0",
-  "description": "Simple starter package for Redux with React and Babel support",
+  "description":
+    "Simple starter package for Redux with React and Babel support",
   "main": "index.js",
   "repository": "[email protected]:StephenGrider/ReduxSimpleStarter.git",
   "scripts": {
     "start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
-    "test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test",
+    "test":
+      "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test",
     "test:watch": "npm run test -- --watch"
   },
   "author": "",
@@ -26,12 +28,18 @@
     "webpack-dev-server": "^1.14.0"
   },
   "dependencies": {
-    "babel-preset-stage-1": "^6.1.18",
-    "lodash": "^3.10.1",
-    "react": "^0.14.3",
-    "react-dom": "^0.14.3",
-    "react-redux": "4.3.0",
-    "react-router": "^2.0.1",
-    "redux": "^3.0.4"
-  }
+    "axios": "0.18.0",
+    "babel-preset-stage-1": "6.24.1",
+    "bootstrap": "4.1.0",
+    "lodash": "4.17.5",
+    "react": "16.3.1",
+    "react-bootstrap": "0.32.1",
+    "react-dom": "16.3.1",
+    "react-redux": "5.0.7",
+    "react-router": "4.2.0",
+    "react-router-dom": "4.2.2",
+    "redux": "3.7.2",
+    "redux-promise": "0.5.3"
+  },
+  "keywords": []
 }

src/actions/index.js

@@ -0,0 +1,14 @@
+import axios from "axios";
+
+const URL = "https://reduxblog.herokuapp.com/api/posts"
+const MainURL = `${URL}?key=st0539`;
+
+export const ALLPOSTS = "allposts";
+
+export function allposts() {
+  const request = axios.get(MainURL);
+  return {
+    type: ALLPOSTS,
+    payload: request
+  };
+}

src/components/NewPost.js

@@ -0,0 +1,7 @@
+import React, { Component } from "react";
+
+export default class NewPost extends Component {
+  render() {
+    return <div> New Post </div>;
+  }
+}

src/components/PostIndex.js

@@ -0,0 +1,64 @@
+import React, { Component } from "react";
+import { connect } from 'react-redux';
+import _ from 'lodash';
+
+import {allposts} from '../actions/index';
+ class PostIndex extends Component {
+
+   componentDidMount(){
+     this.props.allposts();
+   }
+    renderList(){
+      return _.map(this.props.posts , post => {
+        return (
+            <li key = {post.id} className= "list-group-item" >
+            {post.title}
+            </li>
+        );
+      } );
+    }
+  render() {
+    console.log(this.props.posts)
+    return (
+      <div>
+        <h2> Blog Posts!! </h2>
+        <ul className ="list-group">
+        {this.renderList()}
+        </ul>
+        <div className="card card-outline-danger mb-3 text-center">
+          <div className="card-block">
+            <blockquote className="card-blockquote">
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+              <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
+            </blockquote>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+function mapStateToProps(state){
+  return{
+    posts: state.posts
+  }
+}
+
+export default connect(mapStateToProps , { allposts })(PostIndex)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

src/components/ShowPost.js

@@ -0,0 +1,7 @@
+import React, { Component } from "react";
+
+export default class ShowPost extends Component {
+  render() {
+    return <div> Show Post </div>;
+  }
+}

src/index.js

@@ -1,15 +1,27 @@
-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 PostIndex from "./components/PostIndex";
+import NewPost from "./components/NewPost";
+import ShowPost from "./components/ShowPost";
+import reducers from "./reducers";
+import { BrowserRouter, Route, Link, Switch } from "react-router-dom";
+import ReducerPromise from "redux-promise";
 
-import App from './components/app';
-import reducers from './reducers';
-
-const createStoreWithMiddleware = applyMiddleware()(createStore);
+const createStoreWithMiddleware = applyMiddleware(ReducerPromise)(createStore);
 
 ReactDOM.render(
   <Provider store={createStoreWithMiddleware(reducers)}>
-    <App />
-  </Provider>
-  , document.querySelector('.container'));
+    <BrowserRouter>
+      <div>
+        <Switch>
+          <Route exact path="/" component={PostIndex} />
+          <Route path="/post/new" component={NewPost} />
+          <Route path="/post/:id" component={ShowPost} />
+        </Switch>
+      </div>
+    </BrowserRouter>
+  </Provider>,
+  document.querySelector(".container")
+);

src/reducers/MainReducer.js

@@ -0,0 +1,12 @@
+import _ from "lodash";
+import { ALLPOSTS } from "../actions";
+
+export default function(state = {}, action) {
+  switch (action.type) {
+
+    case ALLPOSTS:
+     return _.mapKeys(action.payload.data, "id");
+   default:
+     return state;
+  }
+}

src/reducers/index.js

@@ -1,7 +1,7 @@
-import { combineReducers } from 'redux';
-
+import { combineReducers } from "redux";
+import MainReducer from "./MainReducer";
 const rootReducer = combineReducers({
-  state: (state = {}) => state
+  posts: MainReducer
 });
 
 export default rootReducer;