From fb7afc00b07b7d16615029b7b49b49bedf601404 Mon Sep 17 00:00:00 2001
From: Jonathan Romano <jonathan@luxaritas.com>
Date: Tue, 24 Sep 2024 16:43:41 -0400
Subject: [PATCH] Fix puzzles and labs lists being momentarily outdated when
 navigating to a new list (#138)

## Summary
Previously, we avoided triggering the loading screen when loading
puzzles or labs to account for the fact "load more" and filters shouldnt
reload the page. However, a) we still want the loading screen on first
load and b) because of the way we cache list responses internally, if
you navigated to a different page with the same type of list on it, it
would show the content of the previously loaded page until the new
content was loaded.

## Testing
* Tested switching from quest to puzzle list
* Tested changing filters and load more on puzzles and lab list
---
 src/components/BasePuzzleListPage.vue |  9 ++++++---
 src/store/index.ts                    | 12 ++++++------
 src/views/LabExplore.vue              | 12 ++++++++----
 3 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/components/BasePuzzleListPage.vue b/src/components/BasePuzzleListPage.vue
index 1fb1a62..d0f5c45 100644
--- a/src/components/BasePuzzleListPage.vue
+++ b/src/components/BasePuzzleListPage.vue
@@ -75,6 +75,7 @@ import PuzzleCard from '../components/PuzzleCard.vue'
 import { Action, Achievement, PuzzleItem, PuzzleList } from '../store';
 import ChatManager from '../ChatManager';
 
+const PAGE_SIZE = 9;
 
 export default Vue.extend({
     props: {
@@ -91,10 +92,11 @@ export default Vue.extend({
     data() {
         return {
             availableFilters: [] as {value: string; text: string}[],
-            numberOfPuzzles: 9,
+            numberOfPuzzles: PAGE_SIZE,
             playablePuzzleIndex: 0,
             chat: <ChatManager | null>null,
             logoSourcePng: require('../assets/logo_eterna.svg'),
+            firstLoad: true
         };
     },
     async mounted() {
@@ -211,11 +213,12 @@ export default Vue.extend({
 
                 if (!query.progression) queryParams.append('size', this.numberOfPuzzles.toString(10));
 
-                await this.$store.dispatch(Action.GET_PUZZLES, queryParams.toString());
+                await this.$store.dispatch(Action.GET_PUZZLES, {queryString: queryParams.toString(), firstLoad: this.firstLoad});
+                this.firstLoad = false;
             }
         },
         async fetchMorePuzzles() {
-            this.numberOfPuzzles += 9;
+            this.numberOfPuzzles += PAGE_SIZE;
             await this.fetchNewPuzzles();
         },
         async logout() {
diff --git a/src/store/index.ts b/src/store/index.ts
index e408496..5e2f8f1 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -384,15 +384,15 @@ export default function createStore(http: AxiosInstance) {
                     commit('popIsLoading');
                 }
             },
-            async [Action.GET_LABS]({ commit }, queryString: string){
-                // commit('pushIsLoading');
+            async [Action.GET_LABS]({ commit }, { queryString, firstLoad }: { queryString: string; firstLoad?: boolean}){
+                if (firstLoad) commit('pushIsLoading');
                 try{
                     const { data } = (await http.get(`/get/?${queryString}`)).data;
                     commit('setLabTotal', parseInt(data.num_labs));
                     commit('setLabs', data.labs);
                 }
                 finally{
-                    // commit('popIsLoading');
+                    if (firstLoad) commit('popIsLoading');
                 }
             },
             async [Action.GET_LAB]({ commit }, { id }: { id: string}){
@@ -431,14 +431,14 @@ export default function createStore(http: AxiosInstance) {
                     commit('popIsLoading');
                 }
             },
-            async [Action.GET_PUZZLES]({ commit }, queryString: string){
-                // commit('pushIsLoading');
+            async [Action.GET_PUZZLES]({ commit }, { queryString, firstLoad }: { queryString: string; firstLoad?: boolean}){
+                if (firstLoad) commit('pushIsLoading');
                 try{
                     const { data } = (await http.get(`/get/?${queryString}`)).data;
                     commit('setPuzzles', data);
                 }
                 finally{
-                    // commit('popIsLoading');
+                    if (firstLoad) commit('popIsLoading');
                 }
             },
             async [Action.GET_PUZZLE]({ commit }, { id }: { id: string}){
diff --git a/src/views/LabExplore.vue b/src/views/LabExplore.vue
index 74c7dbe..625c31b 100644
--- a/src/views/LabExplore.vue
+++ b/src/views/LabExplore.vue
@@ -58,6 +58,8 @@ import { Action, Achievement, LabData } from '../store';
 import ChatManager from '../ChatManager';
 import DefaultLabHero from '../assets/slides/hero-lab-default.png';
 
+const PAGE_SIZE = 9;
+
 export default Vue.extend({
     data() {
         return {
@@ -65,11 +67,12 @@ export default Vue.extend({
                 { value: 'active', text: 'Active' },
                 { value: 'inactive', text: 'Inactive' }
             ],
-            numberOfLabs: 9,
+            numberOfLabs: PAGE_SIZE,
             playablePuzzleIndex: 0,
             chat: <ChatManager | null>null,
             logoSourcePng: require('../assets/logo_eterna.svg'),
-            defaultLabImage: DefaultLabHero
+            defaultLabImage: DefaultLabHero,
+            firstLoad: true
         };
     },
     async mounted() {
@@ -114,10 +117,11 @@ export default Vue.extend({
             let labFilter = requestString;
             if (filters.includes("active") && !filters.includes("inactive")) {labFilter = `${requestString}&filters=active`}
             if (filters.includes("inactive") && !filters.includes("active")) {labFilter = `${requestString}&filters=inactive`}
-            await this.$store.dispatch(Action.GET_LABS, labFilter);
+            await this.$store.dispatch(Action.GET_LABS, {queryString: labFilter, firstLoad: this.firstLoad});
+            this.firstLoad = false;
         },
         async fetchMoreLabs() {
-            this.numberOfLabs += 9;
+            this.numberOfLabs += PAGE_SIZE;
             await this.fetchNewLabs();
         },
         async logout() {