Start making links

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 })
 };

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() {
       <NavBar/>
       <Switch>
         <Route exact path="/" component={PostList}/>
-        <Route path="/posts" component={PostList}/>
+        <Route exact path="/posts/" component={PostList}/>
+        <Route path="/posts/:slug" component={Post}/>
       </Switch>
     </Router>
     </>

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 (
-                <div className="item" key={post.id}>
-                    <div className="content">
-                        <div className="description">
-                            <h1>{post.title}</h1>
-                            <ReactMarkdown source={post.content} />
-                        </div>
-                    </div>
-                </div>
-            );
-        });
-    }
-
-
     render () {
-        console.log(this.props.posts)
-        return (
-            <div className="ui relaxed divided list">
-                {this.renderList()}
-            </div>
-        );
+       return (
+           <div className="item" key="{post.id}">
+               <div className="content">
+                   <div className="description">
+                       <h1><b><u><Link to={"/posts/"}>""</Link></u></b></h1>
+                       <ReactMarkdown source="{post.content}" />
+                   </div>
+               </div>
+           </div>
+       );
     }
 }
 
 const mapStateToProps = (state) => {
-    return { posts: state.posts };
+    return {
+        posts: state.posts,
+        slug: state.slug
+    };
 }
 
 export default connect(
     mapStateToProps,
-    { fetchPosts }
+    { fetchPost }
 )(Post);

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 {
                 <div className="item" key={post.id}>
                     <div className="content">
                         <div className="description">
-                            <h1><b><u>{post.title}</u></b></h1>
+                            <h1><b><u><Link to={"/posts/" + post.slug}>{post.title}</Link></u></b></h1>
                             <ReactMarkdown source={post.content} />
                         </div>
                     </div>
@@ -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(