Extra Customization

We've got some feedback from developers who see keeping the state of comments when navigating from post item to details is a bad experience (see the behavior below). We appreciate this feedback and it kind of makes sense because sometimes it creates confusion for end users. In the orginal behaviour, we are rendering the cached state of the post and its comments until the newly selected post renders. This could be good for some folks and bad for others:

If we see more developers hate to see this behavior, we will include the update in the next release. However, if you've already purchased the app and you want to do these changes now, you can follow these steps:

1- go to app/src/interfaces/store.d.ts and add this line:

  export type ActionType =
    | "ClearCurrentPost" // <--- add this line
    | "Loading"
    ....

2- go to app/src/store/reducers.ts and add the following case in the switch statement:

    case "ClearCurrentPost":
      return { ...state, currentPost: intialState.currentPost };

3- go to app/src/store/actions/post.ts and add the following method:

export const clearCurrentPost = (dispatch: IStore.IDispatchProps): void => dispatch({ type: "ClearCurrentPost" });

4- go to app/src/hooks/useCurrentPost.ts and add the following method:

import { Store,..., clearCurrentPost } from "@store"; // <-- add clearCurrentPost here

..
const useCurrentPost = () => {
 ..
 ...
 ..

const clearPost = () => clearCurrentPost(dispatch); // <-- add this method -->
..
..
..
..
  return {
    clearPost, // <-- add this line as well
    currentPost,
    postId,
    getCurrentPost,
    addComment,
    deleteComment,
    isFetching,
    commenting,
  };

5- go to app/src/screens/comments.tsx and add the following lines:

/* 1- add clearPost in the following deconstruction */

const { currentPost, ... , clearPost } = useCurrentPost(navigation);

...
....

/* 2- call clearPost in cleanup method in useEffect */
  
  React.useEffect((): any => {
   ....
    return (): void => {
      // cleanup
      clearPost(); // <--- add this line --->
    };
  }, []);

6- That's it!!! magic 😃