Skip to content

Commit

Permalink
[MM-20486] 🏷 migrated 'post_add_channel_member' module to TypeScript (m…
Browse files Browse the repository at this point in the history 
…attermost#6727)
  • Loading branch information
@paulussujono
paulussujono committed Oct 16, 2020
1 parent 4fb04a5 commit 16136d1
Show file tree
Hide file tree
Showing 4 changed files with 59 additions and 76 deletions.
0 ...s__/post_add_channel_member.test.jsx.snap → ...s__/post_add_channel_member.test.tsx.snap
View file
File renamed without changes.
10 changes: 6 additions & 4 deletions ...ost_view/post_add_channel_member/index.js → ...ost_view/post_add_channel_member/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,19 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.

import {bindActionCreators} from 'redux';
import {bindActionCreators, Dispatch} from 'redux';
import {connect} from 'react-redux';
import {addChannelMember} from 'mattermost-redux/actions/channels';
import {removePost} from 'mattermost-redux/actions/posts';
import {getPost} from 'mattermost-redux/selectors/entities/posts';
import {getChannel} from 'mattermost-redux/selectors/entities/channels';
import {getCurrentUser} from 'mattermost-redux/selectors/entities/users';
import {GlobalState} from 'mattermost-redux/types/store';
import {GenericAction} from 'mattermost-redux/types/actions';

import PostAddChannelMember from './post_add_channel_member.jsx';
import PostAddChannelMember, {Props} from './post_add_channel_member';

function mapStateToProps(state, ownProps) {
function mapStateToProps(state: GlobalState, ownProps: Props) {
const post = getPost(state, ownProps.postId) || {};
let channelType = '';
if (post && post.channel_id) {
Expand All @@ -28,7 +30,7 @@ function mapStateToProps(state, ownProps) {
};
}

function mapDispatchToProps(dispatch) {
function mapDispatchToProps(dispatch: Dispatch<GenericAction>) {
return {
actions: bindActionCreators({
addChannelMember,
Expand Down
35 changes: 21 additions & 14 deletions ...l_member/post_add_channel_member.test.jsx → ...l_member/post_add_channel_member.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,12 @@
import React from 'react';
import {shallow} from 'enzyme';

import {sendAddToChannelEphemeralPost} from 'actions/global_actions.jsx';
import PostAddChannelMember from 'components/post_view/post_add_channel_member/post_add_channel_member.jsx';
import {Post} from 'mattermost-redux/types/posts';
import {UserProfile} from 'mattermost-redux/types/users';

import {sendAddToChannelEphemeralPost} from 'actions/global_actions';
import {TestHelper} from 'utils/test_helper';
import PostAddChannelMember, {Props} from 'components/post_view/post_add_channel_member/post_add_channel_member';

jest.mock('actions/global_actions.jsx', () => {
return {
Expand All @@ -14,20 +18,23 @@ jest.mock('actions/global_actions.jsx', () => {
});

describe('components/post_view/PostAddChannelMember', () => {
const post = {
const post: Post = TestHelper.getPostMock({
id: 'post_id_1',
root_id: 'root_id',
channel_id: 'channel_id',
create_at: 1,
};
const requiredProps = {
currentUser: {id: 'current_user_id', username: 'current_username'},
});
const currentUser: UserProfile = TestHelper.getUserMock({
id: 'current_user_id',
username: 'current_username',
});
const requiredProps: Props = {
currentUser,
channelType: 'O',
postId: 'post_id_1',
post,
userIds: ['user_id_1'],
usernames: ['username_1'],
hasMention: false,
actions: {
removePost: jest.fn(),
addChannelMember: jest.fn(),
Expand All @@ -36,7 +43,7 @@ describe('components/post_view/PostAddChannelMember', () => {
};

test('should match snapshot, empty postId', () => {
const props = {
const props: Props = {
...requiredProps,
postId: '',
};
Expand All @@ -45,7 +52,7 @@ describe('components/post_view/PostAddChannelMember', () => {
});

test('should match snapshot, empty channelType', () => {
const props = {
const props: Props = {
...requiredProps,
channelType: '',
};
Expand All @@ -59,7 +66,7 @@ describe('components/post_view/PostAddChannelMember', () => {
});

test('should match snapshot, private channel', () => {
const props = {
const props: Props = {
...requiredProps,
channelType: 'P',
};
Expand All @@ -71,7 +78,7 @@ describe('components/post_view/PostAddChannelMember', () => {
test('should match snapshot, more than 3 users', () => {
const userIds = ['user_id_1', 'user_id_2', 'user_id_3', 'user_id_4'];
const usernames = ['username_1', 'username_2', 'username_3', 'username_4'];
const props = {
const props: Props = {
...requiredProps,
userIds,
usernames,
Expand All @@ -91,7 +98,7 @@ describe('components/post_view/PostAddChannelMember', () => {
removePost: jest.fn(),
addChannelMember: jest.fn(),
};
const props = {...requiredProps, actions};
const props: Props = {...requiredProps, actions};
const wrapper = shallow(
<PostAddChannelMember {...props}/>,
);
Expand All @@ -113,7 +120,7 @@ describe('components/post_view/PostAddChannelMember', () => {
removePost: jest.fn(),
addChannelMember: jest.fn(),
};
const props = {...requiredProps, userIds, usernames, actions};
const props: Props = {...requiredProps, userIds, usernames, actions};
const wrapper = shallow(
<PostAddChannelMember {...props}/>,
);
Expand All @@ -123,7 +130,7 @@ describe('components/post_view/PostAddChannelMember', () => {
});

test('should match snapshot, with no-groups usernames', () => {
const props = {
const props: Props = {
...requiredProps,
noGroupsUsernames: ['user_id_2'],
};
Expand Down
90 changes: 32 additions & 58 deletions ...hannel_member/post_add_channel_member.jsx → ...hannel_member/post_add_channel_member.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,72 +1,46 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.

import PropTypes from 'prop-types';
import React from 'react';
import {FormattedMessage} from 'react-intl';

import {sendAddToChannelEphemeralPost} from 'actions/global_actions.jsx';
import {Post} from 'mattermost-redux/types/posts';
import {UserProfile} from 'mattermost-redux/types/users';

import {sendAddToChannelEphemeralPost} from 'actions/global_actions';
import {Constants} from 'utils/constants';
import {t} from 'utils/i18n';
import AtMention from 'components/at_mention';

export default class PostAddChannelMember extends React.PureComponent {
constructor(props) {
interface Actions {
addChannelMember: (channelId: string, userId: string) => void;
removePost: (post: Post) => void;
}

export interface Props {
currentUser: UserProfile;
channelType: string;
postId: string;
post: Post;
userIds: string[];
usernames: string[];
noGroupsUsernames: string[];
actions: Actions;
}

interface State {
expanded: boolean;
}

export default class PostAddChannelMember extends React.PureComponent<Props, State> {
constructor(props: Props) {
super(props);

this.state = {
expanded: false,
};
}

static propTypes = {

/*
* Current user
*/
currentUser: PropTypes.object.isRequired,

/*
* Type of current channel
*/
channelType: PropTypes.string.isRequired,

/*
* ID of ephemeral post (at-mention's "add to channel" post)
*/
postId: PropTypes.string.isRequired,

/*
* Ephemeral post (at-mention's "add to channel" post)
*/
post: PropTypes.object.isRequired,

/*
* user ids to add to channel
*/
userIds: PropTypes.array.isRequired,

/*
* usernames to add to channel
*/
usernames: PropTypes.array.isRequired,

noGroupsUsernames: PropTypes.array.isRequired,

actions: PropTypes.shape({

/*
* Function to add members to channel
*/
addChannelMember: PropTypes.func.isRequired,

/*
* Function to remove post (ephemeral)
*/
removePost: PropTypes.func.isRequired,
}).isRequired,
}

handleAddChannelMember = () => {
const {currentUser, post, userIds, usernames} = this.props;

Expand All @@ -86,13 +60,13 @@ export default class PostAddChannelMember extends React.PureComponent {
this.setState({expanded: true});
}

generateAtMentions(usernames = []) {
generateAtMentions(usernames = [] as string[]) {
if (usernames.length === 1) {
return (
<AtMention mentionName={usernames[0]}/>
);
} else if (usernames.length > 1) {
function andSeparator(key) {
function andSeparator(key: number) {
return (
<FormattedMessage
key={key}
Expand All @@ -102,7 +76,7 @@ export default class PostAddChannelMember extends React.PureComponent {
);
}

function commaSeparator(key) {
function commaSeparator(key: number) {
return <span key={key}>{', '}</span>;
}

Expand All @@ -125,7 +99,7 @@ export default class PostAddChannelMember extends React.PureComponent {
}

return [...acc, commaSeparator(idx), el];
}, [])
}, [] as JSX.Element[])
}
</span>
);
Expand Down Expand Up @@ -199,8 +173,8 @@ export default class PostAddChannelMember extends React.PureComponent {
outOfGroupsMessageText = 'did not get notified by this mention because they are not in the channel. They cannot be added to the channel because they are not a member of the linked groups. To add them to this channel, they must be added to the linked groups.';
}

var outOfChannelMessage = null;
var outOfGroupsMessage = null;
let outOfChannelMessage = null;
let outOfGroupsMessage = null;

if (usernames.length) {
outOfChannelMessage = (
Expand Down

0 comments on commit 16136d1

Please sign in to comment.