Merge pull request #25 from Mosquito-Alert/fix_doubled_request

Fix double request when changing filter value

Author: epou

src/views/annotations/ListView.vue

@@ -65,7 +65,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, watchEffect, onMounted } from 'vue'
+import { ref, watch, computed, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
 import type { DataViewPageEvent } from 'primevue/dataview'
@@ -118,8 +118,6 @@ const orderByArray = ref<Array<{ value: IdentificationtasksListOrderByParameter;
 const annotationsTotalCount = ref<number>(0);
 const annotationsArray = ref<Annotation[]>([]);
 
-const listRequest = ref<IdentificationTasksApiAnnotationsListMineRequest>();
-
 function clearFilters() {
   selectedDateRange.value = undefined;
   isExecutive.value = undefined;
@@ -148,11 +146,25 @@ onMounted(() => {
   numRows.value = q.pageSize ? Number(q.pageSize) : 25
 
   // selectedOrderBy.value = q.orderBy ? { value: (q.orderBy as string).split(',')[0] } : null
+  fetchData();
 })
 
-const fetchData = () => {
+const listRequest = computed<IdentificationTasksApiAnnotationsListMineRequest>(() => ({
+  updatedAtAfter: selectedDateRange.value && selectedDateRange.value.length > 1 ? selectedDateRange.value[0].toISOString() : undefined,
+  updatedAtBefore: selectedDateRange.value && selectedDateRange.value.length > 1 ? new Date(new Date(selectedDateRange.value[1]).setDate(selectedDateRange.value[1].getDate() + 1)).toISOString() : undefined,
+  isDecisive: isExecutive.value ?? undefined,
+  isFlagged: isFlagged.value ?? undefined,
+  isFavourite: isFavourite.value ?? undefined,
+  classificationTaxonIds: selectedTaxon.value?.id ? [selectedTaxon.value.id] : undefined,
+  type: selectedType.value ?? undefined,
+  page: pageSelected.value + 1,
+  pageSize: numRows.value,
+  orderBy: selectedOrderBy.value ? [selectedOrderBy.value.value] : undefined
+}));
+
+const fetchData = async () => {
   loading.value = true;
-  identificationTasksApi.annotationsListMine(listRequest.value).then(
+  await identificationTasksApi.annotationsListMine(listRequest.value).then(
     (response) => {
       // Assign results to annotationsArray.value, or an empty array if results is undefined
       annotationsArray.value = response.data.results || [];
@@ -166,31 +178,18 @@ const fetchData = () => {
   });
 }
 
-watch(listRequest, async () => {
-  fetchData();
-})
 
-watchEffect(async () => {
-  listRequest.value = {
-    updatedAtAfter: selectedDateRange.value && selectedDateRange.value.length > 1 ? selectedDateRange.value[0].toISOString() : undefined,
-    updatedAtBefore: selectedDateRange.value && selectedDateRange.value.length > 1 ? new Date(new Date(selectedDateRange.value[1]).setDate(selectedDateRange.value[1].getDate() + 1)).toISOString() : undefined,
-    isDecisive: isExecutive.value ?? undefined,
-    isFlagged: isFlagged.value ?? undefined,
-    isFavourite: isFavourite.value ?? undefined,
-    classificationTaxonIds: selectedTaxon.value?.id ? [selectedTaxon.value.id] : undefined,
-    type: selectedType.value ?? undefined,
-    page: pageSelected.value + 1,
-    pageSize: numRows.value,
-    orderBy: selectedOrderBy.value ? [selectedOrderBy.value.value] : undefined
-  } as IdentificationTasksApiAnnotationsListMineRequest
+// Watch the computed request and update both listRequest and URL
+watch(listRequest, async () => {
+  await fetchData();
 
   const query = Object.fromEntries(
     Object.entries(listRequest.value)
-      .filter(([_, v]) => v !== undefined && v !== null && !(Array.isArray(v) && v.length === 0))
+      .filter(([, v]) => v !== undefined && v !== null && !(Array.isArray(v) && v.length === 0))
       .map(([k, v]) => Array.isArray(v) ? [k, v.join(',')] : [k, v])
   )
 
   router.replace({ query })
-})
+}, { deep: true })
 
 </script>

src/views/identification_task/ListView.vue

@@ -92,7 +92,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, watchEffect, computed, onMounted } from 'vue'
+import { ref, watch, computed, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router';
 import type { DataViewPageEvent } from 'primevue/dataview'
 
@@ -199,8 +199,6 @@ const onPageChange = (event: DataViewPageEvent) => {
 const identificationTasksTotalCount = ref<number>(0);
 const identificationTasksArray = ref<IdentificationTask[]>([]);
 
-const listRequest = ref<IdentificationTasksApiListRequest>();
-
 const numRows = ref<number>(25);
 
 onMounted(() => {
@@ -225,11 +223,31 @@ onMounted(() => {
 
   pageSelected.value = q.page ? Number(q.page) - 1 : 0
   numRows.value = q.pageSize ? Number(q.pageSize) : 25
+
+  fetchData();
 })
 
-const fetchData = () => {
+const listRequest = computed<IdentificationTasksApiListRequest>(() => ({
+  createdAtAfter: selectedCreatedAtDateRange.value && selectedCreatedAtDateRange.value.length > 1 ? selectedCreatedAtDateRange.value[0].toISOString() : undefined,
+  createdAtBefore: selectedCreatedAtDateRange.value && selectedCreatedAtDateRange.value.length > 1 ? new Date(new Date(selectedCreatedAtDateRange.value[1]).setDate(selectedCreatedAtDateRange.value[1].getDate() + 1)).toISOString() : undefined,
+  updatedAtAfter: selectedUpdatedAtDateRange.value && selectedUpdatedAtDateRange.value.length > 1 ? selectedUpdatedAtDateRange.value[0].toISOString() : undefined,
+  updatedAtBefore: selectedUpdatedAtDateRange.value && selectedUpdatedAtDateRange.value.length > 1 ? new Date(new Date(selectedUpdatedAtDateRange.value[1]).setDate(selectedUpdatedAtDateRange.value[1].getDate() + 1)).toISOString() : undefined,
+  status: selectedIdentificationTaskStatus.value || undefined,
+  isFlagged: isFlagged.value ?? undefined,
+  numAnnotationsMin: selectedNumAnnotation.value?.min,
+  numAnnotationsMax: selectedNumAnnotation.value?.max,
+  observationCountryIds: selectedCountryIds.value || undefined,
+  resultSource: selectedSources.value || undefined,
+  resultTaxonIds: selectedTaxon.value ? [selectedTaxon.value.id] : undefined,
+  reviewAction: selectedReviewAction.value || undefined,
+  page: pageSelected.value + 1,
+  pageSize: numRows.value,
+  orderBy: selectedOrderBy.value ? [selectedOrderBy.value.value] : undefined
+}));
+
+const fetchData = async () => {
   loading.value = true;
-  identificationTasksApi.list(listRequest.value).then(
+  await identificationTasksApi.list(listRequest.value).then(
     (response) => {
       // Assign results to identificationTasksArray.value, or an empty array if results is undefined
       identificationTasksArray.value = response.data.results || [];
@@ -244,35 +262,14 @@ const fetchData = () => {
 }
 
 watch(listRequest, async () => {
-  fetchData();
-})
-
-watchEffect(async () => {
-  listRequest.value = {
-    createdAtAfter: selectedCreatedAtDateRange.value && selectedCreatedAtDateRange.value.length > 1 ? selectedCreatedAtDateRange.value[0].toISOString() : undefined,
-    createdAtBefore: selectedCreatedAtDateRange.value && selectedCreatedAtDateRange.value.length > 1 ? new Date(new Date(selectedCreatedAtDateRange.value[1]).setDate(selectedCreatedAtDateRange.value[1].getDate() + 1)).toISOString() : undefined,
-    updatedAtAfter: selectedUpdatedAtDateRange.value && selectedUpdatedAtDateRange.value.length > 1 ? selectedUpdatedAtDateRange.value[0].toISOString() : undefined,
-    updatedAtBefore: selectedUpdatedAtDateRange.value && selectedUpdatedAtDateRange.value.length > 1 ? new Date(new Date(selectedUpdatedAtDateRange.value[1]).setDate(selectedUpdatedAtDateRange.value[1].getDate() + 1)).toISOString() : undefined,
-    status: selectedIdentificationTaskStatus.value || undefined,
-    isFlagged: isFlagged.value ?? undefined,
-    numAnnotationsMin: selectedNumAnnotation.value?.min,
-    numAnnotationsMax: selectedNumAnnotation.value?.max,
-    observationCountryIds: selectedCountryIds.value || undefined,
-    resultSource: selectedSources.value || undefined,
-    resultTaxonIds: selectedTaxon.value ? [selectedTaxon.value.id] : undefined,
-    reviewAction: selectedReviewAction.value || undefined,
-    page: pageSelected.value + 1,
-    pageSize: numRows.value,
-    orderBy: selectedOrderBy.value ? [selectedOrderBy.value.value] : undefined
-  } as IdentificationTasksApiListRequest
+  await fetchData();
 
   const query = Object.fromEntries(
     Object.entries(listRequest.value)
-      .filter(([_, v]) => v !== undefined && v !== null && !(Array.isArray(v) && v.length === 0))
+      .filter(([, v]) => v !== undefined && v !== null && !(Array.isArray(v) && v.length === 0))
       .map(([k, v]) => Array.isArray(v) ? [k, v.join(',')] : [k, v])
   )
-
   router.replace({ query })
-})
+}, { deep: true })
 
 </script>