Updated Comments likes UI changes to be instant

[ronaldlangeveld]

ref PLG-288

• Implemented instant UI updates for comment likes/unlikes using optimistic rendering.
• Enhanced error handling reverts state on API failure, ensuring consistency.
• Added new test helper to mock failed API requests, needed to test revert state handling.

[kevinansfield]

This seems dangerous as other state changes could have happened if there was a long delay before the endpoint eventually errored. I would expect a rollback to only occur for the liked status of the comment under change, would that make things considerably more difficult?

[kevinansfield]

Do we need this? It feels clunky and limits you to a single id which may not be true if network is slow and multiple like buttons were clicked before a request finishes.

Can we keep likeComment as it was where it awaits the API response but change it to first dispatch an action that does an immediate state update? That way the component that dispatches likeComment can await as normal and manage the button disabling with the typical pattern of internal component state updates around an async action but the global state still updates immediately in the background to show the like/unlike status. If we add like/unlike state-update actions then it also makes the rollback (inside the likeComment action) easier if the API request fails as it's just another dispatch.

[kevinansfield]

Pseudo-code:

async function likeComment(id) {
    dispatchAction('updateCommentLikeState', {id, liked: true});
    try {
        await api.likeComment(id);
        return null;
    } catch (e) {
        dispatchAction('updateCommentLikeState', {id, liked: false});
        // throw e; // optional, depends whether we want to handle the error inside components
        return null;
    }
}

async handleLikeClick() {
    setIsSaving(true);
    await dispatchAction('likeComment', id);
    setIsSaving(false)
}