From 7240ccd372834739ddde56a3a3323b5e67816bd2 Mon Sep 17 00:00:00 2001 From: Molly Struve Date: Thu, 2 Apr 2020 02:13:51 -0500 Subject: [PATCH] remove user search from chat channel settings (#7015) --- .../channelDetails.test.jsx.snap | 368 ------------------ .../chat/__tests__/channelDetails.test.jsx | 327 ---------------- app/javascript/chat/channelDetails.jsx | 249 ------------ 3 files changed, 944 deletions(-) delete mode 100644 app/javascript/chat/__tests__/__snapshots__/channelDetails.test.jsx.snap delete mode 100644 app/javascript/chat/__tests__/channelDetails.test.jsx delete mode 100644 app/javascript/chat/channelDetails.jsx diff --git a/app/javascript/chat/__tests__/__snapshots__/channelDetails.test.jsx.snap b/app/javascript/chat/__tests__/__snapshots__/channelDetails.test.jsx.snap deleted file mode 100644 index 452f43ef4..000000000 --- a/app/javascript/chat/__tests__/__snapshots__/channelDetails.test.jsx.snap +++ /dev/null @@ -1,368 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[` as a moderator should render and test snapshot 1`] = ` -
-

- channel name -

-
- - something about this channel - -
-
- channeluser1 profile - - channel user 1 - -
-
- channeluser2 profile - - channel user 2 - -
-
-

- Invite Members -

- -
-

- Pending Invites: -

-
- - @pendinguser1 - pending user 1 - -
-
- - @pendinguser2 - pending user 2 - -
-
- Contact yo@dev.to for assistance. -
-
-
-`; - -exports[` as a moderator should search users and populate searched users div 1`] = ` -preact-render-spy (1 nodes) -------- -
-

channel name

-
- something about this channel -
-
- channeluser1 profile - - channel user 1 - -
-
- channeluser2 profile - - channel user 2 - -
-
-

Invite Members

- -
-
- - profile_image - @channeluser1 - i am channel user 1 - - - - is already in - channel name - -
-
- - profile_image - @searcheduser3 - i am searched user 3 - - - -
-
-

Pending Invites:

-
- - @pendinguser1 - pending user 1 - -
-
- - @pendinguser2 - pending user 2 - -
-
Contact yo@dev.to for assistance.
-
-
- -`; - -exports[` as a user should leave channel and show appropriate message 1`] = ` -preact-render-spy (1 nodes) -------- -
-

channel name

-
- something about this channel -
-
- channeluser1 profile - - channel user 1 - -
-
- channeluser2 profile - - channel user 2 - -
-
-

Danger Zone

-

- You have left this channel - - 😢😢😢 - -

-

- This may take a few minutes to be reflected in the sidebar -

-
-
- -`; - -exports[` as a user should render and test snapshot 1`] = ` -
-

- channel name -

-
- - something about this channel - -
-
- channeluser1 profile - - channel user 1 - -
-
- channeluser2 profile - - channel user 2 - -
-
-

- Danger Zone -

- -
-
-`; diff --git a/app/javascript/chat/__tests__/channelDetails.test.jsx b/app/javascript/chat/__tests__/channelDetails.test.jsx deleted file mode 100644 index 327111b4f..000000000 --- a/app/javascript/chat/__tests__/channelDetails.test.jsx +++ /dev/null @@ -1,327 +0,0 @@ -import { h } from 'preact'; -import render from 'preact-render-to-json'; -import { shallow } from 'preact-render-spy'; -import { JSDOM } from 'jsdom'; -import fetch from 'jest-fetch-mock'; -import ChannelDetails from '../channelDetails'; - -global.fetch = fetch; -const doc = new JSDOM(''); -global.document = doc; -global.window = doc.defaultView; -global.window.currentUser = { id: 'modID' }; - -const channelDetails = mod => { - let id; - if (mod) { - id = 'modID'; - } else { - id = 'userID'; - } - return { - channel_name: 'channel name', - description: 'something about this channel', - id: '12345', - channel_users: [ - { - path: '/user_path1', - title: 'i am channel user 1', - name: 'channel user 1', - username: 'channeluser1', - id: 'userid1', - profile_image_url: 'channeluser1pic.png', - }, - { - path: '/user_path2', - title: 'i am channel user 2', - name: 'channel user 2', - username: 'channeluser2', - id: 'userid2', - profile_image_url: 'channeluser2pic.png', - }, - ], - type_of: 'channel-details', - pending_users_select_fields: [ - { - path: '/pending_path1', - title: 'i am pending user 1', - name: 'pending user 1', - username: 'pendinguser1', - id: 'pendinguserid1', - profile_image_url: 'pendinguser1pic.png', - }, - { - path: '/pending_path2', - title: 'i am pending user 2', - name: 'pending user 2', - username: 'pendinguser2', - id: 'pendinguserid2', - profile_image_url: 'pendinguser2pic.png', - }, - ], - channel_mod_ids: id, - }; -}; - -const getChannelDetails = details => ( - -); - -describe('', () => { - describe('as a moderator', () => { - const moddetails = channelDetails(true); - const context = shallow(getChannelDetails(moddetails)); - - it('should render and test snapshot', () => { - const tree = render(getChannelDetails(moddetails)); - expect(tree).toMatchSnapshot(); - }); - - it('should have the proper elements, attributes and content', () => { - expect(context.find('.channeldetails').exists()).toEqual(true); - expect(context.find('.channeldetails__name').text()).toEqual( - moddetails.channel_name, - ); - expect(context.find('.channeldetails__description').text()).toEqual( - moddetails.description, - ); - - // check user members - const channelmembers = context.find('.channeldetails__user'); - expect(channelmembers.exists()).toEqual(true); - for (let i = 0; i < channelmembers.length; i += 1) { - expect(channelmembers.at(i).text()).toEqual( - moddetails.channel_users[i].name, - ); - expect( - channelmembers - .at(i) - .childAt(1) - .attr('href'), - ).toEqual(`/${moddetails.channel_users[i].username}`); - expect( - channelmembers - .at(i) - .childAt(1) - .attr('data-content'), - ).toEqual(`sidecar-user`); - } - - // mod only divs - expect(context.find('.channeldetails__searchedusers').exists()).toEqual( - false, - ); // no searched users - expect(context.find('.channeldetails__pendingusers').exists()).toEqual( - true, - ); - expect(context.find('.channeldetails__inviteusers').exists()).toEqual( - true, - ); - expect(context.find('.channeldetails__leftchannel').exists()).toEqual( - false, - ); - expect(context.find('.channeldetails__leavechannel').exists()).toEqual( - false, - ); - - // check pending members - const pendingusers = context.find('.channeldetails__pendingusers'); - for (let i = 0; i < pendingusers.length; i += 1) { - expect(pendingusers.at(i).text()).toEqual( - `@${moddetails.pending_users_select_fields[i].username} - ${moddetails.pending_users_select_fields[i].name}`, - ); - expect( - pendingusers - .at(i) - .childAt(0) - .attr('href'), - ).toEqual(`/${moddetails.pending_users_select_fields[i].username}`); - expect( - pendingusers - .at(i) - .childAt(0) - .attr('data-content'), - ).toEqual(`users/${moddetails.pending_users_select_fields[i].id}`); - } - }); - - it('should search users and populate searched users div', async () => { - // context.component().triggerUserSearch({ target: { value: 'ma', selectionStart: 2 } }) - const searchedusers = { - searchedUsers: [ - { - path: '/user_path1', - title: 'i am channel user 1', - user: { - name: 'channel user 1', - username: 'channeluser1', - profile_image_90: 'channeluser1pic.png', - }, - id: 'userid1', - }, - { - path: '/pending_path1', - title: 'i am pending user 1', - user: { - name: 'pending user 1', - username: 'pendinguser1', - profile_image_90: 'pendinguser1pic.png', - }, - id: 'pendinguserid1', - }, - { - path: '/search_path3', - title: 'i am searched user 3', - user: { - name: 'searched user 3', - username: 'searcheduser3', - profile_image_90: 'searcheduser3pic.png', - }, - id: 'searched_userid3', - }, - ], - }; - - context.setState(searchedusers); - context.rerender(); - const searchedusersdivs = context.find('.channeldetails__searchedusers'); - expect(searchedusersdivs.exists()).toEqual(true); - expect(searchedusersdivs.length).toEqual(2); - - let inviteMessage; - let inviteAttr; - let inviteAttrAns; - const included = (list, el) => { - const keys = Object.keys(list); - for (let i = 0; i < keys.length; i += 1) { - const key = keys[i]; - if (list[key].id === el.id) { - return true; - } - } - return false; - }; - for (let i = 0; i < searchedusersdivs.length; i += 1) { - if ( - !included( - moddetails.pending_users_select_fields, - searchedusers.searchedUsers[i], - ) - ) { - expect( - searchedusersdivs - .at(i) - .childAt(0) - .attr('href'), - ).toEqual(searchedusers.searchedUsers[i].path); - expect( - searchedusersdivs - .at(i) - .childAt(0) - .text(), - ).toEqual( - `@${searchedusers.searchedUsers[i].user.username} - ${searchedusers.searchedUsers[i].title}`, - ); - - if ( - included(moddetails.channel_users, searchedusers.searchedUsers[i]) - ) { - inviteMessage = `is already in ${moddetails.channel_name}`; - inviteAttr = 'className'; - inviteAttrAns = 'channel__member'; - } else { - inviteMessage = 'Invite'; - inviteAttr = 'data-content'; - inviteAttrAns = searchedusers.searchedUsers[i].id; - } - expect( - searchedusersdivs - .at(i) - .childAt(2) - .text(), - ).toEqual(inviteMessage); - expect( - searchedusersdivs - .at(i) - .childAt(2) - .attr(inviteAttr), - ).toEqual(inviteAttrAns); - } - } - const tree = render(context); - expect(tree).toMatchSnapshot(); - }); - }); - - describe('as a user', () => { - const userdetails = channelDetails(false); - const context = shallow(getChannelDetails(userdetails)); - - it('should render and test snapshot', () => { - const tree = render(getChannelDetails(userdetails)); - expect(tree).toMatchSnapshot(); - }); - - it('should have the proper elements, attributes and content', () => { - expect(context.find('.channeldetails').exists()).toEqual(true); - expect(context.find('.channeldetails__name').text()).toEqual( - userdetails.channel_name, - ); - expect(context.find('.channeldetails__description').text()).toEqual( - userdetails.description, - ); - - const channelmembers = context.find('.channeldetails__user'); - expect(channelmembers.exists()).toEqual(true); - for (let i = 0; i < channelmembers.length; i += 1) { - expect(channelmembers.at(i).text()).toEqual( - userdetails.channel_users[i].name, - ); - expect( - channelmembers - .at(i) - .childAt(1) - .attr('href'), - ).toEqual(`/${userdetails.channel_users[i].username}`); - expect( - channelmembers - .at(i) - .childAt(1) - .attr('data-content'), - ).toEqual(`sidecar-user`); - } - - // user only divs - expect(context.find('.channeldetails__searchedusers').exists()).toEqual( - false, - ); - expect(context.find('.channeldetails__pendingusers').exists()).toEqual( - false, - ); - expect(context.find('.channeldetails__inviteusers').exists()).toEqual( - false, - ); - expect(context.find('.channeldetails__leftchannel').exists()).toEqual( - false, - ); - expect(context.find('.channeldetails__leavechannel').exists()).toEqual( - true, - ); - }); - - it('should leave channel and show appropriate message', () => { - // leave channel - context.component().handleLeaveChannelSuccess(); - context.rerender(); - expect(context.find('.channeldetails__leftchannel').exists()).toEqual( - true, - ); - expect(context.find('.channeldetails__leavechannel').exists()).toEqual( - false, - ); - - const tree = render(context); - expect(tree).toMatchSnapshot(); - }); - }); -}); diff --git a/app/javascript/chat/channelDetails.jsx b/app/javascript/chat/channelDetails.jsx deleted file mode 100644 index 8d0756b5f..000000000 --- a/app/javascript/chat/channelDetails.jsx +++ /dev/null @@ -1,249 +0,0 @@ -import { h, Component } from 'preact'; -import PropTypes from 'prop-types'; -import debounceAction from '../src/utils/debounceAction'; - -class ChannelDetails extends Component { - static propTypes = { - channel: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types - }; - - constructor(props) { - super(props); - - this.debouncedUserSearch = debounceAction( - this.triggerUserSearch.bind(this), - { config: { leading: true } }, - ); - - this.state = { - searchedUsers: [], - hasLeftChannel: false, - }; - } - - triggerUserSearch = e => { - const component = this; - const query = e.target.value; - if (query.length > 0) { - const searchHash = { per_page: 20, search_fields: query }; - const searchParams = new URLSearchParams(searchHash).toString(); - fetch(`/search/users?${searchParams}`, { - method: 'GET', - headers: { - Accept: 'application/json', - 'X-CSRF-Token': window.csrfToken, - 'Content-Type': 'application/json', - }, - credentials: 'same-origin', - }) - .then(response => response.json()) - .then(response => { - component.setState({ searchedUsers: response.result }); - }); - } else { - component.setState({ searchedUsers: [] }); - } - }; - - triggerInvite = e => { - const component = this; - const id = e.target.dataset.content; - e.target.style.display = 'none'; - fetch(`/chat_channel_memberships`, { - method: 'POST', - headers: { - Accept: 'application/json', - 'X-CSRF-Token': window.csrfToken, - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ - chat_channel_membership: { - user_id: id, - chat_channel_id: component.props.channel.id, - }, - }), - credentials: 'same-origin', - }) - .then(response => response) - .then(this.handleInvitationSuccess) - .catch(null); - }; - - triggerLeaveChannel = e => { - e.preventDefault(); - const id = e.target.dataset.content; - fetch(`/chat_channel_memberships/${id}`, { - method: 'DELETE', - headers: { - Accept: 'application/json', - 'X-CSRF-Token': window.csrfToken, - 'Content-Type': 'application/json', - }, - body: JSON.stringify({}), - credentials: 'same-origin', - }) - .then(response => response) - .then(this.handleLeaveChannelSuccess) - .catch(null); - }; - - handleLeaveChannelSuccess = () => { - this.setState({ hasLeftChannel: true }); - }; - - handleInvitationSuccess = response => { - console.log(response); // eslint-disable-line no-console - }; - - userInList = (list, user) => { - const keys = Object.keys(list); - for (let i = 0; i < keys.length; i += 1) { - const key = keys[i]; - if (user.id === list[key].id) { - return true; - } - } - return false; - }; - - render() { - const channel = this.props.channel; // eslint-disable-line - const users = Object.values(channel.channel_users).map(user => ( - - )); - let subHeader = ''; - if (users.length === 25) { - subHeader =

Recently Active Members

; - } - let modSection = ''; - let searchedUsers = []; - let pendingInvites = []; - if (channel.channel_mod_ids.includes(window.currentUser.id)) { - // eslint-disable-next-line - searchedUsers = this.state.searchedUsers.map(user => { - if (!this.userInList(channel.pending_users_select_fields, user)) { - let invite = ( - - ); - if (this.userInList(channel.channel_users, user)) { - invite = ( - - is already in - {' '} - {channel.channel_name} - - ); - } - return ( - - ); - } - }); - pendingInvites = channel.pending_users_select_fields.map(user => ( - - )); - modSection = ( -
-

Invite Members

- -
{searchedUsers}
-

Pending Invites:

- {pendingInvites} -
- Contact yo@dev.to for assistance. -
-
- ); // eslint-disable-next-line - } else if (this.state.hasLeftChannel) { - modSection = ( -
-

Danger Zone

-

- You have left this channel - {' '} - - 😢😢😢 - -

-

This may take a few minutes to be reflected in the sidebar

-
- ); - } else { - modSection = ( -
-

Danger Zone

- -
- ); - } - return ( -
-

{channel.channel_name}

-
- {channel.description || ''} -
- {subHeader} - {users} - {modSection} -
- ); - } -} - -export default ChannelDetails;