How to use the blockstack.isUserSignedIn function in blockstack

render() {
    // If user is not signed in or hasn't made a signIn request, we will render the signInPage since Blockstack Gaia storage isn't available unless signed in.
    if (!isUserSignedIn() && !isSignInPending()) { return  }

    // If this.state.blogs is null, the component hasn't received the blogs from storage yet, so it will render a loading icon
    if (this.state.blogs === null) { return  }

    let blogLinks = this.mapBlogLinks();
    let blogsHead = this.state.isUserBlogs ? 'Your Blogs' : 'Recent Blogs';
    let feedComponents = this.mapFeeds.bind(this)();

    return blogLinks.length === 0 ? (
      <ul id="blogs">
        {
          this.state.isProfileBlogs ? (
            <h4>
              { `${this.props.user.firstName} hasn't written any blogs yet.` }
            </h4>
          ) : this.state.isUserBlogs ? (</ul>

renderHeader() {
    const { handleSignOut } = this.props;
    const { handleSignIn } = this.props;
    if (blockstack.isUserSignedIn()) {
      const userData = blockstack.loadUserData();
      console.log('userData', userData);

      const person = new blockstack.Person(userData.profile);
      console.log('person', person);
      return (
        <ul id="nav-mobile">
        <ul id="dropdown1">
          <li><a href="/export">Export All Data</a></li>
          <li></li>
          <li><a href="#">Sign out</a></li>
        </ul>
          <li><a data-activates="dropdown1" href="#!"><img id="avatar-image" src="{"><i>arrow_drop_down</i></a></li>
        </ul>
      );
    } else {

componentDidMount() {
    if (!isUserSignedIn()) this.props.history.push('/signin');
    if (Object.keys(this.props.blogs).length > 0) this.setStateToEdit();
  }

render() {
    const appName = decodeURIComponent(window.location.href.split('?')[1]);
    const { loading } = this.props;

    if(!loading) {
      return (
        <div>
        <header>
        

          {
            isUserSignedIn() ?
            <div>

            <h1>Grant <span>{appName}</span> Access to Your Graphite Account?</h1>
            <div style="{{maxWidth:">
            <div>
              <p>{appName} is requesting access to your account. By providing access, {appName} will be able to:</p>

              <ul>
                <li>Read your files</li>
                <li>Update your files</li>
              </ul>
            </div>
            <button style="{{borderRadius:">Approve</button>
            </div>
            </div> :
            <div></div></header></div>

export function isSignedIn() {
  const provider = JSON.parse(localStorage.getItem("authProvider"));
  if (provider === "uPort") {
    return true;
  } else {
    //Here we fall back and asume it's Blockstack since that was the original provider
    return isUserSignedIn();
  }
}

render() {
    return (
      <main>
        {!isUserSignedIn() ? (
          </main>

render() {

    return (
      <div>
      <div>
        <div>
          { !isUserSignedIn() ?
            
            : 
          }
        </div>
      </div>
      </div>
    );
  }

render () {

    const blockstack = window.location.search.search("blockstack") > -1;
    if (blockstack) {
      return (
        <div>
          {!isUserSignedIn() ?
            
            : }
          
        </div>)
    } else {
      return ;
    }
  }
}

componentDidMount() {
    if (isUserSignedIn()) this.props.history.push('/');
  }

const Router = props => (
  <div style="{{">
    {isUserSignedIn() &amp;&amp; <header>}
    {isUserSignedIn() &amp;&amp; }
    
  </header></div>
);