We have an editor in place, but it doesn't save data to Firebase. It is also not equipped to load data from Firebase. In this chapter, we'll create Reframe components to store data. We'll then update the editor to load data from Firebase. We will also extend the editor functionality.
We have an editor in place, but it doesn't save data to Firebase. It is also not equipped to load data from Firebase. In this chapter, we'll create Reframe components to store data. We'll then update the editor to load data from Firebase.
Update Firebase Reframe components#
Saving a graphic via details page is technically an update event, since the graphic node already exists in Firebase. Updating a Firebase object includes making a call to the
update method with a node and keys to edit. Our graphic currently has two keys:
update function overwrites or creates new key-value pairs, ie if we pass
name to the update function, the existing
name will be overwritten. But if we pass a non-existent field like
fabric-json, a new key-value pair will be created.
We have so far dispatched an event before writing a handler. But we'll create the handler first in this case, because we don't have a UI yet:
update handler is similar to the
delete handler. We set the loading indicator and request to call the
:firebase/delete effect. The
:on-error events are dispatched in response to the SDK call. Notice how we pass the
new-graphic map as the
:on-success handler. This is required to update the
app-db when the Firebase update call is successful.
on-success handler, we take the freshly-saved graphic and update the value of
app-db. This is passed to the
editor component as
:firebase/update effect handler calls
update on the given
node and dispatches
on-error events respectively:
We need the
::updating-graphic? flag to show a loading indicator:
Connect editor to Reframe state#
editor component has two dependencies on the Reframe state:
1. it needs to save the current graphic to Firebase
2. it needs to render the already saved graphic to Canvas
To tackle this, we need to update the
app.pages.graphics.detail/page component and make this data available to the editor:
We made two changes to the
page component. We added a subscription to
updating-graphic? and passed in three extra props:
function to save the graphic (dispatches the
initial state of the graphic canvas. Notice the
:fabric-jsonkey - we don't have it yet, but we'll store the JSON representation of the canvas under this key.
We have passed all the required props to the editor. Let's now modify it with the ability to save data.
Saving Fabric canvas to Firebase#
fabric.Canvas ships with a
toJSON method. This method converts the canvas into a JS object which can be saved in a database and used to re-create the canvas later. We'll create a
toolbar component to house the save button. We'll also add the functionality to save the canvas as svg or png: