Using a Promise in a click eventListener - more than once.

Vlad — Sun, 26 Jan 2020 17:41:37 +0000

Hello everyone,
I'm trying to wrap my head around how the vanilla MVC should be done right, and existing resourses have been of great help. Now I need help with something I can't seem to find - or formulate a proper query for.
Here's the relevant part of the code that I have:

        //view
        class CollectorView{
            constructor(){
                this.element1 = document.getElementById('collections');
                this.element2 = document.getElementById('collections__photos');         
            }

            ...

            returnCollectionsId(e){
                return new Promise((resolve) => 
                    this.element1.addEventListener('click', e => 
                        (!e.target.id || e.target.id === 'collections') ? null : resolve(e.target.id)                   
                    )
                )
            } 

            async renderPhotos(viewModel){
                this.element2.innerHTML = viewModel.map(el => `<div>
                    <h3>${el.description?el.description:el.alt_description}</h3>
                    <a href="#photos__details" class="circle" id="${viewModel.indexOf(el)}"></a>
                </div>`)
                .join("");
            }
        }

        //controller
        class CollectorController{
            constructor(model,view){
                this.model = model
                this.view = view

                this.getId()
            }

            ...

            async getId(){
                let photosId = await this.view.returnCollectionsId()
                let photosPromise = this.model.sendPhotos(photosId)
                let photosArray = await photosPromise.then(rsp => rsp.data)
                this.view.renderPhotos(photosArray)
            }
        }

So what happens is: there's a click eventListener that, when a certain element is clicked, reads the id of the clicked element, sends it into the model and does an API call with it, receives the info and renders it.

While this works perfectly, there are two big problems:
1) Promise only runs once. When it resolves with an existing ID, I can't go to the previous view and click a different element - it would have already run and still renders the first thing clicked.
2) The await part of the async/await only will work as intended when it receives a Promise. So can't just pass an ID as a string/number - returns undefined and everything breaks.

So, is there an alternative that would also return a promise, but would work anew every time upon a click happening? Or something to replace async/await with?

Thank you in advance!

DEV Community: Vlad

Using a Promise in a click eventListener - more than once.