From a268aeb6d1850252013eb9b23ad7342bdd08e7bb Mon Sep 17 00:00:00 2001 From: William Grant Date: Thu, 12 Oct 2023 14:16:22 +1100 Subject: [PATCH] fix: type state correctly when using useSelector --- .../message/message-content/MessageAttachment.tsx | 9 ++++++--- .../message/message-content/MessageContent.tsx | 5 +++-- .../message/message-content/MessageContentWithStatus.tsx | 9 +++++---- .../message/message-item/GenericReadableMessage.tsx | 7 ++++--- .../conversation/message/message-item/Message.tsx | 6 +++--- 5 files changed, 21 insertions(+), 15 deletions(-) diff --git a/ts/components/conversation/message/message-content/MessageAttachment.tsx b/ts/components/conversation/message/message-content/MessageAttachment.tsx index 18f98c894..b443ea0db 100644 --- a/ts/components/conversation/message/message-content/MessageAttachment.tsx +++ b/ts/components/conversation/message/message-content/MessageAttachment.tsx @@ -1,8 +1,8 @@ +import classNames from 'classnames'; +import { clone } from 'lodash'; import React, { useCallback } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import styled from 'styled-components'; -import classNames from 'classnames'; -import { clone } from 'lodash'; import { Data } from '../../../../data/data'; import { MessageModelType, MessageRenderingProps } from '../../../../models/messageType'; import { @@ -10,6 +10,7 @@ import { showLightBox, toggleSelectedMessageId, } from '../../../../state/ducks/conversations'; +import { StateType } from '../../../../state/reducer'; import { getMessageAttachmentProps, isMessageSelectionMode, @@ -66,7 +67,9 @@ export const MessageAttachment = (props: Props) => { const { messageId, imageBroken, handleImageError, highlight = false } = props; const dispatch = useDispatch(); - const attachmentProps = useSelector(state => getMessageAttachmentProps(state as any, messageId)); + const attachmentProps = useSelector((state: StateType) => + getMessageAttachmentProps(state as any, messageId) + ); const multiSelectMode = useSelector(isMessageSelectionMode); const onClickOnImageGrid = useCallback( diff --git a/ts/components/conversation/message/message-content/MessageContent.tsx b/ts/components/conversation/message/message-content/MessageContent.tsx index 61724294b..d6a5249d8 100644 --- a/ts/components/conversation/message/message-content/MessageContent.tsx +++ b/ts/components/conversation/message/message-content/MessageContent.tsx @@ -6,6 +6,7 @@ import { InView } from 'react-intersection-observer'; import { useSelector } from 'react-redux'; import styled, { css, keyframes } from 'styled-components'; import { MessageModelType, MessageRenderingProps } from '../../../../models/messageType'; +import { StateType } from '../../../../state/reducer'; import { useMessageIsDeleted } from '../../../../state/selectors'; import { getMessageContentSelectorProps, @@ -94,8 +95,8 @@ export const IsMessageVisibleContext = createContext(false); export const MessageContent = (props: Props) => { const [highlight, setHighlight] = useState(false); const [didScroll, setDidScroll] = useState(false); - const contentProps = useSelector(state => - getMessageContentSelectorProps(state as any, props.messageId) + const contentProps = useSelector((state: StateType) => + getMessageContentSelectorProps(state, props.messageId) ); const isDeleted = useMessageIsDeleted(props.messageId); const [isMessageVisible, setMessageIsVisible] = useState(false); diff --git a/ts/components/conversation/message/message-content/MessageContentWithStatus.tsx b/ts/components/conversation/message/message-content/MessageContentWithStatus.tsx index 7ba344500..da49c4267 100644 --- a/ts/components/conversation/message/message-content/MessageContentWithStatus.tsx +++ b/ts/components/conversation/message/message-content/MessageContentWithStatus.tsx @@ -6,18 +6,19 @@ import { replyToMessage } from '../../../../interactions/conversationInteraction import { MessageRenderingProps } from '../../../../models/messageType'; import { toggleSelectedMessageId } from '../../../../state/ducks/conversations'; import { updateReactListModal } from '../../../../state/ducks/modalDialog'; +import { StateType } from '../../../../state/reducer'; import { getMessageContentWithStatusesSelectorProps, isMessageSelectionMode, } from '../../../../state/selectors/conversations'; import { Reactions } from '../../../../util/reactions'; -import { MessageAvatar } from './MessageAvatar'; +import { ExpirableReadableMessage } from '../message-item/ExpirableReadableMessage'; import { MessageAuthorText } from './MessageAuthorText'; +import { MessageAvatar } from './MessageAvatar'; import { MessageContent } from './MessageContent'; import { MessageContextMenu } from './MessageContextMenu'; import { MessageReactions, StyledMessageReactions } from './MessageReactions'; import { MessageStatus } from './MessageStatus'; -import { ExpirableReadableMessage } from '../message-item/ExpirableReadableMessage'; export type MessageContentWithStatusSelectorProps = { isGroup: boolean } & Pick< MessageRenderingProps, @@ -52,8 +53,8 @@ const StyledMessageWithAuthor = styled.div<{ isIncoming: boolean }>` `; export const MessageContentWithStatuses = (props: Props) => { - const contentProps = useSelector(state => - getMessageContentWithStatusesSelectorProps(state as any, props.messageId) + const contentProps = useSelector((state: StateType) => + getMessageContentWithStatusesSelectorProps(state, props.messageId) ); const dispatch = useDispatch(); diff --git a/ts/components/conversation/message/message-item/GenericReadableMessage.tsx b/ts/components/conversation/message/message-item/GenericReadableMessage.tsx index e94d03fc5..15cc7557a 100644 --- a/ts/components/conversation/message/message-item/GenericReadableMessage.tsx +++ b/ts/components/conversation/message/message-item/GenericReadableMessage.tsx @@ -1,11 +1,12 @@ import classNames from 'classnames'; +import { isNil, isString, toNumber } from 'lodash'; import React, { useCallback, useEffect, useState } from 'react'; import { contextMenu } from 'react-contexify'; import { useSelector } from 'react-redux'; import styled, { keyframes } from 'styled-components'; -import { isNil, isString, toNumber } from 'lodash'; import { MessageRenderingProps } from '../../../../models/messageType'; import { getConversationController } from '../../../../session/conversations'; +import { StateType } from '../../../../state/reducer'; import { getGenericReadableMessageSelectorProps, getIsMessageSelected, @@ -78,8 +79,8 @@ export const GenericReadableMessage = (props: Props) => { const [enableReactions, setEnableReactions] = useState(true); - const msgProps = useSelector(state => - getGenericReadableMessageSelectorProps(state as any, props.messageId) + const msgProps = useSelector((state: StateType) => + getGenericReadableMessageSelectorProps(state, props.messageId) ); const isMessageSelected = useSelector(state => diff --git a/ts/components/conversation/message/message-item/Message.tsx b/ts/components/conversation/message/message-item/Message.tsx index fa21189c0..5d44a40ee 100644 --- a/ts/components/conversation/message/message-item/Message.tsx +++ b/ts/components/conversation/message/message-item/Message.tsx @@ -2,10 +2,10 @@ import React from 'react'; import { useSelector } from 'react-redux'; import { v4 as uuidv4 } from 'uuid'; +import { StateType } from '../../../../state/reducer'; import { getGenericReadableMessageSelectorProps } from '../../../../state/selectors/conversations'; import { THUMBNAIL_SIDE } from '../../../../types/attachments/VisualAttachment'; import { GenericReadableMessage } from './GenericReadableMessage'; -import { StateType } from '../../../../state/reducer'; // Same as MIN_WIDTH in ImageGrid.tsx export const MINIMUM_LINK_PREVIEW_IMAGE_WIDTH = THUMBNAIL_SIDE; @@ -16,8 +16,8 @@ type Props = { }; export const Message = (props: Props) => { - const msgProps = useSelector(state => - getGenericReadableMessageSelectorProps(state as StateType, props.messageId) + const msgProps = useSelector((state: StateType) => + getGenericReadableMessageSelectorProps(state, props.messageId) ); const ctxMenuID = `ctx-menu-message-${uuidv4()}`;