From a53fb5fb50971be9b6f9b76d454cb1e54c8b8e43 Mon Sep 17 00:00:00 2001
From: Asara <amarpreet@minhas.io>
Date: Mon, 27 May 2019 21:30:52 -0400
Subject: [PATCH] Base /blog

---
 src/actions/index.js         |  6 ++++++
 src/apis/sudoscientist.js    |  5 +++++
 src/components/PostList.js   | 40 ++++++++++++++++++++++++++++++++++--
 src/index.js                 |  7 +++++--
 src/reducers/index.js        |  3 ++-
 src/reducers/postsReducer.js |  8 ++++++++
 6 files changed, 64 insertions(+), 5 deletions(-)
 create mode 100644 src/actions/index.js
 create mode 100644 src/apis/sudoscientist.js
 create mode 100644 src/reducers/postsReducer.js

diff --git a/src/actions/index.js b/src/actions/index.js
new file mode 100644
index 0000000..e7ddd69
--- /dev/null
+++ b/src/actions/index.js
@@ -0,0 +1,6 @@
+import sudoscientist from '../apis/sudoscientist';
+
+export const fetchPosts = () => async (dispatch) => {
+    const response = await sudoscientist.get('/blog');
+    dispatch({ type: 'FETCH_POSTS', payload: response.data })
+};
diff --git a/src/apis/sudoscientist.js b/src/apis/sudoscientist.js
new file mode 100644
index 0000000..2fc7103
--- /dev/null
+++ b/src/apis/sudoscientist.js
@@ -0,0 +1,5 @@
+import axios from 'axios';
+
+export default axios.create({
+    baseURL: 'http://localhost:8080/v1/api/'
+});
diff --git a/src/components/PostList.js b/src/components/PostList.js
index a13a8d3..f380a63 100644
--- a/src/components/PostList.js
+++ b/src/components/PostList.js
@@ -1,9 +1,45 @@
 import React from 'react';
+import { connect } from 'react-redux';
+import { fetchPosts } from '../actions';
 
 class PostList extends React.Component {
+    componentDidMount() {
+        this.props.fetchPosts();
+    }
+
+
+    renderList() {
+        return this.props.posts.map(post => {
+            return (
+                <div className="item" key={post.id}>
+                    <i className="large middle aligned icon user" />
+                    <div className="content">
+                        <div className="description">
+                            <h2>{post.title}</h2>
+                            <p>{post.content}</p>
+                        </div>
+                    </div>
+                </div>
+            );
+        });
+    }
+
+
     render () {
-        return <div>Post List</div>
+        console.log(this.props.posts)
+        return (
+            <div className="ui relaxed divided list">
+                {this.renderList()}
+            </div>
+        );
     }
 }
 
-export default PostList;
+const mapStateToProps = (state) => {
+    return { posts: state.posts };
+}
+
+export default connect(
+    mapStateToProps,
+    { fetchPosts }
+)(PostList);
diff --git a/src/index.js b/src/index.js
index cd34234..2f8c633 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,13 +1,16 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
-import { createStore } from 'redux';
+import { createStore, applyMiddleware } from 'redux';
+import thunk from 'redux-thunk'
 
 import App from './components/App';
 import reducers from './reducers';
 
+const store = createStore(reducers, applyMiddleware(thunk));
+
 ReactDOM.render(
-    <Provider store={createStore(reducers)}>
+    <Provider store={store}>
       <App />
     </Provider>,
     document.querySelector('#root')
diff --git a/src/reducers/index.js b/src/reducers/index.js
index 847820c..dad0a1a 100644
--- a/src/reducers/index.js
+++ b/src/reducers/index.js
@@ -1,5 +1,6 @@
 import { combineReducers } from 'redux';
+import postsReducer from './postsReducer';
 
 export default combineReducers({
-    replaceMe: () => 'test'
+    posts: postsReducer
 });
diff --git a/src/reducers/postsReducer.js b/src/reducers/postsReducer.js
new file mode 100644
index 0000000..32daf04
--- /dev/null
+++ b/src/reducers/postsReducer.js
@@ -0,0 +1,8 @@
+export default (state = [], action) => {
+    switch (action.type) {
+        case 'FETCH_POSTS':
+            return action.payload;
+        default:
+            return state;
+    }
+};