Regression: Fix reactivity on teamsMembers and roomMembers (#21366)
Co-authored-by: Guilherme Gazzo <guilhermegazzo@gmail.com>pull/21395/head^2
Douglas Fabris
5 years ago
committed by
GitHub
parent
0bc70e8ff3
commit
cb4ae70b17
@ -0,0 +1,67 @@ |
||||
import { useCallback, useMemo, useState } from 'react'; |
||||
|
||||
import { getConfig } from '../../../app/ui-utils/client/config'; |
||||
import { IUser } from '../../../definition/IUser'; |
||||
import { useMethod } from '../../contexts/ServerContext'; |
||||
import { useScrollableRecordList } from '../../hooks/lists/useScrollableRecordList'; |
||||
import { useComponentDidUpdate } from '../../hooks/useComponentDidUpdate'; |
||||
import { RecordList } from '../../lib/lists/RecordList'; |
||||
|
||||
type MembersListOptions = { |
||||
rid: string; |
||||
type: 'all' | 'autoJoin'; |
||||
limit: number; |
||||
debouncedText: string; |
||||
} |
||||
|
||||
export const useMembersList = ( |
||||
options: MembersListOptions, |
||||
): { |
||||
membersList: RecordList<IUser>; |
||||
initialItemCount: number; |
||||
reload: () => void; |
||||
loadMoreItems: (start: number, end: number) => void; |
||||
} => { |
||||
const getUsersMethod = useMethod('getUsersOfRoom'); |
||||
const [membersList, setMembersList] = useState(() => new RecordList<IUser>()); |
||||
const reload = useCallback(() => setMembersList(new RecordList<IUser>()), []); |
||||
|
||||
useComponentDidUpdate(() => { |
||||
options && reload(); |
||||
}, [options, reload]); |
||||
|
||||
const fetchData = useCallback( |
||||
async (start, end) => { |
||||
const { records, total } = await getUsersMethod( |
||||
options.rid, |
||||
options.type, |
||||
{ |
||||
limit: end - start, |
||||
skip: start, |
||||
}, |
||||
options.debouncedText, |
||||
); |
||||
|
||||
return { |
||||
items: records.map((members: any) => { |
||||
members._updatedAt = new Date(members._updatedAt); |
||||
return members; |
||||
}), |
||||
itemCount: total, |
||||
}; |
||||
}, |
||||
[getUsersMethod, options], |
||||
); |
||||
|
||||
const { loadMoreItems, initialItemCount } = useScrollableRecordList(membersList, fetchData, useMemo(() => { |
||||
const filesListSize = getConfig('teamsChannelListSize'); |
||||
return filesListSize ? parseInt(filesListSize, 10) : undefined; |
||||
}, [])); |
||||
|
||||
return { |
||||
reload, |
||||
membersList, |
||||
loadMoreItems, |
||||
initialItemCount, |
||||
}; |
||||
}; |
||||
@ -1,9 +1,9 @@ |
||||
import React from 'react'; |
||||
import { Box } from '@rocket.chat/fuselage'; |
||||
|
||||
import { useTranslation } from '../../../../contexts/TranslationContext'; |
||||
import GenericModal from '../../../../components/GenericModal'; |
||||
import TeamAutocomplete from '../../TeamAutocomplete'; |
||||
import { useTranslation } from '../../../../../contexts/TranslationContext'; |
||||
import GenericModal from '../../../../../components/GenericModal'; |
||||
import TeamAutocomplete from '../../../../teams/contextualBar/TeamAutocomplete'; |
||||
|
||||
|
||||
const StepOne = ({ |
||||
@ -1,8 +1,8 @@ |
||||
import React from 'react'; |
||||
import { Box } from '@rocket.chat/fuselage'; |
||||
|
||||
import { useTranslation } from '../../../../contexts/TranslationContext'; |
||||
import GenericModal from '../../../../components/GenericModal'; |
||||
import { useTranslation } from '../../../../../contexts/TranslationContext'; |
||||
import GenericModal from '../../../../../components/GenericModal'; |
||||
|
||||
const StepTwo = ({ |
||||
onClose, |
||||
@ -1,7 +1,7 @@ |
||||
import React from 'react'; |
||||
|
||||
import GenericModal from '../../../components/GenericModal'; |
||||
import { useTranslation } from '../../../contexts/TranslationContext'; |
||||
import GenericModal from '../../../../components/GenericModal'; |
||||
import { useTranslation } from '../../../../contexts/TranslationContext'; |
||||
|
||||
const ChannelToTeamModal = ({ |
||||
onClose, |
||||
@ -1,6 +1,6 @@ |
||||
import React from 'react'; |
||||
|
||||
import { roomTypes } from '../../../../../app/utils'; |
||||
import { roomTypes } from '../../../../app/utils'; |
||||
|
||||
const RoomLinkList = ({ rooms }) => { |
||||
const roomsArray = Object.values(rooms); |
||||
@ -1,9 +1,9 @@ |
||||
import React, { useMemo, useState } from 'react'; |
||||
import { AutoComplete, Option, Options } from '@rocket.chat/fuselage'; |
||||
|
||||
import RoomAvatar from '../../components/avatar/RoomAvatar'; |
||||
import { useEndpointData } from '../../hooks/useEndpointData'; |
||||
import { useUserId } from '../../contexts/UserContext'; |
||||
import RoomAvatar from '../../../components/avatar/RoomAvatar'; |
||||
import { useEndpointData } from '../../../hooks/useEndpointData'; |
||||
import { useUserId } from '../../../contexts/UserContext'; |
||||
|
||||
const Avatar = ({ _id, type, avatarETag, test, ...props }) => <RoomAvatar size={Options.AvatarSize} room={{ type, _id, avatarETag }} {...props} />; |
||||
|
||||
@ -1,8 +1,8 @@ |
||||
import React from 'react'; |
||||
import { Box } from '@rocket.chat/fuselage'; |
||||
|
||||
import GenericModal from '../../../../components/GenericModal'; |
||||
import { useTranslation } from '../../../../contexts/TranslationContext'; |
||||
import GenericModal from '../../../../../components/GenericModal'; |
||||
import { useTranslation } from '../../../../../contexts/TranslationContext'; |
||||
|
||||
const StepOne = ({ onConfirm, onCancel }) => { |
||||
const t = useTranslation(); |
||||
@ -1,8 +1,8 @@ |
||||
import React from 'react'; |
||||
|
||||
import GenericModal from '../../../../components/GenericModal'; |
||||
import RoomLinkList from '../RoomLinkList'; |
||||
import { useTranslation } from '../../../../contexts/TranslationContext'; |
||||
import GenericModal from '../../../../../components/GenericModal'; |
||||
import RoomLinkList from '../../RoomLinkList'; |
||||
import { useTranslation } from '../../../../../contexts/TranslationContext'; |
||||
|
||||
export const StepThree = ({ deletedRooms, keptRooms, onConfirm, onReturn, onCancel }) => { |
||||
const t = useTranslation(); |
||||
@ -1,8 +1,8 @@ |
||||
import React from 'react'; |
||||
|
||||
import GenericModal from '../../../../components/GenericModal'; |
||||
import GenericModal from '../../../../../components/GenericModal'; |
||||
import ChannelDeletionTable from './ChannelDeletionTable'; |
||||
import { useTranslation } from '../../../../contexts/TranslationContext'; |
||||
import { useTranslation } from '../../../../../contexts/TranslationContext'; |
||||
|
||||
export const StepTwo = ({ |
||||
rooms, |
||||
@ -1,8 +1,8 @@ |
||||
import React from 'react'; |
||||
|
||||
import GenericModal from '../../../../components/GenericModal'; |
||||
import GenericModal from '../../../../../components/GenericModal'; |
||||
import ChannelDesertionTable from '../../ChannelDesertionTable'; |
||||
import { useTranslation } from '../../../../contexts/TranslationContext'; |
||||
import { useTranslation } from '../../../../../contexts/TranslationContext'; |
||||
|
||||
export const StepOne = ({ |
||||
rooms, |
||||
@ -1,8 +1,8 @@ |
||||
import React from 'react'; |
||||
|
||||
import GenericModal from '../../../../components/GenericModal'; |
||||
import RoomLinkList from '../RoomLinkList'; |
||||
import { useTranslation } from '../../../../contexts/TranslationContext'; |
||||
import GenericModal from '../../../../../components/GenericModal'; |
||||
import RoomLinkList from '../../RoomLinkList'; |
||||
import { useTranslation } from '../../../../../contexts/TranslationContext'; |
||||
|
||||
export const StepTwo = ({ lastOwnerRooms, keptRooms, onConfirm, onCancel, onClose }) => { |
||||
const t = useTranslation(); |
||||
@ -1,6 +1,6 @@ |
||||
import React from 'react'; |
||||
|
||||
import VerticalBar from '../../../components/VerticalBar'; |
||||
import VerticalBar from '../../../../components/VerticalBar'; |
||||
import { TeamsInfo } from './TeamsInfo'; |
||||
|
||||
export default { |
||||
@ -1,6 +1,6 @@ |
||||
import { FC, lazy, LazyExoticComponent } from 'react'; |
||||
|
||||
import { addAction } from '../../room/lib/Toolbox'; |
||||
import { addAction } from '../../../room/lib/Toolbox'; |
||||
|
||||
addAction('team-info', { |
||||
groups: ['team'], |
||||
@ -0,0 +1,40 @@ |
||||
import React, { useMemo } from 'react'; |
||||
import { Skeleton } from '@rocket.chat/fuselage'; |
||||
|
||||
import { useEndpointData } from '../../../../../hooks/useEndpointData'; |
||||
import BaseRemoveUsersModal from './RemoveUsersModal'; |
||||
import GenericModal from '../../../../../components/GenericModal'; |
||||
import { useTranslation } from '../../../../../contexts/TranslationContext'; |
||||
import { AsyncStatePhase } from '../../../../../lib/asyncState'; |
||||
|
||||
const initialData = { user: { username: '' } }; |
||||
|
||||
const RemoveUsersModal = ({ teamId, userId, onClose, onCancel, onConfirm }) => { |
||||
const t = useTranslation(); |
||||
const { value, phase } = useEndpointData('teams.listRoomsOfUser', useMemo(() => ({ teamId, userId }), [teamId, userId])); |
||||
const userDataFetch = useEndpointData('users.info', useMemo(() => ({ userId }), [userId]), initialData); |
||||
const { user: { username } } = userDataFetch?.value; |
||||
|
||||
if (phase === AsyncStatePhase.LOADING) { |
||||
return <GenericModal |
||||
variant='warning' |
||||
onClose={onClose} |
||||
title={<Skeleton width='50%'/>} |
||||
confirmText={<Skeleton width='full'/>} |
||||
confirmText={t('Cancel')} |
||||
onConfirm={onClose} |
||||
> |
||||
<Skeleton width='full'/> |
||||
</GenericModal>; |
||||
} |
||||
|
||||
return <BaseRemoveUsersModal |
||||
onClose={onClose} |
||||
username={username} |
||||
onCancel={onCancel} |
||||
onConfirm={onConfirm} |
||||
rooms={value?.rooms} |
||||
/>; |
||||
}; |
||||
|
||||
export default RemoveUsersModal; |
||||
@ -1,6 +1,6 @@ |
||||
import { lazy } from 'react'; |
||||
|
||||
import { addAction } from '../../room/lib/Toolbox'; |
||||
import { addAction } from '../../../room/lib/Toolbox'; |
||||
|
||||
addAction('team-members', { |
||||
groups: ['team'], |
||||
@ -1,4 +1,3 @@ |
||||
import './contextualBar/channels/tabBar'; |
||||
import './info/tabBar.ts'; |
||||
import './members/tabBar'; |
||||
import './info'; |
||||
import './contextualBar/info/tabBar'; |
||||
import './contextualBar/members/tabBar'; |
||||
|
||||
@ -1,15 +0,0 @@ |
||||
import React from 'react'; |
||||
|
||||
import { roomTypes } from '../../../../app/utils'; |
||||
|
||||
const RoomLinkList = ({ rooms }) => { |
||||
const roomsArray = Object.values(rooms); |
||||
return roomsArray.map((room, i) => <> |
||||
<a href={roomTypes.getRouteLink(room.t, room)}> |
||||
#{roomTypes.getRoomName(room.t, room)} |
||||
</a> |
||||
{i === roomsArray.length - 1 ? '.' : ', '} |
||||
</>); |
||||
}; |
||||
|
||||
export default RoomLinkList; |
||||
@ -1,56 +0,0 @@ |
||||
import React, { useMemo } from 'react'; |
||||
import { Skeleton } from '@rocket.chat/fuselage'; |
||||
|
||||
import { useEndpointData } from '../../../../hooks/useEndpointData'; |
||||
import BaseRemoveUsersModal, { RemoveUsersSecondStep } from './RemoveUsersModal'; |
||||
import GenericModal from '../../../../components/GenericModal'; |
||||
import { usePermission } from '../../../../contexts/AuthorizationContext'; |
||||
import { useTranslation } from '../../../../contexts/TranslationContext'; |
||||
import { AsyncStatePhase } from '../../../../lib/asyncState'; |
||||
|
||||
const RemoveUsersModalWithRooms = ({ teamId, userId, username, onClose, onCancel, onConfirm }) => { |
||||
const { value } = useEndpointData('teams.listRoomsOfUser', useMemo(() => ({ teamId, userId }), [teamId, userId])); |
||||
|
||||
return <BaseRemoveUsersModal |
||||
onClose={onClose} |
||||
username={username} |
||||
onCancel={onCancel} |
||||
onConfirm={onConfirm} |
||||
rooms={value?.rooms} |
||||
/>; |
||||
}; |
||||
|
||||
const initialData = { user: { username: '' } }; |
||||
|
||||
const RemoveUsersModal = (props) => { |
||||
const t = useTranslation(); |
||||
|
||||
const { userId } = props; |
||||
|
||||
const canViewUserRooms = usePermission('view-all-team-channels'); |
||||
|
||||
const { value, phase } = useEndpointData('users.info', useMemo(() => ({ userId }), [userId]), initialData); |
||||
|
||||
const { user: { username } } = value; |
||||
|
||||
if (phase === AsyncStatePhase.LOADING) { |
||||
return <GenericModal |
||||
variant='warning' |
||||
onClose={props.onClose} |
||||
title={<Skeleton width='50%'/>} |
||||
confirmText={<Skeleton width='full'/>} |
||||
confirmText={t('Cancel')} |
||||
onConfirm={props.onClose} |
||||
> |
||||
<Skeleton width='full'/> |
||||
</GenericModal>; |
||||
} |
||||
|
||||
if (canViewUserRooms) { |
||||
return <RemoveUsersModalWithRooms {...props} username={username}/>; |
||||
} |
||||
|
||||
return <RemoveUsersSecondStep {...props} username={username}/>; |
||||
}; |
||||
|
||||
export default RemoveUsersModal; |
||||
Loading…
Reference in new issue