Bug Fix for "Transfer and Block this User" Pop-up Overlaps with Transfer Fund Modal Dialog

This is another contribution to busy.org. This is so far the second more challenging bug I've fixed for a React/Redux web application. The first one being the bug fix for unsaved drafts.

1. The Issue

From the bug report author:

"Transfer / Block this user" pop-up should disappear before Transfer funds pop-up displays.

2. The Solution

There were three (3) files changed:

• src/user/User.js
• src/user/UserHero.js
• src/components/UserHeader.js

The hierarchy of components is :

• User > UserHero > UserHeader > Popover > PopoverMenu > PopoverMenuItem

2.1. src/user/User.js

• Added popoverVisible state
  • This holds the state whether the popover is displayed or hidden;
• In handleUserMenuSelect, set popoverVisible to false
  • When a PopoverMenuItem is selected, this is where the Popover dialog should be hidden;
• Added handleVisibleChange function
  • This is for handling the setting of the popoverVisible state;

2.2. src/user/UserHero.js

• Added isPopoverVisible and handleVisibleChange properties
  • For the Popover to receive the isPopoverVisible state and the handleVisibleChange function, these need to be passed as UserHero properties;

2.3. src/components/UserHeader.js

• Added isPopoverVisible and handleVisibleChange as UserHeader properties
  • To receive the isPopoverVisible state and the handleVisibleChange function from UserHero, these needed to be added as properties and then set as parameters when creating a Popover component;

3. Demonstration

Here is a short demonstration of the fix in my development environment:

---

Open Source Contribution posted via Utopian.io

---