fix(front): fix `ordering=+title`

Part-of: <https://dev.funkwhale.audio/funkwhale/funkwhale/-/merge_requests/2548>
2023-08-05 14:44:22 +02:00 · 2023-08-05 14:44:22 +02:00 · 7037b708b4
parent 0175895afb
commit 7037b708b4
4 changed files with 96 additions and 93 deletions
--- a/front/package.json
+++ b/front/package.json
@ -20,10 +20,10 @@
    "@sentry/tracing": "7.27.0",
    "@sentry/vue": "7.27.0",
    "@vue/runtime-core": "3.2.45",
-    "@vueuse/core": "9.12.0",
-    "@vueuse/integrations": "9.12.0",
-    "@vueuse/math": "9.12.0",
-    "@vueuse/router": "9.12.0",
+    "@vueuse/core": "10.3.0",
+    "@vueuse/integrations": "10.3.0",
+    "@vueuse/math": "10.3.0",
+    "@vueuse/router": "10.3.0",
    "axios": "1.2.3",
    "axios-auth-refresh": "3.3.6",
    "butterchurn": "3.0.0-beta.4",
--- a/front/src/composables/navigation/useOrdering.ts
+++ b/front/src/composables/navigation/useOrdering.ts
@ -3,70 +3,73 @@ import type { RouteRecordName } from 'vue-router'
 import { toRefs, useStorage, syncRef } from '@vueuse/core'
 import { useRouteQuery } from '@vueuse/router'
 import { useRoute } from 'vue-router'
-import { ref, watch } from 'vue'
+import { watch, readonly } from 'vue'

 export interface OrderingProps {
  orderingConfigName?: RouteRecordName
 }

-export default (props: OrderingProps) => {
+export default <T extends string = string>(props: OrderingProps) => {
  const route = useRoute()

-  const preferences = useStorage(`route-preferences:${props.orderingConfigName?.toString() ?? route.name?.toString() ?? '*'}`, {
+  interface Preferences {
+    orderingDirection: '-' | '+'
+    ordering: T
+    paginateBy: number
+  }
+
+  const preferences = useStorage<Preferences>(`route-preferences:${props.orderingConfigName?.toString() ?? route.name?.toString() ?? '*'}`, () => ({
    orderingDirection: route.meta.orderingDirection ?? '-',
    ordering: route.meta.ordering ?? 'creation_date',
    paginateBy: route.meta.paginateBy ?? 50
-  })
+  }))

  const {
-    orderingDirection: perfOrderingDirection,
-    paginateBy: perfPaginateBy,
-    ordering: perfOrdering
-  } = toRefs(preferences)
-
-  const queryPaginateBy = useRouteQuery<string>('paginateBy', perfPaginateBy.value.toString())
-  const paginateBy = ref()
-  syncRef(queryPaginateBy, paginateBy, {
-    transform: {
-      ltr: (left) => +left,
-      rtl: (right) => right.toString()
-    }
+    orderingDirection: prefOrderingDirection,
+    paginateBy: prefPaginateBy,
+    ordering: prefOrdering
+  } = toRefs(preferences, {
+    replaceRef: false
  })

-  const queryOrdering = useRouteQuery('ordering', perfOrderingDirection.value + perfOrdering.value)
+  const normalizeDirection = (direction: string) => direction === '+' ? '' : '-'

+  const queryOrdering = useRouteQuery(
+    'ordering',
+    normalizeDirection(prefOrderingDirection.value) + prefOrdering.value,
+    { transform: (value) => value.trim() }
+  )
+
+  const queryPaginateBy = useRouteQuery('paginateBy', prefPaginateBy.value, {
+    transform: Number
+  })
+
+  // NOTE: Sync paginateBy in query string and preferences. We're using `flush: 'post'` to make sure that we sync after all updates are done
+  syncRef(queryPaginateBy, prefPaginateBy, {
+    flush: 'post'
+  })
+
+  // NOTE: Sync ordering from preferences to query string
+  watch([prefOrderingDirection, prefOrdering], () => {
+    queryOrdering.value = normalizeDirection(prefOrderingDirection.value) + prefOrdering.value.trim()
+  })
+
+  // NOTE: Sync ordering from query string to preferences
  watch(queryOrdering, (ordering) => {
-    perfOrderingDirection.value = ordering[0] === '-' ? '-' : '+'
-    perfOrdering.value = ordering[0] === '-' || ordering[0] === '+'
-      ? ordering.slice(1)
-      : ordering
+    prefOrderingDirection.value = ordering[0] === '-' ? '-' : '+'
+    prefOrdering.value = ordering.replace(/^[+-]/, '')
+  }, { immediate: true })
+
+  // NOTE: We're using `flush: 'post'` to make sure that the `onOrderingUpdate` callback is called after all updates are done
+  const onOrderingUpdate = (fn: () => void) => watch(preferences, fn, {
+    flush: 'post'
  })

-  watch(perfOrderingDirection, (direction) => {
-    if (direction === '-') {
-      queryOrdering.value = direction + perfOrdering.value
-      return
-    }
-
-    queryOrdering.value = perfOrdering.value
-  })
-
-  watch(perfOrdering, (field) => {
-    const direction = perfOrderingDirection.value
-    queryOrdering.value = (direction === '-' ? '-' : '') + field
-  })
-
-  watch(queryPaginateBy, (paginateBy) => {
-    perfPaginateBy.value = +paginateBy
-  })
-
-  const onOrderingUpdate = (fn: () => void) => watch(preferences, fn)
-
  return {
-    paginateBy,
-    ordering: perfOrdering,
-    orderingDirection: perfOrderingDirection,
-    orderingString: queryOrdering,
+    paginateBy: prefPaginateBy,
+    ordering: prefOrdering,
+    orderingDirection: prefOrderingDirection,
+    orderingString: readonly(queryOrdering),
    onOrderingUpdate
  }
 }
--- a/front/src/composables/useMarkdown.ts
+++ b/front/src/composables/useMarkdown.ts
@ -1,6 +1,6 @@
-import type { MaybeComputedRef } from '@vueuse/core'
+import type { MaybeRefOrGetter } from '@vueuse/core'

-import { resolveUnref } from '@vueuse/core'
+import { toValue } from '@vueuse/core'
 import { computed } from 'vue'
 import showdown from 'showdown'

@ -51,6 +51,6 @@ const markdown = new showdown.Converter({
 })

 export const useMarkdownRaw = (md: string) => markdown.makeHtml(md)
-export const useMarkdownComputed = (md: MaybeComputedRef<string>) => computed(() => useMarkdownRaw(resolveUnref(md)))
+export const useMarkdownComputed = (md: MaybeRefOrGetter<string>) => computed(() => useMarkdownRaw(toValue(md)))

 export default useMarkdownComputed
--- a/front/yarn.lock
+++ b/front/yarn.lock
@ -1946,10 +1946,10 @@
  resolved "https://registry.yarnpkg.com/@earltp/vue-virtual-scroller/-/vue-virtual-scroller-1.0.1.tgz#75116ef9b091457a654d92ff0688e991b3cd9e8a"
  integrity sha512-7UsmP2JALnkfWlheuWRDywuBUTLJcVPE86X5ogA3djUmYFybE6qximgQ7OgyJnrKLteWR7+1Cp0GUXHhdDKaDQ==

-"@types/web-bluetooth@^0.0.16":
-  version "0.0.16"
-  resolved "https://registry.yarnpkg.com/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz#1d12873a8e49567371f2a75fe3e7f7edca6662d8"
-  integrity sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==
+"@types/web-bluetooth@^0.0.17":
+  version "0.0.17"
+  resolved "https://registry.yarnpkg.com/@types/web-bluetooth/-/web-bluetooth-0.0.17.tgz#5c9f3c617f64a9735d7b72a7cc671e166d900c40"
+  integrity sha512-4p9vcSmxAayx72yn70joFoL44c9MO/0+iVEBIQXe3v2h2SiAsEIo/G5v6ObFWvNKRFjbrVadNf9LqEEZeQPzdA==

 "@typescript-eslint/eslint-plugin@5.48.2":
  version "5.48.2"
@ -2414,52 +2414,52 @@
  resolved "https://registry.yarnpkg.com/@vue/tsconfig/-/tsconfig-0.1.3.tgz#4a61dbd29783d01ddab504276dcf0c2b6988654f"
  integrity sha512-kQVsh8yyWPvHpb8gIc9l/HIDiiVUy1amynLNpCy8p+FoCiZXCo6fQos5/097MmnNZc9AtseDsCrfkhqCrJ8Olg==

-"@vueuse/core@9.12.0":
-  version "9.12.0"
-  resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-9.12.0.tgz#e5b20f901e081c7ae5fe0e5f3af217929034eefe"
-  integrity sha512-h/Di8Bvf6xRcvS/PvUVheiMYYz3U0tH3X25YxONSaAUBa841ayMwxkuzx/DGUMCW/wHWzD8tRy2zYmOC36r4sg==
+"@vueuse/core@10.3.0":
+  version "10.3.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-10.3.0.tgz#b2dab7821ef206811b925fc935163c38056fd82b"
+  integrity sha512-BEM5yxcFKb5btFjTSAFjTu5jmwoW66fyV9uJIP4wUXXU8aR5Hl44gndaaXp7dC5HSObmgbnR2RN+Un1p68Mf5Q==
  dependencies:
-    "@types/web-bluetooth" "^0.0.16"
-    "@vueuse/metadata" "9.12.0"
-    "@vueuse/shared" "9.12.0"
-    vue-demi "*"
+    "@types/web-bluetooth" "^0.0.17"
+    "@vueuse/metadata" "10.3.0"
+    "@vueuse/shared" "10.3.0"
+    vue-demi ">=0.14.5"

-"@vueuse/integrations@9.12.0":
-  version "9.12.0"
-  resolved "https://registry.yarnpkg.com/@vueuse/integrations/-/integrations-9.12.0.tgz#bd28cbab8afccc96b122bb44750b24b6d1b1496a"
-  integrity sha512-bu0hOQAqg7A8S33RHpr49LuzVQJ4tK4oyimEfhPFGUVqmz/MMcwPH8Lde+MbVXvfYh2hrtwNv9S38pCmonRx4w==
+"@vueuse/integrations@10.3.0":
+  version "10.3.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/integrations/-/integrations-10.3.0.tgz#765e9505358590f21531998194c6e60a8b23655c"
+  integrity sha512-Jgiv7oFyIgC6BxmDtiyG/fxyGysIds00YaY7sefwbhCZ2/tjEx1W/1WcsISSJPNI30in28+HC2J4uuU8184ekg==
  dependencies:
-    "@vueuse/core" "9.12.0"
-    "@vueuse/shared" "9.12.0"
-    vue-demi "*"
+    "@vueuse/core" "10.3.0"
+    "@vueuse/shared" "10.3.0"
+    vue-demi ">=0.14.5"

-"@vueuse/math@9.12.0":
-  version "9.12.0"
-  resolved "https://registry.yarnpkg.com/@vueuse/math/-/math-9.12.0.tgz#d7233840a7f6a1cc50357df02224745d9976f4a7"
-  integrity sha512-i4N67Ib+FXh/cdwK1J7hijSy8QXBKGqy492SvVBd6UjPPeCSIkkd4veO2Lsj0gMeRfObFsVdY0+1jW+kTRcJMw==
+"@vueuse/math@10.3.0":
+  version "10.3.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/math/-/math-10.3.0.tgz#5f7243498164403b1ad88cc0733f9dcb8710faed"
+  integrity sha512-egJN5b7Ks1s92XS/DuP/irxC2GyR59BfLm19aeWDHbAXhDgK9L+X/z9fZGobI9U7dZ/2A9nlqf0FeMDgh+oWEA==
  dependencies:
-    "@vueuse/shared" "9.12.0"
-    vue-demi "*"
+    "@vueuse/shared" "10.3.0"
+    vue-demi ">=0.14.5"

-"@vueuse/metadata@9.12.0":
-  version "9.12.0"
-  resolved "https://registry.yarnpkg.com/@vueuse/metadata/-/metadata-9.12.0.tgz#19a0fefcba6a66a2382af10a7a67ebad6eec1f27"
-  integrity sha512-9oJ9MM9lFLlmvxXUqsR1wLt1uF7EVbP5iYaHJYqk+G2PbMjY6EXvZeTjbdO89HgoF5cI6z49o2zT/jD9SVoNpQ==
+"@vueuse/metadata@10.3.0":
+  version "10.3.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/metadata/-/metadata-10.3.0.tgz#14fe6cc909573785f73a56e4d9351edf3830b796"
+  integrity sha512-Ema3YhNOa4swDsV0V7CEY5JXvK19JI/o1szFO1iWxdFg3vhdFtCtSTP26PCvbUpnUtNHBY2wx5y3WDXND5Pvnw==

-"@vueuse/router@9.12.0":
-  version "9.12.0"
-  resolved "https://registry.yarnpkg.com/@vueuse/router/-/router-9.12.0.tgz#985759be6fb4a55609942b300e62c4023a47612e"
-  integrity sha512-I3TaWrsxEdANrgJjNEeRTbOMGS+uYjB5zHoyayhFgk1SY1ytDw51tgXr6n4n9fVqglorvhKdX5rFDvBAbeQ+Xw==
+"@vueuse/router@10.3.0":
+  version "10.3.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/router/-/router-10.3.0.tgz#f0cd64fddba1b2a5af261e933c53808f0faa78f8"
+  integrity sha512-WCx/BAxO0eInuOcyNRBxDLS16tnNqzdaR6/babg6AUgAIL0TCfmHBh46wJa6hhg+NMGjd6HzCaktxBasp+0c0A==
  dependencies:
-    "@vueuse/shared" "9.12.0"
-    vue-demi "*"
+    "@vueuse/shared" "10.3.0"
+    vue-demi ">=0.14.5"

-"@vueuse/shared@9.12.0":
-  version "9.12.0"
-  resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-9.12.0.tgz#e6597da80084cba8fc3d6545f4c2fa9817b80428"
-  integrity sha512-TWuJLACQ0BVithVTRbex4Wf1a1VaRuSpVeyEd4vMUWl54PzlE0ciFUshKCXnlLuD0lxIaLK4Ypj3NXYzZh4+SQ==
+"@vueuse/shared@10.3.0":
+  version "10.3.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-10.3.0.tgz#ce6b4b6860e14aaa293025dcf0cbe1036a25869f"
+  integrity sha512-kGqCTEuFPMK4+fNWy6dUOiYmxGcUbtznMwBZLC1PubidF4VZY05B+Oht7Jh7/6x4VOWGpvu3R37WHi81cKpiqg==
  dependencies:
-    vue-demi "*"
+    vue-demi ">=0.14.5"

 abab@^2.0.6:
  version "2.0.6"
@ -5767,7 +5767,7 @@ vitest@0.25.8:
    tinyspy "^1.0.2"
    vite "^3.0.0 || ^4.0.0"

-vue-demi@*:
+vue-demi@>=0.14.5:
  version "0.14.5"
  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.5.tgz#676d0463d1a1266d5ab5cba932e043d8f5f2fbd9"
  integrity sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==