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 }) dispatch({ type: 'FETCH_POSTS', payload: response.data })
}; };
export const fetchPost = (id) => async (dispatch) => { export const fetchPost = (slug) => async (dispatch) => {
const response = await sudoscientist.get('/blog/' + id); const response = await sudoscientist.get('/blog/by-slug/' + slug);
dispatch({ type: 'FETCH_POST', payload: response.data }) 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 { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import NavBar from './NavBar'; import NavBar from './NavBar';
import PostList from './PostList'; import PostList from './PostList';
import Post from './Post';
function App() { function App() {
return ( return (
@ -10,7 +11,8 @@ function App() {
<NavBar/> <NavBar/>
<Switch> <Switch>
<Route exact path="/" component={PostList}/> <Route exact path="/" component={PostList}/>
<Route path="/posts" component={PostList}/> <Route exact path="/posts/" component={PostList}/>
<Route path="/posts/:slug" component={Post}/>
</Switch> </Switch>
</Router> </Router>
</> </>

View file

@ -2,44 +2,36 @@ import React from 'react';
import ReactMarkdown from 'react-markdown'; import ReactMarkdown from 'react-markdown';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { fetchPost } from '../actions'; import { fetchPost } from '../actions';
import { Link } from 'react-router-dom';
class Post extends React.Component { class Post extends React.Component {
componentDidMount() { 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 () { render () {
console.log(this.props.posts)
return ( return (
<div className="ui relaxed divided list"> <div className="item" key="{post.id}">
{this.renderList()} <div className="content">
<div className="description">
<h1><b><u><Link to={"/posts/"}>""</Link></u></b></h1>
<ReactMarkdown source="{post.content}" />
</div>
</div>
</div> </div>
); );
} }
} }
const mapStateToProps = (state) => { const mapStateToProps = (state) => {
return { posts: state.posts }; return {
posts: state.posts,
slug: state.slug
};
} }
export default connect( export default connect(
mapStateToProps, mapStateToProps,
{ fetchPosts } { fetchPost }
)(Post); )(Post);

View file

@ -2,6 +2,7 @@ import React from 'react';
import ReactMarkdown from 'react-markdown'; import ReactMarkdown from 'react-markdown';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { fetchPosts } from '../actions'; import { fetchPosts } from '../actions';
import { Link } from 'react-router-dom';
class PostList extends React.Component { class PostList extends React.Component {
componentDidMount() { componentDidMount() {
@ -13,7 +14,7 @@ class PostList extends React.Component {
<div className="item" key={post.id}> <div className="item" key={post.id}>
<div className="content"> <div className="content">
<div className="description"> <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} /> <ReactMarkdown source={post.content} />
</div> </div>
</div> </div>
@ -34,7 +35,10 @@ class PostList extends React.Component {
} }
const mapStateToProps = (state) => { const mapStateToProps = (state) => {
return { posts: state.posts }; return {
posts: state.posts,
slug: state.slug
};
} }
export default connect( export default connect(