Changing global functions to modular imports

[MarcusTXK]

What feature(s) would you like to see in RepoSense

Let's shift from using global functions to modular imports and exports.

Is the feature request related to a problem?

It's better to avoid using global functions and use modular imports and exports instead. This is because global functions pollute the global namespace and may cause conflicts or make code harder to maintain.

Using modular imports/exports also prevents any such issue of global functions potentially being undefined, such as in #1974.

Explicit importing of functions will also make it clear which functions are being used in the different Vue components.

Please do add on to the discussion if there were reasons for the global functions that I missed. Otherwise, I thnk this will be a good issue for first-time contributors.

[vvidday]

Definitely agree that we should refactor the global functions and variables.

Some care should be taken regarding the properties of the global window object in the screenshot above:

• The global variables (REPOS etc) are stateful, we already have a mechanism to store and modify them (Vuex global store). Hence in my opinion, they should be moved to the Vuex store for consistency.
• Some of the functions are stateless (e.g. getDateStr takes in a number and returns a string with no side effects), these can be refactored into regular functions and imported/exported as mentioned in the issue description.
• Some of the functions are stateful (e.g. addHash and removeHash modify the hashParams object). If we move the data that these stateful functions read/modify to the Vuex store, then these functions should be refactored into Vuex getters/mutations/actions.

In light of the above points, I think this task is more suited for someone who is already familiar with the codebase rather than first-timers.