From 33a6380683c0f0b6e0b64c29c590a35cd2b5b095 Mon Sep 17 00:00:00 2001 From: William Grant Date: Wed, 9 Aug 2023 17:47:18 +1000 Subject: [PATCH] fix: more lint issues --- ts/components/buttons/PanelRadioButton.tsx | 2 +- .../conversation/TimerNotification.tsx | 2 +- .../header/ConversationHeaderSubtitle.tsx | 4 +- .../header/ConversationHeaderTitle.tsx | 36 ++++++------- .../message-item/ExpirableReadableMessage.tsx | 50 ++++++++----------- 5 files changed, 44 insertions(+), 50 deletions(-) diff --git a/ts/components/buttons/PanelRadioButton.tsx b/ts/components/buttons/PanelRadioButton.tsx index be1cbdde8..2389cd63f 100644 --- a/ts/components/buttons/PanelRadioButton.tsx +++ b/ts/components/buttons/PanelRadioButton.tsx @@ -62,7 +62,7 @@ export const PanelRadioButton = (props: PanelRadioButtonProps) => { disabled={disabled} noBackgroundColor={noBackgroundColor} onClick={() => { - isSelected ? onUnselect?.('bye') : onSelect?.('hi'); + return isSelected ? onUnselect?.('bye') : onSelect?.('hi'); }} dataTestId={dataTestId} > diff --git a/ts/components/conversation/TimerNotification.tsx b/ts/components/conversation/TimerNotification.tsx index eebf2917e..2f5032ada 100644 --- a/ts/components/conversation/TimerNotification.tsx +++ b/ts/components/conversation/TimerNotification.tsx @@ -1,5 +1,6 @@ import React from 'react'; +import styled from 'styled-components'; import { PropsForExpirationTimer } from '../../state/ducks/conversations'; import { assertUnreachable } from '../../types/sqlSharedTypes'; @@ -7,7 +8,6 @@ import { ExpirableReadableMessage } from './message/message-item/ExpirableReadab import { SessionIcon } from '../icon'; import { SpacerSM, Text } from '../basic/Text'; import { Flex } from '../basic/Flex'; -import styled from 'styled-components'; const StyledTimerNotification = styled(Flex)` text-align: center; diff --git a/ts/components/conversation/header/ConversationHeaderSubtitle.tsx b/ts/components/conversation/header/ConversationHeaderSubtitle.tsx index e6e675c8f..e82909b4d 100644 --- a/ts/components/conversation/header/ConversationHeaderSubtitle.tsx +++ b/ts/components/conversation/header/ConversationHeaderSubtitle.tsx @@ -7,9 +7,9 @@ import { SubtitleStrings, SubtitleStringsType } from './ConversationHeaderTitle' function loadDataTestId(currentSubtitle: SubtitleStringsType) { if (currentSubtitle === 'disappearingMessages') { return 'disappear-messages-type-and-time'; - } else { - return 'conversation-header-subtitle'; } + + return 'conversation-header-subtitle'; } export const StyledSubtitleContainer = styled.div` diff --git a/ts/components/conversation/header/ConversationHeaderTitle.tsx b/ts/components/conversation/header/ConversationHeaderTitle.tsx index 0ad8ff306..0892b2085 100644 --- a/ts/components/conversation/header/ConversationHeaderTitle.tsx +++ b/ts/components/conversation/header/ConversationHeaderTitle.tsx @@ -1,5 +1,5 @@ import { isNumber } from 'lodash'; -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useState, useMemo } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { useConversationUsername } from '../../../hooks/useParamSelector'; import { closeRightPanel, openRightPanel } from '../../../state/ducks/conversations'; @@ -52,15 +52,13 @@ export const ConversationHeaderTitle = () => { const [visibleSubtitle, setVisibleSubtitle] = useState('notifications'); - if (!selectedConvoKey) { - return null; - } + const subtitleStrings: SubtitleStrings = {}; + const subtitleArray: Array = useMemo(() => { + return []; + }, []); const { i18n } = window; - const subtitleStrings: SubtitleStrings = {}; - const subtitleArray: Array = []; - const notificationSubtitle = notificationSetting ? i18n('notificationSubtitle', [notificationSetting]) : null; @@ -69,6 +67,20 @@ export const ConversationHeaderTitle = () => { subtitleArray.push('notifications'); } + useEffect(() => { + setVisibleSubtitle('notifications'); + }, [convoName]); + + useEffect(() => { + if (subtitleArray.indexOf(visibleSubtitle) < 0) { + setVisibleSubtitle('notifications'); + } + }, [subtitleArray, visibleSubtitle]); + + if (!selectedConvoKey) { + return null; + } + let memberCount = 0; if (isGroup) { if (isPublic) { @@ -125,16 +137,6 @@ export const ConversationHeaderTitle = () => { } }; - useEffect(() => { - setVisibleSubtitle('notifications'); - }, [convoName]); - - useEffect(() => { - if (subtitleArray.indexOf(visibleSubtitle) < 0) { - setVisibleSubtitle('notifications'); - } - }, [subtitleArray, visibleSubtitle]); - return (
diff --git a/ts/components/conversation/message/message-item/ExpirableReadableMessage.tsx b/ts/components/conversation/message/message-item/ExpirableReadableMessage.tsx index 97727c5c1..8af9faf7b 100644 --- a/ts/components/conversation/message/message-item/ExpirableReadableMessage.tsx +++ b/ts/components/conversation/message/message-item/ExpirableReadableMessage.tsx @@ -13,10 +13,17 @@ import { useMessageExpirationPropsById } from '../../../../hooks/useParamSelecto const EXPIRATION_CHECK_MINIMUM = 2000; -function useIsExpired(props: PropsForExpiringMessage) { +// TODO Check that this isn't broken +function useIsExpired( + props: Omit & { + messageId: string | undefined; + direction: MessageModelType | undefined; + } +) { const { convoId, messageId, + direction, expirationLength, expirationTimestamp, isExpired: isExpiredProps, @@ -29,7 +36,7 @@ function useIsExpired(props: PropsForExpiringMessage) { const checkExpired = useCallback(async () => { const now = Date.now(); - if (!expirationTimestamp || !expirationLength) { + if (!messageId || !direction || !expirationTimestamp || !expirationLength) { return; } @@ -48,7 +55,7 @@ function useIsExpired(props: PropsForExpiringMessage) { convo?.updateLastMessage(); } } - }, [expirationTimestamp, expirationLength, isExpired, messageId, convoId]); + }, [messageId, direction, expirationTimestamp, expirationLength, isExpired, convoId, dispatch]); let checkFrequency: number | null = null; if (expirationLength) { @@ -58,7 +65,7 @@ function useIsExpired(props: PropsForExpiringMessage) { useEffect(() => { void checkExpired(); - }, []); // check on mount + }, [checkExpired]); // check on mount useInterval(checkExpired, checkFrequency); // check every 2sec or sooner if needed @@ -87,44 +94,29 @@ export interface ExpirableReadableMessageProps export const ExpirableReadableMessage = (props: ExpirableReadableMessageProps) => { const selected = useMessageExpirationPropsById(props.messageId); - if (!selected) { - return null; - } - const { - direction: overrideDirection, + direction, isCentered, marginInlineStart = '6px', marginInlineEnd = '6px', dataTestId, } = props; - const { - convoId, - messageId, - direction: selectedDirection, - receivedAt, - isUnread, - expirationLength, - expirationTimestamp, - isExpired: _isExpired, - } = selected; - - const direction = overrideDirection || selectedDirection; - const { isExpired } = useIsExpired({ - convoId, - messageId, - direction, - expirationTimestamp, - expirationLength, - isExpired: _isExpired, + convoId: selected?.convoId, + messageId: selected?.messageId, + direction: direction || selected?.direction, + expirationTimestamp: selected?.expirationTimestamp, + expirationLength: selected?.expirationLength, + isExpired: selected?.isExpired, }); - if (isExpired) { + if (!selected || isExpired) { return null; } + const { messageId, receivedAt, isUnread, expirationLength, expirationTimestamp } = selected; + const isIncoming = direction === 'incoming'; return (