@@ -3,16 +3,23 @@ import React from 'react';
33
44import {
55 IconArrowRotateClockwise ,
6+ IconBellNotification ,
7+ IconBellOff ,
68 IconBookmark ,
9+ IconBookmarkRemove ,
710 IconBubbleText6ChatMessage ,
811 IconBubbleWideNotificationChatMessage ,
912 IconCircleBanSign ,
13+ IconCloseQuote2 ,
1014 IconEditBig ,
1115 IconFlag2 ,
1216 IconMute ,
17+ IconPeopleAdded ,
1318 IconPin ,
1419 IconSquareBehindSquare2_Copy ,
1520 IconTrashBin ,
21+ IconUnpin ,
22+ IconVolumeFull ,
1623 isUserMuted ,
1724 useMessageComposer ,
1825 useMessageReminder ,
@@ -29,7 +36,6 @@ import {
2936 useTranslationContext ,
3037} from '../../context' ;
3138import {
32- RemindMeActionButton ,
3339 RemindMeSubmenu ,
3440 RemindMeSubmenuHeader ,
3541} from '../../components/MessageActions/RemindMeSubmenu' ;
@@ -87,6 +93,7 @@ const DefaultMessageActionComponents = {
8793 < ContextMenuButton
8894 aria-label = { t ( 'aria/Quote Message' ) }
8995 className = { msgActionsBoxButtonClassName }
96+ Icon = { IconCloseQuote2 }
9097 onClick = { ( ) => {
9198 handleQuote ( ) ;
9299 closeMenu ( ) ;
@@ -104,7 +111,7 @@ const DefaultMessageActionComponents = {
104111 < ContextMenuButton
105112 aria-label = { isPinned ? t ( 'aria/Unpin Message' ) : t ( 'aria/Pin Message' ) }
106113 className = { msgActionsBoxButtonClassName }
107- Icon = { IconPin }
114+ Icon = { isPinned ? IconUnpin : IconPin }
108115 onClick = { ( event ) => {
109116 handlePin ( event ) ;
110117 closeMenu ( ) ;
@@ -187,46 +194,60 @@ const DefaultMessageActionComponents = {
187194 </ ContextMenuButton >
188195 ) ;
189196 } ,
190- RemindMe ( { openSubmenu } : ContextMenuItemProps ) {
191- const { isMyMessage } = useMessageContext ( ) ;
197+ RemindMe ( { closeMenu , openSubmenu } : ContextMenuItemProps ) {
198+ const { client } = useChatContext ( ) ;
192199 const { t } = useTranslationContext ( ) ;
200+ const { message } = useMessageContext ( ) ;
201+ const reminder = useMessageReminder ( message . id ) ;
202+ const messageAlreadyBookmarked = reminder && ! reminder ?. remindAt ;
203+
204+ if ( messageAlreadyBookmarked ) return null ;
193205
194206 return (
195- < RemindMeActionButton
196- aria-label = { t ( 'aria/Remind Me Message' ) }
207+ < ContextMenuButton
208+ aria-label = { reminder ? t ( 'aria/Remind Me Message' ) : t ( 'aria/Remove Reminder ') }
197209 className = { msgActionsBoxButtonClassName }
198- hasSubMenu
199- isMine = { isMyMessage ( ) }
210+ hasSubMenu = { ! reminder }
211+ Icon = { reminder ? IconBellOff : IconBellNotification }
200212 onClick = { ( ) => {
201- openSubmenu ( {
202- Header : RemindMeSubmenuHeader ,
203- Submenu : RemindMeSubmenu ,
204- } ) ;
213+ if ( reminder ) {
214+ client . reminders . deleteReminder ( reminder . id ) ;
215+ closeMenu ( ) ;
216+ } else {
217+ openSubmenu ( {
218+ Header : RemindMeSubmenuHeader ,
219+ Submenu : RemindMeSubmenu ,
220+ } ) ;
221+ }
205222 } }
206- />
223+ >
224+ { reminder ? t ( 'Remove reminder' ) : t ( 'Remind me' ) }
225+ </ ContextMenuButton >
207226 ) ;
208227 } ,
209228 SaveForLater ( { closeMenu } : ContextMenuItemProps ) {
210229 const { client } = useChatContext ( ) ;
211230 const { message } = useMessageContext ( ) ;
212231 const { t } = useTranslationContext ( ) ;
213232 const reminder = useMessageReminder ( message . id ) ;
233+ const messageAlreadyHasReminderScheduled = Boolean ( reminder && reminder ?. remindAt ) ;
234+
235+ if ( messageAlreadyHasReminderScheduled ) return null ;
214236
215237 return (
216238 < ContextMenuButton
217- aria-label = { t ( 'aria/Bookmark Message' ) }
239+ aria-label = {
240+ reminder ? t ( 'aria/Remove Save For Later' ) : t ( 'aria/Bookmark Message' )
241+ }
218242 className = { msgActionsBoxButtonClassName }
219- Icon = { reminder ? IconBookmark : IconBookmark } // todo: what Icon for "Remove reminder" action
243+ Icon = { reminder ? IconBookmarkRemove : IconBookmark }
220244 onClick = { ( ) => {
221- if ( reminder ) {
222- client . reminders . deleteReminder ( reminder . id ) ;
223- } else {
224- client . reminders . createReminder ( { messageId : message . id } ) ;
225- }
245+ if ( reminder ) client . reminders . deleteReminder ( reminder . id ) ;
246+ else client . reminders . createReminder ( { messageId : message . id } ) ;
226247 closeMenu ( ) ;
227248 } }
228249 >
229- { reminder ? t ( 'Remove reminder ' ) : t ( 'Save for later' ) }
250+ { reminder ? t ( 'Remove save for later ' ) : t ( 'Save for later' ) }
230251 </ ContextMenuButton >
231252 ) ;
232253 } ,
@@ -258,7 +279,7 @@ const DefaultMessageActionComponents = {
258279 < ContextMenuButton
259280 aria-label = { isMuted ? t ( 'aria/Unmute User' ) : t ( 'aria/Mute User' ) }
260281 className = { msgActionsBoxButtonClassName }
261- Icon = { isMuted ? IconMute : IconMute } // todo: what icon for "Unmute" action
282+ Icon = { isMuted ? IconVolumeFull : IconMute }
262283 onClick = { ( event ) => {
263284 handleMute ( event ) ;
264285 closeMenu ( ) ;
@@ -299,11 +320,8 @@ const DefaultMessageActionComponents = {
299320 return (
300321 < ContextMenuButton
301322 aria-label = { isBlocked ? t ( 'aria/Unblock User' ) : t ( 'aria/Block User' ) }
302- className = { clsx (
303- msgActionsBoxButtonClassName ,
304- msgActionsBoxButtonClassNameDestructive ,
305- ) }
306- Icon = { isBlocked ? IconCircleBanSign : IconCircleBanSign } // todo: what icon for "Unblock User" action
323+ className = { clsx ( msgActionsBoxButtonClassName ) }
324+ Icon = { isBlocked ? IconPeopleAdded : IconCircleBanSign }
307325 onClick = { ( ) => {
308326 const targetId = message . user ?. id ;
309327 if ( targetId ) {
0 commit comments