async fetch and data between stores

gistfile1.txt

// USER STORE: user.logIn(...args) will be called within AccessStore action

import { types } from 'mobx-state-tree';

const User = types.model(
  'User',
  {
    key: types.maybe(types.string),
    name: types.optional(types.string, ''),
    lastName: types.optional(types.string, ''),
    email: types.optional(types.string, ''),
    status: types.optional(types.string, ''),
    subscription: types.optional(types.number, 0),
    get fullName() {
      return `${this.name} ${this.lastName}`;
    }
  },
  {
    logIn(key, name, lastName, email, status, subscription) {
      this.key = key;
      this.name = name;
      this.lastName = lastName;
      this.email = email;
      this.status = status;
      this.subscription = subscription;
    },
    setKey(key) {
      if (key === undefined || key === null || key === '')
        throw new TypeError('Member Key must not be undefined, null or empty.');
      this.key = key;
    },
    setName(name) {
      if (name === undefined || name === null || name === '')
        throw new TypeError('Member Name must not be undefined, null or empty');
      this.name = name;
    },
    setLastName(lastName) {
      if (lastName === undefined || lastName === null || lastName === '')
        throw new TypeError(
          'Member Last Name must not be undefined, null or empty'
        );
      this.lastName = lastName;
    },
    setEmail(email) {
      if (email === undefined || email === null || email === '')
        throw new TypeError(
          'Member Email must not be undefined, null or empty'
        );
      this.email = email;
    },
    setStatus(status) {
      if (status === undefined || status === null || status === '')
        throw new TypeError(
          'Member Status must not be undefined, null or empty'
        );
      this.status = status;
    },
    setSubscription(subscription) {
      if (
        subscription === undefined ||
        subscription === null ||
        subscription === ''
      )
        throw new TypeError(
          'Member Subscription must not be undefined, null or empty'
        );
      this.subscription = subscription;
    }
  }
);

export default User;



// STORE THAT HANDLES ALL THE FORM PROCESSING OF THE REACT COMPONENT

import { types } from 'mobx-state-tree';
import axios from 'axios';
import { async } from '../utils/mobx-state-tree';

const AccessStore = types.model(
  'AccessStore',
  {
    registerEmail: types.optional(types.string, ''),
    registerName: types.optional(types.string, ''),
    registerLastName: types.optional(types.string, ''),
    registerPassword: types.optional(types.string, ''),
    registerPasswordConfirm: types.optional(types.string, ''),
    registerFeedback: types.optional(types.frozen, {}),
    registerWorkInProgress: types.optional(types.boolean, false),
    loginEmail: types.optional(types.string, ''),
    loginPassword: types.optional(types.string, ''),
    loginFeedback: types.optional(types.frozen, {}),
    loginWorkInProgress: types.optional(types.boolean, false),
    teamName: types.optional(types.string, ''),
    teamDescription: types.optional(types.string, ''),
    teamFeedback: types.optional(types.frozen, {}),
    teamWorkInProgress: types.optional(types.boolean, false)
  },
  {
    changeRegisterEmail(email) {
      this.registerEmail = email;
    },
    changeRegisterName(name) {
      this.registerName = name;
    },
    changeRegisterLastName(lastName) {
      this.registerLastName = lastName;
    },
    changeRegisterPassword(password) {
      this.registerPassword = password;
    },
    changeRegisterPasswordConfirm(passwordConfirm) {
      this.registerPasswordConfirm = passwordConfirm;
    },
    setRegisterFeedback(feedback) {
      this.registerFeedback = feedback;
    },
    setRegisterWorkInProgress(flag) {
      this.registerWorkInProgress = flag;
    },
    registerAccount() {
      return;
    },
    changeLoginEmail(email) {
      this.loginEmail = email;
    },
    changeLoginPassword(password) {
      this.loginPassword = password;
    },
    setLoginFeedback(feedback) {
      this.loginFeedback = feedback;
    },
    setLoginWorkInProgress(flag) {
      this.loginWorkInProgress = flag;
    },
    loginAccount: async(function*(user) {
      this.setLoginWorkInProgress(true);
      if (this.loginEmail === '' || this.loginPassword === '') {
        this.setLoginFeedback({
          code: 401,
          type: 'Bad Request',
          message: `Login fields cannot be blank.`
        });
        this.setLoginWorkInProgress(false);
        return;
      }
      const {
        data: userObject,
        status: responseStatus,
        statusText
      } = yield axios
        .post('http://localhost:8080/api/auth/login', {
          email: this.loginEmail,
          password: this.loginPassword
        })
        .then(response => response)
        .catch(error => error.response);
      if (responseStatus === 401) {
        this.setLoginWorkInProgress(false);
        return this.setLoginFeedback({
          code: 401,
          type: 'Bad Request',
          message: `Invalid username or password.`
        });
      }
      const {
        _id: key,
        name,
        lastName,
        email,
        status,
        subscription
      } = userObject;
      user.logIn(key, name, lastName, email, status, subscription);
      this.setLoginWorkInProgress(false);
      return this.setLoginFeedback({
        code: responseStatus,
        type: 'Ok',
        message: statusText
      });
    }),
    changeTeamName(name) {
      this.teamName = name;
    },
    changeTeamDescription(description) {
      this.teamDescription = description;
    },
    setTeamFeedback(feedback) {
      this.teamFeedback = feedback;
    },
    setTeamWorkInProgress(flag) {
      this.teamWorkInProgress = flag;
    },
    createTeam() {
      return;
    }
  }
);

export default AccessStore;





// REACT COMPONENT
import React from 'react';
import { inject, observer } from 'mobx-react';

import Wrapper from '../wrapper';
import Box from '../box/box';
import Title from '../box/title';
import Description from '../box/description';
import Input from '../box/input';
import Button from '../box/button';
import Feedback from '../box/feedback';
import Footer from '../box/footer';

const AccessLogin = ({ user, access, ui }) =>
  <Wrapper>
    <Box>
      <Title>Sign In to #TeamUp!</Title>
      <Description>Access with your credentials</Description>
      <Input
        type="email"
        placeholder="Email"
        className={
          !Object.is(access.loginFeedback, undefined) &&
          access.loginFeedback.code === 401 &&
          access.loginEmail === ''
            ? 'error'
            : ''
        }
        onChange={event => access.changeLoginEmail(event.target.value)}
        onKeyPress={event => {
          if (event.charCode === 13) access.loginAccount();
        }}
      />
      <Input
        type="password"
        placeholder="Password"
        className={
          !Object.is(access.loginFeedback, undefined) &&
          access.loginFeedback.code === 401 &&
          access.loginPassword === ''
            ? 'error'
            : ''
        }
        onChange={event => access.changeLoginPassword(event.target.value)}
        onKeyPress={event => {
          if (event.charCode === 13) access.loginAccount();
        }}
      />
      <Button
        className={access.loginWorkInProgress ? 'working' : ''}
        onClick={() => {
          console.log(user);
          access.loginAccount(user);
        }}
      >
        Sign In
      </Button>
      {access.loginFeedback
        ? <Feedback>
            {access.loginFeedback.message}
          </Feedback>
        : null}
      <Footer>
        Want an account ? <span onClick={ui.showRegister}>Sign up</span>
      </Footer>
    </Box>
  </Wrapper>;

export default inject('ui', 'access', 'user')(observer(AccessLogin));