Update the API of React Hooks using Meteor's reactive system

.eslintrc

@@ -77,6 +77,8 @@
           "error",
           "prefer-single"
         ],
+        "indent": "off",
+        "no-extra-parens": "off",
         "react/jsx-uses-react": "error",
         "react/jsx-uses-vars": "error",
         "react/jsx-no-undef": "error",
@@ -87,7 +89,21 @@
         "@typescript-eslint/ban-ts-ignore": "off",
         "@typescript-eslint/indent": [
           "error",
-          "tab"
+          "tab",
+          {
+            "SwitchCase": 1
+          }
+        ],
+        "@typescript-eslint/no-extra-parens": [
+          "error",
+          "all",
+          {
+            "conditionalAssign": true,
+            "nestedBinaryExpressions": false,
+            "returnAssign": true,
+            "ignoreJSX": "all",
+            "enforceForArrowConditionals": false
+          }
         ],
         "@typescript-eslint/no-explicit-any": "off",
         "@typescript-eslint/interface-name-prefix": [

app/threads/client/components/hooks/useUserRoom.js

@@ -1,4 +1,7 @@
+import { useCallback } from 'react';
+
 import { useReactiveValue } from '../../../../../client/hooks/useReactiveValue';
 import { Rooms } from '../../../../models/client';
 
-export const useUserRoom = (rid, fields) => useReactiveValue(() => Rooms.findOne({ _id: rid }, { fields }), [rid, fields]);
+export const useUserRoom = (rid, fields) =>
+	useReactiveValue(useCallback(() => Rooms.findOne({ _id: rid }, { fields }), [rid, fields]));

app/threads/client/components/hooks/useUserSubscription.js

@@ -1,4 +1,7 @@
+import { useCallback } from 'react';
+
 import { useReactiveValue } from '../../../../../client/hooks/useReactiveValue';
 import { Subscriptions } from '../../../../models/client';
 
-export const useUserSubscription = (rid, fields) => useReactiveValue(() => Subscriptions.findOne({ rid }, { fields }), [rid, fields]);
+export const useUserSubscription = (rid, fields) =>
+	useReactiveValue(useCallback(() => Subscriptions.findOne({ rid }, { fields }), [rid, fields]));

client/admin/integrations/IntegrationsRoute.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import { useAtLeastOnePermission } from '../../contexts/AuthorizationContext';
 import { useRouteParameter } from '../../contexts/RouterContext';
@@ -9,12 +9,14 @@ import EditIntegrationsPage from './edit/EditIntegrationsPage';
 import OutgoingWebhookHistoryPage from './edit/OutgoingWebhookHistoryPage';
 
 function IntegrationsRoute() {
-	const canViewIntegrationsPage = useAtLeastOnePermission([
-		'manage-incoming-integrations',
-		'manage-outgoing-integrations',
-		'manage-own-incoming-integrations',
-		'manage-own-outgoing-integrations',
-	]);
+	const canViewIntegrationsPage = useAtLeastOnePermission(
+		useMemo(() => [
+			'manage-incoming-integrations',
+			'manage-outgoing-integrations',
+			'manage-own-incoming-integrations',
+			'manage-own-outgoing-integrations',
+		], []),
+	);
 
 	const context = useRouteParameter('context');
 

client/admin/sidebar/AdminSidebar.js

@@ -74,7 +74,7 @@ const SidebarItemsAssembler = React.memo(({ items, currentPath }) => {
 });
 
 const AdminSidebarPages = React.memo(({ currentPath }) => {
-	const items = useReactiveValue(() => sidebarItems.get());
+	const items = useReactiveValue(useCallback(() => sidebarItems.get(), []));
 
 	return <Box display='flex' flexDirection='column' flexShrink={0} pb='x8'>
 		<SidebarItemsAssembler items={items} currentPath={currentPath}/>
@@ -163,7 +163,13 @@ const AdminSidebarSettings = ({ currentPath }) => {
 export default React.memo(function AdminSidebar() {
 	const t = useTranslation();
 
-	const canViewSettings = useAtLeastOnePermission(['view-privileged-setting', 'edit-privileged-setting', 'manage-selected-settings']);
+	const canViewSettings = useAtLeastOnePermission(
+		useMemo(() => [
+			'view-privileged-setting',
+			'edit-privileged-setting',
+			'manage-selected-settings',
+		], []),
+	);
 
 	const closeAdminFlex = useCallback(() => {
 		if (Layout.isEmbedded()) {

client/components/RoomForeword.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { Avatar, Margins, Flex, Box, Tag } from '@rocket.chat/fuselage';
 
 import { Rooms, Users } from '../../app/models/client';
@@ -11,7 +11,7 @@ const RoomForeword = ({ _id: rid }) => {
 	const t = useTranslation();
 
 	const user = useUser();
-	const room = useReactiveValue(() => Rooms.findOne({ _id: rid }));
+	const room = useReactiveValue(useCallback(() => Rooms.findOne({ _id: rid }), [rid]));
 
 	if (room.t !== 'd') {
 		return t('Start_of_conversation');

client/contexts/AuthorizationContext.ts

@@ -0,0 +1,79 @@
+import { createContext, useContext, useMemo } from 'react';
+import { useSubscription, Subscription, Unsubscribe } from 'use-subscription';
+
+export type AuthorizationContextValue = {
+	queryPermission(
+		permission: string | Mongo.ObjectID,
+		scope?: string | Mongo.ObjectID
+	): Subscription<boolean>;
+	queryAtLeastOnePermission(
+		permission: (string | Mongo.ObjectID)[],
+		scope?: string | Mongo.ObjectID
+	): Subscription<boolean>;
+	queryAllPermissions(
+		permission: (string | Mongo.ObjectID)[],
+		scope?: string | Mongo.ObjectID
+	): Subscription<boolean>;
+	queryRole(role: string | Mongo.ObjectID): Subscription<boolean>;
+};
+
+export const AuthorizationContext = createContext<AuthorizationContextValue>({
+	queryPermission: () => ({
+		getCurrentValue: (): boolean => false,
+		subscribe: (): Unsubscribe => (): void => undefined,
+	}),
+	queryAtLeastOnePermission: () => ({
+		getCurrentValue: (): boolean => false,
+		subscribe: (): Unsubscribe => (): void => undefined,
+	}),
+	queryAllPermissions: () => ({
+		getCurrentValue: (): boolean => false,
+		subscribe: (): Unsubscribe => (): void => undefined,
+	}),
+	queryRole: () => ({
+		getCurrentValue: (): boolean => false,
+		subscribe: (): Unsubscribe => (): void => undefined,
+	}),
+});
+
+export const usePermission = (
+	permission: string | Mongo.ObjectID,
+	scope?: string | Mongo.ObjectID,
+): boolean => {
+	const { queryPermission } = useContext(AuthorizationContext);
+	const subscription = useMemo(
+		() => queryPermission(permission, scope),
+		[queryPermission, permission, scope],
+	);
+	return useSubscription(subscription);
+};
+
+export const useAtLeastOnePermission = (
+	permissions: (string | Mongo.ObjectID)[],
+	scope?: string | Mongo.ObjectID,
+): boolean => {
+	const { queryAtLeastOnePermission } = useContext(AuthorizationContext);
+	const subscription = useMemo(
+		() => queryAtLeastOnePermission(permissions, scope),
+		[queryAtLeastOnePermission, permissions, scope],
+	);
+	return useSubscription(subscription);
+};
+
+export const useAllPermissions = (
+	permissions: (string | Mongo.ObjectID)[],
+	scope?: string | Mongo.ObjectID,
+): boolean => {
+	const { queryAllPermissions } = useContext(AuthorizationContext);
+	const subscription = useMemo(
+		() => queryAllPermissions(permissions, scope),
+		[queryAllPermissions, permissions, scope],
+	);
+	return useSubscription(subscription);
+};
+
+export const useRole = (role: string | Mongo.ObjectID): boolean => {
+	const { queryRole } = useContext(AuthorizationContext);
+	const subscription = useMemo(() => queryRole(role), [queryRole, role]);
+	return useSubscription(subscription);
+};

client/contexts/SessionContext.ts

@@ -0,0 +1,26 @@
+import { createContext, useCallback, useContext, useMemo } from 'react';
+import { useSubscription, Subscription, Unsubscribe } from 'use-subscription';
+
+type SessionContextValue = {
+	query: (name: string) => Subscription<unknown>;
+	dispatch: (name: string, value: unknown) => void;
+};
+
+export const SessionContext = createContext<SessionContextValue>({
+	query: () => ({
+		getCurrentValue: (): undefined => undefined,
+		subscribe: (): Unsubscribe => (): void => undefined,
+	}),
+	dispatch: (): void => undefined,
+});
+
+export const useSession = (name: string): unknown => {
+	const { query } = useContext(SessionContext);
+	const subscription = useMemo(() => query(name), [query, name]);
+	return useSubscription(subscription);
+};
+
+export const useSessionDispatch = (name: string): ((name: string, value: unknown) => void) => {
+	const { dispatch } = useContext(SessionContext);
+	return useCallback((value) => dispatch(name, value), [dispatch, name]);
+};

client/contexts/UserContext.ts

@@ -0,0 +1,34 @@
+import { createContext, useContext, useMemo } from 'react';
+import { useSubscription, Subscription, Unsubscribe } from 'use-subscription';
+
+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>;
+};
+
+export const UserContext = createContext<UserContextValue>({
+	userId: null,
+	user: null,
+	loginWithPassword: async () => undefined,
+	queryPreference: () => ({
+		getCurrentValue: (): undefined => undefined,
+		subscribe: (): Unsubscribe => (): void => undefined,
+	}),
+});
+
+export const useUserId = (): string | Mongo.ObjectID | null =>
+	useContext(UserContext).userId;
+
+export const useUser = (): Meteor.User | null =>
+	useContext(UserContext).user;
+
+export const useLoginWithPassword = (): ((user: string | object, password: string) => Promise<void>) =>
+	useContext(UserContext).loginWithPassword;
+
+export const useUserPreference = <T>(key: string | Mongo.ObjectID, defaultValue?: T): T | undefined => {
+	const { queryPreference } = useContext(UserContext);
+	const subscription = useMemo(() => queryPreference(key, defaultValue), [queryPreference, key, defaultValue]);
+	return useSubscription(subscription);
+};