Comment count doesn't update in Scream component without refreshing

[AndrewYinLi]

@hidjou

Comment count doesn't update in Scream component, only updates in ScreamDialog if you don't refresh the page. This is because in our state we only update commentCount in scream (accessed by ScreamDialog and not also screams (accessed by Scream).

This can be fixed in dataReducer.js by replacing the code for case SUBMIT_COMMENT: with the following:

case SUBMIT_COMMENT:
      let commentedOnIndex = state.screams.findIndex(
        scream => scream.screamId === action.payload.screamId
      );
      return {
        ...state,
        scream: {
          ...state.scream,
          comments: [action.payload, ...state.scream.comments],
          commentCount: state.scream.commentCount + 1
        },
        screams: state.screams.map((scream, screamsArrIndex) =>
          screamsArrIndex === commentedOnIndex
            ? { ...scream, commentCount: scream.commentCount + 1 }
            : scream
        )
      };

[vincentSuriani]

Hi Andrew, I am facing the same issue. This fix didn't work for me :( Still needs a refresh. My initial situation is different though I am not seeing the change in the dialog or the post, when you said you started by being able to see the change in the dialog but not post. I had changed all the code to functional components though, and not sure if in my life-cycle methods is where the issue is happening. It updates after hitting the like button and on setTimeout(window.location.replace(),2000) (But doing the replace a big no no). I have to see what is going on with further investigation. I will post my results and fix if found.

[vincentSuriani]

nevermind that works perfectly. I had a typo in it. Thanks Andrew. 👍

[VatsalNarwal]

Solution

Yep, that is very true, it does not updates without reloading. To fix that and you can use useEffect feature in react. useEffect keeps on listening changes and whenever there is an update with the database it fires off a particular code. Hope that would help...