1
0
Fork 0

Start making links

This commit is contained in:
Amarpreet Minhas 2019-07-23 19:12:48 -04:00
parent c0bf29c329
commit 5b9e98600f
4 changed files with 29 additions and 31 deletions

View file

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

View file

@ -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>
</>

View file

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

View file

@ -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(