simplify small chat

shared/chat/inbox/container.tsx

@@ -2,7 +2,7 @@ import * as C from '@/constants'
 import * as Chat from '@/stores/chat2'
 import * as React from 'react'
 import * as T from '@/constants/types'
-import Inbox, {type Props} from '.'
+import Inbox from '.'
 import {useIsFocused} from '@react-navigation/core'
 import type {
   ChatInboxRowItemBig,
@@ -64,19 +64,14 @@ const makeSmallRows = (
   })
 }
 
-type WrapperProps = Pick<
-  Props,
-  | 'isSearching'
-  | 'navKey'
-  | 'neverLoaded'
-  | 'rows'
-  | 'smallTeamsExpanded'
-  | 'unreadIndices'
-  | 'unreadTotal'
-  | 'selectedConversationIDKey'
->
-
-const InboxWrapper = React.memo(function InboxWrapper(props: WrapperProps) {
+const noSmallTeams = new Array<T.RPCChat.UIInboxSmallTeamRow>()
+const noBigTeams = new Array<T.RPCChat.UIInboxBigTeamRow>()
+const emptyMap = new Map()
+
+const Connected = (ownProps: OwnProps) => {
+  const {navKey, conversationIDKey} = ownProps
+  const isFocused = useIsFocused()
+
   const chatState = Chat.useChatState(
     C.useShallow(s => {
       const inboxNumSmallRows = s.inboxNumSmallRows ?? 5
@@ -87,38 +82,38 @@ const InboxWrapper = React.memo(function InboxWrapper(props: WrapperProps) {
       return {
         allowShowFloatingButton,
         inboxHasLoaded: s.inboxHasLoaded,
+        inboxLayout,
         inboxNumSmallRows,
         inboxRefresh: s.dispatch.inboxRefresh,
+        isSearching: !!s.inboxSearch,
         queueMetaToRequest: s.dispatch.queueMetaToRequest,
         setInboxNumSmallRows: s.dispatch.setInboxNumSmallRows,
+        smallTeamsExpanded: s.smallTeamsExpanded,
         toggleSmallTeamsExpanded: s.dispatch.toggleSmallTeamsExpanded,
       }
     })
   )
-  const {allowShowFloatingButton, inboxHasLoaded, inboxNumSmallRows, inboxRefresh} = chatState
-  const {queueMetaToRequest, setInboxNumSmallRows, toggleSmallTeamsExpanded} = chatState
-  const isFocused = useIsFocused()
+  const {
+    allowShowFloatingButton, inboxHasLoaded, inboxLayout, inboxNumSmallRows,
+    inboxRefresh, isSearching, queueMetaToRequest, setInboxNumSmallRows,
+    smallTeamsExpanded, toggleSmallTeamsExpanded,
+  } = chatState
 
   const appendNewChatBuilder = C.useRouterState(s => s.appendNewChatBuilder)
-  // a hack to have it check for marked as read when we mount as the focus events don't fire always
-  const onNewChat = appendNewChatBuilder
-  const onUntrustedInboxVisible = queueMetaToRequest
-  const [lastIsFocused, setLastIsFocused] = React.useState(isFocused)
-
-  if (lastIsFocused !== isFocused) {
-    setLastIsFocused(isFocused)
-    if (C.isMobile) {
-      if (isFocused && Chat.isSplit) {
-        setTimeout(() => {
-          Chat.getConvoState(Chat.getSelectedConversation()).dispatch.tabSelected()
-        }, 0)
-      }
+  const selectedConversationIDKey = conversationIDKey ?? Chat.noConversationIDKey
+
+  // Handle focus changes on mobile
+  const prevIsFocusedRef = React.useRef(isFocused)
+  React.useEffect(() => {
+    if (prevIsFocusedRef.current === isFocused) return
+    prevIsFocusedRef.current = isFocused
+    if (C.isMobile && isFocused && Chat.isSplit) {
+      Chat.getConvoState(Chat.getSelectedConversation()).dispatch.tabSelected()
     }
-  }
+  }, [isFocused])
 
   C.useOnMountOnce(() => {
     if (!C.isMobile) {
-      // On mobile this is taken care of by NavigationEvents.
       Chat.getConvoState(Chat.getSelectedConversation()).dispatch.tabSelected()
     }
     if (!inboxHasLoaded) {
@@ -134,89 +129,45 @@ const InboxWrapper = React.memo(function InboxWrapper(props: WrapperProps) {
     }, [inboxHasLoaded, inboxRefresh])
   )
 
-  return (
-    <Inbox
-      {...props}
-      allowShowFloatingButton={allowShowFloatingButton}
-      onNewChat={onNewChat}
-      onUntrustedInboxVisible={onUntrustedInboxVisible}
-      setInboxNumSmallRows={setInboxNumSmallRows}
-      toggleSmallTeamsExpanded={toggleSmallTeamsExpanded}
-      inboxNumSmallRows={inboxNumSmallRows}
-    />
-  )
-})
-
-const noSmallTeams = new Array<T.RPCChat.UIInboxSmallTeamRow>()
-const noBigTeams = new Array<T.RPCChat.UIInboxBigTeamRow>()
-const Connected = (ownProps: OwnProps) => {
-  const chatState = Chat.useChatState(
-    C.useShallow(s => ({
-      inboxHasLoaded: s.inboxHasLoaded,
-      inboxLayout: s.inboxLayout,
-      inboxNumSmallRows: s.inboxNumSmallRows ?? 5,
-      isSearching: !!s.inboxSearch,
-      smallTeamsExpanded: s.smallTeamsExpanded,
-    }))
-  )
-  const {inboxHasLoaded, inboxLayout: _inboxLayout, inboxNumSmallRows} = chatState
-  const {isSearching, smallTeamsExpanded} = chatState
-  const {conversationIDKey} = ownProps
-  const neverLoaded = !inboxHasLoaded
-  const selectedConversationIDKey = conversationIDKey ?? Chat.noConversationIDKey
-  const {navKey} = ownProps
-  const bigTeams = _inboxLayout ? _inboxLayout.bigTeams || noBigTeams : noBigTeams
+  // Compute rows
+  const bigTeams = inboxLayout?.bigTeams || noBigTeams
   const showAllSmallRows = smallTeamsExpanded || !bigTeams.length
-  const allSmallTeams = _inboxLayout ? _inboxLayout.smallTeams || noSmallTeams : noSmallTeams
+  const allSmallTeams = inboxLayout?.smallTeams || noSmallTeams
   const smallTeamsBelowTheFold = !showAllSmallRows && allSmallTeams.length > inboxNumSmallRows
-  const smallTeams = React.useMemo(() => {
-    if (!showAllSmallRows) {
-      return allSmallTeams.slice(0, inboxNumSmallRows)
-    } else {
-      return allSmallTeams
-    }
-  }, [showAllSmallRows, inboxNumSmallRows, allSmallTeams])
-  const smallRows = React.useMemo(() => {
-    return makeSmallRows(smallTeams)
-  }, [smallTeams])
-
-  const bigRows = React.useMemo(() => {
-    return makeBigRows(bigTeams)
-  }, [bigTeams])
+  const smallTeams = showAllSmallRows ? allSmallTeams : allSmallTeams.slice(0, inboxNumSmallRows)
+  const smallRows = makeSmallRows(smallTeams)
+  const bigRows = makeBigRows(bigTeams)
 
   const hasAllSmallTeamConvs =
-    (_inboxLayout?.smallTeams?.length ?? 0) === (_inboxLayout?.totalSmallTeams ?? 0)
-  const divider: Array<ChatInboxRowItemDivider | ChatInboxRowItemTeamBuilder> = React.useMemo(() => {
-    return bigRows.length !== 0 || !hasAllSmallTeamConvs
+    (inboxLayout?.smallTeams?.length ?? 0) === (inboxLayout?.totalSmallTeams ?? 0)
+  const divider: Array<ChatInboxRowItemDivider | ChatInboxRowItemTeamBuilder> =
+    bigRows.length !== 0 || !hasAllSmallTeamConvs
       ? [{showButton: !hasAllSmallTeamConvs || smallTeamsBelowTheFold, type: 'divider'}]
       : []
-  }, [bigRows.length, hasAllSmallTeamConvs, smallTeamsBelowTheFold])
-
-  const rows: Array<ChatInboxRowItem> = React.useMemo(() => {
-    const builderAfterSmall = new Array<ChatInboxRowItemTeamBuilder>()
-    const builderAfterDivider = new Array<ChatInboxRowItemTeamBuilder>()
-    const builderAfterBig = new Array<ChatInboxRowItemTeamBuilder>()
-    const teamBuilder: ChatInboxRowItemTeamBuilder = {type: 'teamBuilder'}
-    if (smallRows.length !== 0) {
-      if (bigRows.length === 0) {
-        if (divider.length !== 0) {
-          builderAfterDivider.push(teamBuilder)
-        } else {
-          builderAfterSmall.push(teamBuilder)
-        }
+
+  const teamBuilder: ChatInboxRowItemTeamBuilder = {type: 'teamBuilder'}
+  const builderAfterSmall: Array<ChatInboxRowItemTeamBuilder> = []
+  const builderAfterDivider: Array<ChatInboxRowItemTeamBuilder> = []
+  const builderAfterBig: Array<ChatInboxRowItemTeamBuilder> = []
+  if (smallRows.length !== 0) {
+    if (bigRows.length === 0) {
+      if (divider.length !== 0) {
+        builderAfterDivider.push(teamBuilder)
       } else {
-        builderAfterBig.push(teamBuilder)
+        builderAfterSmall.push(teamBuilder)
       }
+    } else {
+      builderAfterBig.push(teamBuilder)
     }
-    return [
-      ...smallRows,
-      ...builderAfterSmall,
-      ...divider,
-      ...builderAfterDivider,
-      ...bigRows,
-      ...builderAfterBig,
-    ]
-  }, [bigRows, smallRows, divider])
+  }
+  const rows: Array<ChatInboxRowItem> = [
+    ...smallRows,
+    ...builderAfterSmall,
+    ...divider,
+    ...builderAfterDivider,
+    ...bigRows,
+    ...builderAfterBig,
+  ]
 
   const unreadIndices = Chat.useChatState(
     C.useShallow(s =>
@@ -233,19 +184,24 @@ const Connected = (ownProps: OwnProps) => {
 
   const unreadTotal = Array.from(unreadIndices.values()).reduce((acc, val) => acc + val, 0)
 
-  const props = {
-    isSearching,
-    navKey,
-    neverLoaded,
-    rows,
-    selectedConversationIDKey,
-    smallTeamsExpanded: smallTeamsExpanded || bigTeams.length === 0,
-    unreadIndices: unreadIndices.size ? unreadIndices : emptyMap,
-    unreadTotal,
-  }
-  return <InboxWrapper {...props} />
+  return (
+    <Inbox
+      allowShowFloatingButton={allowShowFloatingButton}
+      inboxNumSmallRows={inboxNumSmallRows}
+      isSearching={isSearching}
+      navKey={navKey}
+      neverLoaded={!inboxHasLoaded}
+      onNewChat={appendNewChatBuilder}
+      onUntrustedInboxVisible={queueMetaToRequest}
+      rows={rows}
+      selectedConversationIDKey={selectedConversationIDKey}
+      setInboxNumSmallRows={setInboxNumSmallRows}
+      smallTeamsExpanded={smallTeamsExpanded || bigTeams.length === 0}
+      toggleSmallTeamsExpanded={toggleSmallTeamsExpanded}
+      unreadIndices={unreadIndices.size ? unreadIndices : emptyMap}
+      unreadTotal={unreadTotal}
+    />
+  )
 }
 
-const emptyMap = new Map()
-
 export default Connected

shared/chat/inbox/defer-loading.tsx

@@ -5,7 +5,7 @@ import {useIsFocused, useNavigationState} from '@react-navigation/core'
 // keep track of this even on unmount, else if you background / foreground you'll lose it
 let _everFocused = false
 
-const Deferred = React.memo(function Deferred() {
+export default function Deferred() {
   const [visible, setVisible] = React.useState(_everFocused)
   const isFocused = useIsFocused()
   const navKey = useNavigationState(state => state.key)
@@ -27,10 +27,4 @@ const Deferred = React.memo(function Deferred() {
   }, [isFocused, visible])
 
   return visible ? <Inbox navKey={navKey} /> : null
-})
-
-const DeferredOuter = () => {
-  return <Deferred />
 }
-
-export default DeferredOuter

shared/chat/inbox/index.desktop.tsx

@@ -462,10 +462,6 @@ const styles = Kb.Styles.styleSheetCreate(
           position: 'relative',
         },
       }),
-      divider: {
-        backgroundColor: 'purple',
-        overflow: 'hidden',
-      },
       fakeAvatar: Kb.Styles.platformStyles({
         isElectron: {
           backgroundColor: Kb.Styles.globalColors.black_10,
@@ -482,11 +478,6 @@ const styles = Kb.Styles.styleSheetCreate(
           width: '100%',
         },
       }),
-      fakeRemovingRowDivider: {
-        position: 'absolute',
-        top: 0,
-        width: '100%',
-      },
       fakeRow: Kb.Styles.platformStyles({
         isElectron: {
           backgroundColor: Kb.Styles.globalColors.blueGrey,
@@ -502,11 +493,6 @@ const styles = Kb.Styles.styleSheetCreate(
         right: 0,
         zIndex: 9999,
       },
-      fakeRowDivider: {
-        bottom: 0,
-        position: 'absolute',
-        width: '100%',
-      },
       fakeText: {
         flexGrow: 1,
         height: '100%',
@@ -554,14 +540,10 @@ const styles = Kb.Styles.styleSheetCreate(
         paddingTop: 1,
         width: Kb.Styles.globalMargins.small,
       },
-      hover: {backgroundColor: Kb.Styles.globalColors.blueGreyDark},
       list: {
         flex: 1,
         height: '100%',
       },
-      rowWithDragger: {
-        height: 68,
-      },
       spacer: {
         backgroundColor: Kb.Styles.globalColors.blueGrey,
         bottom: 0,

shared/chat/inbox/index.native.tsx

@@ -400,11 +400,6 @@ const styles = Kb.Styles.styleSheetCreate(
   () =>
     ({
       button: {width: '100%'},
-      buttonBar: {
-        alignItems: 'flex-end',
-        alignSelf: 'flex-end',
-        justifyContent: 'flex-end',
-      },
       container: Kb.Styles.platformStyles({
         common: {
           ...Kb.Styles.globalStyles.flexBoxColumn,