add and troubleshoot api request to get single post based on its perm…

…alink

src/actions/index.js

@@ -2,9 +2,9 @@ import {
 	GET_RECENT_POSTS_REQUEST,
 	GET_RECENT_POSTS_SUCCESS,
 	GET_RECENT_POSTS_ERROR,
-	FOCUS_ON_POST,
-	RETURN_TO_POSTS,
-	GET_SINGLE_POST} from './types';
+	GET_SINGLE_POST_REQUEST,
+	GET_SINGLE_POST_SUCCESS,
+	GET_SINGLE_POST_ERROR} from './types';
 
 import steem from 'steem';
 steem.api.setOptions({ url: 'https://api.steemit.com' });
@@ -25,19 +25,18 @@ const getRecentPostsError = error => ({
 	payload: error
 });
 
-const focusOnPost = post => ({
-	type: FOCUS_ON_POST,
-	payload: post
+const getSinglePostRequest = () => ({
+	type: GET_SINGLE_POST_REQUEST
 });
 
-const returnToPosts = posts => ({
-	type: RETURN_TO_POSTS,
-	payload: posts
+const getSinglePostSuccess = post => ({
+	type: GET_SINGLE_POST_SUCCESS,
+	payload: post
 });
 
-const getSinglePost = post => ({
-	type: GET_SINGLE_POST,
-	paylaod: post
+const getSinglePostError = error => ({
+	type: GET_SINGLE_POST_ERROR,
+	payload: error
 });
 
 // api call
@@ -51,6 +50,16 @@ function getPosts() {
 	})
 }
 
+function getPost(permlink) {
+	return new Promise((res, rej) => {
+		const currentDate = new Date().toISOString().split('.')[0];
+		steem.api.getDiscussionsByAuthorBeforeDate('sndbox', permlink, currentDate, 1, function(err, result) {
+			if (err) rej(err);
+			else res(result);
+		});
+	})
+}
+
 // redux thunks
 
 export const getRecentPosts = () => async dispatch => {
@@ -65,4 +74,14 @@ export const getRecentPosts = () => async dispatch => {
 	}
 };
 
-// TODO create get single post api request
+export const getSinglePost = permlink => async dispatch => {
+	dispatch(getSinglePostRequest());
+
+	try {
+		const singlePost = await getPost(permlink);
+		dispatch(getSinglePostSuccess(singlePost));
+
+	} catch(err) {
+		dispatch(getSinglePostError(err))
+	}
+};

src/actions/types.js

@@ -2,7 +2,6 @@ export const GET_RECENT_POSTS_REQUEST = 'GET_RECENT_POSTS_REQUEST';
 export const GET_RECENT_POSTS_SUCCESS = 'GET_RECENT_POSTS_SUCCESS';
 export const GET_RECENT_POSTS_ERROR = 'GET_RECENT_POSTS_ERROR';
 
-export const FOCUS_ON_POST = 'FOCUS_ON_POST';
-export const RETURN_TO_POSTS = 'RETURN_TO_POSTS';
-
-export const GET_SINGLE_POST = 'GET_SINGLE_POST';
+export const GET_SINGLE_POST_REQUEST = 'GET_SINGLE_POST_REQUEST';
+export const GET_SINGLE_POST_SUCCESS = 'GET_SINGLE_POST_SUCCESS';
+export const GET_SINGLE_POST_ERROR = 'GET_SINGLE_POST_ERROR';

src/components/post-feed.js

@@ -65,8 +65,6 @@ class PostFeed extends React.Component {
 			return <strong>{this.props.error}</strong>;
 		}
 
-		console.log(this.props.posts);
-
 		return (
 			<div className="post-feed">
 				{this.createGrid()}

src/components/single-post.js

@@ -4,38 +4,53 @@ import {connect} from 'react-redux';
 import { withRouter } from 'react-router-dom';
 
 import './single-post.css';
-import {getRecentPosts} from "../actions";
+import {getSinglePost} from "../actions";
 
 class SinglePost extends React.Component {
-	// create post feed with small and large tiles from state and then inject
 	componentDidMount() {
 		// check if i have info already
-
+		if (this.props.posts === undefined || this.props.posts.length === 0) this.props.getSinglePost(this.props.match.params.postId);
+		// this.props.getSinglePost(this.props.match.params.postId);
 		// this.props.getRecentPosts();
 		// request for single post
+
 	}
 
 	render() {
-		return (
-			<div>
-				{this.props.match.params.postId}
-				{this.props.currentPost.title}
-				here's a post
-			</div>
+			if (this.props.loading) {
+				return <Spinner />;
+			}
+
+			if (this.props.error) {
+				return <strong>{this.props.error}</strong>;
+			}
+
+			console.log('current post', this.props.currentPost);
+
+			return (
+				<div>
+					{this.props.match.params.postId}
+					{/*{this.props.currentPost[0].title}*/}
+					here's a post
+				</div>
 		)
 	}
 }
 
 function mapStateToProps(state, props) {
+	// maybe check if state.posts is empty and then map props accordingly
+	const currentPostState = (state.posts === undefined || state.posts.length === 0) ? state.currentPost : state.posts.find(post => props.match.params.postId === post.permlink);
+
 	return {
 		posts: state.posts,
-		currentPost: state.posts.find(post => props.match.params.postId === post.permlink),
+		currentPost: currentPostState,
 		loading: state.loading
 	};
 }
 
 const mapDispatchToProps = {
 	// get single post
+	getSinglePost
 };
 
 export const ConnectedSinglePost = withRouter(connect(mapStateToProps, mapDispatchToProps)(SinglePost));

src/reducer.js

@@ -2,13 +2,14 @@ import {
 	GET_RECENT_POSTS_REQUEST,
 	GET_RECENT_POSTS_SUCCESS,
 	GET_RECENT_POSTS_ERROR,
-	FOCUS_ON_POST,
-	RETURN_TO_POSTS,
-	GET_SINGLE_POST} from './actions/types';
+	GET_SINGLE_POST_REQUEST,
+	GET_SINGLE_POST_SUCCESS,
+	GET_SINGLE_POST_ERROR} from './actions/types';
 
 
 const initialState = {
 	posts: [],
+	currentPost: null,
 	loading: false,
 	error: null
 };
@@ -32,12 +33,23 @@ export const reducer = (state = initialState, action) => {
 				loading: false,
 				error: action.payload
 			};
-		case FOCUS_ON_POST:
-			return state;
-		case RETURN_TO_POSTS:
-			return state;
-		case GET_SINGLE_POST:
-			return state;
+		case GET_SINGLE_POST_REQUEST:
+			return {
+				...state,
+				loading: true
+			};
+		case GET_SINGLE_POST_SUCCESS:
+			return {
+				...state,
+				loading: false,
+				currentPost: action.payload
+			};
+		case GET_SINGLE_POST_ERROR:
+			return {
+				...state,
+				loading: false,
+				error: action.payload
+			};
 		default:
 			return state;
 	}