Headless WordPress: Updating User Settings

When creating headless WordPress applications with user profiles or settings, we need to provide them a way to edit the same. In the previous tutorial we have learned how to login in our app.

We will build on top of the code that we did in the previous tutorial, so if you have not checked that one yet, please do.

We will now focus on the Dashboard component and change it a bit by adding tabs. First tab will be to view the profile and the second one will be for Settings.

Adding Tabs using TabPanel Gutenberg Component

TabPanel is a Gutenberg component that renders tabs and also renders the component attached to the selected tab.

Open the Dashboard.js inside of src/components and start making the following changes.

We are importing TabPanel from the Gutenberg components and we are also defining two new methods: setCurrentUser and renderTab. We are also importing the Settings component (not yet created) that will be used for the settings tab.

The method setCurrentUser is used to set the user to the state of this component. This method will be passed to Settings so when we make the changes, we can also update the user here.

The second method renderTab is receiving the tab to render. Then we check if that tab exists. If we don’t provide a tab, we will show the profile tab.

Defining Tabs and Profile Component

We are defining tabs inside of the component so that we can access them inside of the method renderTabs. We are also creating the component Profile that is used to show the information about the current user.

For the Dashboard component to be complete, we also need to refactor the render method so that it does not render the same JSX as the Profile component. It will not use the TabPanel to render the tabs.

Rendering Tabs using TabPanel

We are passing all available tabs as the property tabs on TabPanel. As children of TabPanel we are receiving the tab and then use the method renderTab to render the correct tab.

Let’s now move on the Settings component.

Updating User Settings

First, create a folder src/components/dashboard and add the file Settings.js. This will now hold all our code for the Settings component.

We are defining the state of this component. It will contain the current user and also an empty object update. This object will contain all the data that we want to update and use it to create the request on our headless WordPress application.

The method getValue is used to get the value from the state. It will first take the default value from the user in the state. If we have then new value inside of update, then we will use that one instead. This way, we will always render the correct value in our inputs.

Inside of the render method, we are rendering a TextControl gutenberg component. For the sake of this tutorial, we are only showing the option to change the first name. You can then repeat that for other user information.

When there is a change in the value of our TextControl, we are updating the update object. We are setting a new object created by first spreading the current update object and then by spreading the newly creating update object, we are overriding the values from the current object.

In case you don’t understand, check this example.

// Can be our current state.
var state = { 
   update: { 
      first_name: 'Name', 
      last_name: 'Surname' 
   }
};

var update_spread = { 
   ...this.state.update, // 1.
   { first_name: 'New Name' } // 2.
};

// 1. First happens this: { first_name: 'Name', last_name: 'Surname' }
// 2. After second spread, it becomes this: 
// { first_name: 'New Name', last_name: 'Surname' }

So, now when we try to change something on a TextControl, it will update the update object inside of the state. The button to update the user will call the method updateUser.

Updating and setting the User

Let’s now see how to update the user.

We are defining the method updateUser and binding it to this so we can access the state inside of that method.

The method itself will get the token (that we passed when rendering the tab using ...props). Then we are using axios to create a POST request to the REST API endpoint /wp-json/wp/v2/users/me.

As data, we are just passing the update object from the state. Since we are mapping the data to update using the same keys as arguments in https://developer.wordpress.org/rest-api/reference/users/#update-a-user. If you were to use different keys, you’ll have to map them.

If the user was updated, we are using setCurrentUser method to update the user inside of the Dashboard component.

Code

You can get the code of the whole application here. Be sure to install the dependencies running npm install.

Conclusion

By controlling the state and passing it through various components, we can easily change the overall experience of the current user. Using the REST API and the token from JWT, we can easily update the user settings for the appropriate user.

Become a Sponsor