diff --git a/package.json b/package.json index 102a759b94..3be26b1f65 100644 --- a/package.json +++ b/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": "git@github.com: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": [] } diff --git a/src/actions/index.js b/src/actions/index.js index e69de29bb2..cc7b8c66e7 100644 --- a/src/actions/index.js +++ b/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 + }; +} \ No newline at end of file diff --git a/src/components/NewPost.js b/src/components/NewPost.js new file mode 100644 index 0000000000..2eb0954624 --- /dev/null +++ b/src/components/NewPost.js @@ -0,0 +1,7 @@ +import React, { Component } from "react"; + +export default class NewPost extends Component { + render() { + return
New Post
; + } +} diff --git a/src/components/PostIndex.js b/src/components/PostIndex.js new file mode 100644 index 0000000000..b5bf7449a3 --- /dev/null +++ b/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 ( +
  • + {post.title} +
    • + ); + } ); + } + render() { + console.log(this.props.posts) + return ( +
    +

    Blog Posts!!

    + +
    +
    +
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

    + +
    +
    +
    +
    + ); + } +} + +function mapStateToProps(state){ + return{ + posts: state.posts + } +} + +export default connect(mapStateToProps , { allposts })(PostIndex) + + + + + + + + + + + + + + + + + diff --git a/src/components/ShowPost.js b/src/components/ShowPost.js new file mode 100644 index 0000000000..a9837f4819 --- /dev/null +++ b/src/components/ShowPost.js @@ -0,0 +1,7 @@ +import React, { Component } from "react"; + +export default class ShowPost extends Component { + render() { + return
    Show Post
    ; + } +} diff --git a/src/components/app.js b/src/components/app.js deleted file mode 100644 index 58614b02cf..0000000000 --- a/src/components/app.js +++ /dev/null @@ -1,9 +0,0 @@ -import React, { Component } from 'react'; - -export default class App extends Component { - render() { - return ( -
    React simple starter
    - ); - } -} diff --git a/src/index.js b/src/index.js index 69d577acd1..499c8ca577 100644 --- a/src/index.js +++ b/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( - - - , document.querySelector('.container')); + +
    + + + + + +
    +     + , + document.querySelector(".container") +); diff --git a/src/reducers/MainReducer.js b/src/reducers/MainReducer.js new file mode 100644 index 0000000000..f5249d4af8 --- /dev/null +++ b/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; + } +} diff --git a/src/reducers/index.js b/src/reducers/index.js index d12506f382..16ae34a10e 100644 --- a/src/reducers/index.js +++ b/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;