user-mapping-package/src/UserMapping.js

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

import { useState, useEffect } from 'react';
import axios from 'axios';
import { jwtDecode } from "jwt-decode";
import CustomerDropdown from './components/Dropdowns/CustomerDropdown.js';
import ProjectDropdown from './components/Dropdowns/ProjectDropdown.js';
import SubclientDropdown from './components/Dropdowns/SubclientDropdown.js';
import RoleDropdown from './components/Dropdowns/RoleDropdown.js';
import TotalUserList from './components/Lists/TotalUserList.js';
import MappedUserList from './components/Lists/MappedUserList.js';
import FetchButton from './components/Buttons/FetchButton.js';
import ExcelExportButton from './components/Buttons/ExcelExportButton.js';
import SubmitButton from './components/Buttons/SubmitButton.js';
import CancelButton from './components/Buttons/CancelButton.js';
import SnackbarComponent from './components/SnackbarComponent.js';
import "devextreme/dist/css/dx.light.css";
import '../src/CSS/Usermapping.css';

const UserMapping = ({ orgId, appId, projectId, customerId, subclientId, accessToken, IamBaseUrl, KnolBaseUrl, CustomerBaseUrl }) => {
  const [customers, setCustomers] = useState([]);
  const [projects, setProjects] = useState([]);
  const [subclients, setSubclients] = useState([]);
  const [roles, setRoles] = useState([]);
  const [users, setUsers] = useState([]);
  const [mappedUsers, setMappedUsers] = useState([]);
  const [selectedCustomerId, setSelectedCustomerId] = useState(customerId || null);
  const [selectedProjectId, setSelectedProjectId] = useState(projectId || null);
  const [selectedSubclientId, setSelectedSubclientId] = useState(subclientId || null);
  const [selectedRoleId, setSelectedRoleId] = useState(null);
  const [isFetching, setIsFetching] = useState(false);
  const [toastConfig, setToastConfig] = useState({
    open: false,
    message: '',
    severity: 'info',
  });

  const showSubclient = appId === "37fa0500-335d-46bd-b079-4546ce9a7532";

  // Fetch Customers
  useEffect(() => {
    const fetchCustomers = async () => {
      try {
        const response = await axios.get(
          `${CustomerBaseUrl}CustomerProjects/GetCustomerProjects?OrgId=1&CustomerId=0&DataModelId=0&ProjectId=0`,
          { headers: { Authorization: `Bearer ${accessToken}` } }
        );
        setCustomers(response.data);
      } catch (error) {
        console.error("Error fetching customers:", error);
      }
    };
    fetchCustomers();
  }, [orgId, accessToken, CustomerBaseUrl]);

  // Fetch Projects
  useEffect(() => {
    setSelectedProjectId(null);
    setSelectedSubclientId(null);
    if (!selectedCustomerId) {
      setProjects([]);
      return;
    }
    const fetchProjects = async () => {
      try {
        const response = await axios.get(
          `${CustomerBaseUrl}CustomerProjects/GetCustomerProjects?OrgId=1&CustomerId=${selectedCustomerId}&DataModelId=0&ProjectId=0`,
          { headers: { Authorization: `Bearer ${accessToken}` } }
        );
        const projectData = response.data[0]?.CustomerProjectDTOs?.filter(
          (project) => project.ProjectStatusId === 6
        ) || [];
        setProjects(projectData);
      } catch (error) {
        console.error("Error fetching projects:", error);
        setProjects([]);
      }
    };
    fetchProjects();
  }, [selectedCustomerId, orgId, accessToken, CustomerBaseUrl]);

  // Fetch Subclients
  useEffect(() => {
    setSelectedSubclientId(null);
    if (!selectedCustomerId || !selectedProjectId || !showSubclient) {
      setSubclients([]);
      return;
    }
    const fetchSubclients = async () => {
      try {
        const response = await axios.get(
          `${KnolBaseUrl}api/SubClient/GetKnolSubclients?CustomerId=${selectedCustomerId}&ProjectId=${selectedProjectId}`,
          { headers: { Authorization: `Bearer ${accessToken}` } }
        );
        const subclientData = response.data.Data || [];
        setSubclients(subclientData);
      } catch (error) {
        console.error("Error fetching subclients:", error);
        setSubclients([]);
      }
    };
    fetchSubclients();
  }, [selectedCustomerId, selectedProjectId, showSubclient, accessToken, KnolBaseUrl]);

  // Fetch Roles
  useEffect(() => {
    const fetchRoles = async () => {
      try {
        const response = await axios.get(
          `${IamBaseUrl}api/IAM/GetRoleDetailsByAppId?AppId=${appId}&OrgId=${orgId}`,
          { headers: { Authorization: `Bearer ${accessToken}` } }
        );
        setRoles(response.data.Data || []);
      } catch (error) {
        console.error("Error fetching roles:", error);
      }
    };
    fetchRoles();
  }, [appId, orgId, accessToken, IamBaseUrl]);

  // Fetch Total Users
  const fetchTotalUsers = async () => {
    try {
      const response = await axios.get(
        `${IamBaseUrl}api/IAM/GetUserInfo`,
        { headers: { Authorization: `Bearer ${accessToken}` } }
      );
      setUsers(response.data.Data || []);
    } catch (error) {
      console.error("Error fetching total users:", error);
      setUsers([]);
    }
  };

  // Fetch Mapped Users from API
  const fetchMappedUsers = async () => {
    if (!selectedCustomerId || !selectedProjectId || !selectedRoleId) {
      setToastConfig({
        open: true,
        message: 'Please Select All dropdown Values.',
        severity: 'info',
      });
      return;
    }
    try {
      const subclientIdToUse = showSubclient ? selectedSubclientId : 0;
      const response = await axios.get(
        `${IamBaseUrl}api/User/GetUsersByRoleInCustomerProjectSubclientMapping?customerId=${selectedCustomerId}&projectId=${selectedProjectId}&appId=${appId}&orgId=${orgId}&roleId=${selectedRoleId}&subclientId=${subclientIdToUse}`,
        { headers: { Authorization: `Bearer ${accessToken}` } }
      );
      setMappedUsers(response.data.Data.UsersList || []);
    } catch (error) {
      console.error("Error fetching mapped users:", error);
      setMappedUsers([]);
    }
  };

  // Handle Fetch Button Click
  const handleFetch = async () => {
    setIsFetching(true);
    if (!selectedCustomerId || !selectedProjectId || !selectedRoleId) {
      setToastConfig({
        open: true,
        message: 'Please select all dropdown values',
        severity: 'info',
      });
      setIsFetching(false);
      return;
    }
    await Promise.all([fetchTotalUsers(), fetchMappedUsers()]);
    setIsFetching(false);
  };

  // Handle Adding Users from TotalUserList to MappedUserList
  const handleAddUsers = (selectedUsers) => {
    const mappedUserIds = new Set(mappedUsers.map(user => user.Id));
    const newUsers = selectedUsers.filter(user => !mappedUserIds.has(user.Id));
    setMappedUsers(prev => [...prev, ...newUsers]);
  };

  // Handle Submit Logic
  const handleSubmit = async () => {
    if (!selectedCustomerId || !selectedProjectId || !selectedRoleId) {
      setToastConfig({
        open: true,
        message: 'Please select all dropdown values',
        severity: 'info',
      });
      return;
    }

    const selectedCustomer = customers.find(c => c.CustomerId === selectedCustomerId);
    const selectedProject = projects.find(p => p.ProjectId === selectedProjectId);
    const selectedSubclient = subclients.find(s => s.SubclientId === selectedSubclientId);

    const userIds = mappedUsers.map(user => user.Id);
    const decoded = jwtDecode(accessToken);
    const loggedUserid = parseInt(decoded.UserId, 10);

    const payload = {
      orgId: orgId,
      appId: appId,
      customerId: selectedCustomerId,
      customerName: selectedCustomer?.FullName || "",
      projectId: selectedProjectId,
      projectName: selectedProject?.ProjectDisplayName || "",
      roleId: selectedRoleId || "",
      subClientId: showSubclient ? selectedSubclientId : 0,
      subClientName: showSubclient ? selectedSubclient?.SubclientName || "" : "",
      userIds: userIds,
      loggedUserid: loggedUserid,
    };

    try {
      const response = await axios.post(
        `${IamBaseUrl}api/User/SaveUserCustomerProjectSubclientMapping`,
        payload,
        { headers: { Authorization: `Bearer ${accessToken}` } }
      );
      if (response.data.Success) {
        setToastConfig({
          open: true,
          message: 'Mapping updated successfully.',
          severity: 'success',
        });
      } else {
        setToastConfig({
          open: true,
          message: response.data.Remarks || 'Error Mapping User.',
          severity: 'error',
        });
      }
    } catch (error) {
      console.error("Error submitting mapping:", error);
      setToastConfig({
        open: true,
        message: 'An error occurred while submitting.',
        severity: 'error',
      });
    }
  };

  // Handle Cancel Logic
  const handleCancel = () => {
    setCustomers([]);
    setProjects([]);
    setSubclients([]);
    setRoles([]);
    setUsers([]);
    setMappedUsers([]);
    setSelectedCustomerId(customerId || null);
    setSelectedProjectId(projectId || null);
    setSelectedSubclientId(subclientId || null);
    setSelectedRoleId(null);
    setIsFetching(false);
  };

  // Handle Toast Close
  const handleToastClose = () => {
    setToastConfig({ open: false, message: '', severity: 'info' });
  };

  return (
    <div className="container mx-auto p-6">
      <div className="usermappingflexpanel">
        <CustomerDropdown
          customers={customers}
          selectedCustomerId={selectedCustomerId}
          setSelectedCustomerId={setSelectedCustomerId}
          customerId={customerId}
        />
        <ProjectDropdown
          projects={projects}
          selectedProjectId={selectedProjectId}
          setSelectedProjectId={setSelectedProjectId}
          selectedCustomerId={selectedCustomerId}
          projectId={projectId}
        />
        <SubclientDropdown
          subclients={subclients}
          selectedSubclientId={selectedSubclientId}
          setSelectedSubclientId={setSelectedSubclientId}
          selectedProjectId={selectedProjectId}
          subclientId={subclientId}
          showSubclient={showSubclient}
        />
        <RoleDropdown
          roles={roles}
          selectedRoleId={selectedRoleId}
          setSelectedRoleId={setSelectedRoleId}
        />
        <div className='userbtnsection'>
          <FetchButton className="fetchbutton" onClick={handleFetch} />
          <ExcelExportButton />
        </div>
      </div>

      <div className="usermaplist">
        <TotalUserList users={users} onAddUsers={handleAddUsers} isFetching={isFetching} />
        <MappedUserList mappedUsers={mappedUsers} setMappedUsers={setMappedUsers} isFetching={isFetching} />
      </div>

      <div className='buttonsection'>
        <SubmitButton onClick={handleSubmit} />
        <CancelButton onClick={handleCancel} />
      </div>

      <SnackbarComponent
        open={toastConfig.open}
        message={toastConfig.message}
        severity={toastConfig.severity}
        duration={5000}
        onCloseCallback={handleToastClose}
      />
    </div>
  );
};

export default UserMapping;