Reusable object-literals

Admin 1
Viewed 65

I have some component with a table which has actions buttons. When clicking on the button, the component emits an action, for example: (edit, delete,route)

getEvent(action: ActionButtons, object: any) {
    // type: (edit,delete,route), route: info where to redirect
    const {type, route} = action;
    this.action.emit({ type, route, body: object });
}

In the parent component I catch this object by the following function and do some logic depending on the action:

getAction({type, route, body: {...faculty }}) {
    const action = {
        edit: () => {
            this.openFacultyModal(faculty);
        },
        delete: () => {
            this.openConfirmDialog(faculty);
        },
        route: () => {
            this.redirecTo(faculty.faculty_id);
        }
    };
    action[type]();
}

The poblem is, if I want to use the table in another component I have to cut and paste getAction() and just change the function inside object.

It turns out that there will be code duplication.

Is it possible to somehow solve the problem of code duplication using closures or creating a separate class?

angular typescript object javascript
1 Answers

You can make your action map object reusable:

const actions = {
  edit(target, faculty) {
    target.openFacultyModal(faculty);
  },
  delete(target, faculty) {
    target.openConfirmDialog(faculty);
  },
  route(target, faculty) {
    target.redirecTo(faculty.faculty_id);
  }
};

Then use it where necessary, for instance in getAction:

getAction({type, route, body: {...faculty }}) {
  actions[type](this, faculty);
}
user_1572470
Related