Make useSetting return value and setter

[MAILPOET-2677]

assets/js/src/settings/pages/basics/default_sender.tsx

@@ -1,19 +1,15 @@
 import React from 'react';
 import MailPoet from 'mailpoet';
 import { Label, Inputs } from 'settings/components';
-import { useSetting, useSettingSetter, useSelector } from 'settings/store/hooks';
+import { useSetting, useSelector } from 'settings/store/hooks';
 import SenderEmailAddressWarning from 'common/sender_email_address_warning.jsx';
 
 export default function DefaultSender() {
   const isMssActive = useSelector('isMssActive')();
-  const senderName = useSetting('sender', 'name');
+  const [senderName, setSenderName] = useSetting('sender', 'name');
-  const setSenderName = useSettingSetter('sender', 'name');
+  const [senderEmail, setSenderEmail] = useSetting('sender', 'address');
-  const senderEmail = useSetting('sender', 'address');
+  const [replyToName, setReplyToName] = useSetting('reply_to', 'name');
-  const setSenderEmail = useSettingSetter('sender', 'address');
+  const [replyToEmail, setReplyToEmail] = useSetting('reply_to', 'address');
-  const replyToName = useSetting('reply_to', 'name');
-  const setReplyToName = useSettingSetter('reply_to', 'name');
-  const replyToEmail = useSetting('reply_to', 'address');
-  const setReplyToEmail = useSettingSetter('reply_to', 'address');
   return (
     <>
       <Label

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

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

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

@@ -13,3 +13,6 @@ export type Tail<T extends any[]> =
  */
 export type ExcludeFirstParam<F extends ((...args: any[]) => any)> =
   (...args: Tail<Parameters<F>>) => ReturnType<F>
+
+
+export type ValueAndSetter<T> = [T, (value: T) => any]

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

@@ -1,7 +1,10 @@
 import { Settings } from '../types';
 import useSelector from './useSelector';
+import { ValueAndSetter } from './types';
+import { useAction } from './useActions';
 /**
- * Takes the path of a setting (ie. key1, key2, key3,...) and returns its value.
+ * Takes the path of a setting (ie. key1, key2, key3,...) and returns an array with two items:
+ * the first is the setting value and the second is a setter for that setting.
  * Here we are declaring the signatures in case it takes 1, 2, and 3 keys.
  * Additional overloaded signatures can be added to go as deep as we want.
  * See:
@@ -9,16 +12,20 @@ import useSelector from './useSelector';
  *  overloading functions: http://www.typescriptlang.org/docs/handbook/declaration-files/do-s-and-don-ts.html#function-overloads
  */
 export function useSetting<Key1 extends keyof Settings>
-  (key1: Key1): Settings[Key1];
+  (key1: Key1): ValueAndSetter<Settings[Key1]>;
 export function useSetting<Key1 extends keyof Settings, Key2 extends keyof Settings[Key1]>
-  (key1: Key1, key2: Key2): Settings[Key1][Key2];
+  (key1: Key1, key2: Key2): ValueAndSetter<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];
+  (key1: Key1, key2: Key2, key3: Key3): ValueAndSetter<Settings[Key1][Key2][Key3]>;
 
-export function useSetting(...path: string[]): any {
+export function useSetting(...path: string[]): [any, (value: any) => any] {
   const getValue = useSelector('getSetting');
-  return getValue(path);
+  const setValue = useAction('setSetting');
+  return [
+    getValue(path),
+    (value) => setValue(path, value),
+  ];
 }

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

@@ -1,29 +0,0 @@
-import { Settings, Action } from '../types';
-import { useAction } from './useActions';
-
-/**
- * Takes the path of a setting (ie. key1, key2, key3,...) and returns its setter.
- * Here we are declaring the signatures in case it takes 1, 2, and 3 keys.
- * Additional overloaded signatures can be added to go as deep as we want.
- * See:
- *  keyof: http://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-1.html#keyof-and-lookup-types
- *  overloading functions: http://www.typescriptlang.org/docs/handbook/declaration-files/do-s-and-don-ts.html#function-overloads
- */
-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);
-}