From ef22aa2df295da8d0656a39a78c7b89610ad72a5 Mon Sep 17 00:00:00 2001 From: Romaric Mourgues Date: Fri, 1 Jul 2022 12:27:59 +0200 Subject: [PATCH] Fix some bugs from #2374 --- .../features/channels/hooks/use-channel.ts | 32 ++-- .../views/client/channels-bar/ChannelsBar.tsx | 2 - .../ChannelsWorkspace/WorkspaceChannel.tsx | 1 - .../Modals/WorkspaceChannelList.tsx | 170 ------------------ .../WorkspaceChannelRow.tsx | 4 + .../Parts/Channel/ChannelMenu.tsx | 4 + .../Parts/Header/MemberChannelRow.tsx | 4 +- 7 files changed, 28 insertions(+), 189 deletions(-) delete mode 100644 twake/frontend/src/app/views/client/channels-bar/Modals/WorkspaceChannelList.tsx diff --git a/twake/frontend/src/app/features/channels/hooks/use-channel.ts b/twake/frontend/src/app/features/channels/hooks/use-channel.ts index 581a4c9ea5..f29025dd71 100644 --- a/twake/frontend/src/app/features/channels/hooks/use-channel.ts +++ b/twake/frontend/src/app/features/channels/hooks/use-channel.ts @@ -35,28 +35,30 @@ export function useChannel( setLoading(false); }; + const refresh = async () => { + setLoading(true); + const ch = await ChannelAPIClient.get(companyId, workspaceId, channelId); + if (ch && ch?.id) { + set(ch); + } else { + set({ + id: channelId, + name: '', + visibility: 'private', + }); + } + setLoading(false); + }; + useGlobalEffect( hookId, async () => { - if (!channel) { - setLoading(true); - const ch = await ChannelAPIClient.get(companyId, workspaceId, channelId); - if (ch && ch?.id) { - set(ch); - } else { - set({ - id: channelId, - name: '', - visibility: 'private', - }); - } - setLoading(false); - } + if (!channel) refresh(); }, [], ); - return { channel, save, loading }; + return { channel, save, loading, refresh }; } export const useIsChannelMember = (channelId: string) => { diff --git a/twake/frontend/src/app/views/client/channels-bar/ChannelsBar.tsx b/twake/frontend/src/app/views/client/channels-bar/ChannelsBar.tsx index 38dae2f1ef..1f99475d8d 100755 --- a/twake/frontend/src/app/views/client/channels-bar/ChannelsBar.tsx +++ b/twake/frontend/src/app/views/client/channels-bar/ChannelsBar.tsx @@ -15,8 +15,6 @@ import Shortcuts, { } from 'app/features/global/services/shortcut-service'; import AddUserButton from 'components/add-user-button/add-user-button'; import Workspaces from 'app/deprecated/workspaces/workspaces'; -import ModalManager from 'app/components/modal/modal-manager'; -import WorkspaceChannelList from './Modals/WorkspaceChannelList'; import ScrollWithHiddenComponents from 'app/components/scroll-hidden-components/scroll-with-hidden-components'; import HiddenNotificationsButton from 'app/components/scroll-hidden-components/hidden-notifications-button'; import AccessRightsService from 'app/features/workspace-members/services/workspace-members-access-rights-service'; diff --git a/twake/frontend/src/app/views/client/channels-bar/ChannelsWorkspace/WorkspaceChannel.tsx b/twake/frontend/src/app/views/client/channels-bar/ChannelsWorkspace/WorkspaceChannel.tsx index d0999e1ed2..65ce97277f 100644 --- a/twake/frontend/src/app/views/client/channels-bar/ChannelsWorkspace/WorkspaceChannel.tsx +++ b/twake/frontend/src/app/views/client/channels-bar/ChannelsWorkspace/WorkspaceChannel.tsx @@ -9,7 +9,6 @@ import ChannelCategory from '../Parts/Channel/ChannelCategory'; import ChannelIntermediate from '../Parts/Channel/ChannelIntermediate'; import ChannelWorkspaceEditor from 'app/views/client/channels-bar/Modals/ChannelWorkspaceEditor'; -import WorkspaceChannelList from 'app/views/client/channels-bar/Modals/WorkspaceChannelList'; import Menu from 'components/menus/menu.js'; import Icon from 'app/components/icon/icon'; diff --git a/twake/frontend/src/app/views/client/channels-bar/Modals/WorkspaceChannelList.tsx b/twake/frontend/src/app/views/client/channels-bar/Modals/WorkspaceChannelList.tsx deleted file mode 100644 index a509ebf484..0000000000 --- a/twake/frontend/src/app/views/client/channels-bar/Modals/WorkspaceChannelList.tsx +++ /dev/null @@ -1,170 +0,0 @@ -import React, { useEffect, useRef, useState } from 'react'; -import { Input, Row, Typography, InputRef } from 'antd'; -import PerfectScrollbar from 'react-perfect-scrollbar'; - -import listService, { - GenericChannel, -} from 'app/features/global/services/search-list-manager-service'; -import Languages from 'app/features/global/services/languages-service'; -import Icon from 'app/components/icon/icon'; -import ObjectModal from 'components/object-modal/object-modal'; -import SearchListContainer from './WorkspaceChannelList/SearchListContainer'; -import RouterServices from 'app/features/router/services/router-service'; -import ModalManager from 'app/components/modal/modal-manager'; -import { UserType } from 'app/features/users/types/user'; -import UsersService from 'app/features/users/services/current-user-service'; -import { ChannelType } from 'app/features/channels/types/channel'; -import { delayRequest } from 'app/features/global/utils/managedSearchRequest'; -import ChannelMembersAPIClient from 'app/features/channel-members/api/channel-members-api-client'; -import ChannelsReachableAPIClient from 'app/features/channels/api/channels-reachable-api-client'; -import { useFavoriteChannels } from 'app/features/channels/hooks/use-favorite-channels'; -import { useSetUserList, useUserList } from 'app/features/users/hooks/use-user-list'; -import { useSearchUsers } from 'app/features/users/hooks/use-search-user-list'; -import useRouterCompany from 'app/features/router/hooks/use-router-company'; -import { useDirectChannels } from 'app/features/channels/hooks/use-direct-channels'; - -export default () => { - const [search, setSearch] = useState(''); - const [limit, setLimit] = useState(10); - const [cursor, setCursor] = useState(-1); - const list = listService.useWatcher(() => listService.list); - const currentUserId: string = UsersService.getCurrentUserId(); - const inputRef = useRef(null); - const { refresh: refreshFavoriteChannels } = useFavoriteChannels(); - const { set: setUserList } = useSetUserList('WorkspaceChannelList'); - const { userList } = useUserList(); - const { openDiscussion } = useDirectChannels(); - - const { search: searchUserList, result: searchedUserList } = useSearchUsers({ - scope: 'company', - }); - - useEffect(() => { - listService.searchAll('', { userListState: userList?.map(u => u) }); - }, []); - - useEffect(() => { - const users = list - .filter(generic => generic.type === 'user') - .map(generic => generic.resource as UserType); - - if (users.length) setUserList(users); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - const handleKeyDown = (event: React.KeyboardEvent) => { - if (event.key === 'ArrowUp' && cursor > 0) { - return setCursor(cursor - 1); - } - - if (event.key === 'ArrowDown' && cursor < list.length - 1) { - if (cursor < limit - 1) return setCursor(cursor + 1); - } - - if (event.key === 'Enter' && cursor >= 0) { - const element = list[cursor]; - return element ? handleElementType(element) : null; - } - }; - - const handleElementType = (element: GenericChannel) => { - switch (element.type) { - case 'user': - return upsertDirectMessage([(element.resource as UserType).id || '', currentUserId]); - case 'workspace': - return joinChannel(element.resource as ChannelType); - case 'direct': - return upsertDirectMessage((element.resource as ChannelType).members || []); - } - }; - - const upsertDirectMessage = async (userIds: string[]): Promise => { - await openDiscussion(userIds); - return ModalManager.closeAll(); - }; - - const joinChannel = async (channel: ChannelType) => { - if (channel.company_id && channel.workspace_id && channel.id) { - const channelMembers = await ChannelMembersAPIClient.list({ - companyId: channel.company_id, - workspaceId: channel.workspace_id, - channelId: channel.id, - }); - - const alreadyMemberInChannel = channelMembers.map(m => m.user_id)?.includes(currentUserId); - - if (!alreadyMemberInChannel) { - await ChannelsReachableAPIClient.inviteUser( - channel.company_id, - channel.workspace_id, - channel.id, - currentUserId, - ).finally(refreshFavoriteChannels); - } - } - - ModalManager.closeAll(); - RouterServices.push( - RouterServices.generateRouteFromState({ - companyId: channel.company_id, - workspaceId: channel.workspace_id || '', - channelId: channel.id, - }), - ); - }; - - const loadMore = () => { - setLimit(limit + 10); - return inputRef.current?.focus(); - }; - return ( - - - - } - onKeyDown={handleKeyDown} - placeholder={Languages.t('scenes.client.channelbar.workspacechannellist.autocomplete')} - value={search} - onChange={(event: React.ChangeEvent) => { - setSearch(event.target.value); - event.persist(); - searchUserList(event.target.value); - delayRequest('channel_members_list_search', () => { - console.log(`result here for ${event.target.value}`, searchedUserList); - listService.searchAll(event.target.value, { - userListState: searchedUserList.map(u => u), - }); - }); - - return setCursor(0); - }} - autoFocus - ref={inputRef} - /> - - - setCursor(index)} - /> - {list.length > limit && ( - - - {Languages.t( - 'scenes.client.channelsbar.modals.workspace_channel_list.workspace_channel_row.loader', - )} - - - )} - - - ); -}; diff --git a/twake/frontend/src/app/views/client/channels-bar/Modals/WorkspaceChannelList/WorkspaceChannelRow.tsx b/twake/frontend/src/app/views/client/channels-bar/Modals/WorkspaceChannelList/WorkspaceChannelRow.tsx index d73154748f..7d672af24a 100644 --- a/twake/frontend/src/app/views/client/channels-bar/Modals/WorkspaceChannelList/WorkspaceChannelRow.tsx +++ b/twake/frontend/src/app/views/client/channels-bar/Modals/WorkspaceChannelList/WorkspaceChannelRow.tsx @@ -14,6 +14,7 @@ import { useFavoriteChannels } from 'app/features/channels/hooks/use-favorite-ch import ChannelMembersAPIClient from 'app/features/channel-members/api/channel-members-api-client'; import './ChannelRow.scss'; +import { useChannel } from 'app/features/channels/hooks/use-channel'; type PropsType = { channel: ChannelType; @@ -24,6 +25,7 @@ type PropsType = { export default ({ channel, joined, active }: PropsType) => { const { refresh: refreshFavoriteChannels } = useFavoriteChannels(); const userId: string = UsersService.getCurrentUserId(); + const { refresh: refreshChannel } = useChannel(channel.id || ''); const ref = createRef(); @@ -61,6 +63,8 @@ export default ({ channel, joined, active }: PropsType) => { channelId: channel.id, }), ); + + refreshChannel(); }; return ( diff --git a/twake/frontend/src/app/views/client/channels-bar/Parts/Channel/ChannelMenu.tsx b/twake/frontend/src/app/views/client/channels-bar/Parts/Channel/ChannelMenu.tsx index 74ed6aaf80..fbc9dd6154 100644 --- a/twake/frontend/src/app/views/client/channels-bar/Parts/Channel/ChannelMenu.tsx +++ b/twake/frontend/src/app/views/client/channels-bar/Parts/Channel/ChannelMenu.tsx @@ -33,6 +33,7 @@ import { useRefreshDirectChannels } from 'app/features/channels/hooks/use-direct import { useChannelNotifications } from 'app/features/users/hooks/use-notifications'; import consoleService from 'app/features/console/services/console-service'; import { copyToClipboard } from 'app/features/global/utils/CopyClipboard'; +import { useChannel } from 'app/features/channels/hooks/use-channel'; type PropsType = { channel: ChannelType; @@ -63,6 +64,7 @@ const FullMenu = (props: PropsType): JSX.Element => { const { user: currentUser } = useCurrentUser(); const { refresh: refreshFavoriteChannels } = useRefreshFavoriteChannels(); const { refresh: refreshDirectChannels } = useRefreshDirectChannels(); + const { refresh: refreshChannel } = useChannel(props.channel.id || ''); const { Feature, FeatureNames } = useFeatureToggles(); const channelMember = props.channel.user_member || {}; @@ -148,6 +150,8 @@ const FullMenu = (props: PropsType): JSX.Element => { refreshFavoriteChannels(); refreshDirectChannels(); } + + refreshChannel(); } }; diff --git a/twake/frontend/src/app/views/client/channels-bar/Parts/Header/MemberChannelRow.tsx b/twake/frontend/src/app/views/client/channels-bar/Parts/Header/MemberChannelRow.tsx index 17c48a02ff..43d8ae8efa 100644 --- a/twake/frontend/src/app/views/client/channels-bar/Parts/Header/MemberChannelRow.tsx +++ b/twake/frontend/src/app/views/client/channels-bar/Parts/Header/MemberChannelRow.tsx @@ -19,6 +19,7 @@ import { usePendingEmails } from 'app/features/pending-emails/hooks/use-pending- import PendingEmailsAPIClient from 'app/features/pending-emails/api/pending-emails-api-client'; import './MemberChannelRow.scss'; +import { useChannel } from 'app/features/channels/hooks/use-channel'; const { Text } = Typography; @@ -39,6 +40,7 @@ const MemberChannelRow = (props: Props): JSX.Element => { const workspaceId = useRouterWorkspace(); const [isMember, setIsMember] = useState(false); const [selected, setSelected] = useState(false); + const { refresh: refreshChannel } = useChannel(props.channelId); const { refresh: refreshChannelMembers } = useChannelMembers({ companyId, workspaceId, @@ -74,7 +76,7 @@ const MemberChannelRow = (props: Props): JSX.Element => { await ChannelsReachableAPIClient.removeUser(companyId, workspaceId, channelId, userId) .then(refreshChannelMembers) .finally(() => setIsMember(false)); - + refreshChannel(); currentUserId === props.userId && ModalManager.close(); };