fix: Critical issues for mobile compatibility #546

HoonBaek · 2023-05-19T06:12:22Z

Description Of Changes

Create components
- ReactedMembersBottomSheet
- MobileEmojisReactions
Add util function: getEmojiUrl
- you can get the emoji URL from the emojiContainer with this util function
Add some menu options to the MobileContextMenu
- Reply in Thread
- Reply to Thread
Add a new props avatarSize to the UserListItem comp
Set the type of breakpoint to string and boolean
Apply browserSupportMimeType to record voice messages in several browsers

UIKIT-3882

…text hook

Apply the components to the EmojiReactions comp

src/hooks/VoiceRecorder/index.tsx

src/ui/ContextMenu/EmojiListItems.tsx

src/utils/index.ts

sravan-s · 2023-05-22T02:11:55Z

src/ui/MobileMenu/MobileEmojisBottomSheet.tsx

+import ImageRenderer from '../ImageRenderer';
+import Icon, { IconColors, IconTypes } from '../Icon';
+import Label, { LabelColors, LabelTypography } from '../Label';
+import { useChannelContext } from '../../modules/Channel/context/ChannelProvider';


MobileEmojisBottomSheet wont be used inn thread?

Yes, so I changed it to get the channel through props!
btw I will make the hybrid hook function to get context from multiple context provider!

sravan-s · 2023-05-22T02:12:28Z

src/ui/MobileMenu/MobileEmojisBottomSheet.tsx

+  const ReactorList = useMemo(() => {
+    const memberList = message.reactions?.find(reaction => reaction.key === selectedEmoji)
+      ?.userIds.map((userId) => members.find((member) => member.userId === userId) ?? null)
+      .filter((member) => member !== null) as Array<Member>;


as Array<Member> is this type-casting really necessary?

It says the memberList type is Array<Member | null> even I filtered null

src/ui/MobileMenu/MobileEmojisBottomSheet.tsx

sravan-s · 2023-05-22T02:16:44Z

src/ui/MessageContent/index.tsx

              <EmojiReactions
                userId={userId}
                message={message as UserMessage | FileMessage}
+                channel={channel}


Cant we use hook?

MessageContent is used under the Channel and Thread modules, do you have any good ideas to support both?

yeah, I can share in chat ~

Let me apply it in the different PR

src/ui/EmojiReactions/index.tsx

src/ui/EmojiReactions/ReactionItem.tsx

src/hooks/VoiceRecorder/index.tsx

src/ui/EmojiReactions/AddReactionBadgeItem.tsx

src/ui/EmojiReactions/index.tsx

src/ui/MobileMenu/ReactedMembersBottomSheet.tsx

according to it's value type

AhyoungRyu

👍 👍👍

HoonBaek and others added 23 commits May 19, 2023 15:03

Change the props name 'breakpoint' and add an expected type

66a13eb

Use browserSupportMimeType for recording to MediaRecorder

e75b0c0

Allow ReactNode to the children props of MenuItems comp

eecfaec

Accept nullable type of parentRef of EmojiListItem comp

6ef2855

Add util func: getEmojiUrl, getting url from emojiContainer

262494f

Add a menu option to MobileContextMenu: Reply in Thread

0d7be6f

Prevent event of mobile menu in MessageContent comp

20e33a2

Add props to UserListItem: avatarSize, to set avatar size

0df5ee6

Create a component: MobileEmojisBottmSheet

3ad6bff

Add MobileEmojisBottomSheet to the EmojiReactions comp

0260337

fix: useLongPress inside loop

cd096b8

fix: stop propogation to useLongPress

e10eb68

Not prevent event when selecting menu from Thread comp

6fd5bf3

Fix lint errors

b6298aa

Gets channel through props in MobileEmojisBottomSheet, instead of con…

ba60f93

…text hook

Stop propagation in the ReactionItem

29b85cd

Prevent opening multiple emojis menu in Mobile reactions

300a75a

Rename MobileEmojisBottomSheet to ReactedMembersBottomSheet

1624bf2

Rename className text: emoji-list to reacted-members

4a74183

Activate onClick EmojiReaction in the DesktopLayout

091b30a

Add isMobile condition for displaying ReacedMembersBottomSheet

488c4a8

Create AddReactionBadgeItem and MobileEmojisBottomSheet

952c5b4

Apply the components to the EmojiReactions comp

Remove unused props

0c3fcdb

HoonBaek added the Ready for review label May 19, 2023

HoonBaek requested review from AhyoungRyu and sravan-s May 19, 2023 06:12

HoonBaek self-assigned this May 19, 2023

HoonBaek changed the title ~~Fix/UI kit 3882/fix critical issues for mobile compatibility~~ fix: Critical issues for mobile compatibility May 19, 2023