diff --git a/client/fuselage-hooks.d.ts b/client/fuselage-hooks.d.ts index 9a0eda950b26..2bef8fec95ab 100644 --- a/client/fuselage-hooks.d.ts +++ b/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: (initializer: () => T) => RefObject; export const useMutableCallback: (fn: (...args: any[]) => any) => (...args: any[]) => any; } diff --git a/client/providers/EditableSettingsProvider.tsx b/client/providers/EditableSettingsProvider.tsx index 38e8ebd0d069..6ac9af67a6a9 100644 --- a/client/providers/EditableSettingsProvider.tsx +++ b/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 children, query = defaultQuery, }) => { - const settingsCollectionRef = useLazyRef(() => new Mongo.Collection(null)); + const settingsCollectionRef = useRef>(null) as MutableRefObject>; const persistedSettings = useSettings(query); - useEffect(() => { + const getSettingsCollection = useMutableCallback(() => { if (!settingsCollectionRef.current) { - return; + settingsCollectionRef.current = new Mongo.Collection(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; + + 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 : 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 : { $or: [ { section: { $exists: false } }, - { section: null }, + { section: '' }, ], } ), @@ -83,15 +91,15 @@ const EditableSettingsProvider: FunctionComponent 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 sorter: 1, i18nLabel: 1, }, - }).fetch() ?? []).map(({ section }) => section), + }).fetch().map(({ section }) => section || ''), )), - [settingsCollectionRef], + [getSettingsCollection], ), ); @@ -114,7 +122,7 @@ const EditableSettingsProvider: FunctionComponent continue; } - settingsCollectionRef.current?.update(_id, { $set: data }); + getSettingsCollection().update(_id, { $set: data }); } Tracker.flush(); });