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

package/src/components/post_view/reaction/reaction.tsx

@@ -1,263 +0,0 @@
-// // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// // See LICENSE.txt for license information.
-
-// import * as React from 'react';
-// import {Tooltip} from 'react-bootstrap';
-
-// import {Post} from 'mattermost-redux/types/posts';
-// import {Reaction as ReactionType} from 'mattermost-redux/types/reactions';
-
-// import OverlayTrigger from 'components/overlay_trigger';
-
-// import * as Utils from 'utils/utils';
-
-// import ReactionTooltip from './reaction_tooltip';
-// import './reaction.scss';
-
-// type State = {
-//     displayNumber: number;
-//     reactedClass: 'Reaction--reacted' | 'Reaction--reacting' | 'Reaction--unreacted' | 'Reaction--unreacting';
-// };
-
-// declare module 'react-bootstrap/lib/OverlayTrigger' {
-//     interface OverlayTriggerProps {
-//         shouldUpdatePosition?: boolean;
-//     }
-// }
-
-// type Props = {
-
-//     /*
-//      * The post to render the reaction for
-//      */
-//     post: Post;
-
-//     /*
-//      * The user id of the logged in user
-//      */
-//     currentUserId: string;
-
-//     /*
-//      * The name of the emoji for the reaction
-//      */
-//     emojiName: string;
-
-//     /*
-//      * The number of reactions to this post for this emoji
-//      */
-//     reactionCount: number;
-
-//     /*
-//      * Array of reactions by user
-//      */
-//     reactions: ReactionType[];
-
-//     /*
-//      * True if the user has the permission to add a reaction in this channel
-//      */
-//     canAddReaction: boolean;
-
-//     /*
-//      * True if user has the permission to remove his own reactions in this channel
-//      */
-//     canRemoveReaction: boolean;
-
-//     /*
-//      * The URL of the emoji image
-//      */
-//     emojiImageUrl: string;
-
-//     /*
-//      * Whether or not the current user has used this reaction
-//      */
-//     currentUserReacted: boolean;
-
-//     actions: {
-
-//         /*
-//          * Function to add a reaction to a post
-//          */
-//         addReaction: (postId: string, emojiName: string) => void;
-
-//         /*
-//          * Function to get non-loaded profiles by id
-//          */
-//         getMissingProfilesByIds: (ids: string[]) => void;
-
-//         /*
-//          * Function to remove a reaction from a post
-//          */
-//         removeReaction: (postId: string, emojiName: string) => void;
-//     };
-// }
-
-// export default class Reaction extends React.PureComponent<Props, State> {
-//     private reactionButtonRef = React.createRef<HTMLButtonElement>();
-//     private reactionCountRef = React.createRef<HTMLSpanElement>();
-//     private animating = false;
-
-//     constructor(props: Props) {
-//         super(props);
-
-//         const {currentUserReacted, reactionCount} = this.props;
-
-//         if (currentUserReacted) {
-//             this.state = {
-//                 reactedClass: 'Reaction--reacted',
-//                 displayNumber: reactionCount,
-//             };
-//         } else {
-//             this.state = {
-//                 reactedClass: 'Reaction--unreacted',
-//                 displayNumber: reactionCount,
-//             };
-//         }
-//     }
-
-//     componentDidUpdate(prevProps: Props): void {
-//         if (prevProps.reactionCount !== this.props.reactionCount) {
-//             const {currentUserReacted} = this.props;
-//             const reactedClass = currentUserReacted ? 'Reaction--reacted' : 'Reaction--unreacted';
-
-//             this.animating = false;
-//             /* eslint-disable-next-line react/no-did-update-set-state */
-//             this.setState({
-//                 displayNumber: this.props.reactionCount,
-//                 reactedClass,
-//             });
-//         }
-//     }
-
-//     handleClick = (): void => {
-//         // only proceed if user has permission to react
-//         // and we are not animating
-//         if (
-//             !(this.props.canAddReaction && this.props.canRemoveReaction) || this.animating
-//         ) {
-//             return;
-//         }
-
-//         const {currentUserReacted} = this.props;
-
-//         this.animating = true;
-//         this.setState((state) => {
-//             if (currentUserReacted) {
-//                 return {
-//                     displayNumber: state.displayNumber - 1,
-//                     reactedClass: 'Reaction--unreacting',
-//                 };
-//             }
-
-//             return {
-//                 displayNumber: state.displayNumber + 1,
-//                 reactedClass: 'Reaction--reacting',
-//             };
-//         });
-//     }
-
-//     handleAnimationEnded = (): void => {
-//         const {actions, currentUserReacted, post, emojiName} = this.props;
-
-//         this.animating = false;
-//         this.setState<'reactedClass'>((state) => {
-//             if (state.reactedClass === 'Reaction--reacting') {
-//                 return {
-//                     reactedClass: 'Reaction--reacted',
-//                 };
-//             } else if (state.reactedClass === 'Reaction--unreacting') {
-//                 return {
-//                     reactedClass: 'Reaction--unreacted',
-//                 };
-//             }
-//             return state;
-//         });
-
-//         if (currentUserReacted) {
-//             actions.removeReaction(post.id, emojiName);
-//         } else {
-//             actions.addReaction(post.id, emojiName);
-//         }
-//     }
-
-//     loadMissingProfiles = async (): Promise<void> => {
-//         const ids = this.props.reactions.map((reaction) => reaction.user_id);
-//         this.props.actions.getMissingProfilesByIds(ids);
-//     }
-
-//     render(): React.ReactNode {
-//         if (!this.props.emojiImageUrl) {
-//             return null;
-//         }
-//         const {
-//             canAddReaction,
-//             canRemoveReaction,
-//             currentUserReacted,
-//             emojiName,
-//             reactionCount,
-//             reactions,
-//         } = this.props;
-//         const {displayNumber} = this.state;
-//         const reactedNumber = currentUserReacted ? reactionCount : reactionCount + 1;
-//         const unreactedNumber = currentUserReacted ? reactionCount - 1 : reactionCount;
-//         const unreacted = (unreactedNumber > 0) ? unreactedNumber : '';
-//         const reacted = (reactedNumber > 0) ? reactedNumber : '';
-//         const display = (displayNumber > 0) ? displayNumber : '';
-//         const readOnlyClass = (canAddReaction && canRemoveReaction) ? '' : 'Reaction--read-only';
-
-//         const emojiNameWithSpaces = this.props.emojiName.replace(/_/g, ' ');
-//         let ariaLabelEmoji = `${Utils.localizeMessage('reaction.reactWidth.ariaLabel', 'react with')} ${emojiNameWithSpaces}`;
-//         if (currentUserReacted && canRemoveReaction) {
-//             ariaLabelEmoji = `${Utils.localizeMessage('reaction.removeReact.ariaLabel', 'remove reaction')} ${emojiNameWithSpaces}`;
-//         }
-
-//         return (
-//             <OverlayTrigger
-//                 delayShow={500}
-//                 placement='top'
-//                 shouldUpdatePosition={true}
-//                 overlay={
-//                     <Tooltip id={`${this.props.post.id}-${this.props.emojiName}-reaction`}>
-//                         <ReactionTooltip
-//                             canAddReaction={canAddReaction}
-//                             canRemoveReaction={canRemoveReaction}
-//                             currentUserReacted={currentUserReacted}
-//                             emojiName={emojiName}
-//                             reactions={reactions}
-//                         />
-//                     </Tooltip>
-//                 }
-//                 onEnter={this.loadMissingProfiles}
-//             >
-//                 <button
-//                     id={`postReaction-${this.props.post.id}-${this.props.emojiName}`}
-//                     aria-label={ariaLabelEmoji}
-//                     className={`Reaction ${this.state.reactedClass} ${readOnlyClass}`}
-//                     onClick={this.handleClick}
-//                     ref={this.reactionButtonRef}
-//                 >
-//                     <span className='d-flex align-items-center'>
-//                         <span
-//                             className='Reaction__emoji emoticon'
-//                             style={{backgroundImage: 'url(' + this.props.emojiImageUrl + ')'}}
-//                         />
-//                         <span
-//                             ref={this.reactionCountRef}
-//                             className='Reaction__count'
-//                         >
-//                             <span className='Reaction__number'>
-//                                 <span className='Reaction__number--display'>{display}</span>
-//                                 <span
-//                                     className='Reaction__number--unreacted'
-//                                     onAnimationEnd={this.handleAnimationEnded}
-//                                 >
-//                                     {unreacted}
-//                                 </span>
-//                                 <span className='Reaction__number--reacted'>{reacted}</span>
-//                             </span>
-//                         </span>
-//                     </span>
-//                 </button>
-//             </OverlayTrigger>
-//         );
-//     }
-// }

