tilderadio
/
AzuraCast
mirror of https://github.com/AzuraCast/AzuraCast.git
4
0
Fork 0
Code Issues Releases Wiki Activity

Use Event Bus for Axios handling.

This commit is contained in:
Buster Neece 2022-12-21 20:13:08 -06:00
parent f20a78ccad
commit 3ce06c1d16
No known key found for this signature in database
GPG Key ID: F1D2E64A0005E80E
4 changed files with 47 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
frontend/vue/base.js
View File

@ -5,8 +5,7 @@ import installBootstrapVue from "./vendor/bootstrapVue";
import installSweetAlert from "./vendor/sweetalert";
import installAxios from "~/vendor/axios";
import useAzuraCast from "~/vendor/azuracast";
import axios from "axios";
import {useEventBus} from "@vueuse/core";
import {useNotifyBus} from "~/vendor/events";
export default function (component) {
const vueApp = createApp({
@ -15,7 +14,7 @@ export default function (component) {
},
mounted() {
// Workaround to use BootstrapVue toast notifications in Vue 3 composition API.
const notifyBus = useEventBus('notify');
const notifyBus = useNotifyBus();
notifyBus.on((event, payload) => {
if (event === 'show') {
@ -24,42 +23,6 @@ export default function (component) {
this.$bvToast.hide(payload.id);
}
});
// Configure some Axios settings that depend on the BootstrapVue $bvToast superglobal.
const handleAxiosError = (error) => {
const {$gettext} = gettext;
let notifyMessage = $gettext('An error occurred and your request could not be completed.');
if (error.response) {
// Request made and server responded
notifyMessage = error.response.data.message;
console.error(notifyMessage);
} else if (error.request) {
// The request was made but no response was received
console.error(error.request);
} else {
// Something happened in setting up the request that triggered an Error
console.error('Error', error.message);
}
if (typeof this.$notifyError === 'function') {
this.$notifyError(notifyMessage);
}
};
axios.interceptors.request.use((config) => {
return config;
}, (error) => {
handleAxiosError(error);
return Promise.reject(error);
});
axios.interceptors.response.use((response) => {
return response;
}, (error) => {
handleAxiosError(error);
return Promise.reject(error);
});
}
});

39
frontend/vue/vendor/axios.js vendored
View File

@ -2,6 +2,8 @@ import axios from "axios";
import VueAxios from "vue-axios";
import {inject} from "vue";
import useAzuraCast from "~/vendor/azuracast";
import gettext from "~/vendor/gettext";
import {useNotify} from "~/vendor/bootstrapVue";
/* Composition API Axios utilities */
export function useAxios() {
@ -18,7 +20,42 @@ export default function installAxios(vueApp) {
axios.defaults.headers.common['X-API-CSRF'] = apiCsrf;
}
// Configure some Axios settings that depend on the BootstrapVue $bvToast superglobal.
const handleAxiosError = (error) => {
const {$gettext} = gettext;
let notifyMessage = $gettext('An error occurred and your request could not be completed.');
if (error.response) {
// Request made and server responded
notifyMessage = error.response.data.message;
console.error(notifyMessage);
} else if (error.request) {
// The request was made but no response was received
console.error(error.request);
} else {
// Something happened in setting up the request that triggered an Error
console.error('Error', error.message);
}
const {notifyError} = useNotify();
notifyError(notifyMessage);
};
axios.interceptors.request.use((config) => {
return config;
}, (error) => {
handleAxiosError(error);
return Promise.reject(error);
});
axios.interceptors.response.use((response) => {
return response;
}, (error) => {
handleAxiosError(error);
return Promise.reject(error);
});
vueApp.use(VueAxios, axios);
vueApp.provide('axios', axios);
}

4
frontend/vue/vendor/bootstrapVue.js vendored
View File

@ -2,12 +2,12 @@ import {BootstrapVue} from 'bootstrap-vue';
import 'bootstrap-vue/dist/bootstrap-vue.css';
import gettext from "~/vendor/gettext";
import {useEventBus} from "@vueuse/core";
import {useNotifyBus} from "~/vendor/events";
/* Composition API BootstrapVue utilities */
export function useNotify() {
const {$gettext} = gettext;
const notifyBus = useEventBus('notify');
const notifyBus = useNotifyBus();
const notify = (message = null, options = {}) => {
if (!!document.hidden) {

5
frontend/vue/vendor/events.js vendored Normal file
View File

@ -0,0 +1,5 @@
import {useEventBus} from "@vueuse/core";
export function useNotifyBus() {
return useEventBus('notify');
}