The application tells you it will **Read your basic info**.
@ -177,7 +182,7 @@ Modify your authentication request to include the `publish_data` scope.
}
```
2. Modify the method to this:
3. Modify the method to this:
```javascript
handleSignIn(e) {
@ -190,14 +195,14 @@ Modify your authentication request to include the `publish_data` scope.
By default, authentication requests include the `store_write` scope which
enables storage. This is what allows you to store information to Gaia.
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**.
## Understand Gaia storage methods
@ -252,34 +257,37 @@ This design allows you to get only the files you need and avoid accidentally
overwriting all lists. Further, you’re only updating the index file when you add
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 `putFile()`, `getFile()`, and `lookupProfile()`
methods.
1. Open the `src/components/Profile.jsx` file.
1. Open the `src/components/Profile.jsx` file.
2. Expand the `import from blockstack` statement with data methods.
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:
When you are done, the import statement should look like the following:
```javascript
import {
isSignInPending,
loadUserData,
Person,
getFile,
putFile,
lookupProfile
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.
3. Replace the `constructor()` initial state 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:
This code constructs a Blockstack `Person` object to hold the profile. Your
constructor should look like this:
```javascript
constructor(props) {
@ -303,12 +311,12 @@ 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.
4. Locate the `render()` method.
5. 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`
properties from the profile on the display:
The following code echos the `person.name` and `person.avatarURL` properties
from the profile on the display:
```javascript
render() {
@ -367,14 +375,14 @@ In this step, you add three `blockstack.js` methods that support posting of "sta
}
```
This code allows the application to post statuses. It also displays the
user's Blockstack ID. To display this, your app must extract the ID from the
user profile data.
This code allows the application to post statuses. It also displays the
user's Blockstack ID. To display this, your app must extract the ID from the
user profile data.
6. Locate the `componentWillMount()` method.
7. Add the `username` property below the `person` property.
6) Locate the `componentWillMount()` method.
7) Add the `username` property below the `person` property.
You'll use the Blockstack `loadUserData()` method to access the `username`.
You'll use the Blockstack `loadUserData()` method to access the `username`.
```javascript
@ -426,37 +434,40 @@ In this step, you add three `blockstack.js` methods that support posting of "sta
9. Save the `Profile.jsk` file.
After the application compiles successfully, your application should appears as follows:
After the application compiles successfully, your application should appears
as follows:
10. Enter your status in the text box and press the **Submit** button.
At this point, nothing is blogged. In the next section you add code to display
the statuses back to the user as a blog entry.
At this point, nothing is blogged. In the next section you add code to
display the statuses back to the user as a blog entry.
## Fetch and display statuses
Update `Profile.jsx` again.
1. Go back to the `render()` method.
2. Locate the `<div className="new-status">` containing the text input and **Submit** button.
2. Locate the `<div className="new-status">` containing the text input and
**Submit** button.
3. Right after this opening `div` element, add this block.
```javascript
<divclassName="col-md-12 statuses">
{this.state.isLoading &&<span>Loading...</span>}
{this.state.statuses.map((status) => (
<divclassName="status"key={status.id}>
{status.text}
</div>
)
)}
<divclassName='col-md-12 statuses'>
{this.state.isLoading &&<span>Loading...</span>}
{this.state.statuses.map(status => (
<divclassName='status'key={status.id}>
{status.text}
</div>
))}
</div>
```
This loads existing state. Your code needs to fetch statuses on page load.
4. Add a new method called `fetchData()` after the `statuses.unshift(status)` section.
This loads existing state. Your code needs to fetch statuses on page load.
4. Add a new method called `fetchData()` after the `statuses.unshift(status)`
At this point, you have a basic micro-blogging app that users can use to post and
view statuses. However, there's no way to view other users' statuses. You'll add
that in the next section.
At this point, you have a basic micro-blogging app that users can use to post
and view statuses. However, there's no way to view other users' statuses. You'll
add that in the next section.
## Lookup user profiles
Let's now modify the `Profile.jsx` file to display profiles of other users. You'll
be using the `lookupProfile()` method that you added to the `import` statement
earlier. `lookupProfile()` takes a single parameter that is the Blockstack ID of
the profile and returns a profile object.
Let's now modify the `Profile.jsx` file to display profiles of other users.
You'll be using the `lookupProfile()` method that you added to the `import`
statement earlier. `lookupProfile()` takes a single parameter that is the
Blockstack ID of the profile and returns a profile object.
### Add a new route
Make some changes to the routing structure of your app so that users can view
other users' profiles by visiting `http://localhost:8080/other_user.id`
1. Make sure you are in the root of your `publik` project.
2. Install `react-router`:
@ -574,25 +583,29 @@ other users' profiles by visiting `http://localhost:8080/other_user.id`
4. Add an `import` to the file at the top:
```javascript
import {BrowserRouter} from 'react-router-dom'
import {BrowserRouter} from 'react-router-dom';
```
5. Change the `ReactDOM.render()` method in `src/index.js` to:
```javascript
ReactDOM.render((
<BrowserRouter>
<App/>
</BrowserRouter>
), document.getElementById('root'));
ReactDOM.render(
<BrowserRouter>
<App/>
</BrowserRouter>,
document.getElementById('root')
);
```
6. Save and close the `src/index.js` file.
7. Edit the `src/components/App.jsx` file.
8. Add the new route by importing the `Switch` and `Route` components from `react-router-dom`:
7. Edit the `src/components/App.jsx` file.
8. Add the new route by importing the `Switch` and `Route` components from
`react-router-dom`:
```javascript
import {Switch, Route} from 'react-router-dom'
import {Switch, Route} from 'react-router-dom';
```
9. Locate this line below in the `render()` method:
```javascript
@ -613,10 +626,10 @@ other users' profiles by visiting `http://localhost:8080/other_user.id`
</Switch>
```
This sets up a route and captures the route parameter the app will use as the profile lookup username.
11. Save and close the the `src/components/App.jsx` file.
This sets up a route and captures the route parameter the app will use as
the profile lookup username.
11. Save and close the `src/components/App.jsx` file.
### Add a rule to process URL paths with . (dot)
@ -624,10 +637,11 @@ You also need to add a rule to your webpack config so that you can properly
process URL paths that contain the `.` (dot) character for example,
`http://localhost:8080/other_user.id`
**NOTE**: In a production app, you must ensure the web server is configured to handle this.
**NOTE**: In a production app, you must ensure the web server is configured to
handle this.
1. Open `webpack.config.js` in the root project directory and locate the following line:
1. Open `webpack.config.js` in the root project directory and locate the
following line:
```javascript
historyApiFallback: true,
@ -647,7 +661,8 @@ process URL paths that contain the `.` (dot) character for example,
3. Save and close the `webpack.config.js` file.
4. Edit the `src/components/Profile.jsx` file.
5. Add a single method that determines if the app is viewing the local user's profile or another user's profile.
5. Add a single method that determines if the app is viewing the local user's
profile or another user's profile.
```javascript
isLocal() {
@ -655,7 +670,11 @@ process URL paths that contain the `.` (dot) character for example,
}
```
You use `isLocal()` to check if the user is viewing the local user profile or another user's profile. If it's the local user profile, the app runs the `getFile()` function you added in an earlier step. Otherwise, the app looks up the profile belonging to the `username` using the `lookupProfile()` method.
You use `isLocal()` to check if the user is viewing the local user profile
or another user's profile. If it's the local user profile, the app runs the
`getFile()` function you added in an earlier step. Otherwise, the app looks
up the profile belonging to the `username` using the `lookupProfile()`
method.
6. Modify the `fetchData()` method like so:
@ -694,36 +713,39 @@ process URL paths that contain the `.` (dot) character for example,
}
```
**NOTE**: For `https` deployments, the default Blockstack Core API endpoint for name
lookups should be changed to point to a core API served over`https`.
Otherwise, name lookups fail due to browsers blocking mixed content.
Refer to the [Blockstack.js
documentation](http://blockstack.github.io/blockstack.js/#getfile) for
details.
**NOTE**: For `https` deployments, the default Blockstack Core API endpoint
for name lookups should be changed to point to a core API served over
`https`. Otherwise, name lookups fail due to browsers blocking mixed
Finally, you must conditionally render the logout button, status input textbox, and submit button so they don't show up when viewing another user's profile.
Finally, you must conditionally render the logout button, status input
textbox, and submit button so they don't show up when viewing another user's
profile.
8. Replace the `render()` method with the following:
@ -800,15 +822,15 @@ process URL paths that contain the `.` (dot) character for example,
### Put it all together
1. Stop the running application by sending a CTL-C.
2. Restart the application so that the disabling of the `.` (dot) rule takes effect.
2. Restart the application so that the disabling of the `.` (dot) rule takes
effect.
```bash
npm start
```
3. Point your browser to `http://localhost:8080/your_blockstack.id` to see the final application.
3. Point your browser to `http://localhost:8080/your_blockstack.id` to see the
StephenBondor
6 years ago
Moxiegirl