package/src/components/post_view/reaction/reaction_tooltip/index.test.js

@@ -1,56 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import {TestHelper} from 'utils/test_helper';
-
-import {makeGetNamesOfUsers} from './index';
-
-describe('makeGetNamesOfUsers', () => {
-    test('should sort users by who reacted first', () => {
-        const getNamesOfUsers = makeGetNamesOfUsers();
-
-        const post1 = TestHelper.getPostMock({id: 'post1'});
-
-        const user1 = TestHelper.getUserMock({id: 'user1', username: 'username_1'});
-        const user2 = TestHelper.getUserMock({id: 'user2', username: 'username_2'});
-        const user3 = TestHelper.getUserMock({id: 'user3', username: 'username_3'});
-
-        const baseDate = Date.now();
-        const reactions = [
-            {user_id: user2.id, create_at: baseDate}, // Will be sorted 2nd, after the logged-in user
-            {user_id: user1.id, create_at: baseDate + 5000}, // Logged-in user, will be sorted first although 2nd user reacted first
-            {user_id: user3.id, create_at: baseDate + 8000}, // Last to react, will be sorted last
-        ];
-
-        const state = {
-            entities: {
-                general: {
-                    config: {},
-                },
-                posts: {
-                    posts: {
-                        post1,
-                    },
-                    reactions: {
-                        post1: reactions,
-                    },
-                },
-                preferences: {
-                    myPreferences: {},
-                },
-                users: {
-                    currentUserId: user1.id,
-                    profiles: {
-                        user1,
-                        user2,
-                        user3,
-                    },
-                },
-            },
-        };
-
-        const names = getNamesOfUsers(state, reactions);
-
-        expect(names).toEqual(['You', 'username_2', 'username_3']);
-    });
-});

