Save the current user value to use it in HTML

Question

[EDIT] i'm using Meteor

Hi everyone,

i've searched and tried many things but i can't do what i want. I'm doing a tutorial to do a ToDo list, and when u check a task, i want to put the name of the user who checked the task.

  <template name="task">
      <li class="{{#if checked}}checked{{/if}}">{{#if checked}}<!-- the name of the user who checked it -->{{/if}}
     <!-- the rest isn't useful for my question -->

I've tried with {{currentUser.username}} but when i log with someone else the name change...

There is the JS for the event handler

  'click .toggle-checked'() {
    // Set the checked property to the opposite of its current value
    Meteor.call('tasks.setChecked', this._id, !this.checked);
  }

And the JS for the method call

  'tasks.setChecked'(taskId, setChecked) {
    check(taskId, String);
    check(setChecked, Boolean);
    Tasks.update(taskId, { $set: { checked: setChecked } });
  }

Thank you for the help

Answer 1

If you use {{currentUser.username}} you will always have the data of the logged in user.

To get what you want you need to register the _id of the user who checked the task in your method:

'tasks.setChecked'(taskId, setChecked) {
  check(taskId, String);
  check(setChecked, Boolean);

  // Check that 'setChecked' is true and that the user is logged in,
  // Otherwise just update the status
  if (setChecked && this.userId) {
    Tasks.update(taskId, {
      $set: {
        checked: setChecked,
        userId: this.userId,
      }
    });
  } else {
     Tasks.update(taskId, {
      $set: {
        checked: setChecked,
      }
    });
  }
}

Make sure you update your schema accordingly if you are using one.

Then in your template, retrieve the user data and display it:

// file task.js
import './task.html';

Template.task.helpers({
  checkerUser() {
    // The template data are those of the current task, check if userId is defined and task is checked
    const { userId, checked } = Template.currentData();
    /* Or you can do
     * const userId = Template.currentData().userId;
     * checked = Template.currentData().checked;
     */
    if (userId && checked) {
      return Meteor.users.findOne({ _id: userId }).profile.username;
    }
    return null;
  }
});

Template.task.events({
  'click .toggle-checked'() {
    // Set the checked property to the opposite of its current value
    Meteor.call('tasks.setChecked', this._id, !this.checked);
  }
})

And finally in HTML:

// file task.html
<template name="task">
  <li class="{{#if checked}}checked{{/if}}">
    {{#if checkerUser}}Completed by {{checkerUser}}{{/if}}
  </li>
</template>

Technically, in your method you should also check more in-dept the different situations. For instance, when you uncheck a task, it should remove the userId from the record so that if a non logged-in user checks it again, the name won't be the one of the first user (or you could $unset userId if user is not logged in when setting checked = true )