import { useEffect } from 'react'
import AisleCreator from './aisleCreator/aisleCreator'
import AisleInstances from './Instances/aisleInstances'
import { useParams } from 'react-router-dom';
import { getAisleApi } from '../../../services/factoryBuilder/aisle/getAisleApi';
import { useAisleStore } from '../../../store/builder/useAisleStore';

function AislesGroup() {
    const { projectId } = useParams();
    const { setAisles } = useAisleStore();

    useEffect(() => {
        if (projectId) {
            getAisleApi(projectId).then((aisles) => {
                setAisles(aisles);
            }).catch((err) => {
                console.log(err);
            })
        }
    }, [projectId])

    return (

        <>

            <AisleCreator />


            <AisleInstances />

        </>

    )
}

export default AislesGroup