user-mapping-package/src/components/Lists/MappedUserList.js

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

import { useState, useEffect } from 'react';
import { List, Button, LoadPanel } from 'devextreme-react';
import "devextreme/dist/css/dx.light.css";

const MappedUserList = ({ mappedUsers = [], setMappedUsers, isFetching }) => {
  const [selectedMappedUsers, setSelectedMappedUsers] = useState([]);
  const [isSelectingAll, setIsSelectingAll] = useState(false);

  useEffect(() => {
    setSelectedMappedUsers([]);
  }, [mappedUsers]);

  const handleSelectionChange = (e) => {
    const selectedKeys = e.component.option('selectedItemKeys');
    if (selectedKeys.length === mappedUsers.length && selectedKeys.length > 0) {
      setIsSelectingAll(true);
      setTimeout(() => setIsSelectingAll(false), 500); 
    }
    setSelectedMappedUsers(selectedKeys);
  };

  const handleItemDeleting = (e) => {
    setMappedUsers(mappedUsers.filter(user => user.Id !== e.itemData.Id));
  };

  const handleRemoveSelected = () => {
    console.log("Before removing - Selected Mapped Users:", selectedMappedUsers);
    const newMappedUsers = mappedUsers.filter(user => !selectedMappedUsers.includes(user.Id));
    setMappedUsers(newMappedUsers);
    setSelectedMappedUsers([]);
    console.log("After removing - Selected Mapped Users:", []);
  };

  return (
    <div className="mappeduserlist w-1/2 p-4" style={{ position: 'relative' }}>
      <LoadPanel
        visible={isFetching || isSelectingAll}
        shading={false}
        position={{ of: '.mappeduserlist' }}
        showPane={true}
        container=".mappeduserlist"
      />
      <div className="mapuserheaderlist">
        <h3 className="text-lg font-semibold">Assigned User Count ({mappedUsers?.length || 0})</h3>
        <Button
          text="Remove Selected"
          type="danger"
          onClick={handleRemoveSelected}
          disabled={selectedMappedUsers.length === 0 || isFetching }
        />
      </div>
      <List
        dataSource={mappedUsers || []}
        displayExpr="NT_UserName"
        keyExpr="Id"
        searchEnabled={true}
        searchExpr={["Name", "NT_UserName", "EmpId", "EmailId"]}
        height={450}
        selectionMode="all"
        showSelectionControls={true}
        selectAllMode="allPages"
        onSelectionChanged={handleSelectionChange}
        onItemDeleting={handleItemDeleting}
        selectedItemKeys={selectedMappedUsers}
        pageLoadMode="scrollBottom"
      />
    </div>
  );
};

export default MappedUserList;