feat(xcontrols): add actions (#1288)

EMP-2056

---------

Co-authored-by: Ana Fernández Ostio <[email protected]>
Co-authored-by: Ana Fernández Ostio <[email protected]>
Co-authored-by: Ana Fernández Ostio <[email protected]>

packages/x-components/src/wiring/events.types.ts

@@ -20,6 +20,7 @@ import { TaggingXEvents } from '../x-modules/tagging/events.types';
 import { UrlXEvents } from '../x-modules/url/events.types';
 import { XModuleName } from '../x-modules/x-modules.types';
 import { SemanticQueriesXEvents } from '../x-modules/semantic-queries/events.types';
+import { ExperienceControlsXEvents } from '../x-modules/experience-controls/events.types';
 import { WireMetadata } from './wiring.types';
 /* eslint-disable max-len */
 /**.
@@ -70,6 +71,7 @@ export interface XEventsTypes
     SearchXEvents,
     SemanticQueriesXEvents,
     TaggingXEvents,
+    ExperienceControlsXEvents,
     UrlXEvents {
   /**
    * The provided number of columns of a grid has changed.

packages/x-components/src/x-modules/experience-controls/store/actions/fetch-and-save-controls.action.ts

@@ -0,0 +1,31 @@
+import { createFetchAndSaveActions } from '../../../../store/utils/fetch-and-save-action.utils';
+import { ExperienceControlsActionContext } from '../types';
+
+const { fetchAndSave, cancelPrevious } = createFetchAndSaveActions<
+  ExperienceControlsActionContext,
+  //TODO: change types when the adapter is updated
+  any,
+  any
+>({
+  fetch({ dispatch }, request) {
+    return dispatch('fetchExperienceControlsResponse', request);
+  },
+  onSuccess({ commit }, experienceControlsResponse) {
+    commit('setControls', experienceControlsResponse.controls);
+    commit('setEvents', experienceControlsResponse.events);
+  }
+});
+
+/**
+ * Default implementation for {@link ExperienceControlsActions.fetchAndSaveControls} action.
+ *
+ * @public
+ */
+export const fetchAndSaveExperienceControlsResponse = fetchAndSave;
+
+/**
+ * Default implementation for {@link ExperienceControlsActions.cancelFetchAndSaveControls} action.
+ *
+ * @public
+ */
+export const cancelFetchAndSaveControls = cancelPrevious;

packages/x-components/src/x-modules/experience-controls/store/actions/fetch-controls.action.ts

@@ -0,0 +1,37 @@
+import { ExperienceControlsXStoreModule } from '../types';
+
+/**
+ * Default implementation for the {@link ExperienceControlsActions.fetchControls}.
+ *
+ * @param _context - The {@link https://vuex.vuejs.org/guide/actions.html | context} of the actions,
+ * provided by Vuex.
+ * TODO: update when adapter is updateds.
+ * @param request
+ * @returns
+ *
+ * @public
+ */
+
+// eslint-disable-next-line max-len
+export const fetchExperienceControlsResponse: ExperienceControlsXStoreModule['actions']['fetchExperienceControlsResponse'] =
+  async () => {
+    const response = await fetch(
+      // eslint-disable-next-line max-len
+      'https://config-service.internal.test.empathy.co/public/configs?service=xcontrols&instance=empathy'
+    );
+
+    if (response.ok) {
+      const controls = await response.json();
+
+      const aux = {
+        controls,
+        events: {}
+      };
+
+      return aux;
+    } else {
+      throw new Error('Failed to fetch data');
+    }
+
+    //return XPlugin.adapter.experienceControls(request).then(({ controls }) => controls);
+  };

packages/x-components/src/x-modules/experience-controls/store/emitters.ts

@@ -1,6 +1,9 @@
+import { createStoreEmitters } from '../../../store';
+import { experienceControlsXStoreModule } from './module';
+
 /**
- * {@link StoreEmitters} For the experience-controls module.
+ * {@link StoreEmitters} For the {@link ExperienceControlsXModule}.
  *
  * @internal
  */
-export const experienceControlsEmitters = {};
+export const experienceControlsEmitters = createStoreEmitters(experienceControlsXStoreModule, {});

packages/x-components/src/x-modules/experience-controls/store/module.ts

@@ -1,3 +1,5 @@
+import { fetchAndSaveExperienceControlsResponse } from './actions/fetch-and-save-controls.action';
+import { fetchExperienceControlsResponse } from './actions/fetch-controls.action';
 import { ExperienceControlsXStoreModule } from './types';
 
 /**.
@@ -9,7 +11,8 @@ export const experienceControlsXStoreModule: ExperienceControlsXStoreModule = {
   state: () => ({
     controls: {},
     events: {},
-    status: 'initial'
+    status: 'initial',
+    params: {}
   }),
   getters: {},
   mutations: {
@@ -18,7 +21,13 @@ export const experienceControlsXStoreModule: ExperienceControlsXStoreModule = {
     },
     setEvents(state, events) {
       Object.assign(state.events, events);
+    },
+    setParams(state, params) {
+      state.params = params;
     }
   },
-  actions: {}
+  actions: {
+    fetchExperienceControlsResponse,
+    fetchAndSaveExperienceControlsResponse
+  }
 };

packages/x-components/src/x-modules/experience-controls/store/types.ts

@@ -13,6 +13,7 @@ export interface ExperienceControlsState extends StatusState {
    */
   controls: Dictionary<unknown>;
   events: Partial<XEventsTypes>;
+  params: Dictionary<unknown>;
 }
 
 /**
@@ -41,9 +42,31 @@ export interface ExperienceControlsMutations {
    * @param events - The new {@link ExperienceControlsState.events}.
    */
   setEvents(events: Partial<XEventsTypes>): void;
