Chatto/chatto/src/main/javascript/ts/src/view/ChatView.ts

import { Observer } from "../observe/Observer";
import { Model } from "../model/AbstractModel";
import { Subject } from "../observe/Observable";
import { View } from "./AbstractView";
import { Controller } from "../controller/AbstractController";
import { TemplateFactory } from "../template/TemplateFactory";
import { ActiveUserViewModel } from "../viewmodel/ActiveUserViewModel";
import { ChatModel } from "../model/ChatModel";
import { ChatMessageViewModel } from "../viewmodel/ChatMessageViewModel";
import * as log from 'loglevel';
import * as DOMPurify from 'dompurify';
import markdownit = require('markdown-it');
var md = new markdownit();

export class ChatView implements Observer {
    private readonly _model: ChatModel;
    private readonly _element: HTMLElement;
    private readonly _messageSendTemplate = TemplateFactory.getTemplate('msg_container_send_template');


    constructor(model: ChatModel, element: HTMLElement) {
        this._model = model;
        this._element = element;
    }


    update(data: ChatMessageViewModel[]): void {
        log.info('ChatView: updating view');
        let html: string = "";
        data.forEach((vm: ChatMessageViewModel) => {
            const vmTemp = vm;
            vmTemp.message = md.render(vm.message);
            $(this._element).append(DOMPurify.sanitize(this._messageSendTemplate(vmTemp)));
            // html += this._messageSendTemplate(vm);
        });

        /** Very Important!!!
         * Sanitizing HTML before displaying on webpage to prevent XSS attacks!!
         */
        // html = DOMPurify.sanitize(md.render(html));
        // this._element.innerHTML = html;
        // log.debug(this._element.innerHTML);
    }
}