Meteor-React-Ionic Mobile App Part 4.1: Users and Settings

5 min readAug 2, 2015

In order to keep these as modular and lightweight as possible, I’m going to build this off of the basic template, and only build iteratively when it’s absolutely necessary. This is one of those cases where it makes sense to break it into two parts. In this parts, we’ll focus more on the UI. In the next one, we’ll focus more functionality.

You can find the related article for the basic template here, or if you just want to clone the repo and move forward, you can find the repo here. This should take 20 minutes if you already have the basic template.

We’re going to use concepts from Part 2: Passing in Data and Part 3: Tabs and Modals to make this page. Primarily, we will pass in data from Meteor.user() for the accounts data and we will use modals to show additional details for each of the settings items in the list.

Your app should eventually look like the demo to the left. The goal is to have a settings page that looks like the settings page of almost every app, with a user profile image, login/out buttons, and a few settings that trigger modals.

NOTE: Be aware that if you clone the repo, there are a few quirks with the meteoric:ionic-sass package that will crash the app the first time you run it. All you have to do to solve this is kill the process and re-run Meteor.

We’re going to use Meteor’s built-in accounts system accounts-password to create a new user and allow someone to sign in and out.

Step 1

First, we need to add the accounts-password package:

$ meteor add accounts-password

Now you have an entire accounts system! Gotta love Meteor.

Step 2

The next step is to create a dummy account. We’re going to give this user a username, a photo, and a password. The first thing we need to do is check to make sure we haven’t already created this user. If we don’t find any users, we’re going to create one.

In server.jsx, add the following code:

if (Meteor.users.find().count() === 0) {
  Accounts.createUser({
    username: "samcorcos",
    password: "password",
    profile: {
      image: "http://i.imgur.com/NqyBZSp.gif"
    }
  })
}

Now that we have a dummy user, we need to log him in. You can do this with Meteor.loginWithPassword(). Run the following code in your browser console:

Meteor.loginWithPassword("samcorcos", "password")

Step 3

Now that we have our dummy user, let’s build out the user interface. In Settings.jsx, we’re going to create two new components: Profile and SettingsList. Profile will contain all the information for the current user and SettingsList will contain the app-specific settings.

First, let’s build out Profile. In Settings.jsx, add the following code:

Profile = React.createClass({
  render() {
    return (
      <div className="profile-wrapper">
        ...
      </div>
    )
  }
})

Now we need to set up the ReactMeteorData mixin to allow us to receive user data. If you want to dig a little deeper into how this works, check out Part 2: Passing in Data for more detail.

We’re going to add the following code to our Profile component above our render() function:

...
mixins: [ReactMeteorData],
getMeteorData() {
  return {
    user: Meteor.user(),
    userLoading: Meteor.loggingIn()
  }
},
...

This gives us access to our user through this.data.user. It also gives us the option to check if the user is logged in before we do anything with the user’s profile. Anyone who has used iron:router would recognize this functionality as something similar to waitOn.

Now, go ahead and add the following code to your Profile component in Settings.jsx, which will first test to see if the user is being loaded, then check to see if there is a user at all, then finally show the user data if the user exists and has loaded:

render() {
  if (this.data.userLoading) {
    return <AppLoading />
  }    
  if (!this.data.user) {
    return <h2>Please Log in.</h2>
  }
  return (
    <div className="profile-wrapper">
      <div className="image-wrapper">
        <img src={this.data.user.profile.image} />
      </div>
      <div className="login-wrapper">
        Logout
      </div> 
    </div>
  )
}

We’re first checking to make sure the user is logged in. If not, show the AppLoading component. If the user is logged in, show the settings page.

NOTE: The information in login-wrapper are currently placeholders. We’re going to have to use state to get these to do what we want.

Then we should add the following to styles.scss to make everything look pretty:

// We want the profile section to take up 40% of the view height.
.profile-wrapper {
  height: 40vh;
  // We want our image to be centered.
  .image-wrapper {
    height: 35vh;
    display: flex;
    justify-content: center;
    align-items: center;
    // We want our image to be circular with a gray border.
    img {
      border: solid 1px #ccc;
      border-radius: 50%;
      height: 150px;
      width: 150px;
    }
  }
  // We want our login buttons to be centered.
  .login-wrapper {
    height: 5vh;
    display: flex;
    justify-content: center;
  }
}

Step 4

Now we’re going to build the SettingsList component. This one is much simpler since we are going to get almost all of it from Ionic. We’re going to create three settings items in a list. I prefer to keep the settings in props, so we will create three settings in props and a basic render function to start.

In Settings.jsx add the following code:

SettingsList = React.createClass({
  getDefaultProps() {
    return {
      settings: ["Setting 1", "Setting 2", "Setting 3"]
    }
  },
  render() {
    return (
      <div className="list">
        ...
      </div>
    )
  }
})

The next step is to expand the html code within the render() function to include Ionic items associated with each of the props. Add the following code to your SettingsList component:

...
render() {
  let list = this.props.settings.map((setting) => {
    return (
      <div className="item" key={setting}>
        <h2><a>{setting}</a></h2>
      </div>
    )
  })
  return (
    <div className="list">
      {list}
    </div>
  )
}
...

The last thing to do to get all this to render is to change your Settings component to render the two components we just created:

...
render() {
  return (
    <div>
      <Profile />
      <SettingsList />
    </div>
  )
}
...

This gives you the basic view. From here can start connecting things to make this settings page completely functional!

Step 5

To connect the functionality, check out the next article.

Sam Corcos is the lead developer and co-founder of Sightline Maps, the most intuitive platform for 3D printing topographical maps, as well as LearnPhoenix.io, an advanced tutorial site for building scaleable production apps with Phoenix and React.