Projectdotjsx

import { useEffect, useState } from "react";
import ProjectList from "./Partials/ProjectList";
import ProjectPartList from "./Partials/ProjectPartList";

export default function Project() {
    const [projects, setProjects] = useState(null);
    const [masterParts, setMasterParts] = useState(null);
    const [loading, setLoading] = useState(false);

    const fetchProject = async () => {
        setLoading(true);
        try {
            const res = await axios.get("/api/admin/project");
            const data = res.data.data;
            setProjects(data.projects);
            setMasterParts(data.master_parts);
            // console.log(data);
        } catch (error) {
            console.log(err);
        } finally {
            setLoading(false);
        }
    };

    const updateProjectList = (updatedProject) => {
        setProjects((prevPj) => {
            const index = prevPj.findIndex((pj) => pj.id == updatedProject.id);

            if (index !== -1) {
                const newProjects = [...prevPj];
                newProjects[index] = updatedProject;
                // console.log("Updated Projects:", newProjects);
                return newProjects;
            } else {
                return [...prevPj, updatedProject];
            }
        });
    };

    useEffect(() => {
        const fetchProject = async () => {
            setLoading(true);
            try {
                const res = await axios.get("/api/admin/project");
                const data = res.data.data;
                setProjects(data.projects);
                setMasterParts(data.master_parts);
                // console.log(data);
            } catch (error) {
                console.log(err);
            } finally {
                setLoading(false);
            }
        };

        fetchProject();
    }, []);

    useEffect(() => {
        console.log("Project: ", projects);
    }, [projects]);

    return (
        <div className="row">
            {/* Project List */}
            <ProjectList
                projects={projects}
                loading={loading}
                updateProjectList={updateProjectList}
            />
            <ProjectPartList projects={projects} loading={loading} />
        </div>
    );
}