From a71f0a5fb58a08a486797649bfddb7dfde15650b Mon Sep 17 00:00:00 2001 From: Samson Akol Date: Thu, 27 Apr 2023 13:21:35 +0300 Subject: [PATCH 1/2] Corrects buggy routing implementation --- .../assets/src/composables/useContentLink.js | 24 +++++++++++++++++++ .../plugins/learn/assets/src/routes/index.js | 1 - .../ExploreLibrariesPage/LibraryItem.vue | 22 +++-------------- .../src/views/ExploreLibrariesPage/index.vue | 10 ++++---- .../views/LibraryPage/MoreNetworkDevices.vue | 20 +++++++++------- .../LibraryPage/PinnedNetworkResources.vue | 17 ++++--------- .../src/views/LibraryPage/UnPinnedDevices.vue | 11 +-------- .../assets/src/views/LibraryPage/index.vue | 9 ++++--- 8 files changed, 53 insertions(+), 61 deletions(-) diff --git a/kolibri/plugins/learn/assets/src/composables/useContentLink.js b/kolibri/plugins/learn/assets/src/composables/useContentLink.js index ec8138b6e49..6ff02b45e28 100644 --- a/kolibri/plugins/learn/assets/src/composables/useContentLink.js +++ b/kolibri/plugins/learn/assets/src/composables/useContentLink.js @@ -126,11 +126,35 @@ export default function useContentLink(store) { return `${base}${path}${query}`; } + function genLibraryPageBackLink(deviceId, isExploreLibraries = false) { + if (!route) { + return null; + } + + const oldQuery = get(route).query || {}; + const query = { + prevName: get(route).name, + }; + if (!isEmpty(oldQuery)) { + query.prevQuery = encodeURI(JSON.stringify(oldQuery)); + } + const params = get(route).params; + if (!isEmpty(params)) { + query.prevParams = encodeURI(JSON.stringify(params)); + } + return { + name: isExploreLibraries ? PageNames.EXPLORE_LIBRARIES : PageNames.LIBRARY, + params: pick({ deviceId: deviceId || params.deviceId }, ['deviceId']), + query, + }; + } + return { genContentLinkBackLinkCurrentPage, genContentLinkKeepCurrentBackLink, genExternalContentURLBackLinkCurrentPage, genExternalBackURL, + genLibraryPageBackLink, back, }; } diff --git a/kolibri/plugins/learn/assets/src/routes/index.js b/kolibri/plugins/learn/assets/src/routes/index.js index 736cb896dc8..f1e2f922c9a 100644 --- a/kolibri/plugins/learn/assets/src/routes/index.js +++ b/kolibri/plugins/learn/assets/src/routes/index.js @@ -111,7 +111,6 @@ export default [ props: route => { return { deviceId: route.params.deviceId, - goBackRoute: route.params.goBackRoute, }; }, }, diff --git a/kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/LibraryItem.vue b/kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/LibraryItem.vue index 6617864abfe..ef84734f46b 100644 --- a/kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/LibraryItem.vue +++ b/kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/LibraryItem.vue @@ -48,7 +48,7 @@ @@ -80,7 +80,6 @@ import useKResponsiveWindow from 'kolibri.coreVue.composables.useKResponsiveWindow'; import useContentLink from '../../composables/useContentLink'; import ChannelCard from '../ChannelCard'; - import { PageNames } from '../../constants'; export default { name: 'LibraryItem', @@ -89,11 +88,12 @@ }, mixins: [commonCoreStrings], setup() { - const { genContentLinkBackLinkCurrentPage } = useContentLink(); + const { genContentLinkBackLinkCurrentPage, genLibraryPageBackLink } = useContentLink(); const { windowIsSmall } = useKResponsiveWindow(); return { genContentLinkBackLinkCurrentPage, + genLibraryPageBackLink, windowIsSmall, }; }, @@ -140,22 +140,6 @@ default: false, }, }, - computed: { - goBackRoute() { - return { - name: PageNames.EXPLORE_LIBRARIES, - }; - }, - libraryPageRoute() { - return { - name: PageNames.LIBRARY, - params: { - deviceId: this.deviceId, - goBackRoute: this.goBackRoute, - }, - }; - }, - }, $trs: { channels: { message: diff --git a/kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/index.vue b/kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/index.vue index 3aeed851ff6..b0e1e8b702e 100644 --- a/kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/index.vue +++ b/kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/index.vue @@ -2,7 +2,7 @@
0; }, - backRoute() { - return { name: PageNames.LIBRARY }; - }, displayShowButton() { return this.moreDevices.length === 0; }, diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/MoreNetworkDevices.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage/MoreNetworkDevices.vue index f88a134ca82..11c12296fd4 100644 --- a/kolibri/plugins/learn/assets/src/views/LibraryPage/MoreNetworkDevices.vue +++ b/kolibri/plugins/learn/assets/src/views/LibraryPage/MoreNetworkDevices.vue @@ -9,7 +9,10 @@ :layout8="{ span: 4 }" :layout4="{ span: 4 }" > - + @@ -33,7 +36,7 @@ diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/PinnedNetworkResources.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage/PinnedNetworkResources.vue index 30c00ac35f1..70a6194a7ca 100644 --- a/kolibri/plugins/learn/assets/src/views/LibraryPage/PinnedNetworkResources.vue +++ b/kolibri/plugins/learn/assets/src/views/LibraryPage/PinnedNetworkResources.vue @@ -28,7 +28,7 @@ :key="exploreString.toLowerCase()" :isMobile="windowIsSmall" :title="exploreString" - :link="libraryPageRoute(device.id)" + :link="genLibraryPageBackLink(device.id, false)" :explore="true" /> @@ -45,7 +45,7 @@ import useKResponsiveWindow from 'kolibri.coreVue.composables.useKResponsiveWindow'; import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin'; import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings'; - import { PageNames } from '../../constants'; + import useContentLink from '../../composables/useContentLink'; import ChannelCard from '../ChannelCard'; import ChannelCardGroupGrid from './../ChannelCardGroupGrid'; @@ -57,8 +57,10 @@ }, mixins: [responsiveWindowMixin, commonCoreStrings], setup() { + const { genLibraryPageBackLink } = useContentLink(); const { windowGutter } = useKResponsiveWindow(); return { + genLibraryPageBackLink, windowGutter, }; }, @@ -75,11 +77,6 @@ exploreString() { return this.coreString('explore'); }, - goBackRoute() { - return { - name: PageNames.LIBRARY, - }; - }, }, methods: { getDeviceIcon(device) { @@ -91,12 +88,6 @@ return 'laptop'; } }, - libraryPageRoute(deviceId) { - return this.$router.getRoute(PageNames.LIBRARY, { - deviceId, - goBackRoute: this.goBackRoute, - }); - }, }, }; diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/UnPinnedDevices.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage/UnPinnedDevices.vue index 79bf276f552..5e326792a52 100644 --- a/kolibri/plugins/learn/assets/src/views/LibraryPage/UnPinnedDevices.vue +++ b/kolibri/plugins/learn/assets/src/views/LibraryPage/UnPinnedDevices.vue @@ -53,7 +53,6 @@ import TextTruncatorCss from 'kolibri.coreVue.components.TextTruncatorCss'; import useKResponsiveWindow from 'kolibri.coreVue.composables.useKResponsiveWindow'; import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings'; - import { PageNames } from '../../constants'; export default { name: 'UnPinnedDevices', @@ -74,15 +73,7 @@ }, routeTo: { type: Object, - required: false, - default() { - return { - name: PageNames.LIBRARY, - params: { - deviceId: this.device.id, - }, - }; - }, + required: true, }, viewAll: { type: Boolean, diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue index d2647d0c763..f6a74d11e9a 100644 --- a/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue +++ b/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue @@ -5,7 +5,7 @@ :appearanceOverrides="{}" :loading="loading" :deviceId="deviceId" - :route="goBackRoute" + :route="back" >
Date: Thu, 27 Apr 2023 15:58:04 +0300 Subject: [PATCH 2/2] add loading state, loads device channels singly --- .../src/views/ExploreLibrariesPage/index.vue | 47 ++++++++++--------- .../assets/src/views/LibraryPage/index.vue | 41 ++++++++-------- 2 files changed, 47 insertions(+), 41 deletions(-) diff --git a/kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/index.vue b/kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/index.vue index b0e1e8b702e..0758afab271 100644 --- a/kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/index.vue +++ b/kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/index.vue @@ -4,6 +4,7 @@ :appBarTitle="learnString('exploreLibraries')" :route="back" :primary="false" + :loading="loading" >
import { mapGetters } from 'vuex'; + import ImmersivePage from 'kolibri.coreVue.components.ImmersivePage'; import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings'; import { crossComponentTranslator } from 'kolibri.utils.i18n'; @@ -101,6 +103,7 @@ }, data() { return { + loading: false, networkDevices: [], moreDevices: [], usersPins: [], @@ -173,6 +176,7 @@ }, }, created() { + this.loading = true; // Fetch user's pins this.fetchPinsForUser().then(resp => { this.usersPins = resp.map(pin => { @@ -182,23 +186,28 @@ }); this.fetchDevices().then(devices => { - const fetchDevicesChannels = devices.reduce((accumulator, device) => { + this.loading = false; + for (const device of devices) { const baseurl = device.base_url; - accumulator.push(this.fetchChannels({ baseurl })); - return accumulator; - }, []); - - Promise.allSettled(fetchDevicesChannels).then(devicesChannels => { - this.networkDevices = devices.map((device, index) => { - const deviceChannels = devicesChannels[index]?.value || []; - device['channels'] = deviceChannels.slice(0, 4); - device['total_count'] = deviceChannels.length; - return device; - }); - }); + this.fetchChannels({ baseurl }) + .then(channels => { + this.addNetworkDevice(device, channels); + }) + .catch(() => { + this.addNetworkDevice(device, []); + }); + } }); }, methods: { + addNetworkDevice(device, channels) { + this.networkDevices.push( + Object.assign(device, { + channels: channels.slice(0, 4), + total_count: channels.length, + }) + ); + }, createPin(instance_id) { return this.createPinForUser(instance_id).then(response => { const id = response.id; @@ -222,13 +231,9 @@ handlePinToggle(instance_id) { if (this.usersPinsDeviceIds.includes(instance_id)) { const pinId = this.usersPins.find(pin => pin.instance_id === instance_id); - this.deletePin(instance_id, pinId).catch(e => { - console.error(e); - }); + this.deletePin(instance_id, pinId); } else { - this.createPin(instance_id).catch(e => { - console.error(e); - }); + this.createPin(instance_id); } }, getDeviceIcon(device) { diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue index f6a74d11e9a..10f16f8ca71 100644 --- a/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue +++ b/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue @@ -436,12 +436,23 @@ } }, methods: { + addDevice(device, channels) { + this.devices.push( + Object.assign(device, { + channels: channels.sort(this.currentLanguageChannelsFirst), + total_count: channels.length, + }) + ); + }, + currentLanguageChannelsFirst(a, b) { + return b['lang_code'].indexOf(currentLanguage) - a['lang_code'].indexOf(currentLanguage); + }, findFirstEl() { this.$refs.resourcePanel.focusFirstEl(); }, refreshDevices() { this.searching = true; - + this.devices = []; this.fetchPinsForUser().then(resp => { this.usersPins = resp.map(pin => { const instance_id = pin.instance_id.replace(/-/g, ''); @@ -450,27 +461,17 @@ }); this.fetchDevices().then(devices => { - const fetchDevicesChannels = devices.reduce((accumulator, device) => { + this.searching = false; + for (const device of devices) { const baseurl = device.base_url; - accumulator.push(this.fetchChannels({ baseurl })); - return accumulator; - }, []); - - Promise.allSettled(fetchDevicesChannels).then(devicesChannels => { - this.devices = devices.map((device, index) => { - const deviceChannels = devicesChannels[index]?.value || []; - //Sort channels based on user's current language, - //and then return the first seven channels only. - device['channels'] = deviceChannels.sort((a, b) => { - return ( - b['lang_code'].indexOf(currentLanguage) - a['lang_code'].indexOf(currentLanguage) - ); + this.fetchChannels({ baseurl }) + .then(channels => { + this.addDevice(device, channels); + }) + .catch(() => { + this.addDevice(device, []); }); - device['total_count'] = deviceChannels.length; - return device; - }); - this.searching = false; - }); + } }); }, toggleSidePanelVisibility() {