Problem with Chattrbox

Frontend Web Development: The Big Nerd Ranch Guide Chapter 18: ES6, the Adventure Continues
1

Hi when I send a message nothing appears…

And it says “moment” haven’t been defined so it can’t be used in timestamp

import $ from ‘jquery’;
import md5 from ‘crypto-js/md5’;

function createGravatarUrl(username) {
let userhash = md5(username);
return http://www.gravatar.com/avatar/${userhash.toString()};
}

export function promptForUsername() {
let username = prompt(‘Enter a username’);
return username.toLowerCase();
}

export class ChatForm {
constructor(formSel, inputSel) {
this.form = (formSel);
this.input = (inputSel);
}

init(submitCallback) {
    this.$form.submit((event) => {
        event.preventDefault();
        let val = this.$input.val();
        submitCallback(val);
        this.$input.val('');
    });
    this.$form.find('button').on('click', () => this.$form.submit());
}

}

export class ChatList {
constructor(listSel, username) {
this.list = (listSel);
this.username = username;
}

drawMessage({
    user: u,
    timestamp: t,
    message: m
}) {
    let $messageRow = $('<li>', {
        'class': 'message-row'
    });

    if (this.username === u) {
        $messageRow.addClass('me');
    }

    let $message = $('<p>');

    $message.append($('<span>', {
        'class': 'message-username',
        text: u
    }));

    $message.append($('<span>', {
        'class': 'timesamp',
        'data-time': t,
        text: moment(t).fromNow()
    }));

    $message.append($('<span>', {
        'class': 'message-message',
        text: m
    }));

    let $img = $('<img>', {
        src: createGravatarUrl(u),
        title: u
    });

    $messageRow.append($img);
    $messageRow.append($message);
    $(this.$list).append($messageRow);
    $messageRow.get(0).scrollIntoView();
}

init() {
    this.timer = setInterval(() => {
        $('[data-time]').each((idx, element) => {
            let $element = $(element);
            let timestamp = new Date().setTime($element.attr('data-time'));
            let ago = moment(timestamp).fromNow();
            $element.html(ago);
        });
    }, 1000);
}

}

2

You have to import it in dom.js:

import moment from ‘moment’;