Make posts loading state scoped to certain post

src/client/post/Post.js

@@ -5,7 +5,14 @@ import _ from 'lodash';
 import VisibilitySensor from 'react-visibility-sensor';
 import formatter from '../helpers/steemitFormatter';
 import { getCryptoDetails } from '../helpers/cryptosHelper';
-import { getPostContent, getIsPostEdited, getIsPostFetching, getIsPostLoaded, getIsPostFailed, getIsAuthFetching } from '../reducers';
+import {
+  getPostContent,
+  getIsPostEdited,
+  getIsPostFetching,
+  getIsPostLoaded,
+  getIsPostFailed,
+  getIsAuthFetching,
+} from '../reducers';
 import { getContent } from './postActions';
 import Error404 from '../statics/Error404';
 import Comments from '../comments/Comments';
@@ -22,9 +29,13 @@ import ScrollToTopOnMount from '../components/Utils/ScrollToTopOnMount';
     edited: getIsPostEdited(state, ownProps.match.params.permlink),
     content: getPostContent(state, ownProps.match.params.author, ownProps.match.params.permlink),
     isAuthFetching: getIsAuthFetching(state),
-    fetching: getIsPostFetching(state),
-    loaded: getIsPostLoaded(state),
-    failed: getIsPostFailed(state),
+    fetching: getIsPostFetching(
+      state,
+      ownProps.match.params.author,
+      ownProps.match.params.permlink,
+    ),
+    loaded: getIsPostLoaded(state, ownProps.match.params.author, ownProps.match.params.permlink),
+    failed: getIsPostFailed(state, ownProps.match.params.author, ownProps.match.params.permlink),
   }),
   { getContent },
 )
