[Bug] Groups are not updated when user Switch between Groups

[LaimeJesus]

related #181

Description

This PR fixes an issue when user switch between groups in the group selector, the members are not updated:

• moves the useGroupMembers hook into the manage group component
• fixes the issue about not updating the list of members when you switch between groups (needs to add the useEffect hook to sync the members and the search state)

How To Test

• connect app to gnosis:
• go to gnosis safe with an account with some groups(eg: gno:0xB77d3948693B6dEE0F85184db515CE4910C21fe9)
• switch between groups in the selector

[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 11, 2022 at 3:16PM (UTC)

[LaimeJesus]

It works well now and the code is much cleaner.

A small enhancement will be to add overflow: hidden; style to ListContainer.tsx component to avoid a strange animation when members enter the screen.

const Ul = styled.ul`
  display: flex;
  flex-direction: column;
  gap: ${({ theme }) => theme.general.space * 2}px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  @media (min-width: ${({ theme }) => theme.themeBreakPoints.tabletPortraitStart}) {
    gap: ${({ theme }) => theme.general.space * 3}px;
  }

I'd prefer to apply those changes in a different PR, because that's not related to the bug nvm haha (first response was going to be different xD)

It works well now and the code is much cleaner.

A small enhancement will be to add overflow: hidden; style to ListContainer.tsx component to avoid a strange animation when members enter the screen.

const Ul = styled.ul`
  display: flex;
  flex-direction: column;
  gap: ${({ theme }) => theme.general.space * 2}px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  @media (min-width: ${({ theme }) => theme.themeBreakPoints.tabletPortraitStart}) {
    gap: ${({ theme }) => theme.general.space * 3}px;
  }

I'll add that change, but I'm not sure what should be different in the ui :cry: (i'm not an ui expert), next time could you insert some example or video for that change? @tloffler