package/src/components/post_view/reaction/reaction_tooltip/index.ts

@@ -1,67 +0,0 @@
-// // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// // See LICENSE.txt for license information.
-
-// import {connect} from 'react-redux';
-
-// import {createSelector} from 'reselect';
-
-// import {getCurrentUserId, makeGetProfilesForReactions} from 'mattermost-redux/selectors/entities/users';
-// import {getTeammateNameDisplaySetting} from 'mattermost-redux/selectors/entities/preferences';
-
-// import {Reaction as ReactionType} from 'mattermost-redux/types/reactions';
-// import {UserProfile} from 'mattermost-redux/types/users';
-
-// import {displayUsername} from 'mattermost-redux/utils/user_utils';
-
-// import {GlobalState} from 'types/store';
-
-// import * as Utils from 'utils/utils';
-
-// import ReactionTooltip from './reaction_tooltip';
-
-// type OwnProps = {
-//     reactions: ReactionType[];
-// };
-
-// export const makeGetNamesOfUsers = () => createSelector(
-//     'makeGetNamesOfUsers',
-//     (state: GlobalState, reactions: ReactionType[]) => reactions,
-//     getCurrentUserId,
-//     makeGetProfilesForReactions(),
-//     getTeammateNameDisplaySetting,
-//     (reactions: ReactionType[], currentUserId: string, profiles: UserProfile[], teammateNameDisplay: string) => {
-//         // Sort users by who reacted first with "you" being first if the current user reacted
-
-//         let currentUserReacted = false;
-//         const sortedReactions = reactions.sort((a, b) => a.create_at - b.create_at);
-//         const users = sortedReactions.reduce((accumulator, current) => {
-//             if (current.user_id === currentUserId) {
-//                 currentUserReacted = true;
-//             } else {
-//                 const user = profiles.find((u) => u.id === current.user_id);
-//                 if (user) {
-//                     accumulator.push(displayUsername(user, teammateNameDisplay));
-//                 }
-//             }
-//             return accumulator;
-//         }, [] as string[]);
-
-//         if (currentUserReacted) {
-//             users.unshift(Utils.localizeMessage('reaction.you', 'You'));
-//         }
-
-//         return users;
-//     },
-// );
-
-// function makeMapStateToProps() {
-//     const getNamesOfUsers = makeGetNamesOfUsers();
-
-//     return (state: GlobalState, ownProps: OwnProps) => {
-//         return {
-//             users: getNamesOfUsers(state, ownProps.reactions),
-//         };
-//     };
-// }
-
-// export default connect(makeMapStateToProps)(ReactionTooltip);

