-
Notifications
You must be signed in to change notification settings - Fork 10.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
refactor: Pay the debt of some TODO comments #30338
Changes from all commits
79185ac
ddd13b7
337f0be
32d24e5
2db7539
2fb1a68
aefc458
ab31815
0a5c6f6
b26c3bd
f9e5491
daaacdb
e7046cc
23e0c1b
5d2d1fb
f27d508
22549a3
e0b77d5
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
This file was deleted.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,81 +1,52 @@ | ||
import { Icon } from '@rocket.chat/fuselage'; | ||
import { useConnectionStatus, useTranslation } from '@rocket.chat/ui-contexts'; | ||
import type { MouseEventHandler } from 'react'; | ||
import React, { useEffect, useRef, useState } from 'react'; | ||
import { Box, Icon } from '@rocket.chat/fuselage'; | ||
import { useConnectionStatus } from '@rocket.chat/ui-contexts'; | ||
import type { MouseEvent } from 'react'; | ||
import React from 'react'; | ||
import { useTranslation } from 'react-i18next'; | ||
|
||
import './ConnectionStatusBar.styles.css'; | ||
|
||
// 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: number | undefined, | ||
status: 'connected' | 'connecting' | 'failed' | 'waiting' | 'offline', | ||
): number => { | ||
const reconnectionTimerRef = useRef<ReturnType<typeof setInterval>>(); | ||
const [reconnectCountdown, setReconnectCountdown] = useState(() => (retryTime ? getReconnectCountdown(retryTime) : 0)); | ||
|
||
useEffect(() => { | ||
if (status === 'waiting') { | ||
if (reconnectionTimerRef.current) { | ||
return; | ||
} | ||
|
||
reconnectionTimerRef.current = setInterval(() => { | ||
retryTime && setReconnectCountdown(getReconnectCountdown(retryTime)); | ||
}, 500); | ||
return; | ||
} | ||
|
||
reconnectionTimerRef.current && clearInterval(reconnectionTimerRef.current); | ||
reconnectionTimerRef.current = undefined; | ||
}, [retryTime, status]); | ||
|
||
useEffect( | ||
() => (): void => { | ||
reconnectionTimerRef.current && clearInterval(reconnectionTimerRef.current); | ||
}, | ||
[], | ||
); | ||
|
||
return reconnectCountdown; | ||
}; | ||
import { useReconnectCountdown } from './useReconnectCountdown'; | ||
|
||
function ConnectionStatusBar() { | ||
const { connected, retryTime, status, reconnect } = useConnectionStatus(); | ||
const reconnectCountdown = useReconnectCountdown(retryTime, status); | ||
const t = useTranslation(); | ||
const { t } = useTranslation(); | ||
|
||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think its not going to work here, in this file There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Why not? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think there's a verification on the provider and just translations with the proper pattern works with |
||
if (connected) { | ||
return null; | ||
} | ||
|
||
const handleRetryClick: MouseEventHandler<HTMLAnchorElement> = (event) => { | ||
const handleRetryClick = (event: MouseEvent<HTMLAnchorElement>) => { | ||
event.preventDefault(); | ||
reconnect?.(); | ||
}; | ||
|
||
return ( | ||
<div className='ConnectionStatusBar' role='alert'> | ||
<strong> | ||
<Icon name='warning' /> {t('meteor_status' as Parameters<typeof t>[0], { context: status })} | ||
</strong> | ||
|
||
{status === 'waiting' && <> {t('meteor_status_reconnect_in', { count: reconnectCountdown })}</>} | ||
|
||
{['waiting', 'offline'].includes(status) && ( | ||
<> | ||
{' '} | ||
<a className='ConnectionStatusBar__retry-link' href='#' onClick={handleRetryClick}> | ||
{t('meteor_status_try_now' as Parameters<typeof t>[0], { context: status })} | ||
</a> | ||
</> | ||
)} | ||
</div> | ||
<Box | ||
color='status-font-on-warning' | ||
bg='status-background-warning' | ||
position='fixed' | ||
zIndex={1000000} | ||
insetBlockStart={0} | ||
p={2} | ||
width='100%' | ||
textAlign='center' | ||
borderBlockEndWidth={1} | ||
role='alert' | ||
> | ||
<Icon name='warning' />{' '} | ||
<Box is='span' withRichContent> | ||
<strong>{t('meteor_status', { context: status })}</strong> | ||
{status === 'waiting' && <> {t('meteor_status_reconnect_in', { count: reconnectCountdown })}</>} | ||
{['waiting', 'offline'].includes(status) && ( | ||
<> | ||
{' '} | ||
<a href='#' onClick={handleRetryClick} role='button'> | ||
{t('meteor_status_try_now', { context: status })} | ||
</a> | ||
</> | ||
)} | ||
</Box> | ||
</Box> | ||
); | ||
} | ||
|
||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,39 @@ | ||
import { useEffect, useRef, useState } from 'react'; | ||
|
||
const getReconnectCountdown = (retryTime: number): number => { | ||
const timeDiff = retryTime - Date.now(); | ||
return (timeDiff > 0 && Math.round(timeDiff / 1000)) || 0; | ||
}; | ||
|
||
export const useReconnectCountdown = ( | ||
retryTime: number | undefined, | ||
status: 'connected' | 'connecting' | 'failed' | 'waiting' | 'offline', | ||
): number => { | ||
const reconnectionTimerRef = useRef<ReturnType<typeof setInterval>>(); | ||
const [reconnectCountdown, setReconnectCountdown] = useState(() => (retryTime ? getReconnectCountdown(retryTime) : 0)); | ||
|
||
useEffect(() => { | ||
if (status === 'waiting') { | ||
if (reconnectionTimerRef.current) { | ||
return; | ||
} | ||
|
||
reconnectionTimerRef.current = setInterval(() => { | ||
retryTime && setReconnectCountdown(getReconnectCountdown(retryTime)); | ||
}, 500); | ||
return; | ||
} | ||
|
||
reconnectionTimerRef.current && clearInterval(reconnectionTimerRef.current); | ||
reconnectionTimerRef.current = undefined; | ||
}, [retryTime, status]); | ||
|
||
useEffect( | ||
() => (): void => { | ||
reconnectionTimerRef.current && clearInterval(reconnectionTimerRef.current); | ||
}, | ||
[], | ||
); | ||
|
||
return reconnectCountdown; | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,23 +1,25 @@ | ||
import type { FileAttachmentProps } from '@rocket.chat/core-typings'; | ||
import { isFileAudioAttachment, isFileImageAttachment, isFileVideoAttachment } from '@rocket.chat/core-typings'; | ||
import type { FC } from 'react'; | ||
import { type FileAttachmentProps, isFileAudioAttachment, isFileImageAttachment, isFileVideoAttachment } from '@rocket.chat/core-typings'; | ||
import React from 'react'; | ||
|
||
import { AudioAttachment } from './file/AudioAttachment'; | ||
import { GenericFileAttachment } from './file/GenericFileAttachment'; | ||
import { ImageAttachment } from './file/ImageAttachment'; | ||
import { VideoAttachment } from './file/VideoAttachment'; | ||
import AudioAttachment from './file/AudioAttachment'; | ||
import GenericFileAttachment from './file/GenericFileAttachment'; | ||
import ImageAttachment from './file/ImageAttachment'; | ||
import VideoAttachment from './file/VideoAttachment'; | ||
|
||
export const FileAttachment: FC<FileAttachmentProps & { id: string | undefined }> = (attachment) => { | ||
const FileAttachment = (attachment: FileAttachmentProps) => { | ||
if (isFileImageAttachment(attachment)) { | ||
return <ImageAttachment {...attachment} />; | ||
} | ||
|
||
if (isFileAudioAttachment(attachment)) { | ||
return <AudioAttachment {...attachment} />; | ||
} | ||
|
||
if (isFileVideoAttachment(attachment)) { | ||
return <VideoAttachment {...attachment} />; | ||
} | ||
|
||
return <GenericFileAttachment {...(attachment as any)} />; // TODO: fix this | ||
return <GenericFileAttachment {...attachment} />; | ||
}; | ||
|
||
export default FileAttachment; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
why not: