feat: updated react-intersection-observer, added selected message hook,

still debugging spacing in message container when in multi select mode

package.json

@@ -113,7 +113,7 @@
     "react-dom": "^17.0.2",
     "react-draggable": "^4.4.4",
     "react-h5-audio-player": "^3.2.0",
-    "react-intersection-observer": "^8.30.3",
+    "react-intersection-observer": "^9.7.0",
     "react-mentions": "^4.4.9",
     "react-qr-svg": "^2.2.1",
     "react-redux": "8.0.4",

ts/components/conversation/SessionMessagesListContainer.tsx

@@ -62,10 +62,11 @@ const StyledMessagesContainer = styled.div<{ isGroup: boolean }>`
   min-width: 370px;
   scrollbar-width: 4px;
 
-  padding-top: var(--margins-sm);
+  // TODO fixing spacing around messages when in multi-select mode
+  /* padding-top: var(--margins-sm);
   padding-right: var(--margins-lg);
   padding-bottom: var(--margins-xl);
-  padding-left: ${props => (props.isGroup ? 'var(--margins-xs)' : 'var(--margins-lg)')};
+  padding-left: ${props => (props.isGroup ? 'var(--margins-xs)' : 'var(--margins-lg)')}; */
 
   .session-icon-button {
     display: flex;

ts/components/conversation/message/message-content/MessageContent.tsx

@@ -124,11 +124,9 @@ export const MessageContent = (props: Props) => {
 
   const [imageBroken, setImageBroken] = useState(false);
 
-  const onVisible = (inView: boolean | object) => {
-    if (
-      inView === true ||
-      ((inView as any).type === 'focus' && (inView as any).returnValue === true)
-    ) {
+  const onVisible = (inView: boolean, _: IntersectionObserverEntry) => {
+    // TODO check if there is no issue with focus after simplifiying the check
+    if (inView) {
       if (isMessageVisible !== true) {
         setMessageIsVisible(true);
       }
@@ -142,6 +140,7 @@ export const MessageContent = (props: Props) => {
   const quotedMessageToAnimate = useSelector(getQuotedMessageToAnimate);
   const shouldHighlightMessage = useSelector(getShouldHighlightMessage);
   const isQuotedMessageToAnimate = quotedMessageToAnimate === props.messageId;
+  // const selected = useMessageSelected(props.messageId);
 
   useLayoutEffect(() => {
     if (isQuotedMessageToAnimate) {
@@ -210,6 +209,7 @@ export const MessageContent = (props: Props) => {
 
       <InView
         id={`inview-content-${props.messageId}`}
+        as={'div'}
         onChange={onVisible}
         threshold={0}
         rootMargin="500px 0px 500px 0px"

ts/components/conversation/message/message-item/GenericReadableMessage.tsx

@@ -7,9 +7,9 @@ import styled, { keyframes } from 'styled-components';
 import { MessageRenderingProps } from '../../../../models/messageType';
 import { getConversationController } from '../../../../session/conversations';
 import { StateType } from '../../../../state/reducer';
+import { useMessageSelected } from '../../../../state/selectors';
 import {
   getGenericReadableMessageSelectorProps,
-  getIsMessageSelected,
   isMessageSelectionMode,
 } from '../../../../state/selectors/conversations';
 import { MessageContentWithStatuses } from '../message-content/MessageContentWithStatus';
@@ -62,18 +62,6 @@ const StyledReadableMessage = styled.div<{
     `
     background-color: var(--conversation-tab-background-selected-color);
   `}
-
-  ${props =>
-    props.selected &&
-    `
-    &.message-selected {
-      .module-message {
-        &__container {
-          box-shadow: var(--drop-shadow);
-        }
-      }
-    }
-    `}
 `;
 
 export const GenericReadableMessage = (props: Props) => {
@@ -85,9 +73,8 @@ export const GenericReadableMessage = (props: Props) => {
     getGenericReadableMessageSelectorProps(state, props.messageId)
   );
 
-  const isMessageSelected = useSelector((state: StateType) =>
-    getIsMessageSelected(state, props.messageId)
-  );
+  const isMessageSelected = useMessageSelected(props.messageId);
+
   const multiSelectMode = useSelector(isMessageSelectionMode);
 
   const [isRightClicked, setIsRightClicked] = useState(false);

ts/state/selectors/messages.ts

@@ -8,7 +8,7 @@ import {
   ReduxConversationType,
 } from '../ducks/conversations';
 import { StateType } from '../reducer';
-import { getMessagePropsByMessageId } from './conversations';
+import { getIsMessageSelected, getMessagePropsByMessageId } from './conversations';
 import { useSelectedIsPrivate } from './selectedConversation';
 
 function useMessagePropsByMessageId(messageId: string | undefined) {
@@ -145,3 +145,7 @@ export function useHideAvatarInMsgList(messageId?: string) {
   const selectedIsPrivate = useSelectedIsPrivate();
   return msgProps?.propsForMessage.direction === 'outgoing' || selectedIsPrivate;
 }
+
+export function useMessageSelected(messageId?: string) {
+  return useSelector((state: StateType) => getIsMessageSelected(state, messageId));
+}

ts/state/selectors/selectedConversation.ts

@@ -10,7 +10,11 @@ import { UserUtils } from '../../session/utils';
 import { ReleasedFeatures } from '../../util/releaseFeature';
 import { ReduxConversationType } from '../ducks/conversations';
 import { StateType } from '../reducer';
-import { getIsMessageSelectionMode, getSelectedConversation } from './conversations';
+import {
+  getIsMessageSelectionMode,
+  getSelectedConversation,
+  getSelectedMessageIds,
+} from './conversations';
 import { getCanWrite, getModerators, getSubscriberCount } from './sogsRoomInfo';
 
 /**
@@ -387,3 +391,7 @@ export function useIsMessageSelectionMode() {
 export function useSelectedLastMessage() {
   return useSelector((state: StateType) => getSelectedConversation(state)?.lastMessage);
 }
+
+export function useSelectedMessageIds() {
+  return useSelector(getSelectedMessageIds);
+}

yarn.lock

@@ -6155,10 +6155,10 @@ react-h5-audio-player@^3.2.0:
     "@iconify/icons-mdi" "~1.1.0"
     "@iconify/react" "^3.1.3"
 
-react-intersection-observer@^8.30.3:
-  version "8.34.0"
-  resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-8.34.0.tgz#6f6e67831c52e6233f6b6cc7eb55814820137c42"
-  integrity sha512-TYKh52Zc0Uptp5/b4N91XydfSGKubEhgZRtcg1rhTKABXijc4Sdr1uTp5lJ8TN27jwUsdXxjHXtHa0kPj704sw==
+react-intersection-observer@^9.7.0:
+  version "9.7.0"
+  resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-9.7.0.tgz#da65834ace0852e04b73cb97f0c48bdaa5b13589"
+  integrity sha512-euleEjBVaMRwSOMNVcMX5WGn74GfZ9I78nx9SUb5a0eXd0IhegjJcUliSO9Jd+xiaZ5rgFvbGoVln66lpMyUUg==
 
 react-is@^16.12.0, react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"