Adding object to nested array using firebase, nextjs

Question

I'm using nextjs, firebase to build my project, the project idea is a hybrid project management, the user is able to create a project with many boards and save tasks inside it: UI of the board

I want to save the board in this way: screen shot from Firebase

The code:

Here is how board array and project states looks:

    const [projectFields, setProjectFields] = useState({
    title: '',
    details: '',
    date: '',
});


    const [boardFields, setboardFields] = useState([
    {
        title: '',
        type: '',
        columns: [
            { name: "backlog" },
            { name: "In progress" },
            { name: "In review" }
        ]

    },
]);

sendProject function:

const sendProject = async () => {


    if (loading) return;
    setLoading(true);
    const docRef = await addDoc(collection(db, "projects"), {
        id: session.user.uid,
        projectDetails: projectFields,
        boards: boardFields,
        timestamp: serverTimestamp(),
    });


    setLoading(false);
    setProjectFields({
        title: '',
        details: '',
        date: '',
    })
    setboardFields({
        title: '',
        type: '',
        columns: [{}]

    })


};

sendTask function, which is update the "boards" in the doc in firebase wrongly:

    const sendTask = async () => {

    if (loading) return;
    setLoading(true);

    let object = {
        id: '1',
        priority: tasksFields.priority,
        title: tasksFields.title,
        date: tasksFields.date,
        details: tasksFields.details,
        chat: '0',
        attachment: '0'
    }


    const taskRef = doc(db, "projects", projectId ?? "1");
    const newBoards = [...project.boards];


    newBoards[boardIndex] = {

        ...newBoards[boardIndex],
        columns: {
            ...newBoards[boardIndex].columns[columnIndex],
            tasks: [...newBoards[boardIndex].columns[columnIndex].tasks, object]
        },

    }

    await updateDoc(taskRef, {

        ...project,
        boards: newBoards,

    });

    
    setLoading(false);
    setTasksFields(
        {
            id: '',
            priority: '',
            title: '',
            details: '',
            date: '',
            attachment: '0',
        }
    )


};

here is the result after updating the doc: wrong database schema picture

I don't know how to update it correctly, any help please? thank you all

Answer 1

I found the solution 👇:

Updated sendTask function:

    const sendTask = async () => {


    if (loading) return;
    setLoading(true);

    let object = {
        id: '1',
        priority: tasksFields.priority,
        title: tasksFields.title,
        date: tasksFields.date,
        details: tasksFields.details,
        chat: '0',
        attachment: '0'
    }



    const taskRef = doc(db, "projects", projectId ?? "1");
    
    const newBoard = {...project.boards};
    const newColumn = [...project.boards[boardIndex].columns];


    newColumn[columnIndex] = {
            ...newColumn[columnIndex],
            tasks: [...newColumn[columnIndex].tasks, object]
    
    };

    newBoard[boardIndex] = {...newBoard[boardIndex], columns: newColumn};



    await updateDoc(taskRef, {

        ...project,
        boards: newBoard,

    });


    setLoading(false);
    setTasksFields(
        {
            id: '',
            priority: '',
            title: '',
            details: '',
            date: '',
            attachment: '0',
        }
    )

};




};