From 7037b708b4390adb087ff31968c01180506af402 Mon Sep 17 00:00:00 2001 From: Kasper Seweryn Date: Sat, 5 Aug 2023 14:44:22 +0200 Subject: [PATCH] fix(front): fix `ordering=+title` Part-of: --- front/package.json | 8 +- .../src/composables/navigation/useOrdering.ts | 93 ++++++++++--------- front/src/composables/useMarkdown.ts | 6 +- front/yarn.lock | 82 ++++++++-------- 4 files changed, 96 insertions(+), 93 deletions(-) diff --git a/front/package.json b/front/package.json index fbb5f8438..6e843fb08 100644 --- 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", diff --git a/front/src/composables/navigation/useOrdering.ts b/front/src/composables/navigation/useOrdering.ts index d712cf06b..6e964f1d7 100644 --- 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 (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(`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('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 } } diff --git a/front/src/composables/useMarkdown.ts b/front/src/composables/useMarkdown.ts index f1ab9e7ab..1f4269826 100644 --- 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) => computed(() => useMarkdownRaw(resolveUnref(md))) +export const useMarkdownComputed = (md: MaybeRefOrGetter) => computed(() => useMarkdownRaw(toValue(md))) export default useMarkdownComputed diff --git a/front/yarn.lock b/front/yarn.lock index 09d25409c..9ffe62769 100644 --- 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==