[Refactor] Manage Group Member search, add, remove members behavior

[LaimeJesus]

related #190

Description

This PR does a full refactor to the manageGroupMembers component with the following changes:

• Separate search logic into different hooks:
  • all users hook (src/hooks/subgraph/useUsers.ts)
  • group members hook (src/hooks/subgraph/useGroupMembers.ts)
• Fixes issue about adding/removing a group member using an intermediate cache because SG takes some time to update.
• Remove unnecessary code from the UserList component (src/components/lists/UsersList.tsx)
• Allow the user to maintain the search state between different tabs switching in the manage group page (members and add members tabs)
• Sync correctly the state of the group members after user switch the group using the groups selector
• Also, improve readability of all of the components and hooks in general

This was necessary to fix many issues related to the group members sync and hard to understand code:

• issue #190, members list and count does not update correctly

How to test

As this was a full refactor, we should test all of the cases that are related to this component (Manage Group page), principally the following cases:

Search

As a group owner:

• Search in the members tab, should appear only matched members from that group
• Search in the add members tab, should appear only matched users and non members from the group

In both cases, the user can switch between groups using the selector and the filter should still apply

Remove Member

As a group owner:

• Select a member in the members tab, click remove button, accept tx, then the member should not appear in the list anymore and the total count of members should be reduced by 1

Add Member

As a group owner:

• Select an user in the add members tab, click add button, accept tx, then the user should not appear in the list anymore and the total count of members should be increased by 1, then go to the members tab and the new user should appear

Some Examples

Remove a group member

Add an user

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
circles-groups-safe-app	✅ Ready (Inspect)	Visit Preview	Aug 16, 2022 at 2:19PM (UTC)

[LaimeJesus]

Wow, how much work.

Adding users and searching members work really well. I've added a member, the list updated nicely. But when I removed a user the list didn't update. Gnosis.Safe.-.Google.Chrome.2022-08-12.15-38-09.mp4

One suggestion :

* In group information the Member list doesn't have the search input. What do you think about adding it?

Ok, will investigate that issue, seems to be a weird behavior but It shouldn't happen so Ill re-test everything trying to fix it

[LaimeJesus]

Wow, how much work.

Adding users and searching members work really well. I've added a member, the list updated nicely. But when I removed a user the list didn't update. Gnosis.Safe.-.Google.Chrome.2022-08-12.15-38-09.mp4

One suggestion :

* In group information the Member list doesn't have the search input. What do you think about adding it?

I found the issue, I was using the users array instead of the members array to filter the removed member :facepalm: , so there were some cases where the user was not found so the remove callback was not being called. Now it is using the members array to find the removing user, and seems to be working

https://user-images.githubusercontent.com/13955827/184436641-198c1428-18b1-4d1f-840d-41e4dd72ffcb.mp4

[LaimeJesus]

new changes:

Found some issues with no result texts, already fixed (when there are no users to add, when there are no members in a group in the members modal and remove member components)

Also, found an issue in staging related to the search logic when you open the members modal using the link:

https://user-images.githubusercontent.com/13955827/184903330-06c026dc-e43e-45b2-bdd6-55096622ca19.mp4

I've fixed that issue in the PR not allowing the user to search (we might want to add that but let do that in a different PR)

https://user-images.githubusercontent.com/13955827/184903479-8e6e98c1-5e98-4ecd-b8ce-e5fbe5811ab8.mp4

@tloffler @marcelorubini