Code example

import React, { useEffect, useState } from 'react';
import {
    getGroupManagers,
    getPositions,
    getSeniority,
    getStatusLevel,
    getTechStack,
} from "actions/employee";
import { TreeSelect } from "antd";

export function BenchFilters({
    closeForm,
    setActiveBenchFilters,
    activeUnitsFilters,
    setActiveUnitsFilters,
    setExtraFilters,
    units,
    activeBenchFilters
}) {
    const [selectedSkills, setSelectedSkills] = useState(undefined);
    const [selectedGroupManagers, setSelectedGroupManagers] = useState([]);
    const [selectedPositions, setSelectedPositions] = useState([]);
    const [selectedSeniority, setSelectedSeniority] = useState([]);
    const [selectedStatus, setSelectedStatus] = useState([]);

    const [groupManagers, setGroupManagers] = useState([]);
    const [positions, setPositions] = useState([]);
    const [techSkills, setTechSkills] = useState([]);
    const [seniority, setSeniority] = useState([]);
    const [status, setStatus] = useState([]);

    useEffect(() => {
        getGroupManagers().then((managersList) => {
            setGroupManagers(
                managersList.map((manager) => {
                    return {
                        value: `${manager.profileId}`,
                        label: `${manager.firstNameEng} ${manager.lastNameEng}`,
                        russian: `${manager.firstName} ${manager.lastName}`,
                        dept: manager.dept
                    };
                })
            )
        }
        );

        getPositions().then((positionsList) => {
            setPositions(
                positionsList.results.map((position) => {
                    return {
                        value: position.name,
                        label: position.name,
                    };
                })
            )
        }
        );

        getTechStack().then((techList) =>
            setTechSkills(
                techList.map((tech) => {
                    return { value: tech.name, label: tech.name };
                })
            )
        );

        getSeniority().then((seniorityList) =>
            setSeniority(
                seniorityList.results.map((seniority) => {
                    return {
                        value: seniority.name,
                        label: seniority.name,
                    };
                })
            )
        );

        getStatusLevel().then((statusList) => {
            setStatus(
                statusList.results.map((seniority) => {
                    return {
                        value: seniority.name,
                        label: seniority.name,
                    };
                })
            )
        }
        );
    }, []);

    useEffect(() => {

        if (JSON.parse(localStorage.getItem('selectedGroupManager')) != null) {
            setSelectedGroupManagers(JSON.parse(localStorage.getItem('selectedGroupManager')))
        }
        if (JSON.parse(localStorage.getItem('selectedPositions')) != null) {
            setSelectedPositions(JSON.parse(localStorage.getItem('selectedPositions')))
        }
        if (JSON.parse(localStorage.getItem('selectedSeniority')) != null) {
            setSelectedSeniority(JSON.parse(localStorage.getItem('selectedSeniority')))
        }
        if (JSON.parse(localStorage.getItem('selectedSkills')) != null) {
            setSelectedSkills(JSON.parse(localStorage.getItem('selectedSkills')))
        }

    }, [])

    useEffect(() => {
        let managers = []
        getGroupManagers().then((managersList) => {
            if (activeUnitsFilters.length > 0) {
                activeUnitsFilters.forEach(element => {
                    managers.push(managersList.filter(manager => manager.dept.includes(element)))
                });
                managers = managers.flat(Infinity)
                setGroupManagers(
                    managers.map((manager) => {
                        return {
                            value: `${manager.profileId}`,
                            label: `${manager.firstNameEng} ${manager.lastNameEng}`,
                            russian: `${manager.firstName} ${manager.lastName}`,
                            dept: manager.dept
                        };
                    })
                )
            } else {
                setGroupManagers(
                    managersList.map((manager) => {
                        return {
                            value: `${manager.profileId}`,
                            label: `${manager.firstNameEng} ${manager.lastNameEng}`,
                            russian: `${manager.firstName} ${manager.lastName}`,
                            dept: manager.dept
                        };
                    })
                )
            }
        })
    }, [activeUnitsFilters])


    const filters = () => {

        const filtersArr = []
        if (selectedSkills) {
            const skills = []
            selectedSkills.map(el => skills.push(el))
            filtersArr.push(`&skills=${skills}`)
        }
        if (selectedGroupManagers && selectedGroupManagers.length) filtersArr.push(`&manager=${selectedGroupManagers}`);
        if (selectedSeniority && selectedSeniority.length) filtersArr.push(`&seniority=${selectedSeniority}`);
        if (selectedPositions && selectedPositions.length) filtersArr.push(`&position=${selectedPositions}`);
        if (selectedStatus && selectedStatus.length) setActiveBenchFilters(selectedStatus)
        setExtraFilters(filtersArr)
        closeForm()
    }

    return (
        <>
            <div className={"blur-background"} />
            <article className="general-form project-form">
                <span className="close" onClick={(e) => closeForm(e)} />
                <form className="specific-form add-project" autoComplete="off">
                    <h3>Filter</h3>
                    <label htmlFor="unit">
                        <p>Unit</p>
                        <TreeSelect
                            treeCheckable
                            showSearch
                            allowClear
                            multiple
                            size="large"
                            placeholder="Select unit..."
                            className="unit-select select bench-filter-select"
                            dropdownStyle={{ maxHeight: 900, overflow: 'auto' }}
                            showCheckedStrategy={TreeSelect.SHOW_PARENT}
                            treeData={units}
                            value={activeUnitsFilters}
                            onChange={(value) => {
                                localStorage.setItem('employeeUnitFilter', value);
                                setActiveUnitsFilters(value);
                            }}
                        />
                    </label>
                    <label htmlFor="manager">
                        <p>Manager</p>
                        <TreeSelect
                            treeCheckable
                            showSearch
                            allowClear
                            multiple
                            size="large"
                            placeholder="Select manager..."
                            className="unit-select select bench-filter-select"
                            dropdownStyle={{ maxHeight: 900, overflow: 'auto' }}
                            treeData={groupManagers}
                            value={selectedGroupManagers}
                            onChange={(value) => {
                                setSelectedGroupManagers(value);
                                localStorage.setItem('selectedGroupManager', JSON.stringify(value))
                            }}
                            filterTreeNode={(search, item) => {
                                return item.label.toLowerCase().indexOf(search.toLowerCase()) >= 0 || item.russian.toLowerCase().indexOf(search.toLowerCase()) >= 0;
                            }}
                        />
                    </label>
                    <label htmlFor="position">
                        <p>Position</p>
                        <TreeSelect
                            treeCheckable
                            showSearch
                            allowClear
                            multiple
                            size="large"
                            placeholder="Select position..."
                            className="unit-select select bench-filter-select"
                            dropdownStyle={{ maxHeight: 900, overflow: 'auto' }}
                            treeData={positions}
                            value={selectedPositions}
                            onChange={(value) => {
                                setSelectedPositions(value);
                                localStorage.setItem('selectedPositions', JSON.stringify(value))
                            }}
                        />
                    </label>
                    <label htmlFor="techSkills">
                        <p>Tech skills</p>
                        <TreeSelect
                            treeCheckable
                            showSearch
                            allowClear
                            multiple
                            size="large"
                            placeholder="Select skills..."
                            className="unit-select select bench-filter-select"
                            dropdownStyle={{ maxHeight: 900, overflow: 'auto' }}
                            treeData={techSkills}
                            value={selectedSkills}
                            onChange={(value) => {
                                setSelectedSkills(value);
                                localStorage.setItem('selectedSkills', JSON.stringify(value))
                            }}
                        />
                    </label>
                    <label htmlFor="seniority">
                        <p>Seniority</p>
                        <TreeSelect
                            treeCheckable
                            showSearch
                            allowClear
                            multiple
                            size="large"
                            placeholder="Select seniority..."
                            className="unit-select select bench-filter-select"
                            dropdownStyle={{ maxHeight: 900, overflow: 'auto' }}
                            treeData={seniority}
                            value={selectedSeniority}
                            onChange={(value) => {
                                setSelectedSeniority(value);
                                localStorage.setItem('selectedSeniority', JSON.stringify(value))
                            }}
                        />
                    </label>
                    <label htmlFor="status">
                        <p>Status</p>
                        <TreeSelect
                            treeCheckable
                            showSearch
                            allowClear
                            multiple
                            size="large"
                            placeholder="Select status..."
                            className="unit-select select bench-filter-select"
                            dropdownStyle={{ maxHeight: 900, overflow: 'auto' }}
                            treeData={status}
                            value={activeBenchFilters}
                            onChange={(value) => {
                                setActiveBenchFilters(value);
                            }}
                        />
                    </label>
                    <span>
                        <button
                            type="reset"
                            className="btn red submit"
                            onClick={() => {
                                filters()
                            }}
                        >
                            Save
                        </button>
                        <button
                            type="reset"
                            className="btn black reset"
                            onClick={closeForm}
                        >
                            Cancel
                        </button>
                    </span>
                </form>
            </article>
        </>
    );
}