From 879ef278b0bafc3551fa6e3141fe1a2e22d7fe03 Mon Sep 17 00:00:00 2001 From: acondal Date: Thu, 9 Nov 2023 15:36:43 +0100 Subject: [PATCH] chore: PR fixes EMP-2722 --- src/components/column-picker.vue | 7 ++----- src/components/search/custom-semantic-queries.vue | 8 ++++---- src/components/search/results/results.vue | 7 ++----- src/composables/use-experience-controls.composable.ts | 11 ++++------- src/composables/use-store.composable.ts | 1 + 5 files changed, 13 insertions(+), 21 deletions(-) diff --git a/src/components/column-picker.vue b/src/components/column-picker.vue index 636d09cd..3604704c 100644 --- a/src/components/column-picker.vue +++ b/src/components/column-picker.vue @@ -24,7 +24,7 @@ Grid4ColIcon } from '@empathyco/x-components'; import { useDevice } from '../composables/use-device.composable'; - import { useXControls } from '../composables/use-experience-controls.composable'; + import { useExperienceControls } from '../composables/use-experience-controls.composable'; export default defineComponent({ components: { @@ -35,10 +35,7 @@ }, setup() { const { isMobile } = useDevice(); - const columns = useXControls({ - path: 'layout.columnSelector' as never, - defaultValue: [4, 2] - }); + const columns = useExperienceControls().getControlFromPath('layout.columnSelector', [4, 2]); return { values: computed(() => (isMobile.value ? [2, 1] : columns)), diff --git a/src/components/search/custom-semantic-queries.vue b/src/components/search/custom-semantic-queries.vue index c42d5810..ba618078 100644 --- a/src/components/search/custom-semantic-queries.vue +++ b/src/components/search/custom-semantic-queries.vue @@ -46,7 +46,7 @@ import { QueryPreviewList, useQueriesPreview } from '@empathyco/x-components/queries-preview'; import CustomSlidingPanel from '../custom-sliding-panel.vue'; import Result from '../results/result.vue'; - import { useXControls } from '../../composables/use-experience-controls.composable'; + import { useExperienceControls } from '../../composables/use-experience-controls.composable'; import DisplayClickProvider from './display-click-provider.vue'; export default defineComponent({ @@ -61,9 +61,9 @@ }, setup() { const { isAnyQueryLoadedInPreview } = useQueriesPreview(); - const maxItems = useXControls({ - path: 'semanticQueries.resultsPerCarousels' as never - }); + const maxItems = useExperienceControls().getControlFromPath( + 'semanticQueries.resultsPerCarousels' + ); return { isAnyQueryLoadedInPreview, diff --git a/src/components/search/results/results.vue b/src/components/search/results/results.vue index 4b7a740b..6b732477 100644 --- a/src/components/search/results/results.vue +++ b/src/components/search/results/results.vue @@ -55,7 +55,7 @@ import { NextQueriesList } from '@empathyco/x-components/next-queries'; import { useDevice } from '../../../composables/use-device.composable'; import Result from '../../results/result.vue'; - import { useXControls } from '../../../composables/use-experience-controls.composable'; + import { useExperienceControls } from '../../../composables/use-experience-controls.composable'; import NextQueryPreview from './custom-next-query-preview.vue'; export default defineComponent({ @@ -76,10 +76,7 @@ }, setup() { const { isMobile } = useDevice(); - const maxItems = useXControls({ - path: 'nextQueries.maxItems' as never, - defaultValue: 1 - }); + const maxItems = useExperienceControls().getControlFromPath('nextQueries.maxItems', 1); return { staggeredFadeAndSlide: StaggeredFadeAndSlide, diff --git a/src/composables/use-experience-controls.composable.ts b/src/composables/use-experience-controls.composable.ts index 8e14b8e8..cf534012 100644 --- a/src/composables/use-experience-controls.composable.ts +++ b/src/composables/use-experience-controls.composable.ts @@ -1,24 +1,21 @@ import { computed, ComputedRef } from 'vue'; -import { getSafePropertyChain } from '@empathyco/x-utils'; +import { ExtractPath, getSafePropertyChain } from '@empathyco/x-utils'; import { ExperienceControlsState } from '@empathyco/x-components/experience-controls'; import { useStore } from './use-store.composable'; /** * Given a controls' object property chain, gets the experience controls values from the response. + * A defaultValue can be set as a safeguard in case the controls response was empty. * - * @param path - The chain of properties in an xControls object. - * @param defaultValue - A default value to set if xControls one is unavailable. - * - * @returns The experience controls property value. + * @returns An object containing the function to search for a configuration + * and set the experience controls property value. */ -// Rename export const useExperienceControls = (): { getControlFromPath: (path: string, defaultValue?: SomeType) => ComputedRef; } => { const experienceControls = (useStore('experienceControls') as ExperienceControlsState).controls .controls; -// extracted the current logic to a function. The function can be typed so the return type is known and also it infers the return type from the default value const getControlFromPath = ( path: string, defaultValue?: SomeType diff --git a/src/composables/use-store.composable.ts b/src/composables/use-store.composable.ts index 2248c564..943ef6e5 100644 --- a/src/composables/use-store.composable.ts +++ b/src/composables/use-store.composable.ts @@ -1,3 +1,4 @@ +// TODO: Change when useStore composable is added in x-components import { getCurrentInstance } from 'vue'; // eslint-disable-next-line @typescript-eslint/no-unused-vars import { RootXStoreState, StatusState, XModuleName, XModulesTree } from '@empathyco/x-components';