Eliminate extra watch functions and add index to query

dandi · Oct 12, 2023 · 5420086 · 5420086
1 parent 5791290
commit 5420086
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 16 deletions.
diff --git a/web/src/components/FileBrowser/FileBrowserPagination.vue b/web/src/components/FileBrowser/FileBrowserPagination.vue
@@ -31,6 +31,7 @@
       :max="pageCount"
       :maxlength="pageCount"
       :rules="[pageIsValid]"
+      @change="emit('changePage', pageInput)"
     />
     <span>of {{ pageCount }}</span>
     <v-btn
@@ -53,7 +54,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue';
+import { toRefs } from 'vue';
 
 const props = defineProps({
   page: {
@@ -72,15 +73,6 @@ function pageIsValid(page: number): boolean {
 
 const emit = defineEmits(['changePage']);
 
-// Note: the v-textfield `v-model` returns a string value despite its type being 'number', so
-// we have to handle converting back and forth below.
-const pageInput = ref(props.page.toString());
+const { page: pageInput } = toRefs(props);
 
-watch(() => props.page, (newPage) => { pageInput.value = newPage.toString(); });
-watch(pageInput, (newPage) => {
-  const page = Number(newPage);
-  if (page > 0 && page <= props.pageCount) {
-    emit('changePage', page);
-  }
-});
 </script>
diff --git a/web/src/views/FileBrowserView/FileBrowser.vue b/web/src/views/FileBrowserView/FileBrowser.vue
@@ -246,7 +246,7 @@
         v-if="currentDandiset.asset_count"
         :page="page"
         :page-count="pages"
-        @changePage="page = $event;"
+        @changePage="changePage($event)"
       />
     </v-container>
   </div>
@@ -502,7 +502,7 @@ watch(location, () => {
   if (existingLocation === location.value) { return; }
   router.push({
     ...route,
-    query: { location: location.value },
+    query: { location: location.value, page: String(page.value) },
   } as RawLocation);
 });
 
@@ -517,9 +517,13 @@ watch(() => route.query, (newRouteQuery) => {
   // Retrieve with new location
   getItems();
 }, { immediate: true });
-
-// fetch new page of items when a new one is selected
-watch(page, getItems);
+const changePage = (newPage: number) => {
+  page.value = newPage;
+  router.push({
+    ...route,
+    query: { location: location.value, page: String(page.value) },
+  } as RawLocation);
+};
 
 // Fetch dandiset if necessary
 onMounted(() => {