diff --git a/src/actions/index.js b/src/actions/index.js
index 902ccd4..1dab25f 100644
--- a/src/actions/index.js
+++ b/src/actions/index.js
@@ -5,7 +5,7 @@ export const fetchPosts = () => async (dispatch) => {
dispatch({ type: 'FETCH_POSTS', payload: response.data })
};
-export const fetchPost = (id) => async (dispatch) => {
- const response = await sudoscientist.get('/blog/' + id);
+export const fetchPost = (slug) => async (dispatch) => {
+ const response = await sudoscientist.get('/blog/by-slug/' + slug);
dispatch({ type: 'FETCH_POST', payload: response.data })
};
diff --git a/src/components/App.js b/src/components/App.js
index 22765b5..a63320c 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -2,6 +2,7 @@ import React from 'react';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import NavBar from './NavBar';
import PostList from './PostList';
+import Post from './Post';
function App() {
return (
@@ -10,7 +11,8 @@ function App() {
-
+
+
>
diff --git a/src/components/Post.js b/src/components/Post.js
index b195b9a..d645e91 100644
--- a/src/components/Post.js
+++ b/src/components/Post.js
@@ -2,44 +2,36 @@ import React from 'react';
import ReactMarkdown from 'react-markdown';
import { connect } from 'react-redux';
import { fetchPost } from '../actions';
+import { Link } from 'react-router-dom';
class Post extends React.Component {
componentDidMount() {
- this.props.fetchPost();
+ const { slug } = this.props.match.params
+ this.props.fetchPost(slug);
}
-
- renderList() {
- return this.props.posts.map(post => {
- return (
-
- );
- });
- }
-
-
render () {
- console.log(this.props.posts)
- return (
-
- {this.renderList()}
-
- );
+ return (
+
+ );
}
}
const mapStateToProps = (state) => {
- return { posts: state.posts };
+ return {
+ posts: state.posts,
+ slug: state.slug
+ };
}
export default connect(
mapStateToProps,
- { fetchPosts }
+ { fetchPost }
)(Post);
diff --git a/src/components/PostList.js b/src/components/PostList.js
index e340b75..b6d45b8 100644
--- a/src/components/PostList.js
+++ b/src/components/PostList.js
@@ -2,6 +2,7 @@ import React from 'react';
import ReactMarkdown from 'react-markdown';
import { connect } from 'react-redux';
import { fetchPosts } from '../actions';
+import { Link } from 'react-router-dom';
class PostList extends React.Component {
componentDidMount() {
@@ -13,7 +14,7 @@ class PostList extends React.Component {
-
{post.title}
+ {post.title}
@@ -34,7 +35,10 @@ class PostList extends React.Component {
}
const mapStateToProps = (state) => {
- return { posts: state.posts };
+ return {
+ posts: state.posts,
+ slug: state.slug
+ };
}
export default connect(