Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(quo): add profile - collectibles list item component #19125

Merged
merged 5 commits into from
Mar 15, 2024

Conversation

J-Son89
Copy link
Contributor

@J-Son89 J-Son89 commented Mar 6, 2024

fixes: #19086
designs: https://www.figma.com/file/WQZcp6S0EnzxdTL4taoKDv/Design-System-for-Mobile?type=design&node-id=15671-187484&mode=design&t=oSVtmnL1J5ORFvab-4

Added variant size 20 to Avatars/Collection avatar
https://www.figma.com/file/WQZcp6S0EnzxdTL4taoKDv/Design-System-for-Mobile?type=design&node-id=28941-78785&mode=design&t=j1w0ezxDk1NIja1e-4

Added Foundations Gradients to quo and a preview screen for it.
https://www.figma.com/file/v98g9ZiaSHYUdKWrbFg9eM/Foundations?type=design&node-id=4987-110&mode=dev
I decided to use Linear gradient as we need to add support for radial gradients but this can easily be done in a follow up.
I will discuss this with designers going forward

Implementation:

Foundations -> Gradient:

Card default variant

Image Default Variant

Design Review notes:
Review quo component and foundations gradients.
using linear gradient for now instead of radial gradient

Testing notes: this just adds a Quo component, no manual qa needed.

@J-Son89 J-Son89 self-assigned this Mar 6, 2024
@status-im-auto
Copy link
Member

status-im-auto commented Mar 6, 2024

Jenkins Builds

Click to see older builds (25)
Commit #️⃣ Finished (UTC) Duration Platform Result
7057249 #1 2024-03-06 23:30:03 ~1 min tests 📄log
✔️ 7057249 #1 2024-03-06 23:35:18 ~6 min android 🤖apk 📲
✔️ 7057249 #1 2024-03-06 23:35:26 ~6 min android-e2e 🤖apk 📲
✔️ 7057249 #1 2024-03-06 23:36:29 ~8 min ios 📱ipa 📲
5e75bd8 #2 2024-03-06 23:37:56 ~1 min tests 📄log
9479ef7 #3 2024-03-06 23:40:00 ~1 min tests 📄log
✔️ 9479ef7 #3 2024-03-06 23:45:28 ~6 min android-e2e 🤖apk 📲
✔️ 9479ef7 #3 2024-03-06 23:45:33 ~6 min android 🤖apk 📲
✔️ 9479ef7 #3 2024-03-06 23:46:39 ~7 min ios 📱ipa 📲
✔️ 7a27d05 #4 2024-03-08 19:46:05 ~5 min tests 📄log
✔️ 7a27d05 #4 2024-03-08 19:47:10 ~6 min android 🤖apk 📲
✔️ 7a27d05 #4 2024-03-08 19:47:17 ~6 min android-e2e 🤖apk 📲
✔️ 7a27d05 #4 2024-03-08 19:48:32 ~8 min ios 📱ipa 📲
✔️ 86b70bc #5 2024-03-08 19:55:46 ~5 min tests 📄log
✔️ 86b70bc #5 2024-03-08 19:56:35 ~6 min android-e2e 🤖apk 📲
✔️ 86b70bc #5 2024-03-08 19:56:51 ~6 min android 🤖apk 📲
✔️ 86b70bc #5 2024-03-08 19:58:17 ~8 min ios 📱ipa 📲
8df3e28 #6 2024-03-14 18:31:09 ~55 sec tests 📄log
✔️ 8df3e28 #6 2024-03-14 18:36:38 ~6 min android-e2e 🤖apk 📲
✔️ 8df3e28 #6 2024-03-14 18:38:07 ~7 min ios 📱ipa 📲
✔️ 8df3e28 #6 2024-03-14 18:38:08 ~7 min android 🤖apk 📲
✔️ cb61e3f #7 2024-03-15 01:03:23 ~6 min tests 📄log
✔️ cb61e3f #7 2024-03-15 01:03:36 ~6 min android 🤖apk 📲
✔️ cb61e3f #7 2024-03-15 01:04:21 ~7 min android-e2e 🤖apk 📲
✔️ cb61e3f #7 2024-03-15 01:05:00 ~7 min ios 📱ipa 📲
Commit #️⃣ Finished (UTC) Duration Platform Result
✔️ e37e809 #8 2024-03-15 13:34:51 ~6 min tests 📄log
✔️ e37e809 #8 2024-03-15 13:35:36 ~6 min android 🤖apk 📲
✔️ e37e809 #8 2024-03-15 13:36:11 ~7 min android-e2e 🤖apk 📲
✔️ e37e809 #8 2024-03-15 13:36:25 ~7 min ios 📱ipa 📲
✔️ ebccc20 #9 2024-03-15 17:39:28 ~6 min tests 📄log
✔️ ebccc20 #9 2024-03-15 17:41:10 ~8 min android-e2e 🤖apk 📲
✔️ ebccc20 #9 2024-03-15 17:41:21 ~8 min android 🤖apk 📲
✔️ ebccc20 #9 2024-03-15 17:41:26 ~8 min ios 📱ipa 📲

