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

package/src/components/post/post_header/style.ts

@@ -1,54 +0,0 @@
-import { inherits } from 'util';
-
-export const styleSheet = {
-    postHeaderStyle:  {
-            display: 'inherit',
-            '& .post__header-set-custom-status': {
-                // display: 'none',
-            },
-            '& .post.current--user.other--root .post__header-set-custom-status, .post.current--user.post--root .post__header-set-custom-status, .post.current--user.post--comment .post__header-set-custom-status':
-                {
-                    display: 'block',
-                    padding: '0 6px',
-                    marginLeft: '8px',
-                    background: 'rgba(0, 0, 0, )',
-                    borderRadius: '4px',
-                },
-            '& .post.current--user.other--root .post__header-set-custom-status-icon > svg, .post.current--user.post--root .post__header-set-custom-status-icon > svg, .post.current--user.post--comment .post__header-set-custom-status-icon > svg':
-                {
-                    width: '12px',
-                    height: '12px',
-                    marginRight: '4px',
-                    marginBottom: '2px',
-                    background: 'inherit',
-                    fill: 'rgba(0, 1, 0, )',
-                    verticalAlign: 'middle',
-                },
-            '& .post.current--user.other--root .post__header-set-custom-status-icon > svg:hover, .post.current--user.post--root .post__header-set-custom-status-icon > svg:hover, .post.current--user.post--comment .post__header-set-custom-status-icon > svg:hover':
-                {
-                    fill: 'rgba(0, 1, 0, )',
-                },
-            '& .post.current--user.other--root .post__header-set-custom-status-text, .post.current--user.post--root .post__header-set-custom-status-text, .post.current--user.post--comment .post__header-set-custom-status-text':
-                {
-                    color: 'rgba(0, 1, 0, )',
-                    fontSize: '12px',
-                    fontWeight: 'normal',
-                },
-            '& .post.current--user.other--root .post__header-set-custom-status-text:hover, .post.current--user.post--root .post__header-set-custom-status-text:hover, .post.current--user.post--comment .post__header-set-custom-status-text:hover':
-                {
-                    color: 'rgba(0, 1, 0, )',
-                },
-            '& .post.current--user.other--root .post__header-set-custom-status:active, .post.current--user.post--root .post__header-set-custom-status:active, .post.current--user.post--comment .post__header-set-custom-status:active':
-                {
-                    background: 'rgba(0, 0, 0, )',
-                },
-            '& .post.current--user.other--root .post__header-set-custom-status:active-icon > svg, .post.current--user.post--root .post__header-set-custom-status:active-icon > svg, .post.current--user.post--comment .post__header-set-custom-status:active-icon > svg':
-                {
-                    // fill: var(--button-bg);
-                },
-            '& .post.current--user.other--root .post__header-set-custom-status:active-text, .post.current--user.post--root .post__header-set-custom-status:active-text, .post.current--user.post--comment .post__header-set-custom-status:active-text':
-                {
-                    // color: var(--button-bg);
-                },
-        }
-} as any;

package/src/components/post/post_info/post_info.tsx

