feat(panel): refresh list view on panel close

Author: dvcol

src/components/AppComponent.vue

@@ -63,7 +63,7 @@ const onBack = () => {
       <GridBackground v-if="!Component" :size="20" />
       <Transition name="scale" mode="out-in">
         <KeepAlive>
-          <component :is="Component ?? PageLoading" />
+          <component :is="Component ?? PageLoading" :panel="panel" />
         </KeepAlive>
       </Transition>
     </main>

src/components/views/history/HistoryComponent.vue

@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import { onMounted, toRefs, watch } from 'vue';
+
 import FloatingButton from '~/components/common/buttons/FloatingButton.vue';
 import { useBackToTop } from '~/components/common/buttons/use-back-to-top';
 import ListScroll from '~/components/common/list/ListScroll.vue';
@@ -12,6 +14,15 @@ import { useHistoryStore, useHistoryStoreRefs } from '~/stores/data/history.stor
 import { useI18n } from '~/utils';
 import { watchUserChange } from '~/utils/store.utils';
 
+const props = defineProps({
+  panel: {
+    type: Boolean,
+    required: false,
+  },
+});
+
+const { panel } = toRefs(props);
+
 const { filteredHistory, pagination, loading, pageSize, belowThreshold, searchHistory } =
   useHistoryStoreRefs();
 const { fetchHistory, clearState } = useHistoryStore();
@@ -23,6 +34,12 @@ watchUserChange({
   clear: clearState,
 });
 
+onMounted(() => {
+  watch(panel, async value => {
+    if (!value) await fetchHistory();
+  });
+});
+
 const list = useListScroll(filteredHistory, 'watched_at');
 
 const history = addLoadMore(list, pagination, searchHistory);

src/components/views/progress/ProgressComponent.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { NFlex } from 'naive-ui';
-import { onMounted, Transition } from 'vue';
+import { onActivated, onMounted, toRefs, Transition, watch } from 'vue';
 
 import FloatingButton from '~/components/common/buttons/FloatingButton.vue';
 import { useBackToTop } from '~/components/common/buttons/use-back-to-top';
@@ -12,15 +12,30 @@ import { ExternaLinks } from '~/settings/external.links';
 import { useProgressStore, useProgressStoreRefs } from '~/stores/data/progress.store';
 import { useI18n } from '~/utils';
 
+const props = defineProps({
+  panel: {
+    type: Boolean,
+    required: false,
+  },
+});
+
+const { panel } = toRefs(props);
+
 const i18n = useI18n('progress');
 
 const { progress, loading, loggedOut } = useProgressStoreRefs();
 const { fetchProgress } = useProgressStore();
 
-onMounted(async () => {
+onActivated(async () => {
   await fetchProgress();
 });
 
+onMounted(() => {
+  watch(panel, async value => {
+    if (!value) await fetchProgress();
+  });
+});
+
 const { scrolled, listRef, onClick } = useBackToTop();
 const { onItemClick } = usePanelItem();
 </script>

src/components/views/watchlist/WatchlistComponent.vue

@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import { onMounted, toRefs, watch } from 'vue';
+
 import FloatingButton from '~/components/common/buttons/FloatingButton.vue';
 import { useBackToTop } from '~/components/common/buttons/use-back-to-top';
 import ListScroll from '~/components/common/list/ListScroll.vue';
@@ -19,6 +21,15 @@ import {
 import { useI18n } from '~/utils';
 import { watchUserChange } from '~/utils/store.utils';
 
+const props = defineProps({
+  panel: {
+    type: Boolean,
+    required: false,
+  },
+});
+
+const { panel } = toRefs(props);
+
 const i18n = useI18n('list');
 
 const {
@@ -36,6 +47,12 @@ watchUserChange({
   clear: clearState,
 });
 
+onMounted(() => {
+  watch(panel, async value => {
+    if (!value) await fetchListItems();
+  });
+});
+
 const list = useListScroll<AnyList, AnyListDateTypes>(
   filteredListItems,
   anyListDateGetter,

src/models/trakt/trakt-history.model.ts

@@ -51,7 +51,7 @@ export type TraktHistoryAdded = {
 
 export type TraktHistoryRemovedRequest = TraktSyncRequest & {
   /** Array of history ids. */
-  ids: number[];
+  ids?: number[];
 };
 
 export type TraktHistoryRemoved = {

src/stores/data/list.store.ts

@@ -334,7 +334,7 @@ export const useListStore = defineStore('data.list', () => {
       return;
     }
 
-    console.info('Adding item to list', listId, itemType, itemIds);
+    console.info(`${remove ? 'Removing' : 'Adding'} item to list`, listId, itemType, itemIds);
 
     if (!typeItemLoading[listType]) typeItemLoading[listType] = {};
     if (!typeItemLoading[listType]![itemType]) typeItemLoading[listType]![itemType] = {};