fix: type state correctly when using useSelector

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(

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);

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();
 

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 =>

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()}`;