feat: use useRouteQuery

Author: MatteoGabriele

app/components/Package/TrendsChart.vue

@@ -36,7 +36,9 @@ const props = defineProps<{
 
   /** When true, shows facet selector (e.g. Downloads / Likes). */
   showFacetSelector?: boolean
+  permalink?: boolean
 }>()
+const emit = defineEmits(['update:startDate', 'update:endDate'])
 
 const { locale } = useI18n()
 const { accentColors, selectedAccentColor } = useAccentColor()
@@ -318,9 +320,20 @@ const effectivePackageNames = computed<string[]>(() => {
   return single ? [single] : []
 })
 
-const selectedGranularity = defineModel<ChartTimeGranularity>('granularity', {
-  default: DEFAULT_GRANULARITY,
+const granularityLocal = shallowRef<ChartTimeGranularity>(DEFAULT_GRANULARITY)
+const granularityRoute = useRouteQuery<ChartTimeGranularity>('granularity', DEFAULT_GRANULARITY)
+
+const selectedGranularity = computed({
+  get: () => (props.permalink ? granularityRoute.value : granularityLocal.value),
+  set: (value: ChartTimeGranularity) => {
+    if (props.permalink) {
+      granularityRoute.value = value
+    } else {
+      granularityLocal.value = value
+    }
+  },
 })
+
 const displayedGranularity = shallowRef<ChartTimeGranularity>(DEFAULT_GRANULARITY)
 
 const isEndDateOnPeriodEnd = computed(() => {
@@ -350,8 +363,33 @@ const shouldRenderEstimationOverlay = computed(
   () => !pending.value && isEstimationGranularity.value,
 )
 
-const startDate = defineModel<string>('startDate', { default: '' })
-const endDate = defineModel<string>('endDate', { default: '' })
+const startDateLocal = shallowRef<string>('')
+const endDateLocal = shallowRef<string>('')
+const startDateRoute = useRouteQuery<string>('start', '')
+const endDateRoute = useRouteQuery<string>('end', '')
+
+const startDate = computed({
+  get: () => (props.permalink ? startDateRoute.value : startDateLocal.value),
+  set: (value: string) => {
+    if (props.permalink) {
+      startDateRoute.value = value
+    } else {
+      startDateLocal.value = value
+    }
+  },
+})
+
+const endDate = computed({
+  get: () => (props.permalink ? endDateRoute.value : endDateLocal.value),
+  set: (value: string) => {
+    if (props.permalink) {
+      endDateRoute.value = value
+    } else {
+      endDateLocal.value = value
+    }
+  },
+})
+
 const hasUserEditedDates = shallowRef(false)
 
 /**

app/components/Package/WeeklyDownloadStats.vue

@@ -1,30 +1,35 @@
 <script setup lang="ts">
 import { VueUiSparkline } from 'vue-data-ui/vue-ui-sparkline'
 import { useCssVariables } from '~/composables/useColors'
-import type { ChartTimeGranularity, WeeklyDataPoint } from '~/types/chart'
+import type { WeeklyDataPoint } from '~/types/chart'
 import { OKLCH_NEUTRAL_FALLBACK, lightenOklch } from '~/utils/colors'
 
 const props = defineProps<{
   packageName: string
   createdIso: string | null
 }>()
 
+const router = useRouter()
+const route = useRoute()
+
 const chartModal = useModal('chart-modal')
 const hasChartModalTransitioned = shallowRef(false)
 
-const modal = useRouteQuery<'downloads' | undefined>('modal')
-const granularity = useRouteQuery<ChartTimeGranularity | undefined>('granularity')
-const startDate = useRouteQuery<string | undefined>('start')
-const endDate = useRouteQuery<string | undefined>('end')
-
-const isChartModalOpen = computed<boolean>(() => modal.value === 'downloads')
+const isChartModalOpen = shallowRef<boolean>(false)
 
 function handleModalClose() {
-  modal.value = undefined
-  granularity.value = undefined
-  startDate.value = undefined
-  endDate.value = undefined
+  isChartModalOpen.value = false
   hasChartModalTransitioned.value = false
+
+  router.replace({
+    query: {
+      ...route.query,
+      modal: undefined,
+      granularity: undefined,
+      end: undefined,
+      start: undefined,
+    },
+  })
 }
 
 function handleModalTransitioned() {
@@ -103,8 +108,16 @@ const hasWeeklyDownloads = computed(() => weeklyDownloads.value.length > 0)
 async function openChartModal() {
   if (!hasWeeklyDownloads.value) return
 
-  modal.value = 'downloads'
+  isChartModalOpen.value = true
   hasChartModalTransitioned.value = false
+
+  await router.replace({
+    query: {
+      ...route.query,
+      modal: 'chart',
+    },
+  })
+
   // ensure the component renders before opening the dialog
   await nextTick()
   await nextTick()
@@ -131,6 +144,11 @@ async function loadWeeklyDownloads() {
 
 onMounted(async () => {
   await loadWeeklyDownloads()
+
+  if (route.query.modal === 'chart') {
+    isChartModalOpen.value = true
+  }
+
   if (isChartModalOpen.value && hasWeeklyDownloads.value) {
     openChartModal()
   }
@@ -296,9 +314,7 @@ const config = computed(() => {
         :inModal="true"
         :packageName="props.packageName"
         :createdIso="createdIso"
-        v-model:granularity="granularity"
-        v-model:startDate="startDate"
-        v-model:endDate="endDate"
+        permalink
         show-facet-selector
       />
     </Transition>