From 6789ea8be448505831bc6dcebcc5cab3ced55d23 Mon Sep 17 00:00:00 2001 From: Roberto Tonino Date: Sat, 28 Nov 2020 17:34:22 +0100 Subject: [PATCH] fix: search caching keeping old search after changing term --- public/js/bundle.js | 2 +- src/components/pages/Search.vue | 11 ++++++++--- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/public/js/bundle.js b/public/js/bundle.js index 75be583..a0e65d0 100644 --- a/public/js/bundle.js +++ b/public/js/bundle.js @@ -2844,7 +2844,7 @@ PERFORMANCE OF THIS SOFTWARE. `+e._s(e.$t("globals.by",{artist:r.artistName})+" - "+e.$tc("globals.listTabs.trackN",r.playlistTracksNumber))+` `)])],1)}),0)]],2)},__vue_staticRenderFns__$q=[];const __vue_inject_styles__$q=void 0,__vue_scope_id__$q=void 0,__vue_is_functional_template__$q=!1;function __vue_normalize__$q(e,n,a,r,i,s,l,c){const o=(typeof a=="function"?a.options:a)||{};return o.__file="ResultsPlaylists.vue",o.render||(o.render=e.render,o.staticRenderFns=e.staticRenderFns,o._compiled=!0,i&&(o.functional=!0)),o._scopeId=r,o}var ResultsPlaylists=__vue_normalize__$q({render:__vue_render__$q,staticRenderFns:__vue_staticRenderFns__$q},__vue_inject_styles__$q,__vue_script__$o,__vue_scope_id__$q,__vue_is_functional_template__$q),script$p={components:{TopResult,ResultsTracks,ResultsAlbums,ResultsArtists,ResultsPlaylists},props:{viewInfo:{type:Object,required:!1}},computed:{thereAreResults(){let e=!!this.viewInfo;if(!e)return!1;let n=this.viewInfo.ORDER.every(a=>a==="TOP_RESULT"?this.viewInfo[a].length===0:this.viewInfo[a].data.length===0);return!n}},methods:{convertDuration,upperCaseFirstLowerCaseRest,standardizeData,formatSingleTrack,formatAlbums,formatArtist,formatPlaylist,checkSectionResults(e){return e==="TOP_RESULT"?!!this.viewInfo.TOP_RESULT[0]:!!this.viewInfo[e].data[0]}}};const __vue_script__$p=script$p;var __vue_render__$r=function(){var e=this,n=e.$createElement,a=e._self._c||n;return a("section",[e.thereAreResults?e._l(e.viewInfo.ORDER,function(r){return a("section",{key:r,staticClass:"float-none py-5 border-t border-grayscale-500 first:border-t-0"},[e.checkSectionResults(r)?[a("h2",{staticClass:"mb-6 capitalize",class:{"text-4xl text-center":r==="TOP_RESULT","inline-block cursor-pointer text-3xl hover:text-primary transition-colors duration-200 ease-in-out":r!=="TOP_RESULT"},on:{click:function(i){return e.$emit("change-search-tab",r)}}},[e._v(` `+e._s(e.$tc("globals.listTabs."+r.toLowerCase(),2))+` - `)]),e._v(" "),r==="TOP_RESULT"?a("TopResult",{attrs:{info:e.viewInfo.TOP_RESULT[0]},on:{"add-to-queue":function(i){return e.$emit("add-to-queue",i)}}}):r==="TRACK"?a("ResultsTracks",{attrs:{viewInfo:e.standardizeData(e.viewInfo.TRACK,e.formatSingleTrack),itemsToShow:6},on:{"add-to-queue":function(i){return e.$emit("add-to-queue",i)}}}):r=="ALBUM"?a("ResultsAlbums",{attrs:{viewInfo:e.standardizeData(e.viewInfo.ALBUM,e.formatAlbums),itemsToShow:6},on:{"add-to-queue":function(i){return e.$emit("add-to-queue",i)}}}):r=="PLAYLIST"?a("ResultsPlaylists",{attrs:{viewInfo:e.standardizeData(e.viewInfo.PLAYLIST,e.formatPlaylist),itemsToShow:6},on:{"add-to-queue":function(i){return e.$emit("add-to-queue",i)}}}):r==="ARTIST"?a("ResultsArtists",{attrs:{viewInfo:e.standardizeData(e.viewInfo.ARTIST,e.formatArtist),itemsToShow:6},on:{"add-to-queue":function(i){return e.$emit("add-to-queue",i)}}}):e._e()]:e._e()],2)}):a("div",[a("h1",[e._v(e._s(e.$t("search.noResults")))])])],2)},__vue_staticRenderFns__$r=[];const __vue_inject_styles__$r=void 0,__vue_scope_id__$r=void 0,__vue_is_functional_template__$r=!1;function __vue_normalize__$r(e,n,a,r,i,s,l,c){const o=(typeof a=="function"?a.options:a)||{};return o.__file="ResultsAll.vue",o.render||(o.render=e.render,o.staticRenderFns=e.staticRenderFns,o._compiled=!0,i&&(o.functional=!0)),o._scopeId=r,o}var ResultsAll=__vue_normalize__$r({render:__vue_render__$r,staticRenderFns:__vue_staticRenderFns__$r},__vue_inject_styles__$r,__vue_script__$p,__vue_scope_id__$r,__vue_is_functional_template__$r);const searchResult=ref$2({});function performMainSearch(e){console.log("Perform main search"),socket.emit("mainSearch",{term:e}),socket.on("mainSearch",n=>{searchResult.value=n,socket.off("mainSearch")})}function useMainSearch(){return{searchResult,performMainSearch}}const result=ref$2({});function performSearch({term:e,type:n,start:a=0,nb:r=30}){console.log("perform search!"),socket.emit("search",{term:e,type:n,start:a,nb:r}),socket.on("search",i=>{result.value=i,socket.off("search")})}function useSearch(){return{result,performSearch}}const resetObj={data:[],next:0,total:0,hasLoaded:!1},lastTab=ref$2(null);var script$q=defineComponent({components:{BaseLoadingPlaceholder,BaseTabs,BaseTab},props:{performScrolledSearch:{type:Boolean,required:!1}},setup(e,n){const a=reactive({currentTab:{name:"",searchType:"",component:{},viewInfo:"",formatFunc:()=>{}},results:{query:"",allTab:{ORDER:[],TOP_RESULT:[],ALBUM:{hasLoaded:!1},ARTIST:{hasLoaded:!1},TRACK:{hasLoaded:!1},PLAYLIST:{hasLoaded:!1}},trackTab:{...resetObj},albumTab:{...resetObj},artistTab:{...resetObj},playlistTab:{...resetObj}},tabs:[{name:n.root.$i18n.t("globals.listTabs.all"),searchType:"all",component:ResultsAll,viewInfo:"allTab"},{name:n.root.$i18n.tc("globals.listTabs.track",2),searchType:"track",component:ResultsTracks,viewInfo:"trackTab",formatFunc:formatSingleTrack},{name:n.root.$i18n.tc("globals.listTabs.album",2),searchType:"album",component:ResultsAlbums,viewInfo:"albumTab",formatFunc:formatAlbums},{name:n.root.$i18n.tc("globals.listTabs.artist",2),searchType:"artist",component:ResultsArtists,viewInfo:"artistTab",formatFunc:formatArtist},{name:n.root.$i18n.tc("globals.listTabs.playlist",2),searchType:"playlist",component:ResultsPlaylists,viewInfo:"playlistTab",formatFunc:formatPlaylist}]}),{searchResult:r,performMainSearch:i}=useMainSearch(),{result:s,performSearch:l}=useSearch(),c=computed(()=>a.results.query===""),o=computed(()=>n.root.$route.query.term),u=ref$2(!1),d=computed(()=>Object.keys(r.value).length!==0);console.log("onSetup",lastTab.value),d.value&&(console.log("main search cached!"),onMounted(()=>{f(r.value)})),o.value&&!d.value&&(console.log("need to perform main search"),i(o.value),u.value=!0);function f(m){u.value=!1,a.results.query=m.QUERY,a.results.allTab=m,a.results.allTab.TRACK.hasLoaded=!0,a.results.allTab.ALBUM.hasLoaded=!0,a.results.allTab.ARTIST.hasLoaded=!0,a.results.allTab.PLAYLIST.hasLoaded=!0,lastTab.value&&lastTab.value.searchType!=="all"?(console.log("in main search, set last tab"),a.currentTab=lastTab.value,l({term:m.QUERY,type:a.currentTab.searchType})):(console.log("in main search, all tab"),a.currentTab=a.tabs.find(h=>h.searchType==="all"))}return watch(r,f),watch(s,m=>{const{next:h,total:v,type:y,data:k}=m,w=y+"Tab";let x=v;h&&(x=parseInt(h.match(/index=(\d*)/)[1])),a.results[w].total!==v&&(a.results[w].total=v),a.results[w].next!==x&&(a.results[w].next=x,a.results[w].data=a.results[w].data.concat(k)),a.results[w].hasLoaded=!0}),a.currentTab=a.tabs.find(m=>m.searchType==="all"),{...toRefs(a),isSearching:u,isQueryEmpty:c,searchResult:r,performMainSearch:i,performSearch:l}},computed:{loadedTabs(){const e=[];for(const n in this.results)if(this.results.hasOwnProperty(n)&&n!=="query"){const a=this.results[n];a.hasLoaded&&e.push(n.replace(/Tab/g,""))}return e}},methods:{numberWithDots,convertDuration,addToQueue(e){sendAddToQueue(e.currentTarget.dataset.link)},getViewInfo(){return this.currentTab.searchType==="all"?this.results.allTab:standardizeData(this.results[this.currentTab.viewInfo],this.currentTab.formatFunc)},changeSearchTab(e){e=e.toLowerCase();const n=this.tabs.find(a=>a.searchType===e);if(!n){console.error(`No tab ${e} found`);return}window.scrollTo(0,0),this.currentTab=n,lastTab.value=n},scrolledSearch(){if(this.currentTab.searchType==="all")return;const e=`${this.currentTab.searchType}Tab`,n=this.results[e].next %s",n.searchType,e.searchType),this.isTabLoaded(e))return;this.performSearch({term:this.results.query,type:e.searchType,start:this.results[`${e.searchType}Tab`].next})}}});const __vue_script__$q=script$q;var __vue_render__$s=function(){var e=this,n=e.$createElement,a=e._self._c||n;return a("div",{attrs:{id:"search_tab"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:e.isQueryEmpty&&!e.isSearching,expression:"isQueryEmpty && !isSearching"}]},[a("h2",[e._v(e._s(e.$t("search.startSearching")))]),e._v(" "),a("p",[e._v(e._s(e.$t("search.description")))])]),e._v(" "),a("BaseLoadingPlaceholder",{attrs:{text:"Searching...",hidden:!e.isSearching}}),e._v(" "),a("div",{directives:[{name:"show",rawName:"v-show",value:!e.isQueryEmpty&&!e.isSearching,expression:"!isQueryEmpty && !isSearching"}]},[a("BaseTabs",e._l(e.tabs,function(r){return a("BaseTab",{key:r.name,class:{active:e.currentTab.name===r.name},on:{click:function(i){return e.changeSearchTab(r.searchType)}}},[e._v(` + `)]),e._v(" "),r==="TOP_RESULT"?a("TopResult",{attrs:{info:e.viewInfo.TOP_RESULT[0]},on:{"add-to-queue":function(i){return e.$emit("add-to-queue",i)}}}):r==="TRACK"?a("ResultsTracks",{attrs:{viewInfo:e.standardizeData(e.viewInfo.TRACK,e.formatSingleTrack),itemsToShow:6},on:{"add-to-queue":function(i){return e.$emit("add-to-queue",i)}}}):r=="ALBUM"?a("ResultsAlbums",{attrs:{viewInfo:e.standardizeData(e.viewInfo.ALBUM,e.formatAlbums),itemsToShow:6},on:{"add-to-queue":function(i){return e.$emit("add-to-queue",i)}}}):r=="PLAYLIST"?a("ResultsPlaylists",{attrs:{viewInfo:e.standardizeData(e.viewInfo.PLAYLIST,e.formatPlaylist),itemsToShow:6},on:{"add-to-queue":function(i){return e.$emit("add-to-queue",i)}}}):r==="ARTIST"?a("ResultsArtists",{attrs:{viewInfo:e.standardizeData(e.viewInfo.ARTIST,e.formatArtist),itemsToShow:6},on:{"add-to-queue":function(i){return e.$emit("add-to-queue",i)}}}):e._e()]:e._e()],2)}):a("div",[a("h1",[e._v(e._s(e.$t("search.noResults")))])])],2)},__vue_staticRenderFns__$r=[];const __vue_inject_styles__$r=void 0,__vue_scope_id__$r=void 0,__vue_is_functional_template__$r=!1;function __vue_normalize__$r(e,n,a,r,i,s,l,c){const o=(typeof a=="function"?a.options:a)||{};return o.__file="ResultsAll.vue",o.render||(o.render=e.render,o.staticRenderFns=e.staticRenderFns,o._compiled=!0,i&&(o.functional=!0)),o._scopeId=r,o}var ResultsAll=__vue_normalize__$r({render:__vue_render__$r,staticRenderFns:__vue_staticRenderFns__$r},__vue_inject_styles__$r,__vue_script__$p,__vue_scope_id__$r,__vue_is_functional_template__$r);const searchResult=ref$2({});function performMainSearch(e){console.log("Perform main search"),socket.emit("mainSearch",{term:e}),socket.on("mainSearch",n=>{searchResult.value=n,socket.off("mainSearch")})}function useMainSearch(){return{searchResult,performMainSearch}}const result=ref$2({});function performSearch({term:e,type:n,start:a=0,nb:r=30}){console.log("perform search!"),socket.emit("search",{term:e,type:n,start:a,nb:r}),socket.on("search",i=>{result.value=i,socket.off("search")})}function useSearch(){return{result,performSearch}}const resetObj={data:[],next:0,total:0,hasLoaded:!1},lastTab=ref$2(null);var script$q=defineComponent({components:{BaseLoadingPlaceholder,BaseTabs,BaseTab},props:{performScrolledSearch:{type:Boolean,required:!1}},setup(e,n){const a=reactive({currentTab:{name:"",searchType:"",component:{},viewInfo:"",formatFunc:()=>{}},results:{query:"",allTab:{ORDER:[],TOP_RESULT:[],ALBUM:{hasLoaded:!1},ARTIST:{hasLoaded:!1},TRACK:{hasLoaded:!1},PLAYLIST:{hasLoaded:!1}},trackTab:{...resetObj},albumTab:{...resetObj},artistTab:{...resetObj},playlistTab:{...resetObj}},tabs:[{name:n.root.$i18n.t("globals.listTabs.all"),searchType:"all",component:ResultsAll,viewInfo:"allTab"},{name:n.root.$i18n.tc("globals.listTabs.track",2),searchType:"track",component:ResultsTracks,viewInfo:"trackTab",formatFunc:formatSingleTrack},{name:n.root.$i18n.tc("globals.listTabs.album",2),searchType:"album",component:ResultsAlbums,viewInfo:"albumTab",formatFunc:formatAlbums},{name:n.root.$i18n.tc("globals.listTabs.artist",2),searchType:"artist",component:ResultsArtists,viewInfo:"artistTab",formatFunc:formatArtist},{name:n.root.$i18n.tc("globals.listTabs.playlist",2),searchType:"playlist",component:ResultsPlaylists,viewInfo:"playlistTab",formatFunc:formatPlaylist}]}),{searchResult:r,performMainSearch:i}=useMainSearch(),{result:s,performSearch:l}=useSearch(),c=computed(()=>a.results.query===""),o=computed(()=>n.root.$route.query.term),u=ref$2(!1),d=computed(()=>Object.keys(r.value).length!==0),f=computed(()=>r.value.QUERY!==o.value);console.log("onSetup",lastTab.value),d.value&&!f.value&&(console.log("main search cached!"),onMounted(()=>{m(r.value)})),o.value&&(!d.value||f.value)&&(console.log("need to perform main search"),i(o.value),u.value=!0);function m(h){u.value=!1,a.results.query=h.QUERY,a.results.allTab=h,a.results.allTab.TRACK.hasLoaded=!0,a.results.allTab.ALBUM.hasLoaded=!0,a.results.allTab.ARTIST.hasLoaded=!0,a.results.allTab.PLAYLIST.hasLoaded=!0,lastTab.value&&lastTab.value.searchType!=="all"?(console.log("in main search, set last tab"),a.currentTab=lastTab.value,l({term:h.QUERY,type:a.currentTab.searchType})):(console.log("in main search, all tab"),a.currentTab=a.tabs.find(v=>v.searchType==="all"))}return watch(r,m),watch(s,h=>{const{next:v,total:y,type:k,data:w}=h,x=k+"Tab";let A=y;v&&(A=parseInt(v.match(/index=(\d*)/)[1])),a.results[x].total!==y&&(a.results[x].total=y),a.results[x].next!==A&&(a.results[x].next=A,a.results[x].data=a.results[x].data.concat(w)),a.results[x].hasLoaded=!0}),a.currentTab=a.tabs.find(h=>h.searchType==="all"),{...toRefs(a),isSearching:u,isQueryEmpty:c,searchResult:r,performMainSearch:i,performSearch:l,isNewQuery:f,searchedTerm:o,isMainSearchCached:d}},computed:{loadedTabs(){const e=[];for(const n in this.results)if(this.results.hasOwnProperty(n)&&n!=="query"){const a=this.results[n];a.hasLoaded&&e.push(n.replace(/Tab/g,""))}return e}},methods:{numberWithDots,convertDuration,addToQueue(e){sendAddToQueue(e.currentTarget.dataset.link)},getViewInfo(){return this.currentTab.searchType==="all"?this.results.allTab:standardizeData(this.results[this.currentTab.viewInfo],this.currentTab.formatFunc)},changeSearchTab(e){e=e.toLowerCase();const n=this.tabs.find(a=>a.searchType===e);if(!n){console.error(`No tab ${e} found`);return}window.scrollTo(0,0),this.currentTab=n,lastTab.value=n},scrolledSearch(){if(this.currentTab.searchType==="all")return;const e=`${this.currentTab.searchType}Tab`,n=this.results[e].next %s",n.searchType,e.searchType),this.isTabLoaded(e))return;this.performSearch({term:this.results.query,type:e.searchType,start:this.results[`${e.searchType}Tab`].next})}}});const __vue_script__$q=script$q;var __vue_render__$s=function(){var e=this,n=e.$createElement,a=e._self._c||n;return a("div",{attrs:{id:"search_tab"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:e.isQueryEmpty&&!e.isSearching,expression:"isQueryEmpty && !isSearching"}]},[a("h2",[e._v(e._s(e.$t("search.startSearching")))]),e._v(" "),a("p",[e._v(e._s(e.$t("search.description")))])]),e._v(" "),a("BaseLoadingPlaceholder",{attrs:{text:"Searching...",hidden:!e.isSearching}}),e._v(" "),a("div",{directives:[{name:"show",rawName:"v-show",value:!e.isQueryEmpty&&!e.isSearching,expression:"!isQueryEmpty && !isSearching"}]},[a("BaseTabs",e._l(e.tabs,function(r){return a("BaseTab",{key:r.name,class:{active:e.currentTab.name===r.name},on:{click:function(i){return e.changeSearchTab(r.searchType)}}},[e._v(` `+e._s(r.name)+` `)])}),1),e._v(" "),a("keep-alive",[a(e.currentTab.component,{tag:"component",attrs:{viewInfo:e.getViewInfo(),"want-headers":""},on:{"add-to-queue":e.addToQueue,"change-search-tab":e.changeSearchTab}})],1)],1)],1)},__vue_staticRenderFns__$s=[];const __vue_inject_styles__$s=void 0,__vue_scope_id__$s=void 0,__vue_is_functional_template__$s=!1;function __vue_normalize__$s(e,n,a,r,i,s,l,c){const o=(typeof a=="function"?a.options:a)||{};return o.__file="Search.vue",o.render||(o.render=e.render,o.staticRenderFns=e.staticRenderFns,o._compiled=!0,i&&(o.functional=!0)),o._scopeId=r,o}var Search=__vue_normalize__$s({render:__vue_render__$s,staticRenderFns:__vue_staticRenderFns__$s},__vue_inject_styles__$s,__vue_script__$q,__vue_scope_id__$s,__vue_is_functional_template__$s),it$1=` diff --git a/src/components/pages/Search.vue b/src/components/pages/Search.vue index 472f05c..fed6aa6 100644 --- a/src/components/pages/Search.vue +++ b/src/components/pages/Search.vue @@ -143,16 +143,17 @@ export default defineComponent({ const searchedTerm = computed(() => ctx.root.$route.query.term) const isSearching = ref(false) const isMainSearchCached = computed(() => Object.keys(searchResult.value).length !== 0) + const isNewQuery = computed(() => searchResult.value.QUERY !== searchedTerm.value) console.log('onSetup', lastTab.value) - if (isMainSearchCached.value) { + if (isMainSearchCached.value && !isNewQuery.value) { console.log('main search cached!') onMounted(() => { handleMainSearch(searchResult.value) }) } - if (searchedTerm.value && !isMainSearchCached.value) { + if (searchedTerm.value && (!isMainSearchCached.value || isNewQuery.value)) { console.log('need to perform main search') performMainSearch(searchedTerm.value) isSearching.value = true @@ -225,7 +226,11 @@ export default defineComponent({ isQueryEmpty, searchResult, performMainSearch, - performSearch + performSearch, + // Remove + isNewQuery, + searchedTerm, + isMainSearchCached } }, computed: {