Part 4: From Shared Data to Shared Logic with DACs

The Context

In part 3, we saw how to save mutable files on Skynet using MySky. In this section, we'll see how to load that data from MySky, and how to use the Content Record DAC to tell other you made new content or interacted with existing content.

The Code

DACs provider Javascript libraries that simplify interacting with the web app from your code.
1. Install content-record-library by running yarn add @skynetlabs/content-record-library
2. Next we need to import the DAC. Look for where Step 4.2 code goes, and paste the following code.
1
import { ContentRecordDAC } from '@skynetlabs/content-record-library';
Copied!
3. Now, we'll create a contentRecord object, used to call methods against the Content Record DAC's API. For Step 4.3, paste the following code.
1
const contentRecord = new ContentRecordDAC();
Copied!
4. We need to tell MySky to load our DAC. This also informs it of the permissions our DAC will need for a successful login. Return to the code from Step 3.2 and uncomment the following code.
1
await mySky.loadDacs(contentRecord);
Copied!
5. Let's wire up our "Load Data" button, by grabbing data from MySky in the loadData method. Add the following code for Step 4.5.
1
// Use getJSON to load the user's information from SkyDB
2
const { data } = await mySky.getJSON(filePath);
3
4
// To use this elsewhere in our React app, save the data to the state.
5
if (data) {
6
setName(data.name);
7
setFileSkylink(data.skylinkUrl);
8
setWebPageSkylink(data.dirSkylink);
9
setWebPageSkylinkUrl(data.dirSkylinkUrl);
10
setUserColor(data.color);
11
console.log('User data loaded from SkyDB!');
12
} else {
13
console.error('There was a problem with getJSON');
14
}
Copied!
6. Here, we'll add logic for saving edited content to MySky without re-uploading our image and directory. Then, we'll call the Content Record DAC and have it record that we "interacted" with this skylink. This will occur when the "Save Data and Record Update Action" button is pressed, triggering the handleSaveAndRecord method. Add the following code at Step 4.6.
1
console.log('Saving user data to MySky');
2
3
const jsonData = {
4
name,
5
skylinkUrl: fileSkylink,
6
dirSkylink: webPageSkylink,
7
dirSkylinkUrl: webPageSkylinkUrl,
8
color: userColor,
9
};
10
11
try {
12
// write data with MySky
13
await mySky.setJSON(filePath, jsonData);
14
15
// Tell contentRecord we updated the color
16
await contentRecord.recordInteraction({
17
skylink: webPageSkylink,
18
metadata: { action: 'updatedColorOf' },
19
});
20
} catch (error) {
21
console.log(`error with setJSON: ${error.message}`);
22
}
Copied!
7. Returning to our logic from before, we want to tell the Content Record DAC that we've created a new certificate when we upload a webpage. Add the following code for Step 4.7.
1
try {
2
await contentRecord.recordNewContent({
3
skylink: jsonData.dirSkylink,
4
});
5
} catch (error) {
6
console.log(`error with CR DAC: ${error.message}`);
7
}
Copied!
8. Test it out! Now the user can update the color of the halo which is read from our MySky data! You can also use the Content Record Viewer tool to see your content record.
Last modified 1mo ago
Copy link