Calling multiple functions from (click)=

Question

In the context of deleting a user from my site, I have to make multiple database calls to delete the users ID in all tabels where the UserID are (Aprox. 10 different tabels).

Right now I am using what I think is a dirty hack where I have multiple (click)="function()" events on the same button triggering multiple functions, from where all those functions goes into my service layer and make the database base. In my service I have a function for every tabel I have to go into and delete the users ID.

HTML:

<button (click)="deleteCandidateInCompanies(Item.owner)"(click)="deleteCandidateInOrganizations(Item.owner)"

Component.ts:

 deleteCandidateInCompanies(owner: string): void {
    this._candidateService.deleteCandidateFromCompanies(id)
        .then( data => {
        console.log(data);
    }).catch( err => {
        alert('An error has occurred');
       console.log(err);
    });
}

deleteCandidateInOrganizations(owner: string): void {
    this._candidateService.deleteCandidatesFromOrganizations(id)
        .then( data => {
            console.log(data);
        }).catch( err => {
        alert('An error has occurred');
        console.log(err);
    });
}

Service.ts:

deleteCandidateFromCompanies(owner: string) {
    // Get User object
    return new Promise(async (resolve, reject) => {

        const _dynamoDB = new AWS.DynamoDB.DocumentClient();
        const getUserParams = {
            TableName: 'user-table',
            Key: {
                sub: owner
            }
        };
        const user = await _dynamoDB.get(getUserParams).promise();

        // Get all companies owned by user
        for (let i = 0; i < user.Item.companies.length; i++) {
            const companyUUID = user.Item.companies[i];
            const getCompanyParams = {
                TableName: 'company-table',
                Key: {
                    uuid: companyID
                }
            };

            const company = await _dynamoDB.get(getCompanyParams).promise();

            // Check what index owner is on
            const companyIndex = company.Item.owners.indexOf(owner);

            if (companyIndex === -1) {
                continue;
            }

            const deleteUserReferenceInCompanyParams = {
                TableName: 'company-tabel',
                Key: {uuid: user.Item.companies[i]},
                UpdateExpression: 'REMOVE owners[' + i.toString() + ']'
            };


_dynamoDB.update(deleteUserReferenceInCompanyParams, function (err, data) {
                    if (err) {
                        console.log(err);
                        reject(err);
                    } else {
                        console.log(data);
                        resolve(data);
                    }
                });
            }
    });



deleteCandidatesFromOrganizations(owner: string) {
    // Get User object
    return new Promise(async (resolve, reject) =>{
       const _dynamoDB = new AWS.DynamoDB.DocumentClient();
       const getUserParams = {
           TableName: 'user-table',
           Key: {
               sub: owner
           }
       };
       const user = await _dynamoDB.get(getUserParams).promise();

       // Get all organizations owned by user
        for (let i = 0; i < user.Item.ownerOrganization.length; i++){
            const organizationUUID = user.Item.ownerOrganization[i];
            const getOrganizationParams = {
                TableName: 'organization-table',
                Key: {
                    uuid: organizationUUID
                }
            };

            const organization = await 
_dynamoDB.get(getOrganizationParams).promise();

            // Tjekker hvilket index owner er på

            const organizationsIndex = organization.Item.owners.indexOf(owner);

            if (organizationsIndex === -1) {
                continue;
            }

            const deleteUserReferenceInOrganizationParams = {
                TableName: 'organization-table',
                Key: {uuid: user.Item.ownerOrganization[i]},
                UpdateExpression: 'REMOVE owners[' + i.toString() + ']'
            };

            // tslint:disable-next-line:typedef
            _dynamoDB.update(deleteUserReferenceInOrganizationParams, function (err, data) {
                if (err) {
                    console.log(err);
                    reject(err);
                } else {
                    console.log(data);
                    resolve(data);
                }
            });
        }
    });
}

}

When I try and put my functions in component.ts in óne function I get the error Promies returned from deleteCandidateFromCompanies is ignored.

I expect there should be a different way, to get all these function together and get a lot less code and less database calls.

Combining them into one function should work fine. What does the code look like when you combine them? — William Stevens
– William Stevens, Commented Sep 11, 2019 at 19:35
deleteCandidate(owner: string): void { this._candidateService.deleteCandidateFromCompanies(owner).then(() => { console.log(data); }).catch( err => { alert('An error has occurred'); console.log(err); }); this._candidateService.deleteCandidatesFromOrganizations(owner) .then( data => { console.log(data); }).catch( err => { alert('An error has occurred'); console.log(err); }); } — Gustav Vingtoft
– Gustav Vingtoft, Commented Sep 11, 2019 at 19:37
FYI in angular we are going reactive. Stop using Promises. Convert everything to an Observable. there's an RxJS course on PluralSigh on RxJS in Angular is super good. You should take it — Patricio Vargas
– Patricio Vargas, Commented Sep 11, 2019 at 19:53

Wilfredo P · Accepted Answer · 2019-09-11 19:37:40Z

3

One approach that you can do is, create one function that warps both, and you can user async / await to handle the asynchronous call for example:

async myFunctionWrapper(owner){
  await deleteCandidateInCompanies(owner);
  await deleteCandidateInOrganizations(owner);
}

And in the HTML call the wrapper

<button (click)="myFunctionWrapper(Item.owner)" />

answered Sep 11, 2019 at 19:37

Wilfredo P

4,07430 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gustav Vingtoft Over a year ago

I'm gonna try that. Thank you.

Selast Lambou · Accepted Answer · 2019-09-11 19:46:45Z

1

Another approach is using the template form, cascading function calls in the template, like

<button (click)="deleteCandidateInCompanies(item.owner); deleteCandidateInOrganizations(item.owner);">Call it</button>

Some other one are using && but the impact is

<button (click)="deleteCandidateInCompanies(item.owner) && deleteCandidateInOrganizations(item.owner);">Call it</button>

deleteCandidateInOrganizations would be called after success of deleteCandidateInCompanies

answered Sep 11, 2019 at 19:46

Selast Lambou

74813 silver badges28 bronze badges

Collectives™ on Stack Overflow

Calling multiple functions from (click)=

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related