From eecca984dbccb8a902a6f342355e000c9efc7959 Mon Sep 17 00:00:00 2001 From: Tasso Evangelista Date: Thu, 30 Mar 2023 15:03:57 -0300 Subject: [PATCH] refactor(client): `readMessage` events (#28709) --- apps/meteor/client/startup/index.ts | 1 - apps/meteor/client/startup/readMessage.ts | 32 -------------- .../views/room/components/BlazeTemplate.tsx | 2 +- .../views/room/components/body/RoomBody.tsx | 9 ++-- .../body/{ => hooks}/useDropTarget.ts | 0 .../{ => hooks}/useFileUploadDropTarget.ts | 10 ++--- .../body/hooks/useReadMessageWindowEvents.ts | 42 +++++++++++++++++++ .../body/{ => hooks}/useRetentionPolicy.ts | 0 .../body/{ => hooks}/useRoomMessageContext.ts | 8 ++-- .../{ => hooks}/useRoomRolesManagement.ts | 2 +- .../body/{ => hooks}/useUnreadMessages.ts | 4 +- .../contextualBar/Info/RoomInfo/RoomInfo.tsx | 2 +- .../Threads/components/ThreadChat.tsx | 2 +- .../views/room/providers/RoomProvider.tsx | 2 +- 14 files changed, 64 insertions(+), 52 deletions(-) delete mode 100644 apps/meteor/client/startup/readMessage.ts rename apps/meteor/client/views/room/components/body/{ => hooks}/useDropTarget.ts (100%) rename apps/meteor/client/views/room/components/body/{ => hooks}/useFileUploadDropTarget.ts (83%) create mode 100644 apps/meteor/client/views/room/components/body/hooks/useReadMessageWindowEvents.ts rename apps/meteor/client/views/room/components/body/{ => hooks}/useRetentionPolicy.ts (100%) rename apps/meteor/client/views/room/components/body/{ => hooks}/useRoomMessageContext.ts (89%) rename apps/meteor/client/views/room/components/body/{ => hooks}/useRoomRolesManagement.ts (96%) rename apps/meteor/client/views/room/components/body/{ => hooks}/useUnreadMessages.ts (90%) diff --git a/apps/meteor/client/startup/index.ts b/apps/meteor/client/startup/index.ts index 33a0a41afdc1..697d26ee67b2 100644 --- a/apps/meteor/client/startup/index.ts +++ b/apps/meteor/client/startup/index.ts @@ -24,7 +24,6 @@ import './messageTypes'; import './notifications'; import './oauth'; import './otr'; -import './readMessage'; import './reloadRoomAfterLogin'; import './renderMessage'; import './renderNotification'; diff --git a/apps/meteor/client/startup/readMessage.ts b/apps/meteor/client/startup/readMessage.ts deleted file mode 100644 index 88e71ebff684..000000000000 --- a/apps/meteor/client/startup/readMessage.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { Meteor } from 'meteor/meteor'; - -import { readMessage } from '../../app/ui-utils/client'; -import { RoomManager } from '../lib/RoomManager'; - -Meteor.startup(() => { - window.addEventListener('blur', () => { - readMessage.disable(); - }); - - window.addEventListener('focus', () => { - readMessage.enable(); - readMessage.read(); - }); - - window.addEventListener('touchend', () => { - readMessage.enable(); - }); - - window.addEventListener('keyup', (event) => { - const key = event.which; - if (key === 27) { - // ESCAPE KEY - const rid = RoomManager.opened; - if (!rid) { - return; - } - readMessage.readNow(rid); - readMessage.refreshUnreadMark(rid); - } - }); -}); diff --git a/apps/meteor/client/views/room/components/BlazeTemplate.tsx b/apps/meteor/client/views/room/components/BlazeTemplate.tsx index a489c31cb5e8..4129192c7da2 100644 --- a/apps/meteor/client/views/room/components/BlazeTemplate.tsx +++ b/apps/meteor/client/views/room/components/BlazeTemplate.tsx @@ -8,7 +8,7 @@ import React, { memo, useLayoutEffect, useRef } from 'react'; import { useBlazePortals } from '../../../lib/portals/blazePortals'; import { useRoom } from '../contexts/RoomContext'; -import { useRoomMessageContext } from './body/useRoomMessageContext'; +import { useRoomMessageContext } from './body/hooks/useRoomMessageContext'; type PropsFromBox = 'className' | 'display' | 'flexGrow' | 'flexShrink' | 'flexDirection' | 'overflow' | 'w' | 'onClick' | 'onMouseEnter'; diff --git a/apps/meteor/client/views/room/components/body/RoomBody.tsx b/apps/meteor/client/views/room/components/body/RoomBody.tsx index 4e1b636ac7c8..49e7e92c322a 100644 --- a/apps/meteor/client/views/room/components/body/RoomBody.tsx +++ b/apps/meteor/client/views/room/components/body/RoomBody.tsx @@ -44,9 +44,10 @@ import RoomForeword from './RoomForeword'; import UnreadMessagesIndicator from './UnreadMessagesIndicator'; import UploadProgressIndicator from './UploadProgressIndicator'; import ComposerContainer from './composer/ComposerContainer'; -import { useFileUploadDropTarget } from './useFileUploadDropTarget'; -import { useRetentionPolicy } from './useRetentionPolicy'; -import { useUnreadMessages } from './useUnreadMessages'; +import { useFileUploadDropTarget } from './hooks/useFileUploadDropTarget'; +import { useReadMessageWindowEvents } from './hooks/useReadMessageWindowEvents'; +import { useRetentionPolicy } from './hooks/useRetentionPolicy'; +import { useUnreadMessages } from './hooks/useUnreadMessages'; const RoomBody = (): ReactElement => { const t = useTranslation(); @@ -538,6 +539,8 @@ const RoomBody = (): ReactElement => { [toolbox], ); + useReadMessageWindowEvents(); + return ( <> {!isLayoutEmbedded && room.announcement && } diff --git a/apps/meteor/client/views/room/components/body/useDropTarget.ts b/apps/meteor/client/views/room/components/body/hooks/useDropTarget.ts similarity index 100% rename from apps/meteor/client/views/room/components/body/useDropTarget.ts rename to apps/meteor/client/views/room/components/body/hooks/useDropTarget.ts diff --git a/apps/meteor/client/views/room/components/body/useFileUploadDropTarget.ts b/apps/meteor/client/views/room/components/body/hooks/useFileUploadDropTarget.ts similarity index 83% rename from apps/meteor/client/views/room/components/body/useFileUploadDropTarget.ts rename to apps/meteor/client/views/room/components/body/hooks/useFileUploadDropTarget.ts index bd89a3d72a60..478250db7f6b 100644 --- a/apps/meteor/client/views/room/components/body/useFileUploadDropTarget.ts +++ b/apps/meteor/client/views/room/components/body/hooks/useFileUploadDropTarget.ts @@ -4,10 +4,10 @@ import type { ReactNode } from 'react'; import type React from 'react'; import { useCallback, useMemo } from 'react'; -import { useReactiveValue } from '../../../../hooks/useReactiveValue'; -import { roomCoordinator } from '../../../../lib/rooms/roomCoordinator'; -import { useChat } from '../../contexts/ChatContext'; -import { useRoom } from '../../contexts/RoomContext'; +import { useReactiveValue } from '../../../../../hooks/useReactiveValue'; +import { roomCoordinator } from '../../../../../lib/rooms/roomCoordinator'; +import { useChat } from '../../../contexts/ChatContext'; +import { useRoom } from '../../../contexts/RoomContext'; import { useDropTarget } from './useDropTarget'; export const useFileUploadDropTarget = (): readonly [ @@ -35,7 +35,7 @@ export const useFileUploadDropTarget = (): readonly [ const chat = useChat(); const onFileDrop = useMutableCallback(async (files: File[]) => { - const { mime } = await import('../../../../../app/utils/lib/mimeTypes'); + const { mime } = await import('../../../../../../app/utils/lib/mimeTypes'); const uploads = Array.from(files).map((file) => { Object.defineProperty(file, 'type', { value: mime.lookup(file.name) }); diff --git a/apps/meteor/client/views/room/components/body/hooks/useReadMessageWindowEvents.ts b/apps/meteor/client/views/room/components/body/hooks/useReadMessageWindowEvents.ts new file mode 100644 index 000000000000..d27e5fe37d09 --- /dev/null +++ b/apps/meteor/client/views/room/components/body/hooks/useReadMessageWindowEvents.ts @@ -0,0 +1,42 @@ +import { useEffect } from 'react'; + +import { readMessage } from '../../../../../../app/ui-utils/client'; +import { useRoom } from '../../../contexts/RoomContext'; + +export function useReadMessageWindowEvents() { + const { _id: rid } = useRoom(); + + useEffect(() => { + const handleWindowBlur = () => { + readMessage.disable(); + }; + + const handleWindowFocus = () => { + readMessage.enable(); + readMessage.read(); + }; + + const handleWindowTouchEnd = () => { + readMessage.enable(); + }; + + const handleWindowKeyUp = (event: KeyboardEvent) => { + if (event.key === 'Escape') { + readMessage.readNow(rid); + readMessage.refreshUnreadMark(rid); + } + }; + + window.addEventListener('blur', handleWindowBlur); + window.addEventListener('focus', handleWindowFocus); + window.addEventListener('touchend', handleWindowTouchEnd); + window.addEventListener('keyup', handleWindowKeyUp); + + return () => { + window.removeEventListener('blur', handleWindowBlur); + window.removeEventListener('focus', handleWindowFocus); + window.removeEventListener('touchend', handleWindowTouchEnd); + window.removeEventListener('keyup', handleWindowKeyUp); + }; + }, [rid]); +} diff --git a/apps/meteor/client/views/room/components/body/useRetentionPolicy.ts b/apps/meteor/client/views/room/components/body/hooks/useRetentionPolicy.ts similarity index 100% rename from apps/meteor/client/views/room/components/body/useRetentionPolicy.ts rename to apps/meteor/client/views/room/components/body/hooks/useRetentionPolicy.ts diff --git a/apps/meteor/client/views/room/components/body/useRoomMessageContext.ts b/apps/meteor/client/views/room/components/body/hooks/useRoomMessageContext.ts similarity index 89% rename from apps/meteor/client/views/room/components/body/useRoomMessageContext.ts rename to apps/meteor/client/views/room/components/body/hooks/useRoomMessageContext.ts index 77c7aba178be..84fd404a0ffd 100644 --- a/apps/meteor/client/views/room/components/body/useRoomMessageContext.ts +++ b/apps/meteor/client/views/room/components/body/hooks/useRoomMessageContext.ts @@ -2,10 +2,10 @@ import type { IRoom } from '@rocket.chat/core-typings'; import { useLayout, usePermission, useSetting, useUser, useUserId, useUserPreference } from '@rocket.chat/ui-contexts'; import { useCallback, useMemo } from 'react'; -import { AutoTranslate } from '../../../../../app/autotranslate/client'; -import { createMessageContext } from '../../../../../app/ui-utils/client/lib/messageContext'; -import { useReactiveValue } from '../../../../hooks/useReactiveValue'; -import { useRoomSubscription } from '../../contexts/RoomContext'; +import { AutoTranslate } from '../../../../../../app/autotranslate/client'; +import { createMessageContext } from '../../../../../../app/ui-utils/client/lib/messageContext'; +import { useReactiveValue } from '../../../../../hooks/useReactiveValue'; +import { useRoomSubscription } from '../../../contexts/RoomContext'; // eslint-disable-next-line @typescript-eslint/explicit-function-return-type export const useRoomMessageContext = (room: IRoom) => { diff --git a/apps/meteor/client/views/room/components/body/useRoomRolesManagement.ts b/apps/meteor/client/views/room/components/body/hooks/useRoomRolesManagement.ts similarity index 96% rename from apps/meteor/client/views/room/components/body/useRoomRolesManagement.ts rename to apps/meteor/client/views/room/components/body/hooks/useRoomRolesManagement.ts index b8c3d1af61e8..13811515165f 100644 --- a/apps/meteor/client/views/room/components/body/useRoomRolesManagement.ts +++ b/apps/meteor/client/views/room/components/body/hooks/useRoomRolesManagement.ts @@ -2,7 +2,7 @@ import type { IRole, IRoom, IUser } from '@rocket.chat/core-typings'; import { useMethod, useStream } from '@rocket.chat/ui-contexts'; import { useEffect } from 'react'; -import { RoomRoles, ChatMessage } from '../../../../../app/models/client'; +import { RoomRoles, ChatMessage } from '../../../../../../app/models/client'; // const roomRoles = RoomRoles as Mongo.Collection>; diff --git a/apps/meteor/client/views/room/components/body/useUnreadMessages.ts b/apps/meteor/client/views/room/components/body/hooks/useUnreadMessages.ts similarity index 90% rename from apps/meteor/client/views/room/components/body/useUnreadMessages.ts rename to apps/meteor/client/views/room/components/body/hooks/useUnreadMessages.ts index dac89be78a34..355c5d4d1cff 100644 --- a/apps/meteor/client/views/room/components/body/useUnreadMessages.ts +++ b/apps/meteor/client/views/room/components/body/hooks/useUnreadMessages.ts @@ -2,8 +2,8 @@ import type { IRoom } from '@rocket.chat/core-typings'; import type { Dispatch, SetStateAction } from 'react'; import { useCallback, useMemo, useState } from 'react'; -import { LegacyRoomManager, RoomHistoryManager } from '../../../../../app/ui-utils/client'; -import { useReactiveValue } from '../../../../hooks/useReactiveValue'; +import { LegacyRoomManager, RoomHistoryManager } from '../../../../../../app/ui-utils/client'; +import { useReactiveValue } from '../../../../../hooks/useReactiveValue'; interface IUnreadMessages { count: number; diff --git a/apps/meteor/client/views/room/contextualBar/Info/RoomInfo/RoomInfo.tsx b/apps/meteor/client/views/room/contextualBar/Info/RoomInfo/RoomInfo.tsx index 980fc3055656..8b65bfd62b82 100644 --- a/apps/meteor/client/views/room/contextualBar/Info/RoomInfo/RoomInfo.tsx +++ b/apps/meteor/client/views/room/contextualBar/Info/RoomInfo/RoomInfo.tsx @@ -10,7 +10,7 @@ import VerticalBar from '../../../../../components/VerticalBar'; import RoomAvatar from '../../../../../components/avatar/RoomAvatar'; import type { Action } from '../../../../hooks/useActionSpread'; import { useActionSpread } from '../../../../hooks/useActionSpread'; -import { useRetentionPolicy } from '../../../components/body/useRetentionPolicy'; +import { useRetentionPolicy } from '../../../components/body/hooks/useRetentionPolicy'; import { useRoomActions } from '../hooks/useRoomActions'; type RoomInfoProps = { diff --git a/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadChat.tsx b/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadChat.tsx index 77bdc33e76ea..21dfb53f16c9 100644 --- a/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadChat.tsx +++ b/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadChat.tsx @@ -10,7 +10,7 @@ import VerticalBarContent from '../../../../../components/VerticalBar/VerticalBa import MessageListErrorBoundary from '../../../MessageList/MessageListErrorBoundary'; import DropTargetOverlay from '../../../components/body/DropTargetOverlay'; import ComposerContainer from '../../../components/body/composer/ComposerContainer'; -import { useFileUploadDropTarget } from '../../../components/body/useFileUploadDropTarget'; +import { useFileUploadDropTarget } from '../../../components/body/hooks/useFileUploadDropTarget'; import { useChat } from '../../../contexts/ChatContext'; import { useRoom, useRoomSubscription } from '../../../contexts/RoomContext'; import { useTabBarClose } from '../../../contexts/ToolboxContext'; diff --git a/apps/meteor/client/views/room/providers/RoomProvider.tsx b/apps/meteor/client/views/room/providers/RoomProvider.tsx index 5c44653b1c16..c88e37d79156 100644 --- a/apps/meteor/client/views/room/providers/RoomProvider.tsx +++ b/apps/meteor/client/views/room/providers/RoomProvider.tsx @@ -11,7 +11,7 @@ import { RoomManager } from '../../../lib/RoomManager'; import { roomCoordinator } from '../../../lib/rooms/roomCoordinator'; import RoomNotFound from '../RoomNotFound'; import RoomSkeleton from '../RoomSkeleton'; -import { useRoomRolesManagement } from '../components/body/useRoomRolesManagement'; +import { useRoomRolesManagement } from '../components/body/hooks/useRoomRolesManagement'; import { RoomAPIContext } from '../contexts/RoomAPIContext'; import { RoomContext } from '../contexts/RoomContext'; import ComposerPopupProvider from './ComposerPopupProvider';