Fix multiselect on users list integration selector (#6826)

* Moving selected ids to a parent

* typing selectedIds for user
This commit is contained in:
Javier Aguirre 2022-12-05 12:13:48 +01:00 committed by GitHub
parent da5b877297
commit 655f55be20
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 21 deletions

View file

@ -17,19 +17,7 @@ type Props = {
tutorialWatched: boolean;
handleSelectProfile: (user: UserProfile) => void;
term: string;
}
function handleIdSelection(currentIds: {[id: string]: UserProfile}, user: UserProfile) {
const newSelectedIds = {...currentIds};
const wasSelected = currentIds[user.id];
if (wasSelected) {
Reflect.deleteProperty(newSelectedIds, user.id);
} else {
newSelectedIds[user.id] = user;
}
return newSelectedIds;
selectedIds: {[id: string]: UserProfile};
}
export default function ServerUserList({
@ -39,6 +27,7 @@ export default function ServerUserList({
tutorialWatched,
handleSelectProfile,
term,
selectedIds,
}: Props) {
const serverUrl = useServerUrl();
@ -49,7 +38,6 @@ export default function ServerUserList({
const [profiles, setProfiles] = useState<UserProfile[]>([]);
const [searchResults, setSearchResults] = useState<UserProfile[]>([]);
const [loading, setLoading] = useState(false);
const [selectedIds, setSelectedIds] = useState<{[id: string]: UserProfile}>({});
const selectedCount = Object.keys(selectedIds).length;
const isSearch = Boolean(term);
@ -81,7 +69,6 @@ export default function ServerUserList({
const onHandleSelectProfile = useCallback((user: UserProfile) => {
handleSelectProfile(user);
setSelectedIds((current) => handleIdSelection(current, user));
}, [handleSelectProfile]);
const searchUsers = useCallback(async (searchTerm: string) => {

View file

@ -224,13 +224,22 @@ function IntegrationSelector(
}
}, [isMultiselect, dataSource, handleSelect]);
const handleRemoveOption = useCallback((item: Channel | DialogOption) => {
const handleRemoveOption = useCallback((item: Channel | DialogOption | UserProfile) => {
const itemKey = extractItemKey(dataSource, item);
setMultiselectSelected((current) => {
const multiselectSelectedItems = {...current};
delete multiselectSelectedItems[itemKey];
return multiselectSelectedItems;
});
if (dataSource === ViewConstants.DATA_SOURCE_USERS) {
setSelectedIds((current) => {
const selectedIdItems = {...current};
delete selectedIdItems[itemKey];
return selectedIdItems;
});
} else {
setMultiselectSelected((current) => {
const multiselectSelectedItems = {...current};
delete multiselectSelectedItems[itemKey];
return multiselectSelectedItems;
});
}
}, [dataSource]);
const getChannels = useCallback(debounce(async () => {
@ -514,6 +523,7 @@ function IntegrationSelector(
term={term}
tutorialWatched={true}
handleSelectProfile={handleSelectProfile}
selectedIds={selectedIds as {[id: string]: UserProfile}}
/>
);
default: