diff --git a/kolibri_explore_plugin/assets/src/components/DiscoveryNavBar.vue b/kolibri_explore_plugin/assets/src/components/DiscoveryNavBar.vue index 39fab5345..91d4a5fe3 100644 --- a/kolibri_explore_plugin/assets/src/components/DiscoveryNavBar.vue +++ b/kolibri_explore_plugin/assets/src/components/DiscoveryNavBar.vue @@ -78,6 +78,7 @@ import { mapMutations } from 'vuex'; import { assets } from 'ek-components'; import commonExploreStrings from '../views/commonExploreStrings'; + import isOfflineMixin from '../mixins/isOfflineMixin'; import { PageNames } from '../constants'; export default { @@ -88,12 +89,7 @@ MessageReplyTextOutlineIcon, ArrowDownIcon, }, - mixins: [commonExploreStrings], - data() { - return { - isOffline: false, - }; - }, + mixins: [commonExploreStrings, isOfflineMixin], computed: { logo() { return assets.EndlessLogo; @@ -116,15 +112,6 @@ return !!plugin_data.androidApplicationId && !!plugin_data.windowsApplicationId; }, }, - created() { - this.isOffline = !navigator.onLine; - window.addEventListener('offline', this.onOffline); - window.addEventListener('online', this.onOnline); - }, - destroyed() { - window.removeEventListener('offline', this.onOffline); - window.removeEventListener('online', this.onOnline); - }, methods: { ...mapMutations({ setSearchResult: 'topicsRoot/SET_SEARCH_RESULT', @@ -158,12 +145,6 @@ currentIsSearch() { return this.$route.name === PageNames.SEARCH; }, - onOffline() { - this.isOffline = true; - }, - onOnline() { - this.isOffline = false; - }, onLogoClick(event) { if (event.ctrlKey) { this.$store.commit('topicsRoot/SET_SHOW_SIDE_NAV', true); diff --git a/kolibri_explore_plugin/assets/src/mixins/isOfflineMixin.js b/kolibri_explore_plugin/assets/src/mixins/isOfflineMixin.js new file mode 100644 index 000000000..f2b31e851 --- /dev/null +++ b/kolibri_explore_plugin/assets/src/mixins/isOfflineMixin.js @@ -0,0 +1,24 @@ +export default { + data() { + return { + isOffline: false, + }; + }, + created() { + this.isOffline = !navigator.onLine; + window.addEventListener('offline', this.onOffline); + window.addEventListener('online', this.onOnline); + }, + destroyed() { + window.removeEventListener('offline', this.onOffline); + window.removeEventListener('online', this.onOnline); + }, + methods: { + onOffline() { + this.isOffline = true; + }, + onOnline() { + this.isOffline = false; + }, + }, +}; diff --git a/kolibri_explore_plugin/assets/src/views/welcome/PackReadyPage.vue b/kolibri_explore_plugin/assets/src/views/welcome/PackReadyPage.vue index f402c6eb2..15c8c2400 100644 --- a/kolibri_explore_plugin/assets/src/views/welcome/PackReadyPage.vue +++ b/kolibri_explore_plugin/assets/src/views/welcome/PackReadyPage.vue @@ -6,7 +6,7 @@ @@ -28,6 +28,8 @@