package/src/components/post_view/reaction/reaction_tooltip/reaction_tooltip.tsx

@@ -1,140 +0,0 @@
-// // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// // See LICENSE.txt for license information.
-
-// import * as React from 'react';
-// import {FormattedMessage} from 'react-intl';
-
-// import {Reaction as ReactionType} from 'mattermost-redux/types/reactions';
-
-// type Props = {
-//     canAddReaction: boolean;
-//     canRemoveReaction: boolean;
-//     currentUserReacted: boolean;
-//     emojiName: string;
-//     reactions: ReactionType[];
-//     users: string[];
-// };
-
-// const ReactionTooltip: React.FC<Props> = (props: Props) => {
-//     const {
-//         canAddReaction,
-//         canRemoveReaction,
-//         currentUserReacted,
-//         emojiName,
-//         reactions,
-//         users,
-//     } = props;
-
-//     const otherUsersCount = reactions.length - users.length;
-
-//     let names: React.ReactNode;
-//     if (otherUsersCount > 0) {
-//         if (users.length > 0) {
-//             names = (
-//                 <FormattedMessage
-//                     id='reaction.usersAndOthersReacted'
-//                     defaultMessage='{users} and {otherUsers, number} other {otherUsers, plural, one {user} other {users}}'
-//                     values={{
-//                         users: users.join(', '),
-//                         otherUsers: otherUsersCount,
-//                     }}
-//                 />
-//             );
-//         } else {
-//             names = (
-//                 <FormattedMessage
-//                     id='reaction.othersReacted'
-//                     defaultMessage='{otherUsers, number} {otherUsers, plural, one {user} other {users}}'
-//                     values={{
-//                         otherUsers: otherUsersCount,
-//                     }}
-//                 />
-//             );
-//         }
-//     } else if (users.length > 1) {
-//         names = (
-//             <FormattedMessage
-//                 id='reaction.usersReacted'
-//                 defaultMessage='{users} and {lastUser}'
-//                 values={{
-//                     users: users.slice(0, -1).join(', '),
-//                     lastUser: users[users.length - 1],
-//                 }}
-//             />
-//         );
-//     } else {
-//         names = users[0];
-//     }
-
-//     let reactionVerb: React.ReactNode;
-//     if (users.length + otherUsersCount > 1) {
-//         if (currentUserReacted) {
-//             reactionVerb = (
-//                 <FormattedMessage
-//                     id='reaction.reactionVerb.youAndUsers'
-//                     defaultMessage='reacted'
-//                 />
-//             );
-//         } else {
-//             reactionVerb = (
-//                 <FormattedMessage
-//                     id='reaction.reactionVerb.users'
-//                     defaultMessage='reacted'
-//                 />
-//             );
-//         }
-//     } else if (currentUserReacted) {
-//         reactionVerb = (
-//             <FormattedMessage
-//                 id='reaction.reactionVerb.you'
-//                 defaultMessage='reacted'
-//             />
-//         );
-//     } else {
-//         reactionVerb = (
-//             <FormattedMessage
-//                 id='reaction.reactionVerb.user'
-//                 defaultMessage='reacted'
-//             />
-//         );
-//     }
-
-//     const tooltip = (
-//         <FormattedMessage
-//             id='reaction.reacted'
-//             defaultMessage='{users} {reactionVerb} with {emoji}'
-//             values={{
-//                 users: <b>{names}</b>,
-//                 reactionVerb,
-//                 emoji: <b>{':' + emojiName + ':'}</b>,
-//             }}
-//         />
-//     );
-
-//     let clickTooltip: React.ReactNode;
-//     if (currentUserReacted && canRemoveReaction) {
-//         clickTooltip = (
-//             <FormattedMessage
-//                 id='reaction.clickToRemove'
-//                 defaultMessage='(click to remove)'
-//             />
-//         );
-//     } else if (!currentUserReacted && canAddReaction) {
-//         clickTooltip = (
-//             <FormattedMessage
-//                 id='reaction.clickToAdd'
-//                 defaultMessage='(click to add)'
-//             />
-//         );
-//     }
-
-//     return (
-//         <>
-//             {tooltip}
-//             <br/>
-//             {clickTooltip}
-//         </>
-//     );
-// };
-
-// export default ReactionTooltip;

