Reconmap/web-client

import { Flex, Spacer } from '@chakra-ui/react';
import RestrictedComponent from 'components/logic/RestrictedComponent';
import CreateButton from 'components/ui/buttons/Create';
import VulnerabilityFilters from 'components/vulnerabilities/Filters';
import VulnerabilityTableModel from 'components/vulnerabilities/VulnerabilityTableModel';
import { useCallback, useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import secureApiFetch from 'services/api';
import VulnerabilitiesTable from '../vulnerabilities/VulnerabilitiesTable';

const ProjectVulnerabilities = ({ project }) => {
    const [tableModel, setTableModel] = useState(new VulnerabilityTableModel())

    const navigate = useNavigate();

    const fetchVulnerabilities = useCallback(() => {
        const queryParams = new URLSearchParams();
        queryParams.set('projectId', project.id);
        queryParams.set('isTemplate', false);
        queryParams.set('orderColumn', tableModel.sortBy.column);
        queryParams.set('orderDirection', tableModel.sortBy.order);
        Object.keys(tableModel.filters)
            .forEach(key => tableModel.filters[key] !== null && tableModel.filters[key].length !== 0 && queryParams.append(key, tableModel.filters[key]));
        const url = `/vulnerabilities?${queryParams.toString()}`;
        secureApiFetch(url, { method: 'GET' })
            .then(resp => resp.json())
            .then(data => {
                setTableModel(tableModel => ({ ...tableModel, vulnerabilities: data }));
            })
    }, [tableModel.filters, tableModel.sortBy, project])

    const handleCreateVulnerability = () => {
        navigate(`/vulnerabilities/create?projectId=${project.id}`)
    }

    useEffect(() => {
        fetchVulnerabilities();
    }, [fetchVulnerabilities, tableModel.filters]);

    return <section>
        <Flex>
            <VulnerabilityFilters tableModel={tableModel} tableModelSetter={setTableModel} showProjectFilter={false} />
            <Spacer />
            {!project.archived &&
                <RestrictedComponent roles={['administrator', 'superuser', 'user']}>
                    <CreateButton onClick={handleCreateVulnerability}>Add new vulnerability</CreateButton>
                </RestrictedComponent>
            }
        </Flex>
        <VulnerabilitiesTable tableModel={tableModel} tableModelSetter={setTableModel} reloadCallback={fetchVulnerabilities} showProjectColumn={false} showSelection={false} />
    </section >
}

export default ProjectVulnerabilities;