Meteor-React-Ionic Mobile App Part 6.3: Tinder Data

4 min readAug 21, 2015

In order to complete this, we’re going to need to pass in data, which we will do the old fashioned with with the ReactMeteorData mixin, though if you’re feeling adventurous, you can try using composable components for a more functional programming approach. Your app should eventually look like the demo below.

We’ve been keeping things modular, which means we’ve had to make a few compromises. In the last article we passed in our hardcoded data to our Card component through state. Unfortunately, we’re going to have undo all of that and use this.data instead of this.state.

For the sake of modularity, we will cover how to mark certain objects as “yes” or “no” and have them appear in a separate view. Once that’s done, you’ll have everything a Tinder clone needs short of chat functionality (which we will also cover in a later article)!

Step 1

The first step is to create some fake data. We’re going to gloss over this part because it’s covered more thoroughly here. First we need to create a new collection, which you will do within your /lib directory in a file called collection.jsx. Then add the mixin and the getMeteorData function to our new Home component.

Now that we have access to the collection, we need to create some fake data. Run the following to add Faker to your project. Keep in mind that Faker only works on the server. We’re also going to remove autopublish. We’re going to have to add publications and subscriptions, so autopublish does more harm than good at this point:

$ meteor add digilord:faker
$ meteor remove autopublish

We want our data structured accordingly to properly fill out the card:

{
  name,
  image,
  details
}

Within our /server directory in the file server.jsx and add the following to create 25 fake user profiles in the format above:

if (MyData.find().count() === 0) {
  _.each(_.range(25), function() {
    MyData.insert({
      name: faker.name.findName(),
      image: faker.image.people() + "?" + Random.hexString(24),
      details: faker.lorem.sentence()
    })
  })
}

Note that we’re adding a random hex string to the end of the image to make sure we get a unique image from the url for every user.

Step 2

Now we need to set up our publications and our subscriptions. In your server.jsx file, add the following code:

Meteor.publish("myData", function() {
  return MyData.find()
})

Then we need to subscribe to this in the client and handle for whether or not the subscription has loaded. If we do not do this, the app will crash because it tries to access this.data before the data has loaded. Change the following lines of code (described below the code):

getMeteorData() {
  let handle = Meteor.subscribe("myData")
  let data = MyData.find().fetch()
  return {
    loading: !handle.ready(),
    users: data
  }
},

Meteor.subscribe returns a handle that give you access to stop() and ready(). We are setting that to the variable handle and setting the data we receive from MyData (the 25 users) to the variable data. Then, within our return statement, we are setting users to either data or an empty array, depending on whether or not our subscription is ready (handle.ready()).

Then go ahead and delete the entire getInitialState function. We won’t need it anymore since we’re passing data through using this.data instead of this.state.

Then change your removeCard function to the following, which will remove the card from the database:

removeCard(_id) {
  MyData.remove(_id)
},

Within renderCards, change the following lines:

renderCards() {
  return this.data.users.map((card) => {
    return <Card
      key={card._id}
      card={card}
      remove={ () => this.removeCard(card._id)}
    />
  })
},

And finally change our render function to the following:

render() {
  if (this.data.loading) {
    return <h1>Loading</h1>
  }
  return <div>{this.renderCards()}</div>
}

Then we want to change our margin-bottom styling that pushes the cards up. It’s currently hardcoded at 71px, but we want it to be more adaptable. Let’s change it to:

...
cardStyle.marginBottom = "-" +
  (document.getElementsByClassName("card")[0].offsetHeight + 20) + 
  "px"
...

This gives us all the nodes with the “card” class, with which we take the first one (since they’re all the same) and find the height of the card and include the 20px padding between the cards.

And finally, we’ll change the content of the card to include the new data:

...
<div className="item item-body">
  <img className="full-image" src={this.props.card.image} />
</div>
<div className="item">
  <h2>{this.props.card.name}</h2>
  <p>{this.props.card.details}</p>
</div>
...

We’re done! The last thing to do is keep track of affirmative swipes and display them on a separate route.

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.

Meteor-React-Ionic Mobile App Part 6.3: Tinder Data

Step 1

Step 2

Additional

Written by Sam Corcos