Fix multiselect on users list integration selector (#6826)
* Moving selected ids to a parent * typing selectedIds for user
This commit is contained in:
parent
da5b877297
commit
655f55be20
2 changed files with 18 additions and 21 deletions
|
|
@ -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) => {
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
|
|
|
|||
Loading…
Reference in a new issue