@@ -1,195 +0,0 @@
-import React, { useRef, useState } from 'react';
-import * as Utils from '../../../utils/utils';
-import * as PostUtils from '../../../utils/post_utils';
-import { Post } from '../../../packages/types/posts';
-import { FormattedMessage } from 'react-intl';
-
-export const PostInfo = (props) => {
-    const { post } = props;
-    const [showEmojiPicker, setShowEmojiPicker] = useState(false);
-    const [showOptionsMenuWithoutHover, setShowOptionsMenuWithoutHover] = useState(false);
-    const [showDotMenu, setShowDotMenu] = useState(false);
-    const postHeaderRef = useRef();
-    const dotMenuRef = useRef();
-
-    const isEphemeral = Utils.isPostEphemeral(post);
-    const isSystemMessage = PostUtils.isSystemMessage(post);
-    const fromAutoResponder = PostUtils.fromAutoResponder(post);
-
-    const removePost = () => {
-        props.actions.removePost(props.post);
-    };
-    const createRemovePostButton = () => {
-        return (
-            <button className="post__remove theme color--link style--none" type="button" onClick={removePost}>
-                {'×'}
-            </button>
-        );
-    };
-
-    const handleDotMenuOpened = (open: boolean) => {
-        setShowDotMenu(open);
-        props.handleDropdownOpened(open || showEmojiPicker);
-    };
-
-    const getDotMenu = (): HTMLDivElement => {
-        return dotMenuRef.current as HTMLDivElement;
-    };
-
-    const toggleEmojiPicker = (e?: React.MouseEvent<HTMLButtonElement, MouseEvent>): void => {
-        if (e) {
-            e.stopPropagation();
-        }
-        // const showEmojiPicker = !showEmojiPicker;
-
-        setShowEmojiPicker(false);
-        setShowOptionsMenuWithoutHover(false);
-        props.handleDropdownOpened(showEmojiPicker || setShowDotMenu(false));
-    };
-
-    const buildOptions = (post: Post, isSystemMessage: boolean, fromAutoResponder: boolean) => {
-        if (!props.shouldShowDotMenu) {
-            return null;
-        }
-
-        const { isMobile, isReadOnly, collapsedThreadsEnabled } = props;
-        const hover = props.hover || showEmojiPicker || showDotMenu || showOptionsMenuWithoutHover;
-
-        const showCommentIcon =
-            fromAutoResponder ||
-            (!isSystemMessage &&
-                (isMobile || hover || (!post.root_id && Boolean(props.hasReplies)) || props.isFirstReply));
-        const commentIconExtraClass = isMobile ? '' : 'pull-right';
-        let commentIcon;
-        if (showCommentIcon) {
-            commentIcon = (
-                <h1>connect icon</h1>
-                // <CommentIcon
-                //     handleCommentClick={props.handleCommentClick}
-                //     postId={post.id}
-                //     extraClass={commentIconExtraClass}
-                // />
-            );
-        }
-
-        const showReactionIcon = !isSystemMessage && hover && !isReadOnly && props.enableEmojiPicker;
-        let postReaction;
-        if (showReactionIcon) {
-            postReaction = (
-                <h1>post reactions</h1>
-                // <PostReaction
-                //     channelId={post.channel_id}
-                //     postId={post.id}
-                //     teamId={props.teamId}
-                //     getDotMenuRef={getDotMenu}
-                //     showEmojiPicker={showEmojiPicker}
-                //     toggleEmojiPicker={toggleEmojiPicker}
-                // />
-            );
-        }
-
-        const showDotMenuIcon = isMobile || hover;
-        let dotMenu;
-        if (showDotMenuIcon) {
-            dotMenu = (
-                <h1>dot menu</h1>
-                // <DotMenu
-                //     post={post}
-                //     isFlagged={props.isFlagged}
-                //     handleCommentClick={props.handleCommentClick}
-                //     handleDropdownOpened={handleDotMenuOpened}
-                //     handleAddReactionClick={toggleEmojiPicker}
-                //     isMenuOpen={showDotMenu}
-                //     isReadOnly={isReadOnly}
-                //     enableEmojiPicker={props.enableEmojiPicker}
-                // />
-            );
-        }
-
-        const showFlagIcon = !isSystemMessage && !isMobile && (hover || props.isFlagged);
-        let postFlagIcon;
-        if (showFlagIcon) {
-            // postFlagIcon = <PostFlagIcon postId={post.id} isFlagged={props.isFlagged} />;
-            postFlagIcon = <h1>here is</h1>;
-        }
-
-        return (
-            <div ref={dotMenuRef} data-testid={`post-menu-${post.id}`} className={'col post-menu'}>
-                {!collapsedThreadsEnabled && dotMenu}
-                {postReaction}
-                {postFlagIcon}
-                {commentIcon}
-                {collapsedThreadsEnabled && dotMenu}
-            </div>
-        );
-    };
-
-    let postInfoIcon;
-    // if (post.props && post.props.card) {
-    //     postInfoIcon = (
-    //         <OverlayTrigger
-    //             delayShow={Constants.OVERLAY_TIME_DELAY}
-    //             placement="top"
-    //             overlay={
-    //                 <Tooltip id={`viewAdditionalInfo-${post.id}`}>
-    //                     <FormattedMessage
-    //                         id="post_info.info.view_additional_info"
-    //                         defaultMessage="View additional info"
-    //                     />
-    //                 </Tooltip>
-    //             }
-    //         >
-    //             <button
-    //                 className={'card-icon__container icon--show style--none ' + (props.isCardOpen ? 'active' : '')}
-    //                 onClick={(e) => {
-    //                     e.preventDefault();
-    //                     props.handleCardClick(props.post);
-    //                 }}
-    //             >
-    //                 <InfoSmallIcon className="icon icon__info" aria-hidden="true" />
-    //             </button>
-    //         </OverlayTrigger>
-    //     );
-    // }
-
-    let options;
-    if (isEphemeral) {
-        options = <div className="col col__remove">{createRemovePostButton()}</div>;
-    } else if (!post.failed) {
-        options = buildOptions(post, isSystemMessage, fromAutoResponder);
-    }
-
-    let visibleMessage;
-    if (isEphemeral) {
-        visibleMessage = (
-            <span className="post__visibility">
-                <FormattedMessage id="post_info.message.visible" defaultMessage="(Only visible to you)" />
-            </span>
-        );
-    }
-
-    const showPostTime = props.hover || props.showTimeWithoutHover;
-    let postTime;
-    // if (showPostTime) {
-    //     // timestamp should not be a permalink if the post has been deleted, is ephemeral message, is pending, or is combined activity
-    //     const isPermalink = !(
-    //         isEphemeral ||
-    //         Posts.POST_DELETED === post.state ||
-    //         ReduxPostUtils.isPostPendingOrFailed(post) ||
-    //         post.type === Posts.POST_TYPES.COMBINED_USER_ACTIVITY
-    //     );
-
-    //     postTime = <PostTime isPermalink={isPermalink} eventTime={post.create_at} postId={post.id} />;
-    // }
-
-    return (
-        <div className="post__header--info" ref={postHeaderRef}>
-            <div className="col">
-                {postTime}
-                {postInfoIcon}
-                {visibleMessage}
-            </div>
-            {options}
-        </div>
-    );
-};

package/src/components/post/post_list/index.tsx

@@ -1,10 +0,0 @@
-import * as React from 'react';
-import { PostList } from './post_list';
-
-export const PostListPage = () => {
-    return (
-        <div>
-            <PostList />
-        </div>
-    );
-};

package/src/components/post/post_list/post_list.tsx

@@ -1,27 +0,0 @@
-import * as React from 'react';
-import { VirtPostList } from '../post_list_virtualized/post_list_virtualized';
-
-export const PostList = (props) => {
-    console.log({props}, 'post list')
-    return (
-        <div className="post-list-holder-by-time" key={'postlist-' + 2}>
-            <div className="post-list__table">
-                <div id="virtualizedPostListContent" className="post-list__content">
-                    <VirtPostList
-                    // loadingNewerPosts={this.state.loadingNewerPosts}
-                    // loadingOlderPosts={this.state.loadingOlderPosts}
-                    // atOldestPost={this.props.atOldestPost}
-                    // atLatestPost={this.props.atLatestPost}
-                    // focusedPostId={this.props.focusedPostId}
-                    // channelId={this.props.channelId}
-                    // autoRetryEnable={this.state.autoRetryEnable}
-                    // actions={this.actionsForPostList}
-                    // postListIds={this.props.formattedPostIds}
-                    // latestPostTimeStamp={this.props.latestPostTimeStamp}
-                    // latestPostId={this.props.latestPostId}
-                    />
-                </div>
-            </div>
-        </div>
-    );
-};

package/src/components/post/post_list_row/index.ts

@@ -1,42 +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 {Channel} from 'mattermost-redux/types/channels';
-// import {Post} from 'mattermost-redux/types/posts';
-
-// import {getShortcutReactToLastPostEmittedFrom} from 'selectors/emojis';
-// import {emitShortcutReactToLastPostFrom} from 'actions/post_actions.jsx';
-
-// import {GlobalState} from 'types/store';
-
-// import PostListRow from './post_list_row';
-
-// type Props = {
-//     post: Post;
-//     channel: Channel;
-// }
-
-// function mapStateToProps(state: GlobalState, ownProps: Props) {
-//     const shortcutReactToLastPostEmittedFrom = getShortcutReactToLastPostEmittedFrom(state);
-
-//     return {
-//         post: ownProps.post,
-//         channel: ownProps.channel,
-//         shortcutReactToLastPostEmittedFrom,
-//     };
-// }
-
-// function mapDispatchToProps(dispatch: Dispatch<GenericAction>) {
-//     return {
-//         actions: bindActionCreators({
-//             emitShortcutReactToLastPostFrom,
-//         }, dispatch),
-//     };
-// }
-
-// export default connect(mapStateToProps, mapDispatchToProps)(PostListRow);

package/src/components/post/post_list_row/post_list_row.test.tsx

@@ -1,176 +0,0 @@
-// // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// // See LICENSE.txt for license information.
-
-// import {shallow} from 'enzyme';
-// import * as React from 'react';
-
-// import * as PostListUtils from 'mattermost-redux/utils/post_list';
-
-// import {ChannelType} from 'mattermost-redux/types/channels';
-
-// import CombinedUserActivityPost from 'components/post_view/combined_user_activity_post';
-// import Post from 'components/post_view/post';
-// import DateSeparator from 'components/post_view/date_separator';
-// import NewMessageSeparator from 'components/post_view/new_message_separator/new_message_separator';
-// import ChannelIntroMessage from 'components/post_view/channel_intro_message/';
-
-// import {PostListRowListIds} from 'utils/constants';
-
-// import PostListRow from './post_list_row';
-
-// describe('components/post_view/post_list_row', () => {
-//     const defaultProps = {
-//         listId: '1234',
-//         loadOlderPosts: jest.fn(),
-//         loadNewerPosts: jest.fn(),
-//         togglePostMenu: jest.fn(),
-//         isLastPost: false,
-//         shortcutReactToLastPostEmittedFrom: 'NO_WHERE',
-//         loadingNewerPosts: false,
-//         loadingOlderPosts: false,
-//         isCurrentUserLastPostGroupFirstPost: false,
-//         actions: {
-//             emitShortcutReactToLastPostFrom: jest.fn(),
-//         },
-//     };
-
-//     test('should render more messages loading indicator', () => {
-//         const listId = PostListRowListIds.OLDER_MESSAGES_LOADER;
-//         const props = {
-//             ...defaultProps,
-//             listId,
-//             loadingOlderPosts: true,
-//         };
-//         const wrapper = shallow(
-//             <PostListRow {...props}/>,
-//         );
-//         expect(wrapper).toMatchSnapshot();
-//     });
-
-//     test('should render manual load messages trigger', () => {
-//         const listId = PostListRowListIds.LOAD_OLDER_MESSAGES_TRIGGER;
-//         const loadOlderPosts = jest.fn();
-//         const props = {
-//             ...defaultProps,
-//             listId,
-//             loadOlderPosts,
-//         };
-//         const wrapper = shallow(
-//             <PostListRow {...props}/>,
-//         );
-//         expect(wrapper).toMatchSnapshot();
-//         wrapper.prop('onClick')();
-//         expect(loadOlderPosts).toHaveBeenCalledTimes(1);
-//     });
-
-//     test('should render channel intro message', () => {
-//         const listId = PostListRowListIds.CHANNEL_INTRO_MESSAGE;
-//         const props = {
-//             ...defaultProps,
-//             channel: {
-//                 id: '123',
-//                 name: 'test-channel-1',
-//                 display_name: 'Test Channel 1',
-//                 type: ('P' as ChannelType),
-//                 team_id: 'team-1',
-//                 header: '',
-//                 purpose: '',
-//                 creator_id: '',
-//                 scheme_id: '',
-//                 group_constrained: false,
-//                 create_at: 0,
-//                 update_at: 0,
-//                 delete_at: 0,
-//                 last_post_at: 0,
-//             },
-//             fullWidth: true,
-//             listId,
-//         };
-
-//         const wrapper = shallow(
-//             <PostListRow {...props}/>,
-//         );
-//         expect(wrapper).toMatchSnapshot();
-//         expect(wrapper.find(ChannelIntroMessage).exists()).toBe(true);
-//     });
-
-//     test('should render new messages line', () => {
-//         const listId = PostListRowListIds.START_OF_NEW_MESSAGES;
-//         const props = {
-//             ...defaultProps,
-//             listId,
-//         };
-//         const wrapper = shallow(
-//             <PostListRow {...props}/>,
-//         );
-//         expect(wrapper).toMatchSnapshot();
-//         expect(wrapper.find(NewMessageSeparator).exists()).toBe(true);
-//     });
-
-//     test('should render date line', () => {
-//         const listId = `${PostListRowListIds.DATE_LINE}1553106600000`;
-//         const props = {
-//             ...defaultProps,
-//             listId,
-//         };
-//         const wrapper = shallow(
-//             <PostListRow {...props}/>,
-//         );
-//         expect(wrapper).toMatchSnapshot();
-//         expect(wrapper.find(DateSeparator).exists()).toBe(true);
-//     });
-
-//     test('should render combined post', () => {
-//         const props = {
-//             ...defaultProps,
-//             shouldHighlight: false,
-//             listId: `${PostListUtils.COMBINED_USER_ACTIVITY}1234-5678`,
-//             previousListId: 'abcd',
-//         };
-//         const wrapper = shallow(
-//             <PostListRow {...props}/>,
-//         );
-//         expect(wrapper).toMatchSnapshot();
-//         expect(wrapper.find(CombinedUserActivityPost).exists()).toBe(true);
-//     });
-
-//     test('should render post', () => {
-//         const props = {
-//             ...defaultProps,
-//             shouldHighlight: false,
-//             listId: '1234',
-//             previousListId: 'abcd',
-//         };
-//         const wrapper = shallow(
-//             <PostListRow {...props}/>,
-//         );
-//         expect(wrapper).toMatchSnapshot();
-//         expect(wrapper.find(Post).exists()).toBe(true);
-//     });
-
-//     test('should have class hideAnimation for OLDER_MESSAGES_LOADER if loadingOlderPosts is false', () => {
-//         const listId = PostListRowListIds.OLDER_MESSAGES_LOADER;
-//         const props = {
-//             ...defaultProps,
-//             listId,
-//             loadingOlderPosts: false,
-//         };
-//         const wrapper = shallow(
-//             <PostListRow {...props}/>,
-//         );
-//         expect(wrapper).toMatchSnapshot();
-//     });
-
-//     test('should have class hideAnimation for NEWER_MESSAGES_LOADER if loadingNewerPosts is false', () => {
-//         const listId = PostListRowListIds.NEWER_MESSAGES_LOADER;
-//         const props = {
-//             ...defaultProps,
-//             listId,
-//             loadingNewerPosts: false,
-//         };
-//         const wrapper = shallow(
-//             <PostListRow {...props}/>,
-//         );
-//         expect(wrapper).toMatchSnapshot();
-//     });
-// });

