Meteor-React-Ionic Mobile App Part 6.4: Tinder Interface

4 min readAug 21, 2015

The last thing we need for a fully functional Tinder interface is to set events on the left and right side of the screen, then display the affirmatively-swiped items on a new route. When you’ve finished this article, you’ll have a fully functional Tinder interface. I’ve tried to keep it as generalized and modular as possible, so additional features such as chat or user accounts are written about in different articles and can be added separately.

When you’re finished, it should look like the app to the left (or if you want to play with it live, it’s deployed here with a few modifications).

A lot has gone into this series, so your best bet is to clone this repo to move forward. If you want to start from the beginning, you should check out Part 1, Part 6.1, Part 6.2, and Part 6.3 to get yourself up to speed.

Obviously, there is a lot more that goes into making an exact clone of Tinder: messaging, user profiles, recommendation engines, detailed profile views, streams, etc, etc. But this should give you a really good starting point that is about as generalized as you can get.

Step 1

Previously, we set up the moveCardEnd function within our Card component that watches for the end point of the card. If it ends past the break point on the left, it does one thing; if it ends past the break point on the right, it does another thing.

The left break point is the negative response. Functionally, we want this to move the card off the screen and remove it from the database. Luckily for us, it does that already! So all we need to do now is change the right-break-point. Primarily, we want to change what happens within the setTimeout, as shown below:

} else if (e.changedTouches[0].pageX > (window.innerWidth - 50)) {
  this.setState({
    x: 1000,
    y: 0,
    dragging: "all 0.5s ease"
  })
  Meteor.setTimeout(this.props.remove, 500)
} ...

Instead of calling remove, we want to call something like “setAffirmative”. Let’s go ahead and create that function now. Within our Home component, let’s add the following function:

setAffirmative(_id) {
  MyData.update({_id}, {$set: { affirmative: true}})
},

We then need to pass that function into our Card component:

return <Card
  key={card._id}
  card={card}
  remove={ () => this.removeCard(card._id)}
  setAffirmative={ () => this.setAffirmative(card._id)}
/>

The last thing we need to do to add the ability to mark cards is to change the setTimeout mentioned above. Change it to the following:

Meteor.setTimeout(this.props.setAffirmative, 500)

And now you’re marking cards as affirmative! Gotta love functions.

Step 2

But the simplicity is somewhat misleading. You have successfully marked the card as true and it has left the screen, but it hasn’t been destroyed. It’s actually lingering 1000 pixels off to the left. If this were a hack job, we could just leave it, but nay! Efficiency demands it.

Lingering 1000 pixels off to the right. We need to fix that.

The way to fix this is by making sure we only show components that are not marked as affirmative. Fortunately we already mark it 500ms after it’s been selected, so this won’t mess with our transitions.

All we need to do is add a filter before we map our list of users. Add the following to our map function within our Home component:

return this.data.users
  .filter((user) =>  user.affirmative != true)
  .map((card) => { ...

Step 3

Now it’s time to look at a list of the items we’ve marked as affirmative. Within our Other.jsx file, we have a component called Other. Thanks to Ionic, making beautiful lists is easy! This is covered in greater detail in the article on Passing in Data.

First, let’s pass in the user data. This is going to be almost exactly the same as the function we have in our Home component with one small difference within our MyData.find:

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

Now that we have a list of only the affirmatively selected users, let’s render them in a list. First, let’s check to see if the data is loading. If it isn’t, let’s map over each of the users and create a list:

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

Then to map over and create our list, add the following:

render() {
  ...
  let list = this.data.users.map((user) => {
    return (
      <div className="item item-avatar" key={user}>
        <img src={user.image}></img>
        <h2>{user.name}</h2>
        <p>{user.details}</p>
      </div>
    )
  })
  ...
}

And finally, return the list you want to render with all the items passed in:

render() {
  ...
  return (
    <div className="list">
      {list}
    </div>
  )
}

And now you’re done! You have a fully functional Tinder interface. Obviously, there is a lot more you can do with this. My goal was to make something that is highly generalized and can be adapted for many different kinds of projects.

Do let me know if you find this useful! Or if you have any other request for an interface you’d like to see copied, send me a tweet @samcorcos.

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.4: Tinder Interface

Step 1

Step 2

Step 3

Additional

Written by Sam Corcos