Skip to content

Commit 30d146c

Browse files
HoonBaekHoonBaek
authored
fix: Improve the ChannelSettings Modal stability (#1025)
### Fix * Improve the stability of the ChannelSettings Modals * Fix the width size of the OGMessageItemBody component to `320px`
1 parent e0382af commit 30d146c

File tree

5 files changed

+123
-117
lines changed

5 files changed

+123
-117
lines changed

‎src/modules/ChannelSettings/components/ModerationPanel/MembersModal.tsx‎

Lines changed: 115 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export default function MembersModal({ onCancel }: Props): ReactElement {
2929

3030
const { channel } = useChannelSettingsContext();
3131
const state = useSendbirdStateContext();
32-
const currentUser = state?.config?.userId;
32+
const currentUserId = state?.config?.userId;
3333
const { stringSet } = useContext(LocalizationContext);
3434

3535
useEffect(() => {
@@ -67,123 +67,125 @@ export default function MembersModal({ onCancel }: Props): ReactElement {
6767
})}
6868
>
6969
{
70-
members.map((member: Member) => (
71-
<UserListItem
72-
user={member}
73-
key={member.userId}
74-
currentUser={currentUser}
75-
action={({ parentRef, actionRef }) => (
76-
<>
77-
{channel?.myRole === 'operator' && (
78-
<ContextMenu
79-
menuTrigger={(toggleDropdown) => (
80-
<IconButton
81-
className="sendbird-user-message__more__menu"
82-
width="32px"
83-
height="32px"
84-
onClick={() => {
85-
toggleDropdown();
86-
}}
87-
>
88-
<Icon
89-
width="24px"
90-
height="24px"
91-
type={IconTypes.MORE}
92-
fillColor={IconColors.CONTENT_INVERSE}
93-
/>
94-
</IconButton>
95-
)}
96-
menuItems={(closeDropdown) => (
97-
<MenuItems
98-
parentContainRef={parentRef}
99-
parentRef={actionRef} // for catching location(x, y) of MenuItems
100-
closeDropdown={closeDropdown}
101-
openLeft
102-
>
103-
<OperatorMenuItem
104-
channel={channel}
105-
user={member}
106-
disable={currentUser === member.userId}
107-
onChange={(_, member, isOperator) => {
108-
setMembers(members.map(m => {
109-
if (m.userId === member.userId) {
110-
return {
111-
...member,
112-
role: isOperator ? Role.OPERATOR : Role.NONE,
113-
};
114-
}
115-
return m;
116-
}));
117-
closeDropdown();
118-
}}
119-
onError={() => {
120-
// FIXME: handle error later
121-
closeDropdown();
70+
members.map((member: Member) => {
71+
return (
72+
<UserListItem
73+
user={member}
74+
key={member.userId}
75+
currentUser={currentUserId}
76+
action={({ parentRef, actionRef }) => (
77+
<>
78+
{channel?.myRole === 'operator' && currentUserId !== member.userId && (
79+
<ContextMenu
80+
menuTrigger={(toggleDropdown) => (
81+
<IconButton
82+
className="sendbird-user-message__more__menu"
83+
width="32px"
84+
height="32px"
85+
onClick={() => {
86+
toggleDropdown();
12287
}}
123-
dataSbId={`channel_setting_member_context_menu_${(
124-
member.role !== 'operator'
125-
) ? 'register_as_operator' : 'unregister_operator'}`}
12688
>
89+
<Icon
90+
width="24px"
91+
height="24px"
92+
type={IconTypes.MORE}
93+
fillColor={IconColors.CONTENT_INVERSE}
94+
/>
95+
</IconButton>
96+
)}
97+
menuItems={(closeDropdown) => (
98+
<MenuItems
99+
parentContainRef={parentRef}
100+
parentRef={actionRef} // for catching location(x, y) of MenuItems
101+
closeDropdown={closeDropdown}
102+
openLeft
103+
>
104+
<OperatorMenuItem
105+
channel={channel}
106+
user={member}
107+
disable={currentUserId === member.userId}
108+
onChange={(_, member, isOperator) => {
109+
setMembers(members.map(m => {
110+
if (m.userId === member.userId) {
111+
return {
112+
...member,
113+
role: isOperator ? Role.OPERATOR : Role.NONE,
114+
};
115+
}
116+
return m;
117+
}));
118+
closeDropdown();
119+
}}
120+
onError={() => {
121+
// FIXME: handle error later
122+
closeDropdown();
123+
}}
124+
dataSbId={`channel_setting_member_context_menu_${(
125+
member.role !== 'operator'
126+
) ? 'register_as_operator' : 'unregister_operator'}`}
127+
>
128+
{
129+
member.role !== 'operator'
130+
? stringSet.CHANNEL_SETTING__MODERATION__REGISTER_AS_OPERATOR
131+
: stringSet.CHANNEL_SETTING__MODERATION__UNREGISTER_OPERATOR
132+
}
133+
</OperatorMenuItem>
127134
{
128-
member.role !== 'operator'
129-
? stringSet.CHANNEL_SETTING__MODERATION__REGISTER_AS_OPERATOR
130-
: stringSet.CHANNEL_SETTING__MODERATION__UNREGISTER_OPERATOR
135+
// No muted members in broadcast channel
136+
!channel?.isBroadcast && (
137+
<MuteMenuItem
138+
channel={channel}
139+
user={member}
140+
onChange={(_, member, isMuted) => {
141+
setMembers(members.map(m => {
142+
if (m.userId === member.userId) {
143+
return {
144+
...member,
145+
isMuted,
146+
};
147+
}
148+
return m;
149+
}));
150+
closeDropdown();
151+
}}
152+
onError={() => {
153+
// FIXME: handle error later
154+
closeDropdown();
155+
}}
156+
dataSbId={`channel_setting_member_context_menu_${(
157+
member.isMuted) ? 'unmute' : 'mute'}`
158+
}
159+
>
160+
{
161+
member.isMuted
162+
? stringSet.CHANNEL_SETTING__MODERATION__UNMUTE
163+
: stringSet.CHANNEL_SETTING__MODERATION__MUTE
164+
}
165+
</MuteMenuItem>
166+
)
131167
}
132-
</OperatorMenuItem>
133-
{
134-
// No muted members in broadcast channel
135-
!channel?.isBroadcast && (
136-
<MuteMenuItem
137-
channel={channel}
138-
user={member}
139-
onChange={(_, member, isMuted) => {
140-
setMembers(members.map(m => {
141-
if (m.userId === member.userId) {
142-
return {
143-
...member,
144-
isMuted,
145-
};
146-
}
147-
return m;
168+
<MenuItem
169+
onClick={() => {
170+
channel?.banUser(member, -1, '').then(() => {
171+
setMembers(members.filter(({ userId }) => {
172+
return userId !== member.userId;
148173
}));
149-
closeDropdown();
150-
}}
151-
onError={() => {
152-
// FIXME: handle error later
153-
closeDropdown();
154-
}}
155-
dataSbId={`channel_setting_member_context_menu_${(
156-
member.isMuted) ? 'unmute' : 'mute'}`
157-
}
158-
>
159-
{
160-
member.isMuted
161-
? stringSet.CHANNEL_SETTING__MODERATION__UNMUTE
162-
: stringSet.CHANNEL_SETTING__MODERATION__MUTE
163-
}
164-
</MuteMenuItem>
165-
)
166-
}
167-
<MenuItem
168-
onClick={() => {
169-
channel?.banUser(member, -1, '').then(() => {
170-
setMembers(members.filter(({ userId }) => {
171-
return userId !== member.userId;
172-
}));
173-
});
174-
}}
175-
dataSbId="channel_setting_member_context_menu_ban"
176-
>
177-
{stringSet.CHANNEL_SETTING__MODERATION__BAN}
178-
</MenuItem>
179-
</MenuItems>
180-
)}
181-
/>
182-
)}
183-
</>
184-
)}
185-
/>
186-
))
174+
});
175+
}}
176+
dataSbId="channel_setting_member_context_menu_ban"
177+
>
178+
{stringSet.CHANNEL_SETTING__MODERATION__BAN}
179+
</MenuItem>
180+
</MenuItems>
181+
)}
182+
/>
183+
)}
184+
</>
185+
)}
186+
/>
187+
);
188+
})
187189
}
188190
</div>
189191
</Modal>

‎src/ui/OGMessageItemBody/index.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@
44
position: relative;
55
display: inline-block;
66
// TODO: Change fixing width and height lengths
7-
width: 100%;
7+
width: 320px;
88
min-width: 320px;
9-
max-width: 400px;
9+
max-width: 320px;
1010
@include mobile() {
1111
min-width: 160px;
1212
}

‎src/ui/OGMessageItemBody/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,7 @@ export default function OGMessageItemBody({
9898
url={message?.ogMetaData?.defaultImage?.url || ''}
9999
alt={message?.ogMetaData?.defaultImage?.alt}
100100
width="100%"
101+
height="280px" // FIXME: Find out better to calculate the size of OG Message
101102
onLoad={onMessageHeightChange}
102103
onError={() => {
103104
try {

‎src/ui/UserListItem/index.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,15 @@
1919
top: 8px;
2020
left: 0px;
2121
cursor: pointer;
22+
z-index: 0;
2223
}
2324

2425
.sendbird-muted-avatar {
2526
position: absolute;
2627
top: 8px;
2728
left: 0px;
2829
pointer-events: none;
30+
z-index: 1;
2931
}
3032

3133
.sendbird-user-list-item__title {

‎src/ui/UserListItem/index.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import ContextMenu, { MenuItems } from '../ContextMenu';
1313
import Label, { LabelTypography, LabelColors } from '../Label';
1414

1515
export interface UserListItemProps {
16-
user: User;
16+
user: User | Member;
1717
className?: string;
1818
checked?: boolean;
1919
checkBox?: boolean;
@@ -47,6 +47,7 @@ export default function UserListItem({
4747
onClick,
4848
onUserAvatarClick,
4949
}: UserListItemProps): ReactElement {
50+
const operator = isOperator ?? (user as Member)?.role === 'operator';
5051
const uniqueKey = user.userId;
5152
const actionRef = React.useRef(null);
5253
const parentRef = React.useRef(null);
@@ -147,7 +148,7 @@ export default function UserListItem({
147148
)
148149
}
149150
{
150-
isOperator && (
151+
operator && (
151152
<Label
152153
className={[
153154
'sendbird-user-list-item__operator',

0 commit comments

Comments
 (0)