BUG: Profile State Mutation Causes Incorrect User Data in Tutorial Cards

[muntaxir4]

Is your bug related to a problem? Please describe.
The components CardWithPicture.jsx and CardWithoutPicture.jsx depend on profile.user from the root state to display the profile picture and display name of tutorial authors. This causes unintended side effects:

1. Incorrect User Data – When tutorials from multiple users appear in the feed, their profile picture and name can be incorrectly replaced when profile.user updates.
2. Unnecessary Re-renders – Since the profile state is global, every update triggers a re-render of all tutorial cards, leading to performance issues.

Steps to Reproduce:

1. Open the tutorial feed containing multiple users.
2. Observe that some tutorial cards show the wrong profile picture or name.

Expected Behavior:

• Each tutorial card should display the correct author's name and profile picture, independent of global state updates.
• Fetching a profile should not alter existing tutorial cards in the feed.

Describe the solution you'd like

• Modify getUserProfileData() to return the requested user object instead of updating global state.
• Store profile details locally within each tutorial card instead of relying on profile.user.

Additional context
This issue significantly affects UX, causing misleading author information in the tutorial feed.

[rohitPandey469]

@muntaxir4 you are a fast fella, I came across it when solving an issue and mentioned to open up one regarding it.
And @muntaxir4 I noticed you aren't splitting the code referenced to one specific issues, if done that way it could have been just a little bit easier for contibutors to understand the code.

[rohitPandey469]

@muntaxir4 I was thinking of

const user = useSelector(
    ({
      profile: {
        user: { data }
      }
    }) => data
  );

using selectors to fetch and accordingly populate the redux store, there was a problem with that ig. And couple of issues like triggering actions besides defining new ones woul have been more better

[muntaxir4]

@muntaxir4 you are a fast fella, I came across it when solving an issue and mentioned to open up one regarding it. And @muntaxir4 I noticed you aren't splitting the code referenced to one specific issues, if done that way it could have been just a little bit easier for contibutors to understand the code.

You are quick as well.
I tried doing this by having multiple commits for a PR, in order to make things independent.

[muntaxir4]

@muntaxir4 I was thinking of

const user = useSelector(
    ({
      profile: {
        user: { data }
      }
    }) => data
  );

using selectors to fetch and accordingly populate the redux store, there was a problem with that ig. And couple of issues like triggering actions besides defining new ones woul have been more better

The way I solved it was modifying the getUserProfileData to return the user after fetching. Then a component can create states to manage that user.