[front-end] Define a Common Interface for Front-end API Requests

[DietBepis1]

Description

In the same way that we are creating presenters and library wrappers for the server-side, we should define wrapper for our own API instead of having axios calls everywhere -- an APIPresenter, if you will.

You'll see a comment under this description that points to a new branch once you assign yourself to this issue. Please do your development in that branch. It is part of our new metric collecting.

Spec

In this issue, we will create a class or module called API (or something) that can take in a reference to a path and an api version. We should use the same pattern of extending errors to have a matching error also. There's a demo of what this could look like here. Feel free to use that as a skeleton, but make sure you test it because I wrote it more as a pseudo-code example.

You may also need to do some refactoring for control panel specific issues as part of this issue, depending on how far other components are in development. Don't worry about moving every api over, just the new stuff

Copilot Prompts

How can I mock an API response in Jest?
How do I extend a Javascript error for custom error handling?
What are the conventions around using Vuex for all asynchronous calls?

Target Date: 12/31/2023 📆

[Dunridge]

Branch: issue-812