@@ -71,7 +82,7 @@ export default class Post extends React.Component {
     const { author, permlink } = nextProps.match.params;
     const { author: prevAuthor, permlink: prevPermlink } = this.props.match.params;
 
-    const shouldUpdate = (author !== prevAuthor) || (permlink !== prevPermlink);
+    const shouldUpdate = author !== prevAuthor || permlink !== prevPermlink;
     if (shouldUpdate && !nextProps.fetching) {
       this.setState({ commentsVisible: false }, () => this.props.getContent(author, permlink));
     }
@@ -140,15 +151,17 @@ export default class Post extends React.Component {
                 <PostRecommendation isAuthFetching={isAuthFetching} />
               </div>
             </Affix>
-            {showPost
-              ? <div className="center" style={{ paddingBottom: '24px' }}>
+            {showPost ? (
+              <div className="center" style={{ paddingBottom: '24px' }}>
                 <PostContent content={content} />
                 <VisibilitySensor onChange={this.handleCommentsVisibility} />
                 <div id="comments">
                   <Comments show={this.state.commentsVisible} post={content} />
                 </div>
               </div>
-              : <HiddenPostMessage onClick={this.handleShowPost} />}
+            ) : (
+              <HiddenPostMessage onClick={this.handleShowPost} />
+            )}
           </div>
         </div>
       </div>

src/client/post/postActions.js

@@ -7,24 +7,26 @@ export const LIKE_POST_START = '@post/LIKE_POST_START';
 export const LIKE_POST_SUCCESS = '@post/LIKE_POST_SUCCESS';
 export const LIKE_POST_ERROR = '@post/LIKE_POST_ERROR';
 
-export const getContent = (postAuthor, postPermlink, afterLike) => (
+export const getContent = (author, permlink, afterLike) => (
   dispatch,
   getState,
   { steemAPI },
 ) => {
-  if (!postAuthor || !postPermlink) {
+  if (!author || !permlink) {
     return null;
   }
 
   return dispatch({
     type: GET_CONTENT.ACTION,
     payload: {
-      promise: steemAPI.sendAsync('get_content', [postAuthor, postPermlink]).then((res) => {
+      promise: steemAPI.sendAsync('get_content', [author, permlink]).then((res) => {
         if (res.id === 0) throw new Error('There is no such post');
         return res;
       }),
     },
     meta: {
+      author,
+      permlink,
       afterLike,
     },
   }).catch(() => {});

src/client/post/postsReducer.js

@@ -24,9 +24,7 @@ const postItem = (state = {}, action) => {
 const initialState = {
   pendingLikes: [],
   list: {},
-  fetching: false,
-  loaded: false,
-  failed: false,
+  postsStates: {},
 };
 
 const posts = (state = initialState, action) => {
@@ -74,9 +72,14 @@ const posts = (state = initialState, action) => {
     case postsActions.GET_CONTENT.START:
       return {
         ...state,
-        fetching: true,
-        loaded: false,
-        failed: false,
+        postsStates: {
+          ...state.postsStates,
+          [`${action.meta.author}/${action.meta.permlink}}`]: {
+            fetching: true,
+            loaded: false,
+            failed: false,
+          },
+        },
       };
     case postsActions.GET_CONTENT.SUCCESS: {
       const baseState = {
@@ -88,9 +91,14 @@ const posts = (state = initialState, action) => {
             ...action.payload,
           },
         },
-        fetching: false,
-        loaded: true,
-        failed: false,
+        postsStates: {
+          ...state.postsStates,
+          [`${action.meta.author}/${action.meta.permlink}}`]: {
+            fetching: false,
+            loaded: true,
+            failed: false,
+          },
+        },
       };
       if (action.meta.afterLike) {
         return {
@@ -103,9 +111,14 @@ const posts = (state = initialState, action) => {
     case postsActions.GET_CONTENT.ERROR:
       return {
         ...state,
-        fetching: false,
-        loaded: false,
-        failed: true,
+        postsStates: {
+          ...state.postsStates,
+          [`${action.meta.author}/${action.meta.permlink}}`]: {
+            fetching: false,
+            loaded: false,
+            failed: true,
+          },
+        },
       };
     case postsActions.LIKE_POST_START:
       return {
@@ -133,6 +146,10 @@ export const getPosts = state => state.list;
 export const getPostContent = (state, author, permlink) =>
   Object.values(state.list).find(post => post.author === author && post.permlink === permlink);
 export const getPendingLikes = state => state.pendingLikes;
-export const getIsPostFetching = state => state.loading;
-export const getIsPostLoaded = state => state.loaded;
-export const getIsPostFailed = state => state.failed;
+export const getIsPostFetching = (state, author, permlink) =>
+  state.postsStates[`${author}/${permlink}}`] &&
+  state.postsStates[`${author}/${permlink}}`].fetching;
+export const getIsPostLoaded = (state, author, permlink) =>
+  state.postsStates[`${author}/${permlink}}`] && state.postsStates[`${author}/${permlink}}`].loaded;
+export const getIsPostFailed = (state, author, permlink) =>
+  state.postsStates[`${author}/${permlink}}`] && state.postsStates[`${author}/${permlink}}`].failed;

src/client/reducers.js

@@ -52,9 +52,12 @@ export const getPosts = state => fromPosts.getPosts(state.posts);
 export const getPostContent = (state, author, permlink) =>
   fromPosts.getPostContent(state.posts, author, permlink);
 export const getPendingLikes = state => fromPosts.getPendingLikes(state.posts);
-export const getIsPostFetching = state => fromPosts.getIsPostFetching(state.posts);
-export const getIsPostLoaded = state => fromPosts.getIsPostLoaded(state.posts);
-export const getIsPostFailed = state => fromPosts.getIsPostFailed(state.posts);
+export const getIsPostFetching = (state, author, permlink) =>
+  fromPosts.getIsPostFetching(state.posts, author, permlink);
+export const getIsPostLoaded = (state, author, permlink) =>
+  fromPosts.getIsPostLoaded(state.posts, author, permlink);
+export const getIsPostFailed = (state, author, permlink) =>
+  fromPosts.getIsPostFailed(state.posts, author, permlink);
 
 export const getDraftPosts = state => fromEditor.getDraftPosts(state.editor);
 export const getIsEditorLoading = state => fromEditor.getIsEditorLoading(state.editor);