package/src/components/post_view/reaction_list/__snapshots__/reactions_list.test.jsx.snap

@@ -1,95 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`components/ReactionList should render nothing when no reactions 1`] = `""`;
-
-exports[`components/ReactionList should render when there are reactions 1`] = `
-<div
-  aria-label="reactions"
-  className="post-reaction-list"
->
-  <Connect(Reaction)
-    emojiName="expressionless"
-    key="expressionless"
-    post={
-      Object {
-        "id": "post_id",
-      }
-    }
-    reactions={
-      Array [
-        Object {
-          "create_at": 1542994995740,
-          "emoji_name": "expressionless",
-          "post_id": "xbqfo5qb4bb4ffmj9hqfji6fiw",
-          "user_id": "1rj9fokoeffrigu7sk5uc8aiih",
-        },
-      ]
-    }
-  />
-  <div
-    className="post-add-reaction"
-  >
-    <span
-      className="emoji-picker__container"
-    >
-      <EmojiPickerOverlay
-        enableGifPicker={false}
-        onEmojiClick={[Function]}
-        onEmojiClose={[Function]}
-        onHide={[Function]}
-        rightOffset={15}
-        show={false}
-        spaceRequiredAbove={476}
-        spaceRequiredBelow={497}
-        target={[Function]}
-        topOffset={-5}
-      />
-      <Connect(ChannelPermissionGate)
-        permissions={
-          Array [
-            "add_reaction",
-          ]
-        }
-        teamId="teamId"
-      >
-        <OverlayTrigger
-          defaultOverlayShown={false}
-          delayShow={400}
-          overlay={
-            <Tooltip
-              bsClass="tooltip"
-              id="addReactionTooltip"
-              placement="right"
-            >
-              <Memo(MemoizedFormattedMessage)
-                defaultMessage="Add a reaction"
-                id="reaction_list.addReactionTooltip"
-              />
-            </Tooltip>
-          }
-          placement="top"
-          trigger={
-            Array [
-              "hover",
-              "focus",
-            ]
-          }
-        >
-          <button
-            aria-label="Add a reaction"
-            className="Reaction"
-            onClick={[Function]}
-          >
-            <span
-              className="Reaction__add"
-              id="addReaction-post_id"
-            >
-              <AddReactionIcon />
-            </span>
-          </button>
-        </OverlayTrigger>
-      </Connect(ChannelPermissionGate)>
-    </span>
-  </div>
-</div>
-`;

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

@@ -1,52 +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 {getChannel} from 'mattermost-redux/selectors/entities/channels';
-// import {makeGetReactionsForPost} from 'mattermost-redux/selectors/entities/posts';
-// import {getConfig} from 'mattermost-redux/selectors/entities/general';
-// import {GlobalState} from 'mattermost-redux/types/store';
-// import {GenericAction} from 'mattermost-redux/types/actions';
-// import {Post} from 'mattermost-redux/types/posts';
-// import {Reaction} from 'mattermost-redux/types/reactions';
-
-// import {addReaction} from 'actions/post_actions.jsx';
-
-// import ReactionList from './reaction_list';
-
-// type Props = {
-//     enableEmojiPicker: boolean;
-//     isReadOnly: boolean;
-//     post: Post;
-//     reactions: { [x: string]: Reaction } | undefined | null;
-// };
-
-// function makeMapStateToProps() {
-//     const getReactionsForPost = makeGetReactionsForPost();
-
-//     return function mapStateToProps(state: GlobalState, ownProps: Props) {
-//         const config = getConfig(state);
-//         const enableEmojiPicker = config.EnableEmojiPicker === 'true' && !ownProps.isReadOnly;
-
-//         const channel = getChannel(state, ownProps.post.channel_id) || {};
-//         const teamId = channel.team_id;
-
-//         return {
-//             teamId,
-//             reactions: getReactionsForPost(state, ownProps.post.id),
-//             enableEmojiPicker,
-//         };
-//     };
-// }
-
-// function mapDispatchToProps(dispatch: Dispatch<GenericAction>) {
-//     return {
-//         actions: bindActionCreators({
-//             addReaction,
-//         }, dispatch),
-//     };
-// }
-
-// export default connect(makeMapStateToProps, mapDispatchToProps)(ReactionList);