+  /**
+   * Sets the extra params of the module.
+   *
+   * @param params - The new extra params.
+   */
+  setParams(params: Dictionary<unknown>): void;
 }
 
-export interface ExperienceControlsActions {}
+export interface ExperienceControlsActions {
+  /**.
+   * Fetches the {@link ExperienceControlsState.controls} property.
+   *
+   * TODO: change 'any' type
+   *
+   * @param request - The request to fetch the {@link ExperienceControlsState.controls}.
+   * @returns A promise of the {@link ExperienceControlsState.controls}.
+   */
+  fetchExperienceControlsResponse(request: any): Promise<{ [key: string]: unknown }>;
+
+  /**
+   * Fetches and saves the {@link ExperienceControlsState.controls} property.
+   * TODO: change 'any' type.
+   */
+  fetchAndSaveExperienceControlsResponse(request: any): void;
+}
 
 /**
  * Experience Controls type safe store module.

packages/x-components/src/x-modules/experience-controls/wiring.ts

@@ -1,8 +1,29 @@
+import { namespacedWireCommit } from '../../wiring';
 import { createWiring } from '../../wiring/wiring.utils';
 
+const moduleName = 'experienceControls';
+
+/**
+ * WireCommit for {@link SemanticQueriesXModule}.
+ *
+ * @internal
+ */
+const wireCommit = namespacedWireCommit(moduleName);
+
+/**
+ * WireCommit for {@link ExperienceControlsXModule}.
+ *
+ * @internal
+ */
+export const setParamsWire = wireCommit('setParams');
+
 /**
  * Wiring configuration for the {@link ExperienceControlsXModule | experience-controls module}.
  *
  * @internal
  */
-export const experienceControlsWiring = createWiring({});
+export const experienceControlsWiring = createWiring({
+  ExtraParamsChanged: {
+    setParamsWire
+  }
+});

packages/x-components/src/x-modules/experience-controls/x-module.ts

@@ -1,11 +1,15 @@
 import { XModule } from '../x-modules.types';
+import { experienceControlsEmitters } from './store/emitters';
+import { experienceControlsXStoreModule } from './store/module';
+import { ExperienceControlsXStoreModule } from './store/types';
+import { experienceControlsWiring } from './wiring';
 
 /**
  * Search {@link XModule} alias.
  *
  * @public
  */
-export type ExperienceControlsXModule = XModule<any>;
+export type ExperienceControlsXModule = XModule<ExperienceControlsXStoreModule>;
 
 /**
  * Search {@link XModule} implementation. This module is auto-registered as soon as you
@@ -15,7 +19,7 @@ export type ExperienceControlsXModule = XModule<any>;
  */
 export const experienceControlsXModule: ExperienceControlsXModule = {
   name: 'experienceControls',
-  storeModule: {},
-  storeEmitters: {},
-  wiring: {}
+  storeModule: experienceControlsXStoreModule,
+  storeEmitters: experienceControlsEmitters,
+  wiring: experienceControlsWiring
 };