feat: create useState composable

packages/x-components/src/composables/__tests__/use-state.spec.ts

@@ -0,0 +1,57 @@
+import { defineComponent } from 'vue';
+import Vuex, { Store } from 'vuex';
+import { createLocalVue, mount, Wrapper } from '@vue/test-utils';
+import { installNewXPlugin } from '../../__tests__/utils';
+import { useState } from '../use-state';
+import { searchBoxXStoreModule } from '../../x-modules/search-box/index';
+
+const TestComponent = defineComponent({
+  setup() {
+    const searchBoxState = useState('searchBox', ['query', 'inputStatus']);
+    return {
+      searchBoxState
+    };
+  }
+});
+
+describe('testing useState composable', () => {
+  let component: Wrapper<any>;
+
+  beforeEach(() => {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+    component?.vm.$destroy();
+    jest.clearAllMocks();
+    const localVue = createLocalVue();
+    localVue.use(Vuex);
+
+    const store = new Store({
+      modules: {
+        x: {
+          namespaced: true,
+          modules: {
+            searchBox: { namespaced: true, ...searchBoxXStoreModule } as any
+          }
+        }
+      }
+    });
+    installNewXPlugin({ store }, localVue);
+
+    component = mount(TestComponent, {
+      localVue,
+      store
+    });
+  });
+
+  it('maps store state', () => {
+    expect(component.vm.searchBoxState.query.value).toEqual('');
+    expect(component.vm.searchBoxState.inputStatus.value).toEqual('initial');
+
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+    component.vm.$store.commit('x/searchBox/setQuery', 'pork shoulder ');
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+    component.vm.$store.commit('x/searchBox/setInputStatus', 'filled');
+
+    expect(component.vm.searchBoxState.query.value).toEqual('pork shoulder ');
+    expect(component.vm.searchBoxState.inputStatus.value).toEqual('filled');
+  });
+});

packages/x-components/src/composables/index.ts

@@ -3,3 +3,4 @@ export * from './use-$x';
 export * from './use-register-x-module';
 export * from './use-on-display';
 export * from './use-store';
+export * from './use-state';

packages/x-components/src/composables/use-state.ts

@@ -0,0 +1,25 @@
+import { computed, ComputedRef } from 'vue';
+import { Dictionary } from '@empathyco/x-utils';
+import { ExtractState, XModuleName } from '../x-modules/x-modules.types';
+import { useStore } from './use-store';
+
+/**
+ * Function which returns the selected state as a dictionary of paths.
+ *
+ * @param module - The {@link XModuleName} of the getter.
+ * @param paths - List of state paths.
+ * @returns The state properties of the module.
+ *
+ * @public
+ */
+export function useState<Module extends XModuleName, Paths extends keyof ExtractState<Module>>(
+  module: Module,
+  paths: Paths[]
+): Dictionary<ComputedRef> {
+  const store = useStore();
+
+  return paths.reduce<Dictionary<ComputedRef>>((state, path) => {
+    state[path as string] = computed(() => store.state.x[module][path]);
+    return state;
+  }, {});
+}