Implement SettingState

client/components/admin/settings/GroupState.js

@@ -13,7 +13,7 @@ export function GroupState({ groupId }) {
 	const group = state.find(({ _id, type }) => _id === groupId && type === 'group');
 	const settings = state.filter(({ group }) => group === groupId);
 	const changed = settings.some(({ changed }) => changed);
-	const sections = Array.from(new Set(settings.map(({ section }) => section)));
+	const sections = Array.from(new Set(settings.map(({ section }) => section || '')));
 
 	const saveRef = useRef(save);
 	const cancelRef = useRef(cancel);

client/components/admin/settings/Section.js

@@ -3,14 +3,12 @@ import React from 'react';
 
 import { useTranslation } from '../../providers/TranslationProvider';
 import { useSection } from './SectionState';
-import { SettingField } from './SettingField';
-import { useSettingsState } from './SettingsState';
+import { Setting } from './Setting';
+import { SettingState } from './SettingState';
 
 export function Section({ children, hasReset = true, help, solo }) {
 	const section = useSection();
 	const t = useTranslation();
-	const { state } = useSettingsState();
-	const settings = state.filter(({ _id }) => section.settings.includes(_id));
 
 	const handleResetSectionClick = () => {
 		section.reset();
@@ -20,7 +18,9 @@ export function Section({ children, hasReset = true, help, solo }) {
 		{help && <Paragraph hintColor>{help}</Paragraph>}
 
 		<FieldGroup>
-			{settings.map((setting) => <SettingField key={setting._id} field={setting} />)}
+			{section.settings.map((setting) => <SettingState key={setting} setting={setting}>
+				<Setting />
+			</SettingState>)}
 
 			{hasReset && section.canReset && <Button
 				children={t('Reset_section_settings')}

client/components/admin/settings/Setting.js

@@ -7,14 +7,14 @@ import React from 'react';
 import { MarkdownText } from '../../basic/MarkdownText';
 import { RawText } from '../../basic/RawText';
 import { useTranslation } from '../../providers/TranslationProvider';
-import { useFieldActions } from './SettingsState';
 import { GenericSettingInput } from './inputs/GenericSettingInput';
 import { BooleanSettingInput } from './inputs/BooleanSettingInput';
 import { StringSettingInput } from './inputs/StringSettingInput';
+import { useSetting } from './SettingState';
 
-export function SettingField({ field }) {
+export function Setting() {
+	const setting = useSetting();
 	const t = useTranslation();
-	const { update, reset, disabled } = useFieldActions(field);
 
 	const {
 		_id,
@@ -27,7 +27,7 @@ export function SettingField({ field }) {
 		i18nLabel,
 		i18nDescription,
 		alert,
-	} = field;
+	} = setting;
 
 	const label = (i18nLabel && t(i18nLabel)) || (_id || t(_id));
 	const hint = t.has(i18nDescription) && <MarkdownText>{t(i18nDescription)}</MarkdownText>;
@@ -35,14 +35,13 @@ export function SettingField({ field }) {
 
 	const hasResetButton = !disableReset && !readonly && type !== 'asset' && value !== packageValue && !blocked;
 	const onResetButtonClick = () => {
-		reset();
+		setting.reset();
 	};
 
 	const inputProps = {
-		...field,
+		...setting,
 		label,
-		disabled,
-		onChange: update,
+		onChange: setting.update,
 		hasResetButton,
 		onResetButtonClick,
 	};

client/components/admin/settings/SettingState.js

@@ -0,0 +1,43 @@
+import React, { createContext, useCallback, useContext, useMemo, useRef } from 'react';
+
+import { useSettingsState } from './SettingsState';
+import { useReactiveValue } from '../../../hooks/useReactiveValue';
+
+const SettingContext = createContext({});
+
+export function SettingState({ children, setting: _id }) {
+	const { state, update, reset, isDisabled } = useSettingsState();
+
+	const setting = state.find((setting) => setting._id === _id);
+	const disabled = useReactiveValue(() => isDisabled(setting), [setting.blocked, setting.enableQuery]);
+
+	const updateRef = useRef(update);
+	const resetRef = useRef(reset);
+	const settingRef = useRef(setting);
+	updateRef.current = update;
+	resetRef.current = reset;
+	settingRef.current = setting;
+
+	const updateSetting = useCallback((data) => {
+		const { current: update } = updateRef;
+		const { current: setting } = settingRef;
+		update({ fields: [{ ...setting, ...data }] });
+	}, []);
+
+	const resetSetting = useCallback(() => {
+		const { current: reset } = resetRef;
+		const { current: setting } = settingRef;
+		reset({ fields: [setting] });
+	}, []);
+
+	const contextValue = useMemo(() => ({
+		...setting,
+		disabled,
+		update: updateSetting,
+		reset: resetSetting,
+	}), [setting, disabled]);
+
+	return <SettingContext.Provider children={children} value={contextValue} />;
+}
+
+export const useSetting = () => useContext(SettingContext);

client/components/admin/settings/SettingsState.js

@@ -7,7 +7,6 @@ import toastr from 'toastr';
 import { handleError } from '../../../../app/utils/client/lib/handleError';
 import { PrivateSettingsCachedCollection } from '../../../../app/ui-admin/client/SettingsCachedCollection';
 import { useBatchSetSettings } from '../../../hooks/useBatchSetSettings';
-import { useReactiveValue } from '../../../hooks/useReactiveValue';
 
 const SettingsContext = createContext({});
 
@@ -262,20 +261,3 @@ export function SettingsState({ children }) {
 }
 
 export const useSettingsState = () => useContext(SettingsContext);
-
-export const useBulkActions = () => {
-	const { reset, update } = useContext(SettingsContext);
-	return { reset, update };
-};
-
-export const useFieldActions = (field) => {
-	const { update, reset } = useBulkActions();
-	const { isDisabled } = useContext(SettingsContext);
-	const disabled = useReactiveValue(() => isDisabled(field), [field.blocked, field.enableQuery]);
-
-	return {
-		update: (data) => update({ fields: [{ ...field, ...data }] }),
-		reset: () => reset({ fields: [field] }),
-		disabled,
-	};
-};

package-lock.json

@@ -16342,6 +16342,18 @@
 						"hoek": "2.x.x",
 						"joi": "6.x.x",
 						"wreck": "5.x.x"
+					},
+					"dependencies": {
+						"wreck": {
+							"version": "5.6.1",
+							"resolved": "https://registry.npmjs.org/wreck/-/wreck-5.6.1.tgz",
+							"integrity": "sha1-r/ADBAATiJ11YZtccYcN0qjdBpo=",
+							"dev": true,
+							"requires": {
+								"boom": "2.x.x",
+								"hoek": "2.x.x"
+							}
+						}
 					}
 				},
 				"heavy": {
@@ -16353,6 +16365,20 @@
 						"boom": "2.x.x",
 						"hoek": "2.x.x",
 						"joi": "5.x.x"
+					},
+					"dependencies": {
+						"joi": {
+							"version": "5.1.0",
+							"resolved": "https://registry.npmjs.org/joi/-/joi-5.1.0.tgz",
+							"integrity": "sha1-FSrQfbjunGQBmX/1/SwSiWBwv1g=",
+							"dev": true,
+							"requires": {
+								"hoek": "^2.2.x",
+								"isemail": "1.x.x",
+								"moment": "2.x.x",
+								"topo": "1.x.x"
+							}
+						}
 					}
 				},
 				"hoek": {