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
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',
}
)
};
};