Regression: Fix useUserSubscription usage (#18378)

client/channel/Discussions/ContextualBar/List.js

@@ -13,7 +13,7 @@ import { getConfig } from '../../../../app/ui-utils/client/config';
 import { Messages } from '../../../../app/models/client';
 import VerticalBar from '../../../components/basic/VerticalBar';
 import { useTranslation } from '../../../contexts/TranslationContext';
-import { useUserId } from '../../../contexts/UserContext';
+import { useUserId, useUserSubscription } from '../../../contexts/UserContext';
 import { useEndpointDataExperimental, ENDPOINT_STATES } from '../../../hooks/useEndpointDataExperimental';
 import { useTimeAgo } from '../../../hooks/useTimeAgo';
 import { MessageSkeleton } from '../../components/Message';
@@ -21,7 +21,6 @@ import { useUserRoom } from '../../hooks/useUserRoom';
 import { useSetting } from '../../../contexts/SettingsContext';
 import DiscussionListMessage from './components/Message';
 import { clickableItem } from '../../helpers/clickableItem';
-import { useUserSubscription } from '../../../contexts/SubscriptionContext';
 
 function mapProps(WrappedComponent) {
 	return ({ msg, username, tcount, ts, ...props }) => <WrappedComponent replies={tcount} username={username} msg={msg} ts={ts} {...props}/>;

client/channel/Threads/ContextualBar/List.js

@@ -11,7 +11,7 @@ import VerticalBar from '../../../components/basic/VerticalBar';
 import { useTranslation } from '../../../contexts/TranslationContext';
 import { useRoute, useCurrentRoute } from '../../../contexts/RouterContext';
 import { call, renderMessageBody } from '../../../../app/ui-utils/client';
-import { useUserId } from '../../../contexts/UserContext';
+import { useUserId, useUserSubscription } from '../../../contexts/UserContext';
 import { Messages } from '../../../../app/models/client';
 import { useEndpointDataExperimental, ENDPOINT_STATES } from '../../../hooks/useEndpointDataExperimental';
 import { useUserRoom } from '../../hooks/useUserRoom';
@@ -20,7 +20,6 @@ import { useTimeAgo } from '../../../hooks/useTimeAgo';
 import { clickableItem } from '../../helpers/clickableItem';
 import { MessageSkeleton } from '../../components/Message';
 import ThreadListMessage from './components/Message';
-import { useUserSubscription } from '../../../contexts/SubscriptionContext';
 import { getConfig } from '../../../../app/ui-utils/client/config';
 
 function mapProps(WrappedComponent) {

client/channel/hooks/useUserInfoActions.js

@@ -6,7 +6,7 @@ import { useTranslation } from '../../contexts/TranslationContext';
 import { useReactiveValue } from '../../hooks/useReactiveValue';
 import { usePermission, useAllPermissions } from '../../contexts/AuthorizationContext';
 import { useToastMessageDispatch } from '../../contexts/ToastMessagesContext';
-import { useUserId } from '../../contexts/UserContext';
+import { useUserId, useUserSubscription, useUserSubscriptionByName } from '../../contexts/UserContext';
 import { useMethod } from '../../contexts/ServerContext';
 import { WebRTC } from '../../../app/webrtc/client';
 import { useRoute } from '../../contexts/RouterContext';
@@ -15,7 +15,6 @@ import { RoomRoles } from '../../../app/models/client';
 import { roomTypes, RoomMemberActions } from '../../../app/utils';
 import { useEndpointActionExperimental } from '../../hooks/useEndpointAction';
 import { useUserRoom } from './useUserRoom';
-import { useUserSubscription, useUserSubscriptionByName } from '../../contexts/SubscriptionContext';
 
 
 const useUserHasRoomRole = (uid, rid, role) => useReactiveValue(useCallback(() => !!RoomRoles.findOne({ rid, 'u._id': uid, roles: role }), [uid, rid, role]));

client/contexts/SubscriptionContext.ts

@@ -1,14 +0,0 @@
-import { createContext, useContext } from 'react';
-
-type SubscriptionContextValue = {
-	useUserSubscription: (rid: string, fields: Mongo.Query<any>) => any;
-	useUserSubscriptionByName: (name: string, fields: Mongo.Query<any>) => any;
-};
-
-export const SubscriptionContext = createContext<SubscriptionContextValue>({
-	useUserSubscription: () => ({}),
-	useUserSubscriptionByName: () => ({}),
-});
-
-export const useUserSubscription = (rid: string, fields: Mongo.Query<any>): Mongo.Collection<any> => useContext(SubscriptionContext).useUserSubscription(rid, fields);
-export const useUserSubscriptionByName = (name: string, fields: Mongo.Query<any>): Mongo.Collection<any> => useContext(SubscriptionContext).useUserSubscriptionByName(name, fields);

client/contexts/UserContext.ts

@@ -1,11 +1,21 @@
 import { createContext, useContext, useMemo } from 'react';
 import { useSubscription, Subscription, Unsubscribe } from 'use-subscription';
 
+type SubscriptionQuery = {
+	_id: string | Mongo.ObjectID;
+} | {
+	name: string;
+}
+type Fields = {
+	[key: string]: boolean;
+}
+
 type UserContextValue = {
 	userId: string | null;
 	user: Meteor.User | null;
 	loginWithPassword: (user: string | object, password: string) => Promise<void>;
 	queryPreference: <T>(key: string | Mongo.ObjectID, defaultValue?: T) => Subscription<T | undefined>;
+	querySubscription: (query: SubscriptionQuery, fields: Fields) => Subscription <any | null>;
 };
 
 export const UserContext = createContext<UserContextValue>({
@@ -16,6 +26,10 @@ export const UserContext = createContext<UserContextValue>({
 		getCurrentValue: (): undefined => undefined,
 		subscribe: (): Unsubscribe => (): void => undefined,
 	}),
+	querySubscription: () => ({
+		getCurrentValue: (): undefined => undefined,
+		subscribe: (): Unsubscribe => (): void => undefined,
+	}),
 });
 
 export const useUserId = (): string | Mongo.ObjectID | null =>
@@ -32,3 +46,15 @@ export const useUserPreference = <T>(key: string | Mongo.ObjectID, defaultValue?
 	const subscription = useMemo(() => queryPreference(key, defaultValue), [queryPreference, key, defaultValue]);
 	return useSubscription(subscription);
 };
+
+export const useUserSubscription = <T>(_id: string | Mongo.ObjectID, fields: Fields): T | undefined => {
+	const { querySubscription } = useContext(UserContext);
+	const subscription = useMemo(() => querySubscription({ _id }, fields), [querySubscription, _id, fields]);
+	return useSubscription(subscription);
+};
+
+export const useUserSubscriptionByName = <T>(name: string, fields: Fields): T | undefined => {
+	const { querySubscription } = useContext(UserContext);
+	const subscription = useMemo(() => querySubscription({ name }, fields), [querySubscription, name, fields]);
+	return useSubscription(subscription);
+};

client/providers/MeteorProvider.js

@@ -13,7 +13,6 @@ import UserProvider from './UserProvider';
 import { AvatarUrlProvider } from './AvatarUrlProvider';
 import { CustomSoundProvider } from './CustomSoundProvides';
 import ModalProvider from './ModalProvider';
-import SubscriptionProvider from './SubscriptionProvider';
 
 export function MeteorProvider({ children }) {
 	return <ConnectionStatusProvider>
@@ -26,15 +25,13 @@ export function MeteorProvider({ children }) {
 								<SettingsProvider>
 									<CustomSoundProvider>
 										<AvatarUrlProvider>
-											<SubscriptionProvider>
-												<UserProvider>
-													<AuthorizationProvider>
-														<ModalProvider>
-															{children}
-														</ModalProvider>
-													</AuthorizationProvider>
-												</UserProvider>
-											</SubscriptionProvider>
+											<UserProvider>
+												<AuthorizationProvider>
+													<ModalProvider>
+														{children}
+													</ModalProvider>
+												</AuthorizationProvider>
+											</UserProvider>
 										</AvatarUrlProvider>
 									</CustomSoundProvider>
 								</SettingsProvider>

client/providers/SubscriptionProvider.tsx

@@ -1,20 +0,0 @@
-import React, { useMemo, FC, useCallback } from 'react';
-
-import { SubscriptionContext } from '../contexts/SubscriptionContext';
-import { useReactiveValue } from '../hooks/useReactiveValue';
-import { Subscriptions } from '../../app/models/client';
-
-export const useUserSubscription = (rid: string, fields: Mongo.Query<any>): Mongo.Collection<any> => useReactiveValue(useCallback(() => Subscriptions.findOne({ rid }, { fields }), [rid, fields]));
-export const useUserSubscriptionByName = (name: string, fields: Mongo.Query<any>): Mongo.Collection<any> => useReactiveValue(useCallback(() => Subscriptions.findOne({ name }, { fields }), [name, fields]));
-
-
-const SubscriptionProvider: FC = ({ children }) => {
-	const contextValue = useMemo(() => ({
-		useUserSubscription,
-		useUserSubscriptionByName,
-	}), []);
-
-	return <SubscriptionContext.Provider children={children} value={contextValue} />;
-};
-
-export default SubscriptionProvider;

client/providers/UserProvider.tsx

@@ -5,6 +5,7 @@ import { getUserPreference } from '../../app/utils/client';
 import { UserContext } from '../contexts/UserContext';
 import { useReactiveValue } from '../hooks/useReactiveValue';
 import { createReactiveSubscriptionFactory } from './createReactiveSubscriptionFactory';
+import { Subscriptions } from '../../app/models/client';
 
 const getUserId = (): string | null => Meteor.userId();
 
@@ -33,6 +34,7 @@ const UserProvider: FC = ({ children }) => {
 		queryPreference: createReactiveSubscriptionFactory(
 			(key, defaultValue) => getUserPreference(userId, key, defaultValue),
 		),
+		querySubscription: createReactiveSubscriptionFactory((query, fields) => Subscriptions.findOne(query, { fields })),
 	}), [userId, user]);
 
 	return <UserContext.Provider children={children} value={contextValue} />;