fix: cleanup PR and merge copy pasted component

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: {
+export const SessionScrollButton = (props: { onClickScrollBottom: () => void }) => {
-  onClickScrollBottom: () => void;
-  unreadCount: number;
-}) => {
   const show = useSelector(getShowScrollButton);
+  const unreadCount = useSelectedUnreadCount();
 
   return (
     <SessionScrollButtonDiv>
@@ -31,7 +30,7 @@ export const SessionScrollButton = (props: {
         isHidden={!show}
         onClick={props.onClickScrollBottom}
         dataTestId="scroll-to-bottom-button"
-        unreadCount={props.unreadCount}
+        unreadCount={unreadCount}
       />
     </SessionScrollButtonDiv>
   );

ts/components/conversation/SessionMessagesListContainer.tsx

@@ -152,7 +152,6 @@ class SessionMessagesListContainerInner extends React.Component<Props> {
           // eslint-disable-next-line @typescript-eslint/no-misused-promises
           onClickScrollBottom={this.props.scrollToNow}
           key="scroll-down-button"
-          unreadCount={conversation.unreadCount || 0}
         />
       </StyledMessagesContainer>
     );

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<HTMLDivElement>) => void;
@@ -60,7 +60,7 @@ const SessionIconButtonInner = React.forwardRef<HTMLDivElement, SProps>((props,
     dataTestIdIcon,
     style,
     tabIndex,
-    unreadCount
+    unreadCount,
   } = props;
   const clickHandler = (e: React.MouseEvent<HTMLDivElement>) => {
     if (props.onClick) {

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')};
+  top: ${props => (props.centeredOnTop ? '-10px' : '27px')};
-  left: ${props => (props.unreadCount ? '50%' : '28px')};
+  left: ${props => (props.centeredOnTop ? '50%' : '28px')};
-  transform: ${props => (props.unreadCount ? 'translateX(-50%)' : 'none')};
+  transform: ${props => (props.centeredOnTop ? 'translateX(-50%)' : 'none')};
-  padding: ${props => (props.unreadCount ? '3px 3px' : '1px 4px')};
+  padding: ${props => (props.centeredOnTop ? '3px 3px' : '1px 4px')};
-  opacity: ${props => (props.shouldRender ? 1 : 0)};
   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 OverflowingAt = (props: { overflowingAt: number }) => {
-  const { count } = props;
-  const overflow = Boolean(count && count > 99);
-  const shouldRender = Boolean(count && count > 0);
-
-  if (overflow) {
-    return (
-      <StyledCountContainer shouldRender={shouldRender}>
-        <StyledCount>
-          {99}
-          <span>+</span>
-        </StyledCount>
-      </StyledCountContainer>
-    );
-  }
   return (
-    <StyledCountContainer shouldRender={shouldRender}>
+    <>
-      <StyledCount>{count}</StyledCount>
+      {props.overflowingAt}
-    </StyledCountContainer>
+      <span>+</span>
+    </>
   );
 };
 
-export const SessionUnreadCount = (props: Props) => {
+const NotificationOrUnreadCount = ({
-  const { count } = props;
+  centeredOnTop,
-  const shouldRender = Boolean(count && count > 0);
+  overflowingAt,
+  count,
+}: Props & { overflowingAt: number; centeredOnTop: boolean }) => {
+  if (!count) {
+    return null;
+  }
+  const overflowing = count > overflowingAt;
 
   return (
-    <StyledCountContainer shouldRender={shouldRender} unreadCount={count}>
+    <StyledCountContainer centeredOnTop={centeredOnTop}>
-      <StyledCount unreadCount={count}>{count}</StyledCount>
+      <StyledCount centeredOnTop={centeredOnTop}>
+        {overflowing ? <OverflowingAt overflowingAt={overflowingAt} /> : count}
+      </StyledCount>
     </StyledCountContainer>
   );
 };
+
+export const SessionNotificationCount = (props: Props) => {
+  return <NotificationOrUnreadCount centeredOnTop={false} overflowingAt={99} count={props.count} />;
+};
+
+export const SessionUnreadCount = (props: Props) => {
+  return <NotificationOrUnreadCount centeredOnTop={true} overflowingAt={999} count={props.count} />;
+};

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