@messenger-box/platform-browser 10.0.3-alpha.17 → 10.0.3-alpha.171

package/src/components/post_view/post_pre_header/post_pre_header.tsx

@@ -1,148 +0,0 @@
-// // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// // See LICENSE.txt for license information.
-
-// import * as React from 'react';
-// import {FormattedMessage, injectIntl, IntlShape} from 'react-intl';
-
-// import {t} from 'utils/i18n';
-
-// import FlagIconFilled from 'components/widgets/icons/flag_icon_filled';
-
-// export type Props = {
-//     intl: IntlShape;
-//     isFlagged: boolean;
-//     isPinned?: boolean;
-//     skipPinned?: boolean;
-//     skipFlagged?: boolean;
-//     channelId: string;
-//     actions: {
-//         showFlaggedPosts: () => void;
-//         showPinnedPosts: (channelId: string) => void;
-//     };
-// }
-
-// export enum PostPinnedOrFlagged {
-//     Flagged,
-//     Pinned,
-//     PinnedAndFlagged,
-//     Neither,
-// }
-
-// enum MessageInfoKey {
-//     Flagged = 'flagged',
-//     Pinned = 'pinned',
-//     PinnedAndFlagged = 'pinnedAndFlagged',
-// }
-
-// class PostPreHeader extends React.PureComponent<Props> {
-//     messageInfos = {
-//         flagged: {id: t('post_pre_header.flagged'), defaultMessage: 'Saved'},
-//         pinned: {id: t('post_pre_header.pinned'), defaultMessage: 'Pinned'},
-//     };
-
-//     getPostStatus(isFlagged: boolean, isPinned?: boolean): PostPinnedOrFlagged {
-//         if (isFlagged) {
-//             if (isPinned) {
-//                 return PostPinnedOrFlagged.PinnedAndFlagged;
-//             }
-
-//             return PostPinnedOrFlagged.Flagged;
-//         }
-
-//         if (isPinned) {
-//             return PostPinnedOrFlagged.Pinned;
-//         }
-
-//         return PostPinnedOrFlagged.Neither;
-//     }
-
-//     getMessageInfo(postStatus: PostPinnedOrFlagged, skipFlagged?: boolean, skipPinned?: boolean): MessageInfoKey | false {
-//         if (skipFlagged && skipPinned) {
-//             return false;
-//         }
-
-//         if (postStatus === PostPinnedOrFlagged.PinnedAndFlagged) {
-//             if (!skipPinned && !skipFlagged) {
-//                 return MessageInfoKey.PinnedAndFlagged;
-//             }
-
-//             if (skipPinned) {
-//                 return MessageInfoKey.Flagged;
-//             }
-
-//             if (skipFlagged) {
-//                 return MessageInfoKey.Pinned;
-//             }
-//         }
-
-//         if (postStatus === PostPinnedOrFlagged.Flagged && !skipFlagged) {
-//             return MessageInfoKey.Flagged;
-//         }
-
-//         if (postStatus === PostPinnedOrFlagged.Pinned && !skipPinned) {
-//             return MessageInfoKey.Pinned;
-//         }
-
-//         return false;
-//     }
-
-//     handleLinkClick = (messageKey: MessageInfoKey, channelId?: string) => {
-//         if (messageKey === MessageInfoKey.Pinned && channelId) {
-//             this.props.actions.showPinnedPosts(channelId);
-//         } else {
-//             this.props.actions.showFlaggedPosts();
-//         }
-//     }
-
-//     render() {
-//         const {isFlagged, isPinned, skipPinned, skipFlagged, channelId} = this.props;
-
-//         const messageKey = this.getMessageInfo(this.getPostStatus(isFlagged, isPinned), skipFlagged, skipPinned);
-
-//         if ((!isFlagged && !isPinned) || !messageKey) {
-//             return null;
-//         }
-
-//         return (
-//             <div className='post-pre-header'>
-//                 <div className='post-pre-header__icons-container'>
-//                     {isPinned && !skipPinned && <span className='icon-pin icon icon--post-pre-header'/>}
-//                     {isFlagged && !skipFlagged && <FlagIconFilled className='icon icon--post-pre-header'/>}
-//                 </div>
-//                 <div className='post-pre-header__text-container'>
-//                     {messageKey &&
-//                     messageKey !== MessageInfoKey.PinnedAndFlagged && (
-//                         <span>
-//                             <a onClick={() => this.handleLinkClick(messageKey, channelId)}>
-//                                 <FormattedMessage
-//                                     id={this.messageInfos[messageKey].id}
-//                                     defaultMessage={this.messageInfos[messageKey].defaultMessage}
-//                                 />
-//                             </a>
-//                         </span>
-//                     )}
-//                     {messageKey &&
-//                     messageKey === MessageInfoKey.PinnedAndFlagged && (
-//                         <span>
-//                             <a onClick={() => this.handleLinkClick(MessageInfoKey.Pinned, channelId)}>
-//                                 <FormattedMessage
-//                                     id={this.messageInfos[MessageInfoKey.Pinned].id}
-//                                     defaultMessage={this.messageInfos[MessageInfoKey.Pinned].defaultMessage}
-//                                 />
-//                             </a>
-//                             <span className='post-pre-header__link-separator'>{'\u2B24'}</span>
-//                             <a onClick={() => this.handleLinkClick(MessageInfoKey.Flagged)}>
-//                                 <FormattedMessage
-//                                     id={this.messageInfos[MessageInfoKey.Flagged].id}
-//                                     defaultMessage={this.messageInfos[MessageInfoKey.Flagged].defaultMessage}
-//                                 />
-//                             </a>
-//                         </span>
-//                     )}
-//                 </div>
-//             </div>
-//         );
-//     }
-// }
-
-// export default injectIntl(PostPreHeader);

