Search⌘ K
AI Features
Home
Courses
JavaScript Design Patterns for Coding Interviews

Challenge: Solution Review

Explore how to implement the Model-View-Presenter (MVP) pattern by building an email sending system. Understand how the model stores data, the view handles user input, and the presenter coordinates between the two to update and display email information effectively.

We'll cover the following...

Solution #

Node.js
class Model{
    constructor(){
        this.senderName = "";
        this.receiverName = "";
        this.emailTitle = "";
    }
    setSenderName(senderName){
        this.senderName = senderName;
    }
    getSenderName(){
        return this.senderName;
    }
    setReceiverName(receiverName){
        this.receiverName = receiverName;
    }
    getReceiverName(){
        return this.receiverName;
    }
    setEmailTitle(emailTitle){
        this.emailTitle = emailTitle;
    }
    getEmailTitle(){
        return this.emailTitle;
    }
}
class View{
    constructor(){
        this.presenter = null;
    }
    registerWith(presenter){
        this.presenter = presenter;
    }
    sendEmail(to,fromWhom, emailTitle){
        this.presenter.sendEmail(to,fromWhom, emailTitle)
    }
    displayEmailInfo(senderName,receiverName, emailTitle){
        console.log("Email From: "  + senderName + " To: " + receiverName + " Title: " + emailTitle);
    }
}
class Presenter{
    constructor(view){
        this.view = view;
        this.model = null;
    }
    setModel(model){
        this.model= model;
    }
    getView(){
        return this.view;
    }
    sendEmail(to,fromWhom, emailTitle){
        this.model.setEmailTitle(emailTitle)
        this.model.setSenderName(fromWhom)
        this.model.setReceiverName(to)
        this.view.displayEmailInfo(this.model.getSenderName(), this.model.getReceiverName(),this.model.getEmailTitle())
    }
}
var model   = new Model()
var view = new View()
var presenter = new Presenter(view)
presenter.setModel(model)
view.registerWith(presenter)
presenter.getView().sendEmail("Rachel", "Joey", "Rent Discussion")
presenter.getView().sendEmail("Monica", "Phoebe", "Smelly Cat Draft")

Explanation

The challenge requires you to use the MVP pattern to implement an email sending system. Hence, it has three components, the model, the view, and the presenter. Let’s discuss them one by one.

Model

class Model{

    constructor(){
        this.senderName = "";
        this.receiverName = "";
        this.emailTitle = "";
    }

    setSenderName(senderName){
        this.senderName = senderName;
    }

    getSenderName(){
        return this.senderName;
    }

    setReceiverName(receiverName){
        this.receiverName = receiverName;
    }

    getReceiverName(){
        return this.receiverName;
    }

    setEmailTitle(emailTitle){
        this.emailTitle = emailTitle;
    }

    getEmailTitle(){
        return this.emailTitle;
    }

}
...