Refactoring a Bug Reporting Function into a Helper Class

Question

I've been reading documentation about Javascript Classes all day, and now I want to refactor a Bug Report function into it's own class, but even when I begin to write my class as below:

class bugReport {
  constructor(x, y)
   this.x = x;
   this.y = y;
}

I struggle to think how to even begun breaking down the constituent pieces of my Bug Report into the format of a Javascript Class ie. what is x, y when it's comes to a Reporting Feature? s there a way to look at the steps of a class creation that makes it easier, or a pattern you follow? I'll attach my original bugreport code below to give you an example of what I'm attempting to make a class of.

BugReport:

     $("#bug").submit((e) => {
                e.preventDefault()
                const input = document.getElementById('nameInput');
                bugInfo = {
                  "name": `[${ticket.id}] Bug report`,
                  "story_type" : "Bug",
                  "description": `+ ${urlHelper}` + " 
" + `+ ${input.value}`,
                }
                reportBug(bugInfo).then(collapse.collapse('toggle'))
              })
            });

 async function reportBug(data = {}) {
      const url = 'exampleUrl'
      const response = await fetch(url, {
        method: 'POST',
        headers: {
          "Token": `${metadata.settings.token}`,
          "Content-Type": "application/json"
        },
        body: JSON.stringify(data)
      });
      return response.json();
    }

user_5201222 · Answer

I am not really a JavaScript expert, but I would do it like this:

class Logger {
    static async logInfo(data = {}) {
      const url = 'exampleUrl'
      const response = fetch(url, {
        method: 'POST',
        headers: {
          "Token": `${metadata.settings.token}`,
          "Content-Type": "application/json"
        },
        body: JSON.stringify(data)
      });
      return response.json();
    }
}

Also, since you asked about a pattern you follow, I would suggest you read upon Cross-cutting concern. Here are a few links:

Refactoring a Bug Reporting Function into a Helper Class

1 Answers