React Intermediate: Wiring up User Registration - [015]

In this episode we will begin with creating a writable scope for our store. We can use the default one from frontojs/connect as a reference.

Creating a Scope

In stores/scopes.js need to add the following.

// stores/scopes.jsconst writable = {  update(parameters, body) {    this.setIsLoading(true);    this.call({ parameters, body, type: 'patch' }, {       200: this.setSelected    });  },    create(parameters, body) {     this.setIsLoading(true);    this.call({ parameters, body, type: 'post' }, {       201: this.appendToCollection    });  },    delete(parameters) {     this.setIsLoading(true);    this.call({ parameters, type: 'delete' }, {      200: this.removeFromCollection    });  }}export default { writable }

We can now use this in our store. Let's go ahead and create the user store

Creating the User Store

We'll need to create a new file stores/user.js

import { Connect, mix } from 'fronto-connect'import scopes from './scopes'class User extends Connect {  namespace = 'v1'  resource = 'users'}mix(User, scopes.writable)export default User

We also need to make sure we export the User store in the stores/index.js

import Auth from './auth'import User from './user'export { Auth, User }

We can now use this store in our Sign Up form.

Using the User Store in the Sign Up Form

// pages/auth/sign_up/index.js// ...import { User } from 'stores'// inject the endpoint (from the main.js)@inject('endpoint') @observerclass SignUp extends React.Component {  constructor(props) {    super(props)    const { endpoint } = props    // pass the endpoint into the store    this.store = new User(endpoint)  }}

We can now use the this.store to make the call to the server in the submitForm function.

// pages/auth/sign_up/index.jssubmitForm = (e) => {  e.preventDefault()  const { router } = this.props  const body = {    user: {       email: this.email.value,      password: this.password.value,      password_confirmation: this.password_confirm.value    }  }  this.store.create(null, body, {     200: (body) => {      const { user } = body.data      router.navigate('root')    }  })}

You may be wondering where the router is coming from. It's actually coming from the pages/auth/index.js

Passing the Router from the RouteNode

This is the routeNode

import { createElement } from 'react'import { routeNode } from 'react-router5'import sign_up from './sign_up'import sign_in from './sign_in'const pages = {  sign_up, sign_in}export default routeNode('auth')((props) => {  const { route } = props    const page = route.name.split('.')[1] || 'collection'  // the router is passed as a prop into the SignUp component  return createElement(pages[page], {...props})})

That's it for this post! The Sign up form should now be working.