From 379ef2977ad01e4316c4eb6f653f85a9b0cd84b9 Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Fri, 22 Mar 2024 16:42:11 +1100 Subject: [PATCH] fix: cleanup PR and merge copy pasted component --- ts/components/SessionScrollButton.tsx | 9 ++- .../SessionMessagesListContainer.tsx | 1 - ts/components/icon/SessionIconButton.tsx | 6 +- .../icon/SessionNotificationCount.tsx | 66 ++++++++++--------- ts/state/selectors/selectedConversation.ts | 8 +++ 5 files changed, 49 insertions(+), 41 deletions(-) diff --git a/ts/components/SessionScrollButton.tsx b/ts/components/SessionScrollButton.tsx index 62d21959c..4d0b2b50d 100644 --- a/ts/components/SessionScrollButton.tsx +++ b/ts/components/SessionScrollButton.tsx @@ -3,6 +3,7 @@ import { useSelector } from 'react-redux'; import styled from 'styled-components'; import { getShowScrollButton } from '../state/selectors/conversations'; +import { useSelectedUnreadCount } from '../state/selectors/selectedConversation'; import { SessionIconButton } from './icon'; const SessionScrollButtonDiv = styled.div` @@ -17,11 +18,9 @@ const SessionScrollButtonDiv = styled.div` } `; -export const SessionScrollButton = (props: { - onClickScrollBottom: () => void; - unreadCount: number; -}) => { +export const SessionScrollButton = (props: { onClickScrollBottom: () => void }) => { const show = useSelector(getShowScrollButton); + const unreadCount = useSelectedUnreadCount(); return ( @@ -31,7 +30,7 @@ export const SessionScrollButton = (props: { isHidden={!show} onClick={props.onClickScrollBottom} dataTestId="scroll-to-bottom-button" - unreadCount={props.unreadCount} + unreadCount={unreadCount} /> ); diff --git a/ts/components/conversation/SessionMessagesListContainer.tsx b/ts/components/conversation/SessionMessagesListContainer.tsx index d88e7647c..042b84a41 100644 --- a/ts/components/conversation/SessionMessagesListContainer.tsx +++ b/ts/components/conversation/SessionMessagesListContainer.tsx @@ -152,7 +152,6 @@ class SessionMessagesListContainerInner extends React.Component { // eslint-disable-next-line @typescript-eslint/no-misused-promises onClickScrollBottom={this.props.scrollToNow} key="scroll-down-button" - unreadCount={conversation.unreadCount || 0} /> ); diff --git a/ts/components/icon/SessionIconButton.tsx b/ts/components/icon/SessionIconButton.tsx index a7e51b7d8..6ef11e431 100644 --- a/ts/components/icon/SessionIconButton.tsx +++ b/ts/components/icon/SessionIconButton.tsx @@ -1,9 +1,9 @@ -import React, { KeyboardEvent } from 'react'; import classNames from 'classnames'; import _ from 'lodash'; +import React, { KeyboardEvent } from 'react'; import styled from 'styled-components'; -import { SessionNotificationCount, SessionUnreadCount } from './SessionNotificationCount'; import { SessionIcon, SessionIconProps } from '.'; +import { SessionNotificationCount, SessionUnreadCount } from './SessionNotificationCount'; interface SProps extends SessionIconProps { onClick?: (e?: React.MouseEvent) => void; @@ -60,7 +60,7 @@ const SessionIconButtonInner = React.forwardRef((props, dataTestIdIcon, style, tabIndex, - unreadCount + unreadCount, } = props; const clickHandler = (e: React.MouseEvent) => { if (props.onClick) { diff --git a/ts/components/icon/SessionNotificationCount.tsx b/ts/components/icon/SessionNotificationCount.tsx index 16fc02e6f..734cb96d8 100644 --- a/ts/components/icon/SessionNotificationCount.tsx +++ b/ts/components/icon/SessionNotificationCount.tsx @@ -4,15 +4,14 @@ import styled from 'styled-components'; type Props = { count?: number; }; -const StyledCountContainer = styled.div<{ shouldRender: boolean; unreadCount?: number }>` +const StyledCountContainer = styled.div<{ centeredOnTop: boolean }>` position: absolute; font-size: 18px; line-height: 1.2; - top: ${props => (props.unreadCount ? '-10px' : '27px')}; - left: ${props => (props.unreadCount ? '50%' : '28px')}; - transform: ${props => (props.unreadCount ? 'translateX(-50%)' : 'none')}; - padding: ${props => (props.unreadCount ? '3px 3px' : '1px 4px')}; - opacity: ${props => (props.shouldRender ? 1 : 0)}; + top: ${props => (props.centeredOnTop ? '-10px' : '27px')}; + left: ${props => (props.centeredOnTop ? '50%' : '28px')}; + transform: ${props => (props.centeredOnTop ? 'translateX(-50%)' : 'none')}; + padding: ${props => (props.centeredOnTop ? '3px 3px' : '1px 4px')}; display: flex; align-items: center; justify-content: center; @@ -23,43 +22,46 @@ const StyledCountContainer = styled.div<{ shouldRender: boolean; unreadCount?: n transition: var(--default-duration); text-align: center; color: var(--unread-messages-alert-text-color); - white-space: ${props => (props.unreadCount ? 'nowrap' : 'normal')}; + white-space: ${props => (props.centeredOnTop ? 'nowrap' : 'normal')}; `; -const StyledCount = styled.div<{ unreadCount?: number }>` +const StyledCount = styled.div<{ centeredOnTop: boolean }>` position: relative; - font-size: ${props => (props.unreadCount ? 'var(--font-size-xs)' : '0.6rem')}; + font-size: ${props => (props.centeredOnTop ? 'var(--font-size-xs)' : '0.6rem')}; `; -export const SessionNotificationCount = (props: Props) => { - const { count } = props; - const overflow = Boolean(count && count > 99); - const shouldRender = Boolean(count && count > 0); - - if (overflow) { - return ( - - - {99} - + - - - ); - } +const OverflowingAt = (props: { overflowingAt: number }) => { return ( - - {count} - + <> + {props.overflowingAt} + + + ); }; -export const SessionUnreadCount = (props: Props) => { - const { count } = props; - const shouldRender = Boolean(count && count > 0); +const NotificationOrUnreadCount = ({ + centeredOnTop, + overflowingAt, + count, +}: Props & { overflowingAt: number; centeredOnTop: boolean }) => { + if (!count) { + return null; + } + const overflowing = count > overflowingAt; return ( - - {count} + + + {overflowing ? : count} + ); }; + +export const SessionNotificationCount = (props: Props) => { + return ; +}; + +export const SessionUnreadCount = (props: Props) => { + return ; +}; diff --git a/ts/state/selectors/selectedConversation.ts b/ts/state/selectors/selectedConversation.ts index 5aca5a79f..0dd1fe42f 100644 --- a/ts/state/selectors/selectedConversation.ts +++ b/ts/state/selectors/selectedConversation.ts @@ -60,6 +60,10 @@ const getIsSelectedActive = (state: StateType): boolean => { return Boolean(getSelectedConversation(state)?.activeAt) || false; }; +const getSelectedUnreadCount = (state: StateType) => { + return getSelectedConversation(state)?.unreadCount || 0; +}; + const getIsSelectedNoteToSelf = (state: StateType): boolean => { return getSelectedConversation(state)?.isMe || false; }; @@ -302,6 +306,10 @@ export function useSelectedIsActive() { return useSelector(getIsSelectedActive); } +export function useSelectedUnreadCount() { + return useSelector(getSelectedUnreadCount); +} + export function useSelectedIsNoteToSelf() { return useSelector(getIsSelectedNoteToSelf); }