@J-Son89 J-Son89 force-pushed the jc/quo-component branch 3 times, most recently from 9479ef7 to 7a27d05 Compare March 8, 2024 19:40
@J-Son89 J-Son89 marked this pull request as ready for review March 8, 2024 19:40
@J-Son89 J-Son89 changed the title [WIP] chore(quo): add profile - collectibles list item component chore(quo): add profile - collectibles list item component Mar 8, 2024
@J-Son89 J-Son89 force-pushed the jc/quo-component branch from 7a27d05 to 86b70bc Compare March 8, 2024 19:49
@@ -11,6 +11,7 @@
[:catn
[:props
[:map {:closed true}
[:container-style {:optional true} [:maybe :map]]
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cc @mmilad75 please check 🙏

[card-view props]
[image-view props])])

(def ?schema
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mmilad75 please check! 🙏

@@ -55,7 +55,7 @@
quo.components.dropdowns.network-dropdown.view
quo.components.empty-state.empty-state.view
quo.components.gradient.gradient-cover.view
[quo.components.graph.interactive-graph.view :as interactive-graph]
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

unneeded/unused alias

@@ -0,0 +1,36 @@
(ns quo.foundations.gradients
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

needed for loading state - please see comments in the pr description about this

{:state state
:descriptor descriptor
:component-container-style {:padding-vertical 20
:margin-horizontal 95}}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the views are responsive so I set margin 95 to get the view matching figma on an iphone 13

Copy link
Contributor

@ulisesmac ulisesmac left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @J-Son89, very tidy code 👍

[rn/view {:style {:flex-direction :row}}
[rn/view {:style (assoc container-style :flex-direction :row)}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

Comment on lines 175 to 178
"
width is dynamic based on available space and has to be passed to the component.
This will used in large lists, to avoid recalculating the same value it is easier to pass in the value.
"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This string is not a docstring 👀

btw, do we need to explicitly pass a width?
can't we just say something like {:flex 1}?

The problem I see with width is we need to first get the layout, it can be done in two ways:

  • on-layout:
    It's called on the parent, meaning the first time the parent is rendered won't show its children, until it gets the dimensions to render, so this creates a one frame empty screen.

  • Using window width or height:
    Actually not bad, we don't skip frames as on-layout, but the problem is we must do the calculations before mounting this component.

Sometimes we need one of these, but is it the case for this component?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @ulisesmac, if you look at how this component will be used (e.g https://www.figma.com/file/WQZcp6S0EnzxdTL4taoKDv/Design-System-for-Mobile?type=design&node-id=36420-110729&mode=design&t=qxBy1qf56zYeAYTi-4)

you'll see that this component is mostly used in a list of this component with 2 instances of it side by side with a consistent gap dependent on the screen size. For that reason I figured it would be more efficient that we calculate that once on the screen with the list rather than have that calculation done for each item etc.
So I don't think on-layout is desirable for this component here.

Pretty sure there that flex alone would not work too as I tried this approach and ran into some difficulties keeping some variants consistent with each other. Can't remember the specific issue but I believe we need to calculate width.

Will fix the docstring too 👍

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Question (maybe not the right thread to ask, or I misunderstood this width prop. Correct me if I'm wrong)

If it's just the padding on the sides (vertical) that needs to be consistent across different screens and the component is used only in the list (taking the width of available of space), I believe we can use the default flex along with the :num-columns prop in FlatList.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

gonna look into it again if I can use flex here. If I recall correctly it was mostly the "type" :card variant but perhaps I just fix the height on the bottom part (the text details and avatar image) and then leave the upper part be square.
But I think there was more than that, it was some of the empty content just wouldn't stretch for me, will have to recheck/revisit this.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I was exactly thinking about the :num-columns prop @smohamedjavid mentioned.

@J-Son89 the current collectible listing is using that prop, just if you want an example, but I'm not sure if it can be applied to this one.

will have to recheck/revisit this.

Thanks for considering it @J-Son89 👍

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

addressed this and now not using a fixed width. It's all responsive 👍

{:foundations [{:name :shadows
{:foundations [{:name :gradients
:component gradients/view
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👀

{:key :3}
{:key :4}
{:key :5}
]}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👀

Comment on lines +5 to +10
(defn- get-dimensions
[size]
(case size
:size-24 24
:size-20 20
nil))
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is the size given as a prefixed keyword :size-?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

having lots of random integers used across the application is not the cleanest pattern and can easily lead to changes that can break many things unknowingly. The team came to a decision a while back to use this as a standard approach for passing size props to components. See: #17279

[quo.foundations.shadows :as shadows]))

(def type-card-image-height 150)
(def type-card-image-height-and-border (+ type-card-image-height 2))
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this use the borders-width defined below? (def type-card-image-height-and-border (+ type-card-image-height borders-width))

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

will double check this!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thanks, so in the end I actually removed these as not needed since I made this responsive 👍

[schema.core :as schema]
[utils.i18n :as i18n]))

(defn- fallback
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The word fallback kinda vague here. Maybe fallback-view

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sure, can adjust

Comment on lines +12 to +13
:options [{:key :size-24}
{:key :size-20}]}
Copy link
Contributor

@OmarBasem OmarBasem Mar 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is the benefit of keywordizing the size? Can't it just be 24 and 20 so that it can be used directly in component's style above without mapping it

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

as commented above - link to team decision etc #17279 (comment)

Copy link
Member

@smohamedjavid smohamedjavid left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Apart from the existing comments, It looks good to me. 👍
Nice work! 🚀

{:style (style/fallback {:type type
:width width
:theme theme})}
[rn/view
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it possible to remove this (wrapping) view?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

pretty sure not, will double check!

Comment on lines 175 to 178
"
width is dynamic based on available space and has to be passed to the component.
This will used in large lists, to avoid recalculating the same value it is easier to pass in the value.
"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Question (maybe not the right thread to ask, or I misunderstood this width prop. Correct me if I'm wrong)

If it's just the padding on the sides (vertical) that needs to be consistent across different screens and the component is used only in the list (taking the width of available of space), I believe we can use the default flex along with the :num-columns prop in FlatList.

[:collectible-name {:optional true} [:maybe string?]]
[:community? {:optional true} [:maybe boolean?]]
[:counter {:optional true} [:maybe string?]]
[:gradient-color-index {:optional true} [:maybe [:enum 1 2 3 4 5]]]
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

perhaps I should update these to keywords 👍 :gradient-1 etc

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

updated to this

@J-Son89
Copy link
Contributor Author

J-Son89 commented Mar 15, 2024

@OmarBasem, feel free to check again. Made the updates you recommended
@smohamedjavid, @ulisesmac - I adjusted to all your requested changes.

@J-Son89
Copy link
Contributor Author

J-Son89 commented Mar 15, 2024

@Francesca-G - could you design review this component when you get a chance please?

Copy link

@Francesca-G Francesca-G left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks really good ✨

Only thing I noticed is that I only typed a number in the counter field and no "x" was shown in the counter tag:

Screenshot 2024-03-15 alle 18 26 59

@J-Son89
Copy link
Contributor Author

J-Son89 commented Mar 15, 2024

Looks really good ✨

Only thing I noticed is that I only typed a number in the counter field and no "x" was shown in the counter tag:

Screenshot 2024-03-15 alle 18 26 59

Thanks @Francesca-G - I thought it better to leave that to be added manually. I.e that might be use case dependent. Either way it's an easy fix and something for the devs to decide as shouldn't affect the styling in anyway

@J-Son89
Copy link
Contributor Author

J-Son89 commented Mar 15, 2024

Skipping manual QA as this is just a design system component

@J-Son89
Copy link
Contributor Author

J-Son89 commented Mar 15, 2024

@status-im/mobile-qa ca you let me know if e2e tests are okay for this pr?
shouldn't affect anyway as it's only new quo components

Copy link
Contributor

@ulisesmac ulisesmac left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice! 💯 Thanks for the efforts on this Jamie!

@pavloburykh
Copy link
Contributor

pavloburykh commented Mar 15, 2024

@status-im/mobile-qa ca you let me know if e2e tests are okay for this pr?

@J-Son89 sure, we will review once results are ready. @ulisesmac just to make sure we do not miss, please ping us once again here once e2e results are ready. Thank you!

@status-im-auto
Copy link
Member

98% of end-end tests have passed

Total executed tests: 48
Failed tests: 0
Expected to fail tests: 1
Passed tests: 47
IDs of expected to fail tests: 703503 

Expected to fail tests (1)

Click to expand

Class TestCommunityOneDeviceMerged:

1. test_community_discovery, id: 703503
Test is not run, e2e blocker  

[[reason: [NOTRUN] Curated communities not loading, https://github.com//issues/17852]]

Passed tests (47)

Click to expand

Class TestCommunityMultipleDeviceMerged:

1. test_community_several_images_send_reply, id: 703194
Device sessions

2. test_community_one_image_send_reply, id: 702859
Device sessions

3. test_community_emoji_send_copy_paste_reply, id: 702840
Device sessions

4. test_community_mark_all_messages_as_read, id: 703086
Device sessions

5. test_community_contact_block_unblock_offline, id: 702894
Device sessions

6. test_community_edit_delete_message_when_offline, id: 704615
Device sessions

7. test_community_message_delete, id: 702839
Device sessions

8. test_community_message_send_check_timestamps_sender_username, id: 702838
Device sessions

9. test_community_links_with_previews_github_youtube_twitter_gif_send_enable, id: 702844
Device sessions

10. test_community_message_edit, id: 702843
Device sessions

11. test_community_unread_messages_badge, id: 702841
Device sessions

Class TestActivityCenterContactRequestMultipleDevicePR:

1. test_add_contact_field_validation, id: 702777
Device sessions

2. test_activity_center_contact_request_accept_swipe_mark_all_as_read, id: 702851
Device sessions

3. test_activity_center_contact_request_decline, id: 702850
Device sessions

Class TestCommunityMultipleDeviceMergedTwo:

1. test_community_markdown_support, id: 702809
Device sessions

2. test_community_hashtag_links_to_community_channels, id: 702948
Device sessions

3. test_community_mentions_push_notification, id: 702786
Device sessions

4. test_community_leave, id: 702845
Device sessions

5. test_community_join_when_node_owner_offline, id: 703629
Device sessions

Class TestOneToOneChatMultipleSharedDevicesNewUi:

1. test_1_1_chat_emoji_send_reply_and_open_link, id: 702782
Device sessions

2. test_1_1_chat_text_message_delete_push_disappear, id: 702733
Device sessions

3. test_1_1_chat_push_emoji, id: 702813
Device sessions

4. test_1_1_chat_non_latin_messages_stack_update_profile_photo, id: 702745
Device sessions

5. test_1_1_chat_edit_message, id: 702855
Device sessions

6. test_1_1_chat_send_image_save_and_share, id: 703391
Device sessions

7. test_1_1_chat_pin_messages, id: 702731
Device sessions

8. test_1_1_chat_message_reaction, id: 702730
Device sessions

Class TestGroupChatMultipleDeviceMergedNewUI:

1. test_group_chat_pin_messages, id: 702732
Device sessions

2. test_group_chat_mute_chat, id: 703495
Device sessions

3. test_group_chat_send_image_save_and_share, id: 703297
Device sessions

4. test_group_chat_reactions, id: 703202
Device sessions

5. test_group_chat_join_send_text_messages_push, id: 702807
Device sessions

6. test_group_chat_offline_pn, id: 702808
Device sessions

Class TestCommunityOneDeviceMerged:

1. test_restore_multiaccount_with_waku_backup_remove_switch, id: 703133
Device sessions

2. test_community_copy_and_paste_message_in_chat_input, id: 702742
Device sessions

3. test_community_undo_delete_message, id: 702869
Device sessions

4. test_community_navigate_to_channel_when_relaunch, id: 702846
Device sessions

5. test_community_mute_community_and_channel, id: 703382
Device sessions

Class TestDeepLinksOneDevice:

1. test_links_open_universal_links_from_chat, id: 704613
Device sessions

2. test_links_deep_links, id: 702775
Device sessions

Class TestActivityMultipleDevicePRTwo:

1. test_activity_center_mentions, id: 702957
Device sessions

2. test_activity_center_admin_notification_accept_swipe, id: 702958
Device sessions

Class TestActivityMultipleDevicePR:

1. test_navigation_jump_to, id: 702936
Device sessions

2. test_activity_center_reply_read_unread_delete_filter_swipe, id: 702947
Device sessions

Class TestOneToOneChatMultipleSharedDevicesNewUiTwo:

1. test_1_1_chat_delete_via_long_press_relogin, id: 702784
Device sessions

2. test_1_1_chat_is_shown_message_sent_delivered_from_offline, id: 702783
Device sessions

3. test_1_1_chat_mute_chat, id: 703496
Device sessions

@pavloburykh
Copy link
Contributor

@J-Son89 @ulisesmac e2e results are good. Ready to merge.

@J-Son89 J-Son89 merged commit 219dd7c into develop Mar 15, 2024
6 checks passed
@J-Son89 J-Son89 deleted the jc/quo-component branch March 15, 2024 20:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Archived in project
Archived in project
Development

Successfully merging this pull request may close these issues.

Quo - implement component Profile/ collectible-list-item
7 participants