refactor: Notifications (#259)

* feat: wrap ElNotification class in a showNotification method

* refactor: replace notification invocations in mod views

* feat: add 'info' type to showNotification method

* refactor: replace notification invocations in repair view

* refactor: replace notification invocations in settings view

* refactor: replace notification invocations in developer view

* feat: showNotification method now returns a NotificationHandle

* feat: showNotification has a duration argument

* refactor: replace notification invocations in pull requests module

* refactor: replace notification invocation in repair view

* refactor: replace notification invocations in UI store

* refactor: remove unused import from play view

* refactor: use showErrorNotification method to wrap up error display

* fix: add missing showErrorNotification imports

* style: format code

* style: format ThunderstoreModCard.vue

* style: format pull_requests.ts

* style: format SettingsView.vue

* style: format RepairView.vue

* style: format DeveloperView.vue

* refactor: remove useless import

* refactor: add missing showErrorNotification invocation

* feat: showErrorNotification has an optional title argument

* style: format LocalModsView.vue

2 files changed, 44 insertions, 108 deletions

diff --git a/src-vue/src/plugins/modules/pull_requests.ts b/src-vue/src/plugins/modules/pull_requests.ts
index 227888f2..ff9ec322 100644
--- a/src-vue/src/plugins/modules/pull_requests.ts
+++ b/src-vue/src/plugins/modules/pull_requests.ts
@@ -1,8 +1,8 @@
-import { ElNotification } from "element-plus";
 import { invoke, shell } from "@tauri-apps/api";
 import { PullsApiResponseElement } from "../../../../src-tauri/bindings/PullsApiResponseElement";
 import { PullRequestType } from '../../../../src-tauri/bindings/PullRequestType';
 import { store } from "../store";
+import { showErrorNotification, showNotification } from "../../utils/ui";
 
 interface PullRequestStoreState {
     searchValue: string,
@@ -33,12 +33,7 @@ export const pullRequestModule = {
                     }
                 })
                 .catch((error) => {
-                    ElNotification({
-                        title: 'Error',
-                        message: error,
-                        type: 'error',
-                        position: 'bottom-right'
-                    });
+                    showErrorNotification(error);
                 });
         },
         async downloadLauncherPR(state: PullRequestStoreState, pull_request: PullsApiResponseElement) {
@@ -48,12 +43,7 @@ export const pullRequestModule = {
                     shell.open(url);
                 })
                 .catch((error) => {
-                    ElNotification({
-                        title: 'Error',
-                        message: error,
-                        type: 'error',
-                        position: 'bottom-right'
-                    });
+                    showErrorNotification(error);
                 });
         },
         async downloadModsPR(state: PullRequestStoreState, pull_request: PullsApiResponseElement) {
@@ -62,32 +52,16 @@ export const pullRequestModule = {
         },
         async installLauncherPR(state: PullRequestStoreState, pull_request: PullsApiResponseElement) {
             // Send notification telling the user to wait for the process to finish
-            const notification = ElNotification({
-                title: `Installing launcher PR ${pull_request.number}`,
-                message: 'Please wait',
-                duration: 0,
-                type: 'info',
-                position: 'bottom-right'
-            });
+            const notification = showNotification(`Installing launcher PR ${pull_request.number}`, 'Please wait', 'info', 0);
 
             await invoke("apply_launcher_pr", { pullRequest: pull_request, gameInstallPath: store.state.game_path })
                 .then((message) => {
                     console.log(message);
                     // Show user notification if mod install completed.
-                    ElNotification({
-                        title: `Done`,
-                        message: `Installed ${pull_request.number}: "${pull_request.title}"`,
-                        type: 'success',
-                        position: 'bottom-right'
-                    });
+                    showNotification(`Done`, `Installed ${pull_request.number}: "${pull_request.title}"`);
                 })
                 .catch((error) => {
-                    ElNotification({
-                        title: 'Error',
-                        message: error,
-                        type: 'error',
-                        position: 'bottom-right'
-                    });
+                    showErrorNotification(error);
                 })
                 .finally(() => {
                     // Clear old notification
@@ -96,32 +70,20 @@ export const pullRequestModule = {
         },
         async installModsPR(state: PullRequestStoreState, pull_request: PullsApiResponseElement) {
             // Send notification telling the user to wait for the process to finish
-            const notification = ElNotification({
-                title: `Installing mods PR ${pull_request.number}`,
-                message: 'Please wait',
-                duration: 0,
-                type: 'info',
-                position: 'bottom-right'
-            });
+            const notification = showNotification(`Installing mods PR ${pull_request.number}`, 'Please wait', 'info', 0);
 
             await invoke("apply_mods_pr", { pullRequest: pull_request, gameInstallPath: store.state.game_path })
                 .then((message) => {
                     // Show user notification if mod install completed.
-                    ElNotification({
-                        title: `Done`,
-                        message: `Installed ${pull_request.number}: "${pull_request.title}"\nMake sure to launch via batch file or by specifying correct profile!`,
-                        type: 'success',
-                        duration: 7_000, // in ms
-                        position: 'bottom-right'
-                    });
+                    showNotification(
+                        `Done`,
+                        `Installed ${pull_request.number}: "${pull_request.title}"\nMake sure to launch via batch file or by specifying correct profile!`,
+                        'success',
+                        7000
+                    );
                 })
                 .catch((error) => {
-                    ElNotification({
-                        title: 'Error',
-                        message: error,
-                        type: 'error',
-                        position: 'bottom-right'
-                    });
+                    showErrorNotification(error);
                 })
                 .finally(() => {
                     // Clear old notification
diff --git a/src-vue/src/plugins/store.ts b/src-vue/src/plugins/store.ts
index cdbd6738..6f878277 100644
--- a/src-vue/src/plugins/store.ts
+++ b/src-vue/src/plugins/store.ts
@@ -6,7 +6,7 @@ import { invoke } from "@tauri-apps/api";
 import { GameInstall } from "../utils/GameInstall";
 import { ReleaseCanal } from "../utils/ReleaseCanal";
 import { FlightCoreVersion } from "../../../src-tauri/bindings/FlightCoreVersion";
-import { ElNotification, NotificationHandle } from 'element-plus';
+import { NotificationHandle } from 'element-plus';
 import { NorthstarState } from '../utils/NorthstarState';
 import { appDir } from '@tauri-apps/api/path';
 import { open } from '@tauri-apps/api/dialog';
@@ -18,6 +18,7 @@ import { NorthstarMod } from "../../../src-tauri/bindings/NorthstarMod";
 import { searchModule } from './modules/search';
 import { i18n } from '../main';
 import { pullRequestModule } from './modules/pull_requests';
+import { showErrorNotification, showNotification } from '../utils/ui';
 
 const persistentStore = new Store('flight-core-settings.json');
 
@@ -128,12 +129,10 @@ export const store = createStore<FlightCoreStore>({
                 let is_valid_titanfall2_install = await invoke("verify_install_location", { gamePath: selected }) as boolean;
                 if (is_valid_titanfall2_install) {
                     state.game_path = selected;
-                    ElNotification({
-                        title: i18n.global.tc('notification.game_folder.new.title'),
-                        message: i18n.global.tc('notification.game_folder.new.text'),
-                        type: 'success',
-                        position: 'bottom-right'
-                    });
+                    showNotification(
+                        i18n.global.tc('notification.game_folder.new.title'),
+                        i18n.global.tc('notification.game_folder.new.text')
+                    );
                     try {
                         notification_handle.close();
                     }
@@ -156,12 +155,10 @@ export const store = createStore<FlightCoreStore>({
                 }
                 else {
                     // Not valid Titanfall2 install
-                    ElNotification({
-                        title: i18n.global.tc('notification.game_folder.wrong.title'),
-                        message: i18n.global.tc('notification.game_folder.wrong.text'),
-                        type: 'error',
-                        position: 'bottom-right'
-                    });
+                    showErrorNotification(
+                        i18n.global.tc('notification.game_folder.wrong.text'),
+                        i18n.global.tc('notification.game_folder.wrong.title')
+                    );
                 }
             }
         },
@@ -229,12 +226,7 @@ export const store = createStore<FlightCoreStore>({
                         })
                         .catch((error) => {
                             console.error(error);
-                            ElNotification({
-                                title: i18n.global.tc('generic.error'),
-                                message: error,
-                                type: 'error',
-                                position: 'bottom-right'
-                            });
+                            showErrorNotification(error);
                         });
                     break;
 
@@ -251,20 +243,11 @@ export const store = createStore<FlightCoreStore>({
 
             await invoke("launch_northstar_steam_caller", { gameInstall: game_install, bypassChecks: no_checks })
                 .then((message) => {
-                    ElNotification({
-                        title: 'Success',
-                        type: 'success',
-                        position: 'bottom-right'
-                    });
+                    showNotification('Success');
                 })
                 .catch((error) => {
                     console.error(error);
-                    ElNotification({
-                        title: 'Error',
-                        message: error,
-                        type: 'error',
-                        position: 'bottom-right'
-                    });
+                    showErrorNotification(error);
                 });
 
             return;
@@ -324,12 +307,7 @@ export const store = createStore<FlightCoreStore>({
                 })
                 .catch((error) => {
                     console.error(error);
-                    ElNotification({
-                        title: i18n.global.tc('generic.error'),
-                        message: error,
-                        type: 'error',
-                        position: 'bottom-right'
-                    });
+                    showErrorNotification(error);
                 });
         },
         async toggleReleaseCandidate(state: FlightCoreStore) {
@@ -346,12 +324,10 @@ export const store = createStore<FlightCoreStore>({
             store.commit("checkNorthstarUpdates");
 
             // Display notification to highlight change
-            ElNotification({
-                title: i18n.global.tc(`channels.names.${state.northstar_release_canal}`),
-                message: i18n.global.tc('channels.release.switch.text', {canal: state.northstar_release_canal}),
-                type: 'success',
-                position: 'bottom-right'
-            });
+            showNotification(
+                i18n.global.tc(`channels.names.${state.northstar_release_canal}`),
+                i18n.global.tc('channels.release.switch.text', {canal: state.northstar_release_canal}),
+            );
         }
     }
 });
@@ -418,13 +394,12 @@ async function _initializeApp(state: any) {
             .catch((err) => {
                 // Gamepath not found or other error
                 console.error(err);
-                notification_handle = ElNotification({
-                    title: i18n.global.tc('notification.game_folder.not_found.title'),
-                    message: i18n.global.tc('notification.game_folder.not_found.text'),
-                    type: 'error',
-                    position: 'bottom-right',
-                    duration: 0 // Duration `0` means the notification will not auto-vanish
-                });
+                notification_handle = showNotification(
+                    i18n.global.tc('notification.game_folder.not_found.title'),
+                    i18n.global.tc('notification.game_folder.not_found.text'),
+                    'error',
+                    0   // Duration `0` means the notification will not auto-vanish
+                );
             });
     }
 
@@ -461,13 +436,12 @@ async function _checkForFlightCoreUpdates(state: FlightCoreStore) {
 
     if (flightcore_is_outdated) {
         let newest_flightcore_version = await invoke("get_newest_flightcore_version") as FlightCoreVersion;
-        ElNotification({
-            title: i18n.global.tc('notification.flightcore_outdated.title'),
-            message: i18n.global.tc('notification.flightcore_outdated.text', {oldVersion: state.flightcore_version, newVersion: newest_flightcore_version.tag_name}),
-            type: 'warning',
-            position: 'bottom-right',
-            duration: 0 // Duration `0` means the notification will not auto-vanish
-        });
+        showNotification(
+            i18n.global.tc('notification.flightcore_outdated.title'),
+            i18n.global.tc('notification.flightcore_outdated.text', {oldVersion: state.flightcore_version, newVersion: newest_flightcore_version.tag_name}),
+            'warning',
+            0 // Duration `0` means the notification will not auto-vanish
+        );
     }
 }