package/src/components/post_view/post_reaction/__snapshots__/post_reaction.test.tsx.snap

@@ -1,63 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`components/post_view/PostReaction should match snapshot 1`] = `
-<Connect(ChannelPermissionGate)
-  channelId="current_channel_id"
-  permissions={
-    Array [
-      "add_reaction",
-    ]
-  }
-  teamId="current_team_id"
->
-  <EmojiPickerOverlay
-    enableGifPicker={false}
-    n={true}
-    onEmojiClick={[Function]}
-    onEmojiClose={[MockFunction]}
-    onHide={[MockFunction]}
-    show={false}
-    spaceRequiredAbove={476}
-    spaceRequiredBelow={497}
-    target={[MockFunction]}
-    topOffset={-7}
-  />
-  <OverlayTrigger
-    className="hidden-xs"
-    defaultOverlayShown={false}
-    delayShow={500}
-    overlay={
-      <Tooltip
-        bsClass="tooltip"
-        className="hidden-xs"
-        id="reaction-icon-tooltip"
-        placement="right"
-      >
-        <Memo(MemoizedFormattedMessage)
-          defaultMessage="Add Reaction"
-          id="post_info.tooltip.add_reactions"
-        />
-      </Tooltip>
-    }
-    placement="top"
-    trigger={
-      Array [
-        "hover",
-        "focus",
-      ]
-    }
-  >
-    <button
-      aria-label="add reaction"
-      className="post-menu__item post-menu__item--reactions"
-      data-testid="post-reaction-emoji-icon"
-      id="CENTER_reaction_post_id_1"
-      onClick={[MockFunction]}
-    >
-      <EmojiIcon
-        className="icon icon--small"
-      />
-    </button>
-  </OverlayTrigger>
-</Connect(ChannelPermissionGate)>
-`;

package/src/components/post_view/post_reaction/index.ts

@@ -1,21 +0,0 @@
-// // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// // See LICENSE.txt for license information.
-
-// import {connect} from 'react-redux';
-// import {bindActionCreators, Dispatch} from 'redux';
-
-// import {GenericAction} from 'mattermost-redux/types/actions';
-
-// import {addReaction} from 'actions/post_actions.jsx';
-
-// import PostReaction from './post_reaction';
-
-// function mapDispatchToProps(dispatch: Dispatch<GenericAction>) {
-//     return {
-//         actions: bindActionCreators({
-//             addReaction,
-//         }, dispatch),
-//     };
-// }
-
-// export default connect(null, mapDispatchToProps)(PostReaction);

package/src/components/post_view/post_reaction/post_reaction.test.tsx

@@ -1,39 +0,0 @@
-// // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// // See LICENSE.txt for license information.
-
-// import * as React from 'react';
-// import {shallow} from 'enzyme';
-
-// import {Emoji} from 'mattermost-redux/types/emojis';
-
-// import PostReaction from 'components/post_view/post_reaction/post_reaction';
-
-// describe('components/post_view/PostReaction', () => {
-//     const baseProps = {
-//         channelId: 'current_channel_id',
-//         postId: 'post_id_1',
-//         teamId: 'current_team_id',
-//         getDotMenuRef: jest.fn(),
-//         showIcon: false,
-//         showEmojiPicker: false,
-//         toggleEmojiPicker: jest.fn(),
-//         actions: {
-//             addReaction: jest.fn(),
-//         },
-//     };
-
-//     test('should match snapshot', () => {
-//         const wrapper = shallow(<PostReaction {...baseProps}/>);
-//         expect(wrapper).toMatchSnapshot();
-//     });
-
-//     test('should call addReaction and toggleEmojiPicker on handleAddEmoji', () => {
-//         const wrapper = shallow(<PostReaction {...baseProps}/>);
-//         const instance = wrapper.instance() as PostReaction;
-
-//         instance.handleAddEmoji({name: 'smile'} as Emoji);
-//         expect(baseProps.actions.addReaction).toHaveBeenCalledTimes(1);
-//         expect(baseProps.actions.addReaction).toHaveBeenCalledWith('post_id_1', 'smile');
-//         expect(baseProps.toggleEmojiPicker).toHaveBeenCalledTimes(1);
-//     });
-// });

