add post reminder

Co-Authored-By: Ashish Bhate <[email protected]>

Author: AshishDhama

components/dot_menu/dot_menu.scss

@@ -18,3 +18,10 @@
         }
     }
 }
+
+.postReminderMenuHeader {
+    padding: 6px 20px;
+    margin: 0;
+    font-weight: bold;
+    pointer-events: none;
+}

components/dot_menu/dot_menu.test.tsx

@@ -3,13 +3,13 @@
 
 import React from 'react';
 
-import {PostType} from '@mattermost/types/posts';
-
 import {shallowWithIntl} from 'tests/helpers/intl-test-helper';
 
 import {Locations} from 'utils/constants';
 import {TestHelper} from 'utils/test_helper';
 
+import {PostType} from '@mattermost/types/posts';
+
 import * as dotUtils from './utils';
 jest.mock('./utils');
 
@@ -36,6 +36,7 @@ describe('components/dot_menu/DotMenu', () => {
             markPostAsUnread: jest.fn(),
             postEphemeralCallResponseForPost: jest.fn(),
             setThreadFollow: jest.fn(),
+            addPostReminder: jest.fn(),
             setGlobalItem: jest.fn(),
         },
         canEdit: false,
@@ -48,6 +49,7 @@ describe('components/dot_menu/DotMenu', () => {
         threadId: 'post_id_1',
         threadReplyCount: 0,
         userId: 'user_id_1',
+        isMilitaryTime: false,
         showForwardPostNewLabel: false,
     };
 

components/dot_menu/dot_menu.tsx

@@ -43,6 +43,7 @@ import Badge from '../widgets/badges/badge';
 import {ChangeEvent, trackDotMenuEvent} from './utils';
 
 import './dot_menu.scss';
+import {PostReminderSubmenu} from './post_reminder_submenu';
 
 type ShortcutKeyProps = {
     shortcutKey: string;
@@ -75,6 +76,8 @@ type Props = {
     teamUrl?: string; // TechDebt: Made non-mandatory while converting to typescript
     isMobileView: boolean;
     showForwardPostNewLabel: boolean;
+    timezone?: string;
+    isMilitaryTime: boolean;
 
     /**
      * Components for overriding provided by plugins
@@ -203,7 +206,18 @@ export class DotMenuClass extends React.PureComponent<Props, State> {
         this.disableCanEditPostByTime();
     }
 
+    componentDidUpdate(prevProps: Props): void {
+        if (!prevProps.isMenuOpen && this.props.isMenuOpen) {
+            window.addEventListener('keydown', this.onShortcutKeyDown);
+        }
+
+        if (prevProps.isMenuOpen && !this.props.isMenuOpen) {
+            window.removeEventListener('keydown', this.onShortcutKeyDown);
+        }
+    }
+
     componentWillUnmount(): void {
+        window.removeEventListener('keydown', this.onShortcutKeyDown);
         this.editDisableAction.cancel();
     }
 
@@ -338,11 +352,11 @@ export class DotMenuClass extends React.PureComponent<Props, State> {
         this.props.handleCommentClick?.(e);
     }
 
-    isKeyboardEvent = (e: React.KeyboardEvent): any => {
+    isKeyboardEvent = (e: KeyboardEvent): any => {
         return (e).getModifierState !== undefined;
     }
 
-    onShortcutKeyDown = (e: React.KeyboardEvent): void => {
+    onShortcutKeyDown = (e: KeyboardEvent): void => {
         e.preventDefault();
         if (!this.isKeyboardEvent(e)) {
             return;
@@ -556,7 +570,6 @@ export class DotMenuClass extends React.PureComponent<Props, State> {
                         leadingElement={<ReplyOutlineIcon size={18}/>}
                         trailingElements={<ShortcutKey shortcutKey='R'/>}
                         onClick={this.handleCommentClick}
-                        onKeyDown={this.onShortcutKeyDown}
                     />
                 }
                 {this.canPostBeForwarded &&
@@ -566,7 +579,6 @@ export class DotMenuClass extends React.PureComponent<Props, State> {
                         leadingElement={<ArrowRightBoldOutlineIcon size={18}/>}
                         trailingElements={<ShortcutKey shortcutKey='Shift + F'/>}
                         onClick={this.handleForwardMenuItemActivated}
-                        onKeyDown={this.onShortcutKeyDown}
                     />
                 }
                 <ChannelPermissionGate
@@ -585,7 +597,6 @@ export class DotMenuClass extends React.PureComponent<Props, State> {
                             }
                             leadingElement={<EmoticonPlusOutlineIcon size={18}/>}
                             onClick={this.handleAddReactionMenuItemActivated}
-                            onKeyDown={this.onShortcutKeyDown}
                         />
                     }
                 </ChannelPermissionGate>
@@ -604,7 +615,6 @@ export class DotMenuClass extends React.PureComponent<Props, State> {
                         labels={followPostLabel()}
                         leadingElement={isFollowingThread ? <MessageMinusOutlineIcon size={18}/> : <MessageCheckOutlineIcon size={18}/>}
                         onClick={this.handleSetThreadFollow}
-                        onKeyDown={this.onShortcutKeyDown}
                     />
                 }
                 {Boolean(!isSystemMessage && !this.props.channelIsArchived && this.props.location !== Locations.SEARCH) &&
@@ -619,7 +629,14 @@ export class DotMenuClass extends React.PureComponent<Props, State> {
                         leadingElement={<MarkAsUnreadIcon size={18}/>}
                         trailingElements={<ShortcutKey shortcutKey='U'/>}
                         onClick={this.handleMarkPostAsUnread}
-                        onKeyDown={this.onShortcutKeyDown}
+                    />
+                }
+                {!isSystemMessage &&
+                    <PostReminderSubmenu
+                        userId={this.props.userId}
+                        post={this.props.post}
+                        isMilitaryTime={this.props.isMilitaryTime}
+                        timezone={this.props.timezone}
                     />
                 }
                 {!isSystemMessage &&
@@ -629,7 +646,6 @@ export class DotMenuClass extends React.PureComponent<Props, State> {
                         leadingElement={this.props.isFlagged ? <BookmarkIcon size={18}/> : <BookmarkOutlineIcon size={18}/>}
                         trailingElements={<ShortcutKey shortcutKey='S'/>}
                         onClick={this.handleFlagMenuItemActivated}
-                        onKeyDown={this.onShortcutKeyDown}
                     />
                 }
                 {Boolean(!isSystemMessage && !this.props.isReadOnly) &&
@@ -639,7 +655,6 @@ export class DotMenuClass extends React.PureComponent<Props, State> {
                         leadingElement={this.props.post.is_pinned ? <PinIcon size={18}/> : <PinOutlineIcon size={18}/>}
                         trailingElements={<ShortcutKey shortcutKey='P'/>}
                         onClick={this.handlePinMenuItemActivated}
-                        onKeyDown={this.onShortcutKeyDown}
                     />
                 }
                 {!isSystemMessage && (this.state.canEdit || this.state.canDelete) && <Menu.Separator/>}
@@ -654,7 +669,6 @@ export class DotMenuClass extends React.PureComponent<Props, State> {
                         leadingElement={<LinkVariantIcon size={18}/>}
                         trailingElements={<ShortcutKey shortcutKey='K'/>}
                         onClick={this.copyLink}
-                        onKeyDown={this.onShortcutKeyDown}
                     />
                 }
                 {!isSystemMessage && <Menu.Separator/>}
@@ -669,7 +683,6 @@ export class DotMenuClass extends React.PureComponent<Props, State> {
                         leadingElement={<PencilOutlineIcon size={18}/>}
                         trailingElements={<ShortcutKey shortcutKey='E'/>}
                         onClick={this.handleEditMenuItemActivated}
-                        onKeyDown={this.onShortcutKeyDown}
                     />
                 }
                 {!isSystemMessage &&
@@ -683,7 +696,6 @@ export class DotMenuClass extends React.PureComponent<Props, State> {
                         leadingElement={<ContentCopyIcon size={18}/>}
                         trailingElements={<ShortcutKey shortcutKey='C'/>}
                         onClick={this.copyText}
-                        onKeyDown={this.onShortcutKeyDown}
                     />
                 }
                 {this.state.canDelete &&
@@ -698,7 +710,6 @@ export class DotMenuClass extends React.PureComponent<Props, State> {
                             />}
                         onClick={this.handleDeleteMenuItemActivated}
                         isDestructive={true}
-                        onKeyDown={this.onShortcutKeyDown}
                     />
                 }
             </Menu.Container>

components/dot_menu/dot_menu_empty.test.tsx

@@ -44,6 +44,7 @@ describe('components/dot_menu/DotMenu returning empty ("")', () => {
                 handleBindingClick: jest.fn(),
                 postEphemeralCallResponseForPost: jest.fn(),
                 setThreadFollow: jest.fn(),
+                addPostReminder: jest.fn(),
                 setGlobalItem: jest.fn(),
             },
             canEdit: false,
@@ -57,6 +58,7 @@ describe('components/dot_menu/DotMenu returning empty ("")', () => {
             teamId: '',
             threadId: 'post_id_1',
             userId: 'user_id_1',
+            isMilitaryTime: false,
             showForwardPostNewLabel: false,
         };
 

components/dot_menu/dot_menu_mobile.test.tsx

@@ -44,6 +44,7 @@ describe('components/dot_menu/DotMenu on mobile view', () => {
                 handleBindingClick: jest.fn(),
                 postEphemeralCallResponseForPost: jest.fn(),
                 setThreadFollow: jest.fn(),
+                addPostReminder: jest.fn(),
                 setGlobalItem: jest.fn(),
             },
             canEdit: false,
@@ -57,6 +58,7 @@ describe('components/dot_menu/DotMenu on mobile view', () => {
             teamId: '',
             threadId: 'post_id_1',
             userId: 'user_id_1',
+            isMilitaryTime: false,
             showForwardPostNewLabel: false,
         };
 

components/dot_menu/index.ts

@@ -11,14 +11,11 @@ import {getCurrentUserId, getCurrentUserMentionKeys} from 'mattermost-redux/sele
 import {getCurrentTeamId, getCurrentTeam, getTeam} from 'mattermost-redux/selectors/entities/teams';
 import {makeGetThreadOrSynthetic} from 'mattermost-redux/selectors/entities/threads';
 import {getPost} from 'mattermost-redux/selectors/entities/posts';
-import {isCollapsedThreadsEnabled} from 'mattermost-redux/selectors/entities/preferences';
-
+import {getBool, isCollapsedThreadsEnabled} from 'mattermost-redux/selectors/entities/preferences';
+import {getCurrentUserTimezone} from 'selectors/general';
 import {isSystemMessage} from 'mattermost-redux/utils/post_utils';
-
 import {GenericAction} from 'mattermost-redux/types/actions';
-
 import {setThreadFollow} from 'mattermost-redux/actions/threads';
-
 import {ModalData} from 'types/actions';
 import {GlobalState} from 'types/store';
 
@@ -74,6 +71,7 @@ function mapStateToProps(state: GlobalState, ownProps: Props) {
     const currentTeam = getCurrentTeam(state) || {};
     const team = getTeam(state, channel.team_id);
     const teamUrl = `${getSiteURL()}/${team?.name || currentTeam.name}`;
+    const isMilitaryTime = getBool(state, Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.USE_MILITARY_TIME, false);
 
     const systemMessage = isSystemMessage(post);
     const collapsedThreads = isCollapsedThreadsEnabled(state);
@@ -130,6 +128,8 @@ function mapStateToProps(state: GlobalState, ownProps: Props) {
         threadReplyCount,
         isMobileView: getIsMobileView(state),
         showForwardPostNewLabel,
+        timezone: getCurrentUserTimezone(state),
+        isMilitaryTime,
         ...ownProps,
     };
 }

components/dot_menu/post_reminder_submenu.tsx

@@ -0,0 +1,136 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {useDispatch} from 'react-redux';
+
+import {FormattedMessage, FormattedDate, FormattedTime, useIntl} from 'react-intl';
+import {ChevronRightIcon, ClockOutlineIcon} from '@mattermost/compass-icons/components';
+
+import * as Menu from 'components/menu';
+import {getCurrentMomentForTimezone} from 'utils/timezone';
+import {openModal} from 'actions/views/modals';
+import {ModalIdentifiers} from 'utils/constants';
+import {toUTCUnix} from 'utils/datetime';
+import PostReminderCustomTimePicker from 'components/post_reminder_time_picker_modal';
+import {addPostReminder} from 'mattermost-redux/actions/posts';
+
+import {Post} from '@mattermost/types/posts';
+
+type Props = {
+    userId: string;
+    post: Post;
+    isMilitaryTime: boolean;
+    timezone?: string;
+}
+
+const postReminderTimes = [
+    {id: 'thirty_minutes', label: 'post_info.post_reminder.sub_menu.thirty_minutes', labelDefault: '30 mins'},
+    {id: 'one_hour', label: 'post_info.post_reminder.sub_menu.one_hour', labelDefault: '1 hour'},
+    {id: 'two_hours', label: 'post_info.post_reminder.sub_menu.two_hours', labelDefault: '2 hours'},
+    {id: 'tomorrow', label: 'post_info.post_reminder.sub_menu.tomorrow', labelDefault: 'Tomorrow'},
+    {id: 'custom', label: 'post_info.post_reminder.sub_menu.custom', labelDefault: 'Custom'},
+];
+
+export function PostReminderSubmenu(props: Props) {
+    const {formatMessage} = useIntl();
+    const dispatch = useDispatch();
+
+    const setPostReminder = (id: string): void => {
+        const currentDate = getCurrentMomentForTimezone(props.timezone);
+        let endTime = currentDate;
+        switch (id) {
+        case 'thirty_minutes':
+            // add 30 minutes in current time
+            endTime = currentDate.add(30, 'minutes');
+            break;
+        case 'one_hour':
+            // add 1 hour in current time
+            endTime = currentDate.add(1, 'hour');
+            break;
+        case 'two_hours':
+            // add 2 hours in current time
+            endTime = currentDate.add(2, 'hours');
+            break;
+        case 'tomorrow':
+            // add one day in current date
+            endTime = currentDate.add(1, 'day');
+            break;
+        }
+
+        dispatch(addPostReminder(props.userId, props.post.id, toUTCUnix(endTime.toDate())));
+    };
+
+    const setCustomPostReminder = (): void => {
+        const postReminderCustomTimePicker = {
+            modalId: ModalIdentifiers.POST_REMINDER_CUSTOM_TIME_PICKER,
+            dialogType: PostReminderCustomTimePicker,
+            dialogProps: {
+                postId: props.post.id,
+                currentDate: new Date(),
+            },
+        };
+        dispatch(openModal(postReminderCustomTimePicker));
+    };
+
+    const postReminderSubMenuItems =
+        postReminderTimes.map(({id, label, labelDefault}) => {
+            const labels = (
+                <FormattedMessage
+                    id={label}
+                    defaultMessage={labelDefault}
+                />
+            );
+            let trailing: JSX.Element | null = null;
+
+            if (id === 'tomorrow') {
+                const tomorrow = getCurrentMomentForTimezone(props.timezone).add(1, 'day').toDate();
+                trailing = (
+                    <span className={`postReminder-${id}_timestamp`}>
+                        <FormattedDate
+                            value={tomorrow}
+                            weekday='short'
+                        />
+                        {', '}
+                        <FormattedTime
+                            value={tomorrow}
+                            timeStyle='short'
+                            hour12={!props.isMilitaryTime}
+                        />
+                    </span>
+                );
+            }
+            return (
+                <Menu.Item
+                    key={`remind_post_options_${id}`}
+                    id={`remind_post_options_${id}`}
+                    labels={labels}
+                    trailingElements={trailing}
+                    onClick={id === 'custom' ? () => setCustomPostReminder() : () => setPostReminder(id)}
+                />
+            );
+        });
+
+    return (
+        <Menu.SubMenu
+            id={`remind_post_${props.post.id}`}
+            labels={
+                <FormattedMessage
+                    id='post_info.post_reminder.menu'
+                    defaultMessage='Remind'
+                />
+            }
+            leadingElement={<ClockOutlineIcon size={18}/>}
+            trailingElements={<ChevronRightIcon size={16}/>}
+            menuId={`remind_post_${props.post.id}-menu`}
+        >
+            <h5 className={'postReminderMenuHeader'}>
+                {formatMessage(
+                    {id: 'post_info.post_reminder.sub_menu.header',
+                        defaultMessage: 'Set a reminder for:'},
+                )}
+            </h5>
+            {postReminderSubMenuItems}
+        </Menu.SubMenu>
+    );
+}