diff --git a/_browser/blockstack_storage.md b/_browser/blockstack_storage.md index 11b0425d..a9d2b61b 100644 --- a/_browser/blockstack_storage.md +++ b/_browser/blockstack_storage.md @@ -47,7 +47,8 @@ $ which npm If you don't find `npm` in your system, [install it](https://www.npmjs.com/get-npm). Finally, if you get stuck at any point while working on the tutorial, the completed [source code is available for -you](https://github.com/larrysalibra/publik) to check your work against. +you](https://github.com/yknl/publik) to check your work against. You can also +try out the [live build](https://publik.test-blockstack.com) of the app. ## Use npm to install Yeoman and the Blockstack App Generator @@ -163,31 +164,25 @@ Modify your authentication request to include the `publish_data` scope. 1. Open `src/components/App.jsx` file. -2. Locate the `handleSignIn` handler method. +2. Locate the `AppConfig` declaration near the beginning of the file. ```javascript - handleSignIn(e) { - e.preventDefault(); - redirectToSignIn(); - } + const appConfig = new AppConfig() ``` -2. Modify the method to this: +3. Change it to this: ```javascript - handleSignIn(e) { - e.preventDefault(); - const origin = window.location.origin - redirectToSignIn(origin, origin + '/manifest.json', ['store_write', 'publish_data']) - } + const appConfig = new AppConfig(scopes:['store_write', 'publish_data']) ``` By default, authentication requests include the `store_write` scope which - enables storage. This is what allows you to store information to Gaia. + enables storage. This is what allows you to store information to Gaia. Adding + the `publish_data` scope allows your app to share data between users. -3. Save your changes. -4. Go back to your app at `http://localhost:8080/`. -5. Log out and sign in again. +4. Save your changes. +5. Go back to your app at `http://localhost:8080/`. +6. Log out and sign in again. The authentication request now prompts the user for permission to **Publish data stored for the app**. @@ -197,10 +192,10 @@ Modify your authentication request to include the `publish_data` scope. ## Understand Gaia storage methods Once you authenticate a user with `store_write` and `publish_data`, you can -begin to manage data for your users. Blockstack JS provides two methods -`getFile()` and `putFile()` for interacting with Gaia storage. The storage -methods support all file types. This means you can store SQL, Markdown, JSON, or -even a custom format. +begin to manage data for your users. Blockstack JS provides two methods within +the `UserSession` class, `UserSession.getFile` and `UserSession.putFile` for +interacting with Gaia storage. The storage methods support all file types. +This means you can store markdown, JSON, or even a custom format. You can create a meaningful and complex data layer using these two methods. Before creating an application, consider fundamental data architecture and make @@ -250,29 +245,12 @@ or remove a grocery list; updating a list has no impact. ## Add support for user status submission and lookup -In this step, you add three `blockstack.js` methods that support posting of "statuses". These are the `putFile()`, `getFile()`, and `lookupProfile()` methods. +In this step, you add three `blockstack.js` methods that support posting of "statuses". +These are the `UserSession.putFile`, `UserSession.getFile`, and `lookupProfile` methods. 1. Open the `src/components/Profile.jsx` file. -2. Expand the `import from blockstack` statement with data methods. - - The `Person` object holds a Blockstack profile. Add `putFile`, `getFile`, - and `lookupProfile` after `Person`. - - When you are done, the import statement should look like the following: - - ```javascript - import { - isSignInPending, - loadUserData, - Person, - getFile, - putFile, - lookupProfile - } from 'blockstack'; - ``` - -3. Replace the `constructor()` initial state so that it holds the key properties required by the app. +2. Replace the initial state in the `constructor()` method so that it holds the key properties required by the app. This code constructs a Blockstack `Person` object to hold the profile. Your constructor should look like this: @@ -299,20 +277,20 @@ In this step, you add three `blockstack.js` methods that support posting of "sta ``` -4. Locate the `render()` method. -5. Modify the `render()` method to add a text input and submit button to the application. +3. Locate the `render()` method. +4. Modify the `render()` method to add a text input and submit button to the application. - The following code echos the `person.name` and `person.avatarURL` + The following code renders the `person.name` and `person.avatarURL` properties from the profile on the display: ```javascript render() { - const { handleSignOut } = this.props; + const { handleSignOut, userSession } = this.props; const { person } = this.state; const { username } = this.state; return ( - !isSignInPending() && person ? + !userSession.isSignInPending() && person ?