Add useSetting and useSettingSetter hooks

Because `useSelector('getSetting')` and `useAction('setSetting')` dont have detailed type definitions
for parameters and return. The type definitions for these two hooks are verbose but they ensure more
type coverage and proper code auto-completion.
[MAILPOET-2676]

assets/js/src/settings/index.tsx

@@ -1,16 +1,19 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { initStore } from './store';
-import { useSelector, useActions } from './store/hooks';
+import {
+  useSelector, useActions, useSetting, useSettingSetter,
+} from './store/hooks';
 
 const App = () => {
   const isSaving = useSelector('isSaving')();
   const error = useSelector('getError')();
   const settings = useSelector('getSettings')();
-  const email = useSelector('getSetting')(['sender', 'address']);
+  const email = useSetting('sender', 'address');
+  const setEmail = useSettingSetter('sender', 'address');
   const actions = useActions();
-  const setEmail = (event) => {
+  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    actions.setSetting(['sender', 'address'], event.target.value);
+    setEmail(event.target.value);
   };
   const save = () => {
     actions.saveSettings(settings);
@@ -19,7 +22,7 @@ const App = () => {
     <>
       <h1 className="title">Settings</h1>
       <p>{JSON.stringify({ email, isSaving, error })}</p>
-      <input type="text" value={email} onChange={setEmail} />
+      <input type="text" value={email} onChange={onChange} />
       <button type="button" onClick={save}>Save</button>
     </>
   );

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

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

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

@@ -0,0 +1,17 @@
+import { Settings } from '../types';
+import useSelector from './useSelector';
+
+export function useSetting<Key1 extends keyof Settings>
+  (key1: Key1): Settings[Key1];
+export function useSetting<Key1 extends keyof Settings, Key2 extends keyof Settings[Key1]>
+  (key1: Key1, key2: Key2): Settings[Key1][Key2];
+export function useSetting<
+  Key1 extends keyof Settings,
+  Key2 extends keyof Settings[Key1],
+  Key3 extends keyof Settings[Key1][Key2]>
+  (key1: Key1, key2: Key2, key3: Key3): Settings[Key1][Key2][Key3];
+
+export function useSetting(...path: string[]): any {
+  const getValue = useSelector('getSetting');
+  return getValue(path);
+}

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

@@ -0,0 +1,21 @@
+import { Settings, Action } from '../types';
+import { useAction } from './useActions';
+
+export function useSettingSetter<Key1 extends keyof Settings, Value extends Settings[Key1]>
+  (key1: Key1): ((value: Value) => Promise<Action>);
+export function useSettingSetter<
+  Key1 extends keyof Settings,
+  Key2 extends keyof Settings[Key1],
+  Value extends Settings[Key1][Key2]>
+  (key1: Key1, key2: Key2): ((value: Value) => Promise<Action>);
+export function useSettingSetter<
+  Key1 extends keyof Settings,
+  Key2 extends keyof Settings[Key1],
+  Key3 extends keyof Settings[Key1][Key2],
+  Value extends Settings[Key1][Key2][Key3]>
+  (key1: Key1, key2: Key2, key3: Key3): ((value: Value) => Promise<Action>);
+
+export function useSettingSetter(...path: string[]) {
+  const setValue = useAction('setSetting');
+  return async (value) => setValue(path, value);
+}