refactor: create composable for permalinkValue handling

Author: MatteoGabriele

app/components/Package/TrendsChart.vue

@@ -320,19 +320,13 @@ const effectivePackageNames = computed<string[]>(() => {
   return single ? [single] : []
 })
 
-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 selectedGranularity = usePermalinkValue<ChartTimeGranularity>(
+  'granularity',
+  DEFAULT_GRANULARITY,
+  {
+    permanent: props.permalink,
   },
-})
+)
 
 const displayedGranularity = shallowRef<ChartTimeGranularity>(DEFAULT_GRANULARITY)
 
@@ -363,31 +357,11 @@ const shouldRenderEstimationOverlay = computed(
   () => !pending.value && isEstimationGranularity.value,
 )
 
-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 startDate = usePermalinkValue<string>('start', '', {
+  permanent: props.permalink,
 })
-
-const endDate = computed({
-  get: () => (props.permalink ? endDateRoute.value : endDateLocal.value),
-  set: (value: string) => {
-    if (props.permalink) {
-      endDateRoute.value = value
-    } else {
-      endDateLocal.value = value
-    }
-  },
+const endDate = usePermalinkValue<string>('end', '', {
+  permanent: props.permalink,
 })
 
 const hasUserEditedDates = shallowRef(false)

app/composables/usePermalinkValue.ts

@@ -0,0 +1,26 @@
+/**
+ * Creates a computed property that uses route query parameters by default,
+ * with an option to use local state instead.
+ */
+export function usePermalinkValue<T extends string | number = string>(
+  queryKey: string,
+  defaultValue: T = '' as T,
+  options: { permanent?: boolean } = {},
+): WritableComputedRef<T> {
+  const { permanent = true } = options
+  const localValue = shallowRef<T>(defaultValue)
+  const routeValue = useRouteQuery<T>(queryKey, defaultValue)
+
+  const parmalinkValue = computed({
+    get: () => (permanent ? routeValue.value : localValue.value),
+    set: (value: T) => {
+      if (permanent) {
+        routeValue.value = value
+      } else {
+        localValue.value = value
+      }
+    },
+  })
+
+  return parmalinkValue
+}