From b34bf1380a4c0dbc58fb405bfb5324af3998b277 Mon Sep 17 00:00:00 2001 From: William Grant Date: Wed, 7 Feb 2024 14:07:34 +1100 Subject: [PATCH] feat: updated react-intersection-observer, added selected message hook, still debugging spacing in message container when in multi select mode --- package.json | 2 +- .../SessionMessagesListContainer.tsx | 5 +++-- .../message-content/MessageContent.tsx | 10 +++++----- .../message-item/GenericReadableMessage.tsx | 19 +++---------------- ts/state/selectors/messages.ts | 6 +++++- ts/state/selectors/selectedConversation.ts | 10 +++++++++- yarn.lock | 8 ++++---- 7 files changed, 30 insertions(+), 30 deletions(-) diff --git a/package.json b/package.json index 458252637..d5b695c23 100644 --- a/package.json +++ b/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", diff --git a/ts/components/conversation/SessionMessagesListContainer.tsx b/ts/components/conversation/SessionMessagesListContainer.tsx index 4651fca7b..0957324d7 100644 --- a/ts/components/conversation/SessionMessagesListContainer.tsx +++ b/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; diff --git a/ts/components/conversation/message/message-content/MessageContent.tsx b/ts/components/conversation/message/message-content/MessageContent.tsx index 1049465cd..7c0a925da 100644 --- a/ts/components/conversation/message/message-content/MessageContent.tsx +++ b/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) => { - 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); diff --git a/ts/state/selectors/messages.ts b/ts/state/selectors/messages.ts index b97ee2fef..8ae182966 100644 --- a/ts/state/selectors/messages.ts +++ b/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)); +} diff --git a/ts/state/selectors/selectedConversation.ts b/ts/state/selectors/selectedConversation.ts index 07c07daf8..f6a118272 100644 --- a/ts/state/selectors/selectedConversation.ts +++ b/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); +} diff --git a/yarn.lock b/yarn.lock index ff41fe0d2..232727930 100644 --- a/yarn.lock +++ b/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"