From b7a976a9cf5329ec35f418c11d1997edc72d5b26 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 27 Feb 2022 14:22:54 +0100
Subject: [PATCH] fix: setting the last viewed list after navigating away from
 it

The new list background was set on the home page when navigating to the list. This was because the `CURRENT_LIST` was set to the last visited list, even after the call to `this.$store.commit(CURRENT_LIST, null)` because everything is async. I tracked the problem down to the call to `watchEffect` in the ListWrapper component. Apparently, `watchEffect` is called every time _the watched variable is assigned to_ and not only when it changes. When navigating away from the list, that watcher is getting called with the list id, the one already loaded, and sets it in store which in turn overrides the call from the contentAuth component.
---
 src/views/list/ListWrapper.vue | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/views/list/ListWrapper.vue b/src/views/list/ListWrapper.vue
index b1cb68ba..f26a3ee3 100644
--- a/src/views/list/ListWrapper.vue
+++ b/src/views/list/ListWrapper.vue
@@ -47,7 +47,7 @@
 </template>
 
 <script setup lang="ts">
-import {ref, computed, watchEffect} from 'vue'
+import {ref, computed, watch} from 'vue'
 import {useRoute} from 'vue-router'
 
 import Message from '@/components/misc/message.vue'
@@ -88,6 +88,21 @@ const currentList = computed(() => {
 	} : store.state.currentList
 })
 
+// watchEffect would be called every time the prop would get a value assigned, even if that value was the same as before.
+// This resulted in loading and setting the list multiple times, even when navigating away from it.
+// This caused wired bugs where the list background would be set on the home page but only right after setting a new 
+// list background and then navigating to home. It also highlighted the list in the menu and didn't allow changing any
+// of it, most likely due to the rights not being properly populated.
+watch(
+	() => props.listId,
+	(listId, prevListId) => {
+		loadList(listId)
+	},
+	{
+		immediate: true,
+	}
+)
+
 // call the method again if the listId changes
 watchEffect(() => loadList(props.listId))