# C+ reactions and navigating to user profiles - Wed 26th-28th July, 2020

It has been a busy few days, so I have been slack about writing my daily diary!

I spent most of the time finishing the reactions functionality (reacting to comments and replies) in C+. This was frustrating due to my local cache update function working properly (indeed, it has a good resolver unit test!), but the UI not updating to reflect the change.

I believe the issue is backend, with the proper `usersResponse` and `reactionsTotals` not always being accurate in the response, which is what I rely on to know if the current user reacted.

I am using a `CommentReply` context for each comment in order to standarise and make the code much easier to understand and reason about. I need to check how performant this is when there are many (ie. 100, 1000+ comments).

I also spent more time than was probably necessary figuring out how to reuse the user profile pages in both the Feed tab and the Profile tab. In order to fetch new user profile data (for example: when you tap on a user's avatar next to a comment), it needs that user's `userId`. Intially, I was trying to have a single `ProfileProvider` wrapping the tab navigator, so that the `userId` was exposed in both places, but this did not work as just having a single `userId` property meant that user's profile was incorrectly being shown in both places.

I tried lots of solutions, including using React Navigation `params`, but eventually solved it by having a single `ProfileContext` instance, with the value being a piece of state **local** to the `FeedScreens` and `ProfileScreens`, such that:

const FeedScreens: React.FC = () => {
    const { setIsLoggedIn } = useContext(AuthContext)

    const [userDetails, setUserDetails] = useState<UserDetails>(null)

    const navigation = useNavigation()

    return (
        <ProfileContext.Provider value={{ userDetails, setUserDetails }}>
            <FeedStack.Navigator
                screenOptions={{
                    ...sharedScreenOptions,
                    headerStyle: {
                        backgroundColor: `white`,
                    },
                }}
            >
              // screens
            </FeedStack.Navigator>
        </ProfileContext.Provider>
    )
}

I am not sure if this is the best solution, but it works for my needs.

### Learnings
[useFocusEffect](https://reactnavigation.org/docs/use-focus-effect) for running side-effects when screen is focused, and for when the screen is unfocused.

[NavigationActions](https://reactnavigation.org/docs/4.x/navigation-actions/) such as `push`, `pop`, etc

###### tags: `programmingjournal` `2020` `C+` `reactions` `reactnavigation` `context` `userprofile` `usefocuseffect` `navigationactions` `avatar`