Communities - Home - Display communities in all possible/valid states

[ilmotta]

Feature/bug

In the Community Home screen, where communities are listed, we should display community items in all possible/valid states, such as when there are mentions, when they're muted, etc.

Recently, the Design System component quo/community-list-item (see Figma) has been rewritten to support all possible variations. Now it's a matter of using this component in the actual screens. This newly updated component is also being used in the Discover Communities screen.

As much as this issue can be seen as a feature, it's also about fixing what can be seen as UI bugs because we're not using the correct DS component, we're using quo2.components.community.community-list-view/communities-membership-list-item, but this is incorrect.

Acceptance criteria

• Use the expected DS component.
• Cover all possible community states and translate them to the props expected by quo/community-list-item. This is the critical implementation of this issue. If in doubt, always double-check with designers. The only exception is community stats, they shouldn't be displayed, only post-MVP.
• Get the final implementation reviewed by QAs and designers.

Resources

• Communities Home screen - https://www.figma.com/file/h9wo4GipgZURbqqr1vShFN/Communities-for-Mobile?type=design&node-id=5040-188714&mode=design&t=Xtkp4UmYJ0BPIfJX-0
• Design System - List items - Community component https://www.figma.com/file/WQZcp6S0EnzxdTL4taoKDv/Design-System-for-Mobile?type=design&node-id=8917-153680&mode=design&t=Ak7qDKUdT9wHhqSF-0

[andresceballosm]

Hi @ilmotta, I was reviewing the quo/community-list-item component, and I have a pair of doubts, about props type and info, for example in type when should pass engage, discover, or share, Is the same situation for info, is there any documentation about it? or what can you tell me about it?

[ilmotta]

Hi @ilmotta, I was reviewing the quo/community-list-item component, and I have a pair of doubts, about props type and info, for example in type when should pass engage, discover, or share, Is the same situation for info, is there any documentation about it? or what can you tell me about it?

Hi @andresceballosm. As much as I would like to point out a good reference/doc to help you work on this issue, I have the same questions as you, and this issue requires the developer to dig a little bit.

Designers often add the majority of the app states in Figma screens (not the design system components, the DS is sort of agnostic of business rules), and Status' devs often reverse engineer the business rules from those screens, by analyzing the Clojure data structures in the Mobile app versus Figma. I would recommend this path first and foremost. All community related screens can be found in the Figma pages for Communities for Mobile (assuming you have read-only access).

Sometimes Figma is not enough and then I do a combination of:

• Use status-go to double-check specific states/flows because that's our number one source of truth for business rules since both Mobile & Desktop clients use it. For instance, in status-go we should be able to find all the conditions that can potentially lead to a specific community state you desire to test/implement in the mobile client. The downside is you need to be somewhat familiar with https://github.com/status-im/status-go.
• Check how the desktop app is rendering communities in particular states and use that as a guide to develop in status-mobile. You can find releases in the https://github.com/status-im/status-desktop repository.
• Run the Status desktop client to experiment with the creation of communities in different states. Once they are created, I would inspect & copy the data and play with it in the Clojure REPL. This is quite useful, otherwise you don't have data to play with, since users can't create communities in the mobile app.
• Reach out to specific devs or designers. This will be more fruitful if you ask specific questions.

Sorry if my answer is not super specific, but that's the nature of this GH issue.