Add useActions and useSelector hooks

[MAILPOET-2676]

assets/js/src/settings/index.tsx

@@ -1,26 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { initStore } from './store';
-import { initStore, STORE_NAME } from './store';
+import { useSelector, useActions } from './store/hooks';
 
 const App = () => {
-  const isSaving = useSelect(
+  const isSaving = useSelector('isSaving')();
-    (sel) => sel(STORE_NAME).isSaving(),
+  const error = useSelector('getError')();
-    []
+  const settings = useSelector('getSettings')();
-  );
+  const email = useSelector('getSetting')(['sender', 'address']);
-  const error = useSelect(
+  const actions = useActions();
-    (sel) => sel(STORE_NAME).getError(),
-    []
-  );
-  const settings = useSelect(
-    (sel) => sel(STORE_NAME).getSettings(),
-    []
-  );
-  const email = useSelect(
-    (sel) => sel(STORE_NAME).getSetting(['sender', 'address']),
-    []
-  );
-  const actions = useDispatch(STORE_NAME);
   const setEmail = (event) => {
     actions.setSetting(['sender', 'address'], event.target.value);
   };

assets/js/src/settings/store/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './useActions';
+export { default as useSelector } from './useSelector';

assets/js/src/settings/store/hooks/types.ts

@@ -0,0 +1,15 @@
+/**
+ * Omits the first item in a tuple type
+ * Tail<[number, string, boolean]> gives [string, boolean]
+ */
+export type Tail<T extends any[]> =
+  ((...args: T) => void) extends ((_: any, ...args: infer Others) => void) ? Others : never
+
+/**
+ * Takes a function type and returns a new function
+ * type with same signature except the first parameter.
+ * ExcludeFirstParam<(x: number, y: string) => boolean>
+ *  gives (y: string) => boolean
+ */
+export type ExcludeFirstParam<F extends ((...args: any[]) => any)> =
+  (...args: Tail<Parameters<F>>) => ReturnType<F>

assets/js/src/settings/store/hooks/useActions.ts

@@ -0,0 +1,13 @@
+import { useDispatch } from '@wordpress/data';
+import * as actions from '../actions';
+import { STORE_NAME } from '..';
+
+type Actions = typeof actions
+
+export function useActions(): Actions {
+  return useDispatch(STORE_NAME);
+}
+
+export function useAction<Key extends keyof Actions>(key: Key): Actions[Key] {
+  return useDispatch(STORE_NAME)[key];
+}

assets/js/src/settings/store/hooks/useSelector.ts

@@ -0,0 +1,14 @@
+import { useSelect } from '@wordpress/data';
+import { STORE_NAME } from '..';
+import * as selectors from '../selectors';
+import { ExcludeFirstParam } from './types';
+
+type Selectors = typeof selectors
+
+export default function useSelector<Key extends keyof Selectors>(key: Key, deps: any[] = []):
+  ExcludeFirstParam<Selectors[Key]> {
+  return useSelect((select) => {
+    const selects = select(STORE_NAME);
+    return selects[key].bind(selects);
+  }, deps);
+}