   toggleRole: (projectRoleSet, role) ->
     index = projectRoleSet.roles.indexOf role
 
-    if index is -1
-      projectRoleSet.roles.push role
-    else
-      projectRoleSet.roles.splice index, 1
-
     @state.saving.push projectRoleSet.id
 
     @setState
       error: null
       saving: @state.saving
 
-    projectRoleSet.update('roles').save()
+    talkRoleAction = if index is -1
+      projectRoleSet.roles.push role
+      talkClient.type('roles').create(
+        user_id: parseInt(projectRoleSet.links.owner.id)
+        section: @talkSection()
+        name: POSSIBLE_ROLES[role]
+      ).save()
+    else
+      projectRoleSet.roles.splice index, 1
+      projectRoleSet.talk_roles.filter((talkRole) -> talkRole.name == POSSIBLE_ROLES[role])[0].delete()
+
+    Promise.all([projectRoleSet.update('roles').save(), talkRoleAction])
       .catch (error) =>
         @setState {error}
       .then =>


      {if @state.error?
        <p className="form-help error">{@state.error.toString()}</p>}
      <PromiseRenderer promise={@props.project.get 'project_roles'} then={(projectRoleSets) =>
        <div>
          {if projectRoleSets.length > 1
            for projectRoleSet in projectRoleSets

    error: null
    saving: []

  fetchAllRoles: ->
    Promise.all([@props.project.get('project_roles'), talkClient.type('roles').get(section: @talkSection())])
      .then ([panoptesRoles, talkRoles]) ->
        for roleSet in panoptesRoles when roleSet.links.owner.type == 'users'
          roleSet['talk_roles'] = talkRoles.filter((role) -> role.links.user == roleSet.links.owner.id)
          roleSet

  render: ->
    <div>
      <div className="form-label">Collaborators</div>
