chore: PR fixes

EMP-2722

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)),

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,

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,

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: <SomeType>(path: string, defaultValue?: SomeType) => ComputedRef<SomeType>;
 } => {
   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 = <SomeType>(
     path: string,
     defaultValue?: SomeType

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';