Piotr Glejzer staff commented 3 years ago

can you put all data prop or all component code?

Mirak' free commented 3 years ago

import React, { useState, useEffect, useRef } from 'react'; import { elementColumnNames } from "../TableColumns"; import { MDBDataTable } from 'mdbreact'; import { MDBIcon } from "mdbreact"; import { useAlert } from "react-alert"; import { Confirm } from "./Confirm"; import { ElementDetails } from "./ElementDetails"; import axios from "axios";

export const Material = () => {

const alert = useAlert();
const [elements, setElements] = useState([]);
const [error, setError] = useState(null);
const [refresh, setRefresh] = useState(0);

const detailsModal = useRef();
const confirmModal = useRef();
const editModal = useRef();

const getActions = (element) => {
    return (
        <div className="actions">
            <button className="btn btn-sm text-icon-button"
                onClick={() => detailsModal.current.details(element)}>
                <MDBIcon icon="search" size="lg" className="mr-2" />details
            </button>
            <button className="btn btn-sm" onClick={() => confirmModal.current.confirm(element)}>
                <MDBIcon far icon="trash-alt" size="lg" className="red-text" />
            </button>
            <button className="btn btn-sm" onClick={() => editModal.current.edit(element)}>
                <MDBIcon icon="pencil-alt" size="lg" className="green-text" />
            </button>
        </div>
    );
}

const columns = [
    {
        label: 'Id',
        field: 'elementId'
    },
    {
        label: 'Name',
        field: 'name',
        sort: 'asc'
    },
    {
        label: 'Category',
        field: 'category'
    },
    {
        label: 'Project',
        field: 'project'
    },
    {
        label: 'Actions',
        field: 'actions',
        sort: 'disabled'
    }
];

const rows = elements.map(element => ({
    elementId: element.elementId,
    name: element.name,
    category: element.categoryName,
    project: element.project.name,
    actions: getActions(element)
}));

const deleteElement = async (element) => {
    await axios.delete(`/api/elements/${element.elementId}`)
    .then(() => {
        confirmModal.current.toggleConfirm();
        setRefresh(refresh + 1);
        alert.success("Element deleted successfully!");
    })
    .catch(error => {
        confirmModal.current.toggleConfirm();
        alert.error(error.message);
    });
}

const data = {
    columns: columns,
    rows: rows
};

useEffect(() => {
    async function getElements() {
        await axios.get('/api/elements')
        .then(response => {
            setElements(response.data);
        })
        .catch(error => {
            setError(error);
        });
    }
    getElements();
}, [refresh]);

if (error) {
    return <p className="danger-color">{error.message}</p>
}
else {
    return (
        <div>
            <h1>Revit Material</h1>
            <p>List of physical material used in each project.</p>
            <MDBDataTable striped bordered responsive btn
                order={['name', 'asc']}
                data={data}
            />
            <Confirm ref={confirmModal}
                title="Confirm Delete"
                message="Do you really want to delete this element?"
                action={deleteElement}
            />
            <ElementDetails ref={detailsModal}
                title="Element Details"
                fields={elementColumnNames}
            />
        </div>
    );
}

}

Piotr Glejzer staff commented 3 years ago

Hmm, I tested with another API, and It doesn't work as you said before. I added the task to fix it.