From 38a4a071acfcea0845b960339cd931df2970a1eb Mon Sep 17 00:00:00 2001 From: Guilherme Gazzo Date: Fri, 1 Apr 2022 17:57:27 -0300 Subject: [PATCH 1/6] TS conversion --- .../Omnichannel/{Skeleton.js => Skeleton.tsx} | 6 +- client/components/avatar/AppAvatar.js | 12 ---- client/components/avatar/AppAvatar.tsx | 24 +++++++ client/components/avatar/RoomAvatar.js | 12 ---- client/components/avatar/RoomAvatar.tsx | 28 ++++++++ ...onStatusBar.js => ConnectionStatusBar.tsx} | 37 ++++++----- client/contexts/AvatarUrlContext.ts | 4 +- client/contexts/ServerContext/methods.ts | 11 +++- client/hooks/useMethodData.ts | 23 ++++--- .../cloud/{CloudPage.js => CloudPage.tsx} | 65 ++++++++++--------- .../cloud/ManualWorkspaceRegistrationModal.js | 2 +- 11 files changed, 135 insertions(+), 89 deletions(-) rename client/components/Omnichannel/{Skeleton.js => Skeleton.tsx} (52%) delete mode 100644 client/components/avatar/AppAvatar.js create mode 100644 client/components/avatar/AppAvatar.tsx delete mode 100644 client/components/avatar/RoomAvatar.js create mode 100644 client/components/avatar/RoomAvatar.tsx rename client/components/connectionStatus/{ConnectionStatusBar.js => ConnectionStatusBar.tsx} (53%) rename client/views/admin/cloud/{CloudPage.js => CloudPage.tsx} (70%) diff --git a/client/components/Omnichannel/Skeleton.js b/client/components/Omnichannel/Skeleton.tsx similarity index 52% rename from client/components/Omnichannel/Skeleton.js rename to client/components/Omnichannel/Skeleton.tsx index 7632111ecb8a..8af0380e52f5 100644 --- a/client/components/Omnichannel/Skeleton.js +++ b/client/components/Omnichannel/Skeleton.tsx @@ -1,8 +1,8 @@ import { Box, Skeleton } from '@rocket.chat/fuselage'; -import React from 'react'; +import React, { FC } from 'react'; -export const FormSkeleton = (props) => ( - +export const FormSkeleton: FC = () => ( + diff --git a/client/components/avatar/AppAvatar.js b/client/components/avatar/AppAvatar.js deleted file mode 100644 index 60c9b65eba99..000000000000 --- a/client/components/avatar/AppAvatar.js +++ /dev/null @@ -1,12 +0,0 @@ -import { Box } from '@rocket.chat/fuselage'; -import React from 'react'; - -import BaseAvatar from './BaseAvatar'; - -export default function AppAvatar({ iconFileContent, size, iconFileData, ...props }) { - return ( - - - - ); -} diff --git a/client/components/avatar/AppAvatar.tsx b/client/components/avatar/AppAvatar.tsx new file mode 100644 index 000000000000..14a02ffb4696 --- /dev/null +++ b/client/components/avatar/AppAvatar.tsx @@ -0,0 +1,24 @@ +import { Box } from '@rocket.chat/fuselage'; +import React, { ReactElement } from 'react'; + +import BaseAvatar from './BaseAvatar'; + +// TODO: frontend chapter day - Remove inline Styling + +type AppAvatarProps = { + /* @deprecated */ + size: 'x40' | 'x124'; + /* @deprecated */ + mie: 'x80' | 'x20'; + + iconFileContent: string; + iconFileData: string; +}; + +export default function AppAvatar({ iconFileContent, size, iconFileData, ...props }: AppAvatarProps): ReactElement { + return ( + + + + ); +} diff --git a/client/components/avatar/RoomAvatar.js b/client/components/avatar/RoomAvatar.js deleted file mode 100644 index 0cdd3baaf724..000000000000 --- a/client/components/avatar/RoomAvatar.js +++ /dev/null @@ -1,12 +0,0 @@ -import React, { memo } from 'react'; - -import { useRoomAvatarPath } from '../../contexts/AvatarUrlContext'; -import BaseAvatar from './BaseAvatar'; - -function RoomAvatar({ room, ...rest }) { - const getRoomPathAvatar = useRoomAvatarPath(); - const { url = getRoomPathAvatar(room), ...props } = rest; - return ; -} - -export default memo(RoomAvatar); diff --git a/client/components/avatar/RoomAvatar.tsx b/client/components/avatar/RoomAvatar.tsx new file mode 100644 index 000000000000..407e5c3b6f64 --- /dev/null +++ b/client/components/avatar/RoomAvatar.tsx @@ -0,0 +1,28 @@ +import React, { memo, ReactElement } from 'react'; + +import { useRoomAvatarPath } from '../../contexts/AvatarUrlContext'; +import BaseAvatar from './BaseAvatar'; + +// TODO: frontend chapter day - Remove inline Styling + +type RoomAvatarProps = { + /* @deprecated */ + size: 'x40' | 'x124'; + /* @deprecated */ + url?: string; + + room: { + _id: string; + type: string; + t: string; + avatarETag: string; + }; +}; + +const RoomAvatar = function RoomAvatar({ room, ...rest }: RoomAvatarProps): ReactElement { + const getRoomPathAvatar = useRoomAvatarPath(); + const { url = getRoomPathAvatar(room), ...props } = rest; + return ; +}; + +export default memo(RoomAvatar); diff --git a/client/components/connectionStatus/ConnectionStatusBar.js b/client/components/connectionStatus/ConnectionStatusBar.tsx similarity index 53% rename from client/components/connectionStatus/ConnectionStatusBar.js rename to client/components/connectionStatus/ConnectionStatusBar.tsx index 80e6b4fa439c..c5b57b467363 100644 --- a/client/components/connectionStatus/ConnectionStatusBar.js +++ b/client/components/connectionStatus/ConnectionStatusBar.tsx @@ -1,18 +1,23 @@ import { Icon } from '@rocket.chat/fuselage'; -import React, { useEffect, useRef, useState } from 'react'; +import React, { useEffect, useRef, useState, ReactNode, MouseEventHandler } from 'react'; import { useConnectionStatus } from '../../contexts/ConnectionStatusContext'; import { useTranslation } from '../../contexts/TranslationContext'; import './ConnectionStatusBar.css'; -const getReconnectCountdown = (retryTime) => { +// TODO: frontend chapter day - fix unknown translation keys + +const getReconnectCountdown = (retryTime: number): number => { const timeDiff = retryTime - Date.now(); return (timeDiff > 0 && Math.round(timeDiff / 1000)) || 0; }; -const useReconnectCountdown = (retryTime, status) => { - const reconnectionTimerRef = useRef(); - const [reconnectCountdown, setReconnectCountdown] = useState(() => getReconnectCountdown(retryTime)); +const useReconnectCountdown = ( + retryTime: number | undefined, + status: 'connected' | 'connecting' | 'failed' | 'waiting' | 'offline', +): number => { + const reconnectionTimerRef = useRef>(); + const [reconnectCountdown, setReconnectCountdown] = useState(() => (retryTime ? getReconnectCountdown(retryTime) : 0)); useEffect(() => { if (status === 'waiting') { @@ -21,18 +26,18 @@ const useReconnectCountdown = (retryTime, status) => { } reconnectionTimerRef.current = setInterval(() => { - setReconnectCountdown(getReconnectCountdown(retryTime)); + retryTime && setReconnectCountdown(getReconnectCountdown(retryTime)); }, 500); return; } - clearInterval(reconnectionTimerRef.current); - reconnectionTimerRef.current = null; + reconnectionTimerRef.current && clearInterval(reconnectionTimerRef.current); + reconnectionTimerRef.current = undefined; }, [retryTime, status]); useEffect( - () => () => { - clearInterval(reconnectionTimerRef.current); + () => (): void => { + reconnectionTimerRef.current && clearInterval(reconnectionTimerRef.current); }, [], ); @@ -40,7 +45,7 @@ const useReconnectCountdown = (retryTime, status) => { return reconnectCountdown; }; -function ConnectionStatusBar() { +const ConnectionStatusBar = function ConnectionStatusBar(): ReactNode { const { connected, retryTime, status, reconnect } = useConnectionStatus(); const reconnectCountdown = useReconnectCountdown(retryTime, status); const t = useTranslation(); @@ -49,15 +54,15 @@ function ConnectionStatusBar() { return null; } - const handleRetryClick = (event) => { + const handleRetryClick: MouseEventHandler = (event) => { event.preventDefault(); - reconnect && reconnect(); + reconnect?.(); }; return (
- {t('meteor_status', { context: status })} + {t('meteor_status' as Parameters[0], { context: status })} {status === 'waiting' && <> {t('meteor_status_reconnect_in', { count: reconnectCountdown })}} @@ -66,12 +71,12 @@ function ConnectionStatusBar() { <> {' '} - {t('meteor_status_try_now', { context: status })} + {t('meteor_status_try_now' as Parameters[0], { context: status })} )}
); -} +}; export default ConnectionStatusBar; diff --git a/client/contexts/AvatarUrlContext.ts b/client/contexts/AvatarUrlContext.ts index 06ea5d30f394..985346f774ff 100644 --- a/client/contexts/AvatarUrlContext.ts +++ b/client/contexts/AvatarUrlContext.ts @@ -13,6 +13,6 @@ const AvatarUrlContextValueDefault: AvatarContextValue = { export const AvatarUrlContext = createContext(AvatarUrlContextValueDefault); -export const useRoomAvatarPath = (): ((uid: string, etag?: string) => string) => useContext(AvatarUrlContext).getRoomPathAvatar; +export const useRoomAvatarPath = (): ((...args: any) => string) => useContext(AvatarUrlContext).getRoomPathAvatar; -export const useUserAvatarPath = (): ((...args: any) => string) => useContext(AvatarUrlContext).getUserPathAvatar; +export const useUserAvatarPath = (): ((uid: string, etag?: string) => string) => useContext(AvatarUrlContext).getUserPathAvatar; diff --git a/client/contexts/ServerContext/methods.ts b/client/contexts/ServerContext/methods.ts index 96ff8a15cc35..26142266dc89 100644 --- a/client/contexts/ServerContext/methods.ts +++ b/client/contexts/ServerContext/methods.ts @@ -13,6 +13,8 @@ import { SaveSettingsMethod } from './methods/saveSettings'; import { SaveUserPreferencesMethod } from './methods/saveUserPreferences'; import { UnfollowMessageMethod } from './methods/unfollowMessage'; +// TODO: frontend chapter day - define methods + export type ServerMethods = { '2fa:checkCodesRemaining': (...args: any[]) => any; '2fa:disable': (...args: any[]) => any; @@ -37,7 +39,14 @@ export type ServerMethods = { 'checkUsernameAvailability': (...args: any[]) => any; 'cleanRoomHistory': (...args: any[]) => any; 'clearIntegrationHistory': (...args: any[]) => any; - 'cloud:checkRegisterStatus': (...args: any[]) => any; + 'cloud:checkRegisterStatus': (...args: any[]) => { + connectToCloud: string; + workspaceRegistered: string; + workspaceId: string; + uniqueId: string; + token: string; + email: string; + }; 'cloud:checkUserLoggedIn': (...args: any[]) => any; 'cloud:connectWorkspace': (...args: any[]) => any; 'cloud:disconnectWorkspace': (...args: any[]) => any; diff --git a/client/hooks/useMethodData.ts b/client/hooks/useMethodData.ts index ec92abc04247..268ff3ca6c68 100644 --- a/client/hooks/useMethodData.ts +++ b/client/hooks/useMethodData.ts @@ -1,19 +1,22 @@ import { useCallback, useEffect } from 'react'; -import { ServerMethods, useMethod } from '../contexts/ServerContext'; +import type { Awaited } from '../../definition/utils'; +import { ServerMethodFunction, ServerMethods, useMethod } from '../contexts/ServerContext'; import { useToastMessageDispatch } from '../contexts/ToastMessagesContext'; import { AsyncState, useAsyncState } from './useAsyncState'; -const defaultArgs: unknown[] = []; - -export const useMethodData = ( - methodName: keyof ServerMethods, - args: any[] = defaultArgs, - initialValue?: T | (() => T), -): AsyncState & { reload: () => void } => { - const { resolve, reject, reset, ...state } = useAsyncState(initialValue); +export const useMethodData = < + MethodName extends keyof ServerMethods, + MethodArg = Parameters>, + Result = Awaited>>, +>( + methodName: MethodName, + args: MethodArg, + initialValue?: Result | (() => Result), +): AsyncState & { reload: () => void } => { + const { resolve, reject, reset, ...state } = useAsyncState(initialValue); const dispatchToastMessage = useToastMessageDispatch(); - const getData: (...args: unknown[]) => Promise = useMethod(methodName); + const getData: ServerMethodFunction = useMethod(methodName); const fetchData = useCallback(() => { reset(); diff --git a/client/views/admin/cloud/CloudPage.js b/client/views/admin/cloud/CloudPage.tsx similarity index 70% rename from client/views/admin/cloud/CloudPage.js rename to client/views/admin/cloud/CloudPage.tsx index 5a1c92fac088..566885726234 100644 --- a/client/views/admin/cloud/CloudPage.js +++ b/client/views/admin/cloud/CloudPage.tsx @@ -1,6 +1,5 @@ import { Box, Button, ButtonGroup, Margins } from '@rocket.chat/fuselage'; -import { useMutableCallback, useSafely } from '@rocket.chat/fuselage-hooks'; -import React, { useState, useEffect } from 'react'; +import React, { useEffect, ReactNode } from 'react'; import Page from '../../../components/Page'; import { useSetModal } from '../../../contexts/ModalContext'; @@ -8,6 +7,7 @@ import { useQueryStringParameter, useRoute, useRouteParameter } from '../../../c import { useMethod } from '../../../contexts/ServerContext'; import { useToastMessageDispatch } from '../../../contexts/ToastMessagesContext'; import { useTranslation } from '../../../contexts/TranslationContext'; +import { useMethodData } from '../../../hooks/useMethodData'; import ConnectToCloudSection from './ConnectToCloudSection'; import ManualWorkspaceRegistrationModal from './ManualWorkspaceRegistrationModal'; import TroubleshootingSection from './TroubleshootingSection'; @@ -16,7 +16,7 @@ import WorkspaceLoginSection from './WorkspaceLoginSection'; import WorkspaceRegistrationSection from './WorkspaceRegistrationSection'; import { cloudConsoleUrl } from './constants'; -function CloudPage() { +const CloudPage = function CloudPage(): ReactNode { const t = useTranslation(); const dispatchToastMessage = useToastMessageDispatch(); @@ -30,11 +30,14 @@ function CloudPage() { const token = useQueryStringParameter('token'); const finishOAuthAuthorization = useMethod('cloud:finishOAuthAuthorization'); - const checkRegisterStatus = useMethod('cloud:checkRegisterStatus'); + // const checkRegisterStatus = useMethod('cloud:checkRegisterStatus'); + + const checkRegisterStatus = useMethodData('cloud:checkRegisterStatus'); + const connectWorkspace = useMethod('cloud:connectWorkspace'); useEffect(() => { - const acceptOAuthAuthorization = async () => { + const acceptOAuthAuthorization = async (): Promise => { if (page !== 'oauth-callback') { return; } @@ -61,20 +64,10 @@ function CloudPage() { acceptOAuthAuthorization(); }, [errorCode, code, state, page, dispatchToastMessage, t, cloudRoute, finishOAuthAuthorization]); - const [registerStatus, setRegisterStatus] = useSafely(useState()); const setModal = useSetModal(); - const fetchRegisterStatus = useMutableCallback(async () => { - try { - const registerStatus = await checkRegisterStatus(); - setRegisterStatus(registerStatus); - } catch (error) { - dispatchToastMessage({ type: 'error', message: error }); - } - }); - useEffect(() => { - const acceptWorkspaceToken = async () => { + const acceptWorkspaceToken = async (): Promise => { try { if (token) { const isConnected = await connectWorkspace(token); @@ -88,23 +81,31 @@ function CloudPage() { } catch (error) { dispatchToastMessage({ type: 'error', message: error }); } finally { - await fetchRegisterStatus(); + await checkRegisterStatus.reload(); } }; acceptWorkspaceToken(); - }, [connectWorkspace, dispatchToastMessage, fetchRegisterStatus, t, token]); + }, [checkRegisterStatus, connectWorkspace, dispatchToastMessage, t, token]); - const handleManualWorkspaceRegistrationButtonClick = () => { - const handleModalClose = () => { + const handleManualWorkspaceRegistrationButtonClick = (): void => { + const handleModalClose = (): void => { setModal(null); - fetchRegisterStatus(); + checkRegisterStatus.reload(); }; setModal(); }; - const isConnectToCloudDesired = registerStatus?.connectToCloud; - const isWorkspaceRegistered = registerStatus?.workspaceRegistered; + if (checkRegisterStatus.phase === 'loading') { + return null; + } + + if (checkRegisterStatus.phase === 'rejected') { + return null; + } + + const isConnectToCloudDesired = checkRegisterStatus.value.connectToCloud; + const isWorkspaceRegistered = checkRegisterStatus.value.workspaceRegistered; return ( @@ -125,27 +126,27 @@ function CloudPage() { <> {isWorkspaceRegistered ? ( <> - - + + ) : ( )} )} - {!isConnectToCloudDesired && } + {!isConnectToCloudDesired && } ); -} +}; export default CloudPage; diff --git a/client/views/admin/cloud/ManualWorkspaceRegistrationModal.js b/client/views/admin/cloud/ManualWorkspaceRegistrationModal.js index 7e85caab7279..2a71c71f387e 100644 --- a/client/views/admin/cloud/ManualWorkspaceRegistrationModal.js +++ b/client/views/admin/cloud/ManualWorkspaceRegistrationModal.js @@ -10,7 +10,7 @@ const Steps = { PASTE: 'paste', }; -function ManualWorkspaceRegistrationModal({ onClose, props }) { +function ManualWorkspaceRegistrationModal({ onClose, ...props }) { const t = useTranslation(); const [step, setStep] = useState(Steps.COPY); From 218c5948ff5306cc89486055baef47c57d1cc8ad Mon Sep 17 00:00:00 2001 From: Guilherme Gazzo Date: Fri, 1 Apr 2022 18:41:07 -0300 Subject: [PATCH 2/6] fix --- client/contexts/ServerContext/methods.ts | 16 ++++++++++- .../ServerContext/methods/getReadReceipts.ts | 2 +- client/hooks/useMethodData.ts | 10 ++----- .../facebook/FacebookPageContainer.tsx | 28 +++++++++++-------- .../ReadReceiptsModal/ReadReceiptsModal.tsx | 3 +- 5 files changed, 36 insertions(+), 23 deletions(-) diff --git a/client/contexts/ServerContext/methods.ts b/client/contexts/ServerContext/methods.ts index 26142266dc89..7aae6a11a603 100644 --- a/client/contexts/ServerContext/methods.ts +++ b/client/contexts/ServerContext/methods.ts @@ -85,7 +85,21 @@ export type ServerMethods = { 'livechat:changeLivechatStatus': (...args: any[]) => any; 'livechat:closeRoom': (...args: any[]) => any; 'livechat:discardTranscript': (...args: any[]) => any; - 'livechat:facebook': (...args: any[]) => any; + + // TODO: chapter day backend - enhance/deprecate + 'livechat:facebook': + | ((...args: [{ action: 'initialState' }]) => { + enabled: boolean; + hasToken: boolean; + }) + | ((...args: [{ action: 'list-pages' }]) => { + name: string; + subscribed: boolean; + id: string; + }[]) + | ((...args: [{ action: 'subscribe' | 'unsubscribe'; page: string }]) => {}) + | ((...args: [{ action: 'enable' }]) => { url: string } | undefined) + | ((...args: [{ action: 'disable' }]) => {}); 'livechat:getAgentOverviewData': (...args: any[]) => any; 'livechat:getAnalyticsChartData': (...args: any[]) => any; 'livechat:getAnalyticsOverviewData': (...args: any[]) => any; diff --git a/client/contexts/ServerContext/methods/getReadReceipts.ts b/client/contexts/ServerContext/methods/getReadReceipts.ts index dda0ea345a21..2b44b0ffa4ec 100644 --- a/client/contexts/ServerContext/methods/getReadReceipts.ts +++ b/client/contexts/ServerContext/methods/getReadReceipts.ts @@ -1,4 +1,4 @@ import type { IMessage } from '../../../../definition/IMessage'; import type { ReadReceipt } from '../../../../definition/ReadReceipt'; -export type GetReadReceiptsMethod = (options: { mid: IMessage['_id'] }) => Array; +export type GetReadReceiptsMethod = (options: { messageId: IMessage['_id'] }) => Array; diff --git a/client/hooks/useMethodData.ts b/client/hooks/useMethodData.ts index 268ff3ca6c68..0ac1982832c7 100644 --- a/client/hooks/useMethodData.ts +++ b/client/hooks/useMethodData.ts @@ -1,17 +1,13 @@ import { useCallback, useEffect } from 'react'; import type { Awaited } from '../../definition/utils'; -import { ServerMethodFunction, ServerMethods, useMethod } from '../contexts/ServerContext'; +import { ServerMethodFunction, ServerMethodParameters, ServerMethods, useMethod } from '../contexts/ServerContext'; import { useToastMessageDispatch } from '../contexts/ToastMessagesContext'; import { AsyncState, useAsyncState } from './useAsyncState'; -export const useMethodData = < - MethodName extends keyof ServerMethods, - MethodArg = Parameters>, - Result = Awaited>>, ->( +export const useMethodData = >>>( methodName: MethodName, - args: MethodArg, + args: ServerMethodParameters, initialValue?: Result | (() => Result), ): AsyncState & { reload: () => void } => { const { resolve, reject, reset, ...state } = useAsyncState(initialValue); diff --git a/client/views/omnichannel/facebook/FacebookPageContainer.tsx b/client/views/omnichannel/facebook/FacebookPageContainer.tsx index dd96ff6e52f7..6c44880fa352 100644 --- a/client/views/omnichannel/facebook/FacebookPageContainer.tsx +++ b/client/views/omnichannel/facebook/FacebookPageContainer.tsx @@ -26,13 +26,21 @@ type InitialStateData = { hasToken: boolean; }; -const initialStateArgs = [ +const initialStateArgs: [ + { + action: 'initialState'; + }, +] = [ { action: 'initialState', }, ]; -const listPageArgs = [ +const listPageArgs: [ + { + action: 'list-pages'; + }, +] = [ { action: 'list-pages', }, @@ -41,16 +49,12 @@ const listPageArgs = [ const FacebookPageContainer: FC = () => { const t = useTranslation(); const dispatchToastMessage = useToastMessageDispatch(); - const { - value: initialStateData, - phase: state, - reload: reloadInitial, - } = useMethodData('livechat:facebook', initialStateArgs); + const { value: initialStateData, phase: state, reload: reloadInitial } = useMethodData('livechat:facebook', initialStateArgs); - const { value: pagesData, phase: listState, reload: reloadData } = useMethodData('livechat:facebook', listPageArgs); + const { value: pagesData, phase: listState, reload: reloadData } = useMethodData('livechat:facebook', listPageArgs); - const { enabled, hasToken } = initialStateData || { enabled: false, hasToken: false }; - const { pages } = pagesData || { pages: [] }; + const { enabled, hasToken } = (initialStateData as InitialStateData) || { enabled: false, hasToken: false }; + const { pages } = (pagesData as unknown as PageData) || { pages: [] }; const livechatFacebook = useMethod('livechat:facebook'); @@ -92,8 +96,8 @@ const FacebookPageContainer: FC = () => { const onEnable = useMutableCallback(async () => { try { const result = await livechatFacebook({ action: 'enable' }); - if (result?.url) { - openOauthWindow(result?.url, () => { + if (result && 'url' in result) { + openOauthWindow(result.url, () => { onEnable(); }); } else { diff --git a/client/views/room/modals/ReadReceiptsModal/ReadReceiptsModal.tsx b/client/views/room/modals/ReadReceiptsModal/ReadReceiptsModal.tsx index 8bc6b3d46786..f85adb22e42b 100644 --- a/client/views/room/modals/ReadReceiptsModal/ReadReceiptsModal.tsx +++ b/client/views/room/modals/ReadReceiptsModal/ReadReceiptsModal.tsx @@ -2,7 +2,6 @@ import { Skeleton } from '@rocket.chat/fuselage'; import React, { ReactElement, useMemo, useEffect } from 'react'; import type { IMessage } from '../../../../../definition/IMessage/IMessage'; -import type { ReadReceipt } from '../../../../../definition/ReadReceipt'; import GenericModal from '../../../../components/GenericModal'; import { useToastMessageDispatch } from '../../../../contexts/ToastMessagesContext'; import { useTranslation } from '../../../../contexts/TranslationContext'; @@ -19,7 +18,7 @@ const ReadReceiptsModal = ({ messageId, onClose }: ReadReceiptsModalProps): Reac const t = useTranslation(); const dispatchToastMessage = useToastMessageDispatch(); - const { phase, value, error } = useMethodData>( + const { phase, value, error } = useMethodData( 'getReadReceipts', useMemo(() => [{ messageId }], [messageId]), ); From bc27038883825f936dc68c351ca89859f1c142f2 Mon Sep 17 00:00:00 2001 From: Guilherme Gazzo Date: Mon, 4 Apr 2022 09:52:37 -0300 Subject: [PATCH 3/6] CI --- client/components/Header/Header.stories.tsx | 6 +++--- client/components/avatar/AppAvatar.tsx | 6 ++++-- client/components/avatar/RoomAvatar.tsx | 6 +++--- .../connectionStatus/ConnectionStatusBar.tsx | 4 ++-- client/contexts/ServerContext/methods.ts | 2 +- client/hooks/usePolledMethodData.ts | 11 ++++++----- client/views/admin/apps/types.ts | 2 +- client/views/admin/cloud/CloudPage.tsx | 9 ++++++--- 8 files changed, 26 insertions(+), 20 deletions(-) diff --git a/client/components/Header/Header.stories.tsx b/client/components/Header/Header.stories.tsx index 74e16da707c3..53076619ee79 100644 --- a/client/components/Header/Header.stories.tsx +++ b/client/components/Header/Header.stories.tsx @@ -78,7 +78,7 @@ const room: IRoom = { export const ChatHeader = () => { const icon = useRoomIcon(room); - const avatar = ; + const avatar = ; return (
@@ -169,7 +169,7 @@ addAction('render-action-example-badge-danger', { export const WithToolboxContext: ComponentStory = () => { const icon = useRoomIcon(room); - const avatar = ; + const avatar = ; return (
{avatar} @@ -196,7 +196,7 @@ export const WithToolboxContext: ComponentStory = () => { export const Omnichannel = () => { const icon = useRoomIcon(room); - const avatar = ; + const avatar = ; return (
{avatar} diff --git a/client/components/avatar/AppAvatar.tsx b/client/components/avatar/AppAvatar.tsx index 14a02ffb4696..13ec336e3b65 100644 --- a/client/components/avatar/AppAvatar.tsx +++ b/client/components/avatar/AppAvatar.tsx @@ -7,9 +7,11 @@ import BaseAvatar from './BaseAvatar'; type AppAvatarProps = { /* @deprecated */ - size: 'x40' | 'x124'; + size: 'x36' | 'x28' | 'x16' | 'x40' | 'x124'; /* @deprecated */ - mie: 'x80' | 'x20'; + mie?: 'x80' | 'x20' | 'x8'; + /* @deprecated */ + alignSelf?: 'center'; iconFileContent: string; iconFileData: string; diff --git a/client/components/avatar/RoomAvatar.tsx b/client/components/avatar/RoomAvatar.tsx index 407e5c3b6f64..d2c59721f88c 100644 --- a/client/components/avatar/RoomAvatar.tsx +++ b/client/components/avatar/RoomAvatar.tsx @@ -7,15 +7,15 @@ import BaseAvatar from './BaseAvatar'; type RoomAvatarProps = { /* @deprecated */ - size: 'x40' | 'x124'; + size?: 'x16' | 'x20' | 'x28' | 'x36' | 'x40' | 'x124'; /* @deprecated */ url?: string; room: { _id: string; - type: string; + type?: string; t: string; - avatarETag: string; + avatarETag?: string; }; }; diff --git a/client/components/connectionStatus/ConnectionStatusBar.tsx b/client/components/connectionStatus/ConnectionStatusBar.tsx index c5b57b467363..b5e4fd539f20 100644 --- a/client/components/connectionStatus/ConnectionStatusBar.tsx +++ b/client/components/connectionStatus/ConnectionStatusBar.tsx @@ -1,5 +1,5 @@ import { Icon } from '@rocket.chat/fuselage'; -import React, { useEffect, useRef, useState, ReactNode, MouseEventHandler } from 'react'; +import React, { useEffect, useRef, useState, MouseEventHandler, FC } from 'react'; import { useConnectionStatus } from '../../contexts/ConnectionStatusContext'; import { useTranslation } from '../../contexts/TranslationContext'; @@ -45,7 +45,7 @@ const useReconnectCountdown = ( return reconnectCountdown; }; -const ConnectionStatusBar = function ConnectionStatusBar(): ReactNode { +const ConnectionStatusBar: FC = function ConnectionStatusBar() { const { connected, retryTime, status, reconnect } = useConnectionStatus(); const reconnectCountdown = useReconnectCountdown(retryTime, status); const t = useTranslation(); diff --git a/client/contexts/ServerContext/methods.ts b/client/contexts/ServerContext/methods.ts index 7aae6a11a603..0e61c6f12028 100644 --- a/client/contexts/ServerContext/methods.ts +++ b/client/contexts/ServerContext/methods.ts @@ -39,7 +39,7 @@ export type ServerMethods = { 'checkUsernameAvailability': (...args: any[]) => any; 'cleanRoomHistory': (...args: any[]) => any; 'clearIntegrationHistory': (...args: any[]) => any; - 'cloud:checkRegisterStatus': (...args: any[]) => { + 'cloud:checkRegisterStatus': () => { connectToCloud: string; workspaceRegistered: string; workspaceId: string; diff --git a/client/hooks/usePolledMethodData.ts b/client/hooks/usePolledMethodData.ts index fbfff35708ba..2db4ce0c06bb 100644 --- a/client/hooks/usePolledMethodData.ts +++ b/client/hooks/usePolledMethodData.ts @@ -1,15 +1,16 @@ import { useEffect } from 'react'; -import { ServerMethods } from '../contexts/ServerContext'; +import { Awaited } from '../../definition/utils'; +import { ServerMethodFunction, ServerMethodParameters, ServerMethods } from '../contexts/ServerContext'; import { AsyncState } from './useAsyncState'; import { useMethodData } from './useMethodData'; -export const usePolledMethodData = ( +export const usePolledMethodData = >>>( methodName: keyof ServerMethods, - args: any[] = [], + args: ServerMethodParameters, intervalMs: number, -): AsyncState & { reload: () => void } => { - const { reload, ...state } = useMethodData(methodName, args); +): AsyncState & { reload: () => void } => { + const { reload, ...state } = useMethodData(methodName, args); useEffect(() => { const timer = setInterval(() => { diff --git a/client/views/admin/apps/types.ts b/client/views/admin/apps/types.ts index 5e413979d95b..3942395edb4f 100644 --- a/client/views/admin/apps/types.ts +++ b/client/views/admin/apps/types.ts @@ -15,7 +15,7 @@ export type App = { price: number; purchaseType: string; pricingPlans: unknown[]; - iconFileContent: unknown; + iconFileContent: string; installed?: boolean; isEnterpriseOnly?: boolean; bundledIn: { diff --git a/client/views/admin/cloud/CloudPage.tsx b/client/views/admin/cloud/CloudPage.tsx index 566885726234..7079a4eb17cb 100644 --- a/client/views/admin/cloud/CloudPage.tsx +++ b/client/views/admin/cloud/CloudPage.tsx @@ -1,5 +1,5 @@ import { Box, Button, ButtonGroup, Margins } from '@rocket.chat/fuselage'; -import React, { useEffect, ReactNode } from 'react'; +import React, { useEffect, ReactNode, useMemo } from 'react'; import Page from '../../../components/Page'; import { useSetModal } from '../../../contexts/ModalContext'; @@ -32,7 +32,10 @@ const CloudPage = function CloudPage(): ReactNode { const finishOAuthAuthorization = useMethod('cloud:finishOAuthAuthorization'); // const checkRegisterStatus = useMethod('cloud:checkRegisterStatus'); - const checkRegisterStatus = useMethodData('cloud:checkRegisterStatus'); + const checkRegisterStatus = useMethodData( + 'cloud:checkRegisterStatus', + useMemo(() => [], []), + ); const connectWorkspace = useMethod('cloud:connectWorkspace'); @@ -73,7 +76,7 @@ const CloudPage = function CloudPage(): ReactNode { const isConnected = await connectWorkspace(token); if (!isConnected) { - throw Error(t('An error occured connecting')); + throw Error(t('An error occured connecting' as Parameters[0])); } dispatchToastMessage({ type: 'success', message: t('Connected') }); From fb207535bd361dc226f4b6580221c46dfb172cbf Mon Sep 17 00:00:00 2001 From: Guilherme Gazzo Date: Mon, 4 Apr 2022 12:30:54 -0300 Subject: [PATCH 4/6] Update Skeleton.tsx --- client/components/Omnichannel/Skeleton.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/components/Omnichannel/Skeleton.tsx b/client/components/Omnichannel/Skeleton.tsx index 8af0380e52f5..99c63164a708 100644 --- a/client/components/Omnichannel/Skeleton.tsx +++ b/client/components/Omnichannel/Skeleton.tsx @@ -1,8 +1,8 @@ import { Box, Skeleton } from '@rocket.chat/fuselage'; import React, { FC } from 'react'; -export const FormSkeleton: FC = () => ( - +export const FormSkeleton: FC = (props) => ( + From 057d4e6edc7551518e3b1ad910364f4ee2740023 Mon Sep 17 00:00:00 2001 From: Guilherme Gazzo Date: Mon, 4 Apr 2022 14:28:14 -0300 Subject: [PATCH 5/6] =?UTF-8?q?meteor=20builder=20=E2=9D=A4=EF=B8=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../{ConnectionStatusBar.css => ConnectionStatusBar.styles.css} | 0 client/components/connectionStatus/ConnectionStatusBar.tsx | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename client/components/connectionStatus/{ConnectionStatusBar.css => ConnectionStatusBar.styles.css} (100%) diff --git a/client/components/connectionStatus/ConnectionStatusBar.css b/client/components/connectionStatus/ConnectionStatusBar.styles.css similarity index 100% rename from client/components/connectionStatus/ConnectionStatusBar.css rename to client/components/connectionStatus/ConnectionStatusBar.styles.css diff --git a/client/components/connectionStatus/ConnectionStatusBar.tsx b/client/components/connectionStatus/ConnectionStatusBar.tsx index b5e4fd539f20..801c62768624 100644 --- a/client/components/connectionStatus/ConnectionStatusBar.tsx +++ b/client/components/connectionStatus/ConnectionStatusBar.tsx @@ -3,7 +3,7 @@ import React, { useEffect, useRef, useState, MouseEventHandler, FC } from 'react import { useConnectionStatus } from '../../contexts/ConnectionStatusContext'; import { useTranslation } from '../../contexts/TranslationContext'; -import './ConnectionStatusBar.css'; +import './ConnectionStatusBar.styles.css'; // TODO: frontend chapter day - fix unknown translation keys From 9d51a9935dc2cc5f52636eef77d59092c19babff Mon Sep 17 00:00:00 2001 From: Guilherme Gazzo Date: Mon, 4 Apr 2022 14:59:46 -0300 Subject: [PATCH 6/6] Cloud Page --- client/hooks/useMethodData.ts | 1 + client/views/admin/cloud/CloudPage.tsx | 28 ++++++++++++++------------ 2 files changed, 16 insertions(+), 13 deletions(-) diff --git a/client/hooks/useMethodData.ts b/client/hooks/useMethodData.ts index 0ac1982832c7..5631a1c4a5c0 100644 --- a/client/hooks/useMethodData.ts +++ b/client/hooks/useMethodData.ts @@ -29,6 +29,7 @@ export const useMethodData = { + console.log('as'); fetchData(); }, [fetchData]); diff --git a/client/views/admin/cloud/CloudPage.tsx b/client/views/admin/cloud/CloudPage.tsx index 7079a4eb17cb..b99b8a87917f 100644 --- a/client/views/admin/cloud/CloudPage.tsx +++ b/client/views/admin/cloud/CloudPage.tsx @@ -1,5 +1,5 @@ import { Box, Button, ButtonGroup, Margins } from '@rocket.chat/fuselage'; -import React, { useEffect, ReactNode, useMemo } from 'react'; +import React, { useEffect, ReactNode } from 'react'; import Page from '../../../components/Page'; import { useSetModal } from '../../../contexts/ModalContext'; @@ -16,6 +16,8 @@ import WorkspaceLoginSection from './WorkspaceLoginSection'; import WorkspaceRegistrationSection from './WorkspaceRegistrationSection'; import { cloudConsoleUrl } from './constants'; +const args: [] = []; + const CloudPage = function CloudPage(): ReactNode { const t = useTranslation(); const dispatchToastMessage = useToastMessageDispatch(); @@ -30,12 +32,12 @@ const CloudPage = function CloudPage(): ReactNode { const token = useQueryStringParameter('token'); const finishOAuthAuthorization = useMethod('cloud:finishOAuthAuthorization'); - // const checkRegisterStatus = useMethod('cloud:checkRegisterStatus'); - const checkRegisterStatus = useMethodData( - 'cloud:checkRegisterStatus', - useMemo(() => [], []), - ); + const { reload, ...checkRegisterStatus } = useMethodData('cloud:checkRegisterStatus', args); + + useEffect(() => { + console.log('checkRegisterStatus', checkRegisterStatus); + }, [checkRegisterStatus]); const connectWorkspace = useMethod('cloud:connectWorkspace'); @@ -84,17 +86,17 @@ const CloudPage = function CloudPage(): ReactNode { } catch (error) { dispatchToastMessage({ type: 'error', message: error }); } finally { - await checkRegisterStatus.reload(); + await reload(); } }; acceptWorkspaceToken(); - }, [checkRegisterStatus, connectWorkspace, dispatchToastMessage, t, token]); + }, [reload, connectWorkspace, dispatchToastMessage, t, token]); const handleManualWorkspaceRegistrationButtonClick = (): void => { const handleModalClose = (): void => { setModal(null); - checkRegisterStatus.reload(); + reload(); }; setModal(); }; @@ -129,8 +131,8 @@ const CloudPage = function CloudPage(): ReactNode { <> {isWorkspaceRegistered ? ( <> - - + + ) : ( )} )} - {!isConnectToCloudDesired && } + {!isConnectToCloudDesired && }