Saving Changes

In order to save changes made to our notes we'll create a function that can be called on different types of changes. We'll first use this function to save our note position, and later, we'll use the same function to save changes to the note body.

Keeping all that in mind, we'll make this function as dynamic and as unopinionated as possible.

saveData method

This function will be responsible for taking a key and a value and passing them as the payload to our backend.

const saveData = async (key, value) => {
    const payload = { [key]: JSON.stringify(value) };
    try {
        await db.notes.update(note.$id, payload);
    } catch (error) {
        console.error(error);
    }
};

In order to perform our first changes we'll call the saveData method on mouse up, in order to save the new card position. Pass in the following to the function:

• key: "position"
• value: newPositon

    const mouseUp = async () => {
        document.removeEventListener("mousemove", mouseMove);
        document.removeEventListener("mouseup", mouseUp);
 
        const newPosition = setNewOffset(cardRef.current); //{x,y}
        saveData("position", newPosition);
    };