Remove useLazyRef hook usage (#18003)

client/fuselage-hooks.d.ts

@@ -1,7 +1,4 @@
 declare module '@rocket.chat/fuselage-hooks' {
-	import { RefObject } from 'react';
-
 	export const useDebouncedCallback: (fn: (...args: any[]) => any, ms: number, deps: any[]) => (...args: any[]) => any;
-	export const useLazyRef: <T>(initializer: () => T) => RefObject<T>;
 	export const useMutableCallback: (fn: (...args: any[]) => any) => (...args: any[]) => any;
 }

client/providers/EditableSettingsProvider.tsx

@@ -1,7 +1,7 @@
-import { useLazyRef, useMutableCallback } from '@rocket.chat/fuselage-hooks';
+import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { Mongo } from 'meteor/mongo';
 import { Tracker } from 'meteor/tracker';
-import React, { useEffect, useMemo, FunctionComponent, useCallback } from 'react';
+import React, { useEffect, useMemo, FunctionComponent, useCallback, useRef, MutableRefObject } from 'react';
 
 import { SettingId, GroupId } from '../../definition/ISetting';
 import { EditableSettingsContext, IEditableSetting, EditableSettingsContextValue } from '../contexts/EditableSettingsContext';
@@ -18,28 +18,36 @@ const EditableSettingsProvider: FunctionComponent<EditableSettingsProviderProps>
 	children,
 	query = defaultQuery,
 }) => {
-	const settingsCollectionRef = useLazyRef(() => new Mongo.Collection<any>(null));
+	const settingsCollectionRef = useRef<Mongo.Collection<IEditableSetting>>(null) as MutableRefObject<Mongo.Collection<IEditableSetting>>;
 	const persistedSettings = useSettings(query);
 
-	useEffect(() => {
+	const getSettingsCollection = useMutableCallback(() => {
 		if (!settingsCollectionRef.current) {
-			return;
+			settingsCollectionRef.current = new Mongo.Collection<any>(null);
 		}
 
-		settingsCollectionRef.current.remove({ _id: { $nin: persistedSettings.map(({ _id }) => _id) } });
-		for (const setting of persistedSettings) {
-			settingsCollectionRef.current.upsert(setting._id, { ...setting });
+		return settingsCollectionRef.current;
+	}) as () => Mongo.Collection<IEditableSetting>;
+
+	useEffect(() => {
+		const settingsCollection = getSettingsCollection();
+
+		settingsCollection.remove({ _id: { $nin: persistedSettings.map(({ _id }) => _id) } });
+		for (const { _id, ...fields } of persistedSettings) {
+			settingsCollection.upsert(_id, { $set: { ...fields } });
 		}
-	}, [persistedSettings, settingsCollectionRef]);
+	}, [getSettingsCollection, persistedSettings]);
 
 	const queryEditableSetting = useReactiveSubscriptionFactory(
 		useCallback(
 			(_id: SettingId): IEditableSetting | undefined => {
-				if (!settingsCollectionRef.current) {
-					return;
-				}
+				const settingsCollection = getSettingsCollection();
+
+				const editableSetting = settingsCollection.findOne(_id);
 
-				const editableSetting = settingsCollectionRef.current.findOne(_id);
+				if (!editableSetting) {
+					return undefined;
+				}
 
 				if (editableSetting.blocked) {
 					return { ...editableSetting, disabled: true };
@@ -54,16 +62,16 @@ const EditableSettingsProvider: FunctionComponent<EditableSettingsProviderProps>
 					: editableSetting.enableQuery);
 				return {
 					...editableSetting,
-					disabled: !queries.every((query) => (settingsCollectionRef.current?.find(query)?.count() ?? 0) > 0),
+					disabled: !queries.every((query) => settingsCollection.find(query).count() > 0),
 				};
 			},
-			[settingsCollectionRef],
+			[getSettingsCollection],
 		),
 	);
 
 	const queryEditableSettings = useReactiveSubscriptionFactory(
 		useCallback(
-			(query = {}) => settingsCollectionRef.current?.find({
+			(query = {}) => getSettingsCollection().find({
 				...('_id' in query) && { _id: { $in: query._id } },
 				...('group' in query) && { group: query.group },
 				...('section' in query) && (
@@ -72,7 +80,7 @@ const EditableSettingsProvider: FunctionComponent<EditableSettingsProviderProps>
 						: {
 							$or: [
 								{ section: { $exists: false } },
-								{ section: null },
+								{ section: '' },
 							],
 						}
 				),
@@ -83,15 +91,15 @@ const EditableSettingsProvider: FunctionComponent<EditableSettingsProviderProps>
 					sorter: 1,
 					i18nLabel: 1,
 				},
-			}).fetch() ?? [],
-			[settingsCollectionRef],
+			}).fetch(),
+			[getSettingsCollection],
 		),
 	);
 
 	const queryGroupSections = useReactiveSubscriptionFactory(
 		useCallback(
 			(_id: GroupId) => Array.from(new Set(
-				(settingsCollectionRef.current?.find({
+				getSettingsCollection().find({
 					group: _id,
 				}, {
 					fields: {
@@ -102,9 +110,9 @@ const EditableSettingsProvider: FunctionComponent<EditableSettingsProviderProps>
 						sorter: 1,
 						i18nLabel: 1,
 					},
-				}).fetch() ?? []).map(({ section }) => section),
+				}).fetch().map(({ section }) => section || ''),
 			)),
-			[settingsCollectionRef],
+			[getSettingsCollection],
 		),
 	);
 
@@ -114,7 +122,7 @@ const EditableSettingsProvider: FunctionComponent<EditableSettingsProviderProps>
 				continue;
 			}
 
-			settingsCollectionRef.current?.update(_id, { $set: data });
+			getSettingsCollection().update(_id, { $set: data });
 		}
 		Tracker.flush();
 	});