Meteor remove the published collection and re-publish

1

Hello guys, I want to publish some info from a collection based from users input. I am trying to implement it this way.
Here is my client code

import React, { Component } from 'react'
import { createContainer } from 'meteor/react-meteor-data'
import { browserHistory } from 'react-router'
import Header from './header/Header'
import LeftMenu from './leftmenu/LeftMenu'

class Dashboard extends Component {
  constructor (props) {
    super(props)
    this.state = {
      searchTerm: '',
      projectId: ''
    }
  }

  handleChange (event) {
    const changedOne = event.target.name
    const newValue = event.target.value
    const newState = {}
    newState[changedOne] = newValue
    this.setState(newState)
  }

  componentWillMount () {
    if (!this.props.isAuthenticated) {
      browserHistory.push('/login')
    }
  }

  componentDidUpdate () {
    if (!this.props.isAuthenticated) {
      browserHistory.push('/login')
    }
    if (!this.state.projectId && this.props.projects) {
      this.setState({projectId: this.props.projects[0].projectId})
    }
  }

  render () {
    console.log('state', this.state)
    Meteor.call('publishByProjectId', this.state.projectId)
    return (
      <div className="Dashboard">
        <Header handleChange={this.handleChange.bind(this)} projectId={this.state.projectId} searchTerm={this.state.searchTerm} />
        <div className="DashboardBody flexContainer">
          <LeftMenu />
          <div className="propsChildren">
            {React.Children.map(
              this.props.children,
              child => React.cloneElement(child,
                {
                  searchTerm: this.state.searchTerm,
                  path: this.props.route.path
                })
              )}
            </div>
        </div>
      </div>
    )
  }
}

export default createContainer((props) => {
  return {
    isAuthenticated: Meteor.userId() !== null,
    projects: Meteor.user() && Meteor.user().profile.projects
  }
}, Dashboard)

And here is the publishByProjectId method in the server

import { Meteor } from 'meteor/meteor'
import { Popups } from '../../imports/collections/popups/Popups'

Meteor.methods({
  'publishByProjectId': function (projectId) {
    Meteor.publish('popups', function (projectId) {
      // REVIEW: Users password and ouath merged with splendido:accounts-meld, needs further testing
      // TODO: Let users create project
      // TODO: Save project in projects collection
      // TODO: Add project id to the user
      // TODO: Find by project Id
      console.log('projectId', projectId)
      return Popups.find({projectId})
    })
  }
})

However I get my whole collection published. And in the console I get a bunch of Ignoring duplicate publish named 'popups'

What am I missing here?
Please help and thanks in advance.