package/src/components/post_view/post_reaction/post_reaction.tsx

@@ -1,124 +0,0 @@
-// // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// // See LICENSE.txt for license information.
-
-// import * as React from 'react';
-// import classNames from 'classnames';
-// import {Tooltip} from 'react-bootstrap';
-// import {FormattedMessage} from 'react-intl';
-
-// import {Dispatch} from 'redux';
-
-// import Permissions from 'mattermost-redux/constants/permissions';
-
-// import {Emoji} from 'mattermost-redux/types/emojis';
-
-// import {Locations} from 'utils/constants';
-// import {localizeMessage} from 'utils/utils.jsx';
-
-// import OverlayTrigger from 'components/overlay_trigger';
-// import ChannelPermissionGate from 'components/permissions_gates/channel_permission_gate';
-// import EmojiIcon from 'components/widgets/icons/emoji_icon';
-// import EmojiPickerOverlay from 'components/emoji_picker/emoji_picker_overlay.jsx';
-
-// const TOP_OFFSET = -7;
-
-// type LocationTypes = 'CENTER' | 'RHS_ROOT' | 'RHS_COMMENT';
-
-// type Props = {
-//     channelId?: string;
-//     postId: string;
-//     teamId: string;
-//     getDotMenuRef: () => HTMLDivElement;
-//     location: LocationTypes;
-//     showEmojiPicker: boolean;
-//     toggleEmojiPicker: (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-//     actions: {
-//         addReaction: (postId: string, emojiName: string) => (dispatch: Dispatch) => void;
-//     };
-// }
-
-// type State = {
-//     location: LocationTypes;
-//     showEmojiPicker: boolean;
-// }
-
-// export default class PostReaction extends React.PureComponent<Props, State> {
-//     public static defaultProps: Partial<Props> = {
-//         location: Locations.CENTER as 'CENTER',
-//         showEmojiPicker: false,
-//     };
-
-//     handleAddEmoji = (emoji: Emoji): void => {
-//         this.setState({showEmojiPicker: false});
-//         const emojiName = 'short_name' in emoji ? emoji.short_name : emoji.name;
-//         this.props.actions.addReaction(this.props.postId, emojiName);
-//         this.props.toggleEmojiPicker();
-//     };
-
-//     render() {
-//         const {
-//             channelId,
-//             location,
-//             postId,
-//             showEmojiPicker,
-//             teamId,
-//         } = this.props;
-
-//         let spaceRequiredAbove;
-//         let spaceRequiredBelow;
-//         if (location === Locations.RHS_ROOT || location === Locations.RHS_COMMENT) {
-//             spaceRequiredAbove = EmojiPickerOverlay.RHS_SPACE_REQUIRED_ABOVE;
-//             spaceRequiredBelow = EmojiPickerOverlay.RHS_SPACE_REQUIRED_BELOW;
-//         }
-
-//         return (
-//             <ChannelPermissionGate
-//                 channelId={channelId}
-//                 teamId={teamId}
-//                 permissions={[Permissions.ADD_REACTION]}
-//             >
-//                 <React.Fragment>
-//                     <EmojiPickerOverlay
-//                         show={showEmojiPicker}
-//                         target={this.props.getDotMenuRef}
-//                         onHide={this.props.toggleEmojiPicker}
-//                         onEmojiClose={this.props.toggleEmojiPicker}
-//                         onEmojiClick={this.handleAddEmoji}
-//                         topOffset={TOP_OFFSET}
-//                         spaceRequiredAbove={spaceRequiredAbove}
-//                         n={true}
-//                         spaceRequiredBelow={spaceRequiredBelow}
-//                     />
-//                     <OverlayTrigger
-//                         className='hidden-xs'
-//                         delayShow={500}
-//                         placement='top'
-//                         overlay={
-//                             <Tooltip
-//                                 id='reaction-icon-tooltip'
-//                                 className='hidden-xs'
-//                             >
-//                                 <FormattedMessage
-//                                     id='post_info.tooltip.add_reactions'
-//                                     defaultMessage='Add Reaction'
-//                                 />
-//                             </Tooltip>
-//                         }
-//                     >
-//                         <button
-//                             data-testid='post-reaction-emoji-icon'
-//                             id={`${location}_reaction_${postId}`}
-//                             aria-label={localizeMessage('post_info.tooltip.add_reactions', 'Add Reaction').toLowerCase()}
-//                             className={classNames('post-menu__item', 'post-menu__item--reactions', {
-//                                 'post-menu__item--active': showEmojiPicker,
-//                             })}
-//                             onClick={this.props.toggleEmojiPicker}
-//                         >
-//                             <EmojiIcon className='icon icon--small'/>
-//                         </button>
-//                     </OverlayTrigger>
-//                 </React.Fragment>
-//             </ChannelPermissionGate>
-//         );
-//     }
-// }

package/src/components/post_view/post_time/index.ts

@@ -1,18 +0,0 @@
-// // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// // See LICENSE.txt for license information.
-
-// import {connect} from 'react-redux';
-
-// import {getCurrentRelativeTeamUrl} from 'mattermost-redux/selectors/entities/teams';
-
-// import {GlobalState} from 'types/store';
-
-// import PostTime from './post_time';
-
-// function mapStateToProps(state: GlobalState) {
-//     return {
-//         teamUrl: getCurrentRelativeTeamUrl(state),
-//     };
-// }
-
-// export default connect(mapStateToProps)(PostTime);

package/src/components/post_view/post_time/post_time.tsx

@@ -1,113 +0,0 @@
-// // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// // See LICENSE.txt for license information.
-
-// import React, {ComponentProps} from 'react';
-// import {Link} from '@remix-run/react';
-
-// import {Tooltip} from 'react-bootstrap';
-
-// import * as GlobalActions from 'actions/global_actions';
-// import {isMobile} from 'utils/user_agent';
-// import {Locations} from 'utils/constants';
-// import {isMobile as isMobileView} from 'utils/utils.jsx';
-// import OverlayTrigger from 'components/overlay_trigger';
-
-// import Timestamp, {RelativeRanges} from 'components/timestamp';
-
-// const POST_TOOLTIP_RANGES = [
-//     RelativeRanges.TODAY_TITLE_CASE,
-//     RelativeRanges.YESTERDAY_TITLE_CASE,
-// ];
-
-// type Props = {
-
-//     /*
-//          * If true, time will be rendered as a permalink to the post
-//          */
-//     isPermalink: boolean;
-
-//     /*
-//      * The time to display
-//      */
-//     eventTime: number;
-
-//     location: string;
-
-//     /*
-//      * The post id of posting being rendered
-//      */
-//     postId: string;
-//     teamUrl: string;
-//     timestampProps?: ComponentProps<typeof Timestamp>;
-// }
-
-// export default class PostTime extends React.PureComponent<Props> {
-//     static defaultProps: Partial<Props> = {
-//         eventTime: 0,
-//         location: Locations.CENTER,
-//     };
-
-//     handleClick = () => {
-//         if (isMobileView()) {
-//             GlobalActions.emitCloseRightHandSide();
-//         }
-//     };
-
-//     render() {
-//         const {
-//             eventTime,
-//             isPermalink,
-//             location,
-//             postId,
-//             teamUrl,
-//             timestampProps = {},
-//         } = this.props;
-
-//         const postTime = (
-//             <Timestamp
-//                 value={eventTime}
-//                 className='post__time'
-//                 useDate={false}
-//                 {...timestampProps}
-//             />
-//         );
-
-//         const content = isMobile() || !isPermalink ? (
-//             <div
-//                 role='presentation'
-//                 className='post__permalink post_permalink_mobile_view'
-//             >
-//                 {postTime}
-//             </div>
-//         ) : (
-//             <Link
-//                 id={`${location}_time_${postId}`}
-//                 to={`${teamUrl}/pl/${postId}`}
-//                 className='post__permalink'
-//                 onClick={this.handleClick}
-//             >
-//                 {postTime}
-//             </Link>
-//         );
-
-//         return (
-//             <OverlayTrigger
-//                 delayShow={500}
-//                 placement='top'
-//                 overlay={
-//                     <Tooltip
-//                         id={eventTime.toString()}
-//                         className='hidden-xs'
-//                     >
-//                         <Timestamp
-//                             value={eventTime}
-//                             ranges={POST_TOOLTIP_RANGES}
-//                         />
-//                     </Tooltip>
-//                 }
-//             >
-//                 {content}
-//             </OverlayTrigger>
-//         );
-//     }
-// }

package/src/components/post_view/post_view.jsx

@@ -1,83 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import PropTypes from 'prop-types';
-import * as React from 'react';
-
-import LoadingScreen from 'components/loading_screen';
-
-import PostList from './post_list';
-
-export default class PostView extends React.PureComponent {
-    static propTypes = {
-        lastViewedAt: PropTypes.number,
-        channelLoading: PropTypes.bool,
-        channelId: PropTypes.string,
-        focusedPostId: PropTypes.string,
-    }
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            unreadChunkTimeStamp: props.lastViewedAt,
-            loaderForChangeOfPostsChunk: false,
-            channelLoading: props.channelLoading,
-        };
-    }
-
-    static getDerivedStateFromProps(props, state) {
-        if (state.unreadChunkTimeStamp === null && props.lastViewedAt) {
-            return {
-                unreadChunkTimeStamp: props.lastViewedAt,
-            };
-        }
-        if (props.channelLoading !== state.channelLoading) {
-            return {
-                unreadChunkTimeStamp: props.lastViewedAt,
-                channelLoading: props.channelLoading,
-            };
-        }
-
-        return null;
-    }
-
-    changeUnreadChunkTimeStamp = (unreadChunkTimeStamp) => {
-        this.setState({
-            unreadChunkTimeStamp,
-            loaderForChangeOfPostsChunk: true,
-        }, () => {
-            window.requestAnimationFrame(() => {
-                this.setState({
-                    loaderForChangeOfPostsChunk: false,
-                });
-            });
-        });
-    }
-
-    render() {
-        if (this.props.channelLoading || this.state.loaderForChangeOfPostsChunk) {
-            return (
-                <div id='post-list'>
-                    <LoadingScreen
-                        position='absolute'
-                        key='loading'
-                    />
-                </div>
-            );
-        }
-
-        return (
-            <div
-                id='post-list'
-                role='main'
-            >
-                <PostList
-                    unreadChunkTimeStamp={this.state.unreadChunkTimeStamp}
-                    channelId={this.props.channelId}
-                    changeUnreadChunkTimeStamp={this.changeUnreadChunkTimeStamp}
-                    focusedPostId={this.props.focusedPostId}
-                />
-            </div>
-        );
-    }
-}

package/src/components/post_view/post_view.test.js

@@ -1,53 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import * as React from 'react';
-import {shallow} from 'enzyme';
-
-import PostList from './post_list';
-import PostView from './post_view.jsx';
-
-describe('components/post_view/post_view', () => {
-    const baseProps = {
-        lastViewedAt: 12345678,
-        isFirstLoad: false,
-        channelLoading: false,
-        channelId: '1234',
-        focusedPostId: '12345',
-    };
-    jest.useFakeTimers();
-
-    beforeEach(() => {
-        jest.spyOn(window, 'requestAnimationFrame').mockImplementation((cb) => setTimeout(cb, 16));
-    });
-
-    afterEach(() => {
-        window.requestAnimationFrame.mockRestore();
-    });
-
-    test('should match snapshot for channel loading', () => {
-        const wrapper = shallow(<PostView {...{...baseProps, channelLoading: true}}/>);
-        expect(wrapper).toMatchSnapshot();
-    });
-
-    test('should match snapshot for loaderForChangeOfPostsChunk', () => {
-        const wrapper = shallow(<PostView {...baseProps}/>);
-        wrapper.setState({loaderForChangeOfPostsChunk: true});
-        expect(wrapper).toMatchSnapshot();
-    });
-
-    test('unreadChunkTimeStamp should be set for first load of channel', () => {
-        const wrapper = shallow(<PostView {...{...baseProps, isFirstLoad: true}}/>);
-        expect(wrapper.state('unreadChunkTimeStamp')).toEqual(baseProps.lastViewedAt);
-    });
-
-    test('changeUnreadChunkTimeStamp', () => {
-        const wrapper = shallow(<PostView {...{...baseProps, isFirstLoad: true}}/>);
-        expect(wrapper.state('unreadChunkTimeStamp')).toEqual(baseProps.lastViewedAt);
-        wrapper.find(PostList).prop('changeUnreadChunkTimeStamp')(1234678);
-        expect(wrapper.state('unreadChunkTimeStamp')).toEqual(1234678);
-        expect(wrapper.state('loaderForChangeOfPostsChunk')).toEqual(true);
-        jest.runOnlyPendingTimers();
-        expect(wrapper.state('loaderForChangeOfPostsChunk')).toEqual(false);
-    });
-});