Check for an observable null value

store-observable-null.js

// This is the store
import fetch from 'node-fetch';
import { types } from 'mobx-state-tree';

const UserModel = types.model(
  'UserModel',
  {
    name: types.string,
    bio: types.maybe(types.string),
    avatar: types.string
  },
  {}
);

const GithubStore = types.model(
  'GithubStore',
  {
    searchName: types.string,
    user: types.maybe(types.map(UserModel)), // Object with all the user data that comes from the Github API Fetch
    repos: types.array(types.frozen), // Array of Repositories that comes from the Github API Fetch
    fetchingData: types.boolean
  },
  {
    changeUserToSearchFor(username) {
      this.searchName = username;
    },
    fetchFromGithub(endpoint) {
      return new Promise((resolve, reject) => {
        const url = `https://api.github.com${endpoint}?client_id=62b5dd81cbcb92f3cdf9&client_secret=1c41dfda0d56eb31b722049aa60d91eafeb6ebcf`;
        fetch(url).then(response => {
          response.json().then(result => {
            resolve(result);
          });
        });
      });
    },
    setFetchedData(user, repos) {
      const userModel = UserModel.create({
        name: user.name,
        bio: user.bio,
        avatar: user.avatar_url
      });
      this.user = userModel;
      this.repos = repos;
      this.fetchingData = false;
      console.log(this.userFullName);
    },
    searchForUser() {
      const store = this;
      if (
        !this.searchName ||
        (this.user && this.searchName === this.user.login)
      )
        return;
      this.fetchingData = true;
      Promise.all([
        this.fetchFromGithub(`/users/${this.searchName}`),
        this.fetchFromGithub(`/users/${this.searchName}/repos`)
      ]).then(function(result) {
        const [user, repos] = result;
        console.log('User Fetch Result: ', user);
        console.log('Repos Fetch Result: ', repos);
        store.setFetchedData(user, repos);
      });
    }
  }
);

export default GithubStore;

// -----------------------------------------

// This is the component that makes use of that property :)
import React from 'react';
import { inject, observer } from 'mobx-react';

import UserCard from '../user-card/user-card';
import RepoCard from '../repo-card/repo-card';
import LoadingCard from '../loading-card/loading-card';

import './stylesheets/repos-grid.scss';

const ReposGrid = ({ github }) => (
  <div id="ReposGrid">
    {github.fetchingData
      ? <div style={{ width: '100%' }}>
          <LoadingCard userPlaceholder><div className="content" /></LoadingCard>
          <LoadingCard repoPlaceholder><div className="content" /></LoadingCard>
        </div>
      : null}
    {!github.fetchingData && Object.is(github.user, null)
      ? <UserCard user={github.user} />
      : null}
    {!github.fetchingData &&
      github.repos.length !== 0 &&
      github.repos.map((repo, i) => <RepoCard key={i} repo={repo} />)}
  </div>
);

export default inject('github')(observer(ReposGrid));