Hey @smritidoneria! Although I understood your solution, but I am unable to figure out why this needs to be done manually. I think the best way would be if state updation triggers this action rather than setting this up optimistically. Do you know why the automatic updation is failing?

hey @Barrylimarti , previously the problem was that the code is directly modifies the msg.pinned property without triggering a re-render of the component. In React, directly mutating an object does not cause the component to re-render. React only re-renders components when the state or props change. Re-rendering was only happening at refreshing. that is why the previous code was failing.

so the solution for this comes out to be either use react states to manage the pinning of the message or optimistically update the ui. In my judgement, 2nd option was good to look forward to.

Yeah that's correct ! But how exactly does this new code work ? I think here also, you're updating msg.pinned property directly here as well.

Okay, but if you see the case of starring the message, it does not require this manual update though. Isn't it strange? If there's a call to the starring api it triggers the re-render but not in the case of the pinning api?
Also, unpinning works well without this.

Hey @Barrylimarti @Spiral-Memory , Sorry for the late response. Actually , The handleStarMessage function does not directly update the msg.starred property. Instead, it relies on the asynchronous operation RCInstance.starMessage or RCInstance.unstarMessage to update the state. This means that the state management for starred messages is handled elsewhere, likely in a parent component or a global state management solution (e.g., Redux, Context API).

But the handlePinMessage function directly reads the msg.pinned property but does not update it directly.

@smritidoneria Yes, that's exactly my point. But unpinning works well right? That means the same state management operations that is there for starred messages is there for pinning also but there's some bug while pinning it not while unpinning it. Hence, I think we should try to find that bug first at the state management level.

But the handlePinMessage function directly reads the msg.pinned property but does not update it directly.

Also, I don't think this is the case as unpinning means updating the msg.pinned property to false, which is anyways happening.

@smritidoneria @Barrylimarti

Did you guys figured out, what's the actual reason behind this ?

hey @Spiral-Memory ,yes, it figured it out.
In the starred message feature, at the end of the process, the getStarredMessages() function is called. In the component utilizing useFetchChatData, we maintain a state for starred messages. When a user stars a message, the getStarredMessages() function triggers, which updates the state of the starred messages. This state change causes the component to re-render, enabling real-time updates in the starred message modal.
However, this is not the case with pinned messages. We are not maintaining any state for pinned messages, so there is no state change to trigger a re-render. As a result, real-time updates are not reflected in the pinned message modal.

We now have two possible approaches to address this issue:
1.State Management for Pinned Messages: Similar to starred messages, we can implement state management for pinned messages. This would allow state changes to trigger re-renders and enable real-time updates in the pinned message modal.
2.Proposed Solution in this PR