package/src/components/post/post_list_row/post_list_row.tsx

@@ -1,130 +0,0 @@
-import * as React from 'react';
-import { FormattedMessage } from 'react-intl';
-import classNames from 'classnames';
-
-import { Post } from '../post/post';
-import { ChannelIntroMessage } from '../channel_intro_message';
-import { PostListRowListIds, Locations } from '../../../utils/constants';
-import * as PostListUtils from '../../../utils/post_list';
-
-export const PostListRow = (props) => {
-    const defaultProps = {
-        listId: 'CHANNEL_INTRO_MESSAGE',
-        isLastPost: false,
-        shortcutReactToLastPostEmittedFrom: 'NO_WHERE',
-        loadingNewerPosts: false,
-        loadingOlderPosts: false,
-        isCurrentUserLastPostGroupFirstPost: false,
-        // actions: {
-        //     emitShortcutReactToLastPostFrom: jest.fn(),
-        // },
-    };
-
-    const channel = {
-        id: 'channel_id',
-        create_at: 0,
-        update_at: 0,
-        delete_at: 0,
-        team_id: 'team_id',
-        type: 'O',
-        display_name: 'name',
-        name: 'DN',
-        header: 'header',
-        purpose: 'purpose',
-        last_post_at: 0,
-        creator_id: 'id',
-        scheme_id: 'id',
-        group_constrained: false,
-    };
-
-    const { listId, loadingOlderPosts, loadingNewerPosts } = defaultProps;
-    const { previousListId } = props;
-
-    console.log(listId, 'post list row page');
-
-    // const postProps = {
-    //     previousPostId: previousListId,
-    //     shouldHighlight: props.shouldHighlight,
-    //     togglePostMenu: props.togglePostMenu,
-    //     isLastPost: props.isLastPost,
-    //     compactDisplay: false,
-    //     isFlagged: false,
-    //     currentUserId: 'user1',
-    //     isFirstReply: true,
-    //     center: false,
-    //     consecutivePostByUser: false,
-    //     previousPostIsComment: false,
-    //     isCommentMention: false,
-    //     hasReplies: false,
-    //     channelIsArchived: false,
-    //     post: { id: 'post1', is_pinned: false },
-    // };
-
-    const {
-        OLDER_MESSAGES_LOADER,
-        NEWER_MESSAGES_LOADER,
-        CHANNEL_INTRO_MESSAGE,
-        LOAD_OLDER_MESSAGES_TRIGGER,
-        LOAD_NEWER_MESSAGES_TRIGGER,
-    } = PostListRowListIds;
-
-    console.log(PostListRowListIds, 'PostListRowListIds runinnggggg');
-
-    if (PostListUtils.isDateLine(listId)) {
-        console.log('runninggggggg');
-        const date = PostListUtils.getDateForDateLine(listId);
-
-        return <h1>red pen</h1>;
-        // return <DateSeparator key={date} date={date} />;
-    }
-
-    if (PostListUtils.isStartOfNewMessages(listId)) {
-        console.log(listId, 'runnignhhhhhhhhhhhhhhhhhhhh');
-        // return <NewMessageSeparator separatorId={listId} />;
-    }
-
-    // if (listId === CHANNEL_INTRO_MESSAGE) {
-    //     return <ChannelIntroMessage Channel={channel} />;
-    // }
-
-    if (listId === LOAD_OLDER_MESSAGES_TRIGGER || listId === LOAD_NEWER_MESSAGES_TRIGGER) {
-        return (
-            <button
-                className="more-messages-text theme style--none color--link"
-                onClick={listId === LOAD_OLDER_MESSAGES_TRIGGER ? props.loadOlderPosts : props.loadNewerPosts}
-            >
-                <FormattedMessage id="posts_view.loadMore" defaultMessage="Load More Messages" />
-            </button>
-        );
-    }
-
-    const isOlderMessagesLoader = listId === OLDER_MESSAGES_LOADER;
-    const isNewerMessagesLoader = listId === NEWER_MESSAGES_LOADER;
-    if (isOlderMessagesLoader || isNewerMessagesLoader) {
-        const shouldHideAnimation = !loadingOlderPosts && !loadingNewerPosts;
-
-        return (
-            <div className="loading-screen">
-                <div className={classNames('loading__content', { hideAnimation: shouldHideAnimation })}>
-                    <div className="round round-1" />
-                    <div className="round round-2" />
-                    <div className="round round-3" />
-                </div>
-            </div>
-        );
-    }
-
-    const postProps = {
-        previousPostId: previousListId,
-        shouldHighlight: props.shouldHighlight,
-        togglePostMenu: props.togglePostMenu,
-        isLastPost: props.isLastPost,
-    };
-
-    if (PostListUtils.isCombinedUserActivityPost(listId)) {
-        return <h1>heelo</h1>;
-        // return <CombinedUserActivityPost combinedId={listId} {...postProps} />;
-    }
-
-    return <Post postId={listId} {...postProps} />;
-};

package/src/components/post/post_list_virtualized/latest_post_reader.tsx

@@ -1,9 +0,0 @@
-import * as React from 'react';
-
-export const LatestPostReader = () => {
-    return (
-        <span className="sr-only" aria-live="polite">
-            latest post renderer
-        </span>
-    );
-};