cleanup containers 1 (#28617)

Author: chrisnojima-zoom

shared/chat/blocking/block-modal.tsx

@@ -19,24 +19,6 @@ export type ReportSettings = {
 export type NewBlocksMap = Map<string, BlocksForUser>
 type BlocksForUser = {chatBlocked?: boolean; followBlocked?: boolean; report?: ReportSettings}
 
-export type Props = {
-  adderUsername?: string
-  blockUserByDefault?: boolean
-  context?: BlockModalContext
-  conversationIDKey?: string
-  filterUserByDefault?: boolean
-  finishWaiting: boolean
-  flagUserByDefault?: boolean
-  isBlocked: (username: string, which: BlockType) => boolean
-  loadingWaiting: boolean
-  onClose: () => void
-  onFinish: (newBlocks: NewBlocksMap, blockTeam: boolean, report?: ReportSettings) => void
-  otherUsernames?: Array<string>
-  refreshBlocks: () => void
-  reportsUserByDefault?: boolean
-  teamname?: string
-}
-
 type OwnProps = {
   blockUserByDefault?: boolean
   filterUserByDefault?: boolean
@@ -141,9 +123,102 @@ const ReportOptions = (props: ReportOptionsProps) => {
 // In order to have this play nicely with scrolling and keyboards, put all the stuff in a List.
 type Item = 'topStuff' | {username: string}
 
-const BlockModal = React.memo(function BlockModal(p: Props) {
-  const {finishWaiting, onClose, refreshBlocks, context, blockUserByDefault, otherUsernames} = p
-  const {reportsUserByDefault, flagUserByDefault, conversationIDKey, adderUsername} = p
+const Container = React.memo(function BlockModal(ownProps: OwnProps) {
+  const {context, conversationIDKey, blockUserByDefault = false, filterUserByDefault = false} = ownProps
+  const {flagUserByDefault = false, reportsUserByDefault = false, team: teamname} = ownProps
+  let {username: adderUsername, others} = ownProps
+  const waitingForLeave = C.Waiting.useAnyWaiting(
+    teamname ? C.Teams.leaveTeamWaitingKey(teamname) : undefined
+  )
+  const waitingForBlocking = C.Waiting.useAnyWaiting(Constants.setUserBlocksWaitingKey)
+  const waitingForReport = C.Waiting.useAnyWaiting(Constants.reportUserWaitingKey)
+  if (others?.length === 1 && !adderUsername) {
+    adderUsername = others[0]
+    others = undefined
+  }
+
+  const _allKnownBlocks = C.useUsersState(s => s.blockMap)
+  const loadingWaiting = C.Waiting.useAnyWaiting(Constants.getUserBlocksWaitingKey)
+
+  const onClose = C.useRouterState(s => s.dispatch.navigateUp)
+  const leaveTeam = C.useTeamsState(s => s.dispatch.leaveTeam)
+  const leaveTeamAndBlock = React.useCallback(
+    (teamname: string) => {
+      leaveTeam(teamname, true, 'chat')
+    },
+    [leaveTeam]
+  )
+  const getBlockState = C.useUsersState(s => s.dispatch.getBlockState)
+  const _reportUser = C.useUsersState(s => s.dispatch.reportUser)
+  const refreshBlocksFor = getBlockState
+  const reportUser = React.useCallback(
+    (username: string, conversationIDKey: string | undefined, report: ReportSettings) => {
+      _reportUser({
+        comment: report.extraNotes,
+        conversationIDKey,
+        includeTranscript: report.includeTranscript && !!conversationIDKey,
+        reason: report.reason,
+        username,
+      })
+    },
+    [_reportUser]
+  )
+  const setConversationStatus = C.useChatContext(s => s.dispatch.blockConversation)
+  const _setUserBlocks = C.useUsersState(s => s.dispatch.setUserBlocks)
+  const setUserBlocks = React.useCallback(
+    (newBlocks: NewBlocksMap) => {
+      // Convert our state block array to action payload.
+      const blocks = [...newBlocks.entries()]
+        .filter(
+          ([_, userBlocks]) => userBlocks.chatBlocked !== undefined || userBlocks.followBlocked !== undefined
+        )
+        .map(([username, userBlocks]) => ({
+          setChatBlock: userBlocks.chatBlocked,
+          setFollowBlock: userBlocks.followBlocked,
+          username,
+        }))
+      if (blocks.length) {
+        _setUserBlocks(blocks)
+      }
+    },
+    [_setUserBlocks]
+  )
+
+  const otherUsernames = others && others.length > 0 ? others : undefined
+  const finishWaiting = waitingForLeave || waitingForBlocking || waitingForReport
+  const isBlocked = (username: string, which: BlockType) => {
+    const blockObj = _allKnownBlocks.get(username)
+    return blockObj ? blockObj[which] : false
+  }
+
+  const onFinish = (newBlocks: NewBlocksMap, blockTeam: boolean) => {
+    let takingAction = false
+    if (blockTeam) {
+      if (teamname) {
+        takingAction = true
+        leaveTeamAndBlock(teamname)
+      } else if (conversationIDKey) {
+        takingAction = true
+        const anyReported = [...newBlocks.values()].some(v => v.report !== undefined)
+        setConversationStatus(anyReported)
+      }
+    }
+    if (newBlocks.size) {
+      takingAction = true
+      setUserBlocks(newBlocks)
+    }
+    newBlocks.forEach(({report}, username) => report && reportUser(username, conversationIDKey, report))
+    if (!takingAction) {
+      onClose()
+    }
+  }
+  const refreshBlocks = React.useCallback(() => {
+    const usernames = [...(adderUsername ? [adderUsername] : []), ...(otherUsernames || [])]
+    if (usernames.length) {
+      refreshBlocksFor(usernames)
+    }
+  }, [adderUsername, otherUsernames, refreshBlocksFor])
+
   const [blockTeam, setBlockTeam] = React.useState(true)
   const [finishClicked, setFinishClicked] = React.useState(false)
   // newBlocks holds a Map of blocks that will be applied when user clicks
@@ -205,7 +280,7 @@ const BlockModal = React.memo(function BlockModal(p: Props) {
       return current[which] || false
     }
     // If we don't have a checkbox, check the store for current block value.
-    return p.isBlocked(username, which)
+    return isBlocked(username, which)
   }
 
   const setReportForUsername = (username: string, shouldReport: boolean) => {
@@ -263,9 +338,9 @@ const BlockModal = React.memo(function BlockModal(p: Props) {
     }
   }
 
-  const onFinish = () => {
+  const onClickFinish = () => {
     setFinishClicked(true)
-    p.onFinish(newBlocks, blockTeam)
+    onFinish(newBlocks, blockTeam)
   }
 
   const shouldShowReport = (username: string): boolean => {
@@ -290,8 +365,8 @@ const BlockModal = React.memo(function BlockModal(p: Props) {
       <CheckboxRow
         text={
           !teamLabel
-            ? `${p.filterUserByDefault ? 'Filter' : 'Block'} ${username}`
-            : `${p.filterUserByDefault ? 'Filter' : 'Block'} ${username} from messaging me directly`
+            ? `${filterUserByDefault ? 'Filter' : 'Block'} ${username}`
+            : `${filterUserByDefault ? 'Filter' : 'Block'} ${username} from messaging me directly`
         }
         onCheck={checked => setBlockFor(username, 'chatBlocked', checked)}
         checked={getBlockFor(username, 'chatBlocked')}
@@ -335,8 +410,6 @@ const BlockModal = React.memo(function BlockModal(p: Props) {
     </>
   )
 
-  const {teamname} = p
-
   const header = {
     leftButton: Styles.isMobile ? (
       <Kb.Text onClick={onClose} type="BodyPrimaryLink">
@@ -346,7 +419,7 @@ const BlockModal = React.memo(function BlockModal(p: Props) {
     title: <Kb.Icon type="iconfont-user-block" sizeType="Big" color={Styles.globalColors.red} />,
   }
 
-  if (p.loadingWaiting) {
+  if (loadingWaiting) {
     return (
       <Kb.Modal mode="Default" header={header}>
         <Kb.Box style={styles.loadingAnimationBox}>
@@ -393,7 +466,7 @@ const BlockModal = React.memo(function BlockModal(p: Props) {
         content: (
           <Kb.ButtonBar fullWidth={true} style={styles.buttonBar}>
             {!Styles.isMobile && <Kb.Button fullWidth={true} label="Cancel" onClick={onClose} type="Dim" />}
-            <Kb.WaitingButton label="Finish" onClick={onFinish} fullWidth={true} type="Danger" />
+            <Kb.WaitingButton label="Finish" onClick={onClickFinish} fullWidth={true} type="Danger" />
           </Kb.ButtonBar>
         ),
       }}
@@ -421,117 +494,6 @@ const BlockModal = React.memo(function BlockModal(p: Props) {
   )
 })
 
-const Container = (ownProps: OwnProps) => {
-  const {context, conversationIDKey, blockUserByDefault = false, filterUserByDefault = false} = ownProps
-  const {flagUserByDefault = false, reportsUserByDefault = false, team: teamname} = ownProps
-  let {username: adderUsername, others} = ownProps
-  const waitingForLeave = C.Waiting.useAnyWaiting(
-    teamname ? C.Teams.leaveTeamWaitingKey(teamname) : undefined
-  )
-  const waitingForBlocking = C.Waiting.useAnyWaiting(Constants.setUserBlocksWaitingKey)
-  const waitingForReport = C.Waiting.useAnyWaiting(Constants.reportUserWaitingKey)
-  if (others?.length === 1 && !adderUsername) {
-    adderUsername = others[0]
-    others = undefined
-  }
-
-  const _allKnownBlocks = C.useUsersState(s => s.blockMap)
-  const loadingWaiting = C.Waiting.useAnyWaiting(Constants.getUserBlocksWaitingKey)
-
-  const onClose = C.useRouterState(s => s.dispatch.navigateUp)
-  const leaveTeam = C.useTeamsState(s => s.dispatch.leaveTeam)
-  const leaveTeamAndBlock = React.useCallback(
-    (teamname: string) => {
-      leaveTeam(teamname, true, 'chat')
-    },
-    [leaveTeam]
-  )
-  const getBlockState = C.useUsersState(s => s.dispatch.getBlockState)
-  const _reportUser = C.useUsersState(s => s.dispatch.reportUser)
-  const refreshBlocksFor = getBlockState
-  const reportUser = React.useCallback(
-    (username: string, conversationIDKey: string | undefined, report: ReportSettings) => {
-      _reportUser({
-        comment: report.extraNotes,
-        conversationIDKey,
-        includeTranscript: report.includeTranscript && !!conversationIDKey,
-        reason: report.reason,
-        username,
-      })
-    },
-    [_reportUser]
-  )
-  const setConversationStatus = C.useChatContext(s => s.dispatch.blockConversation)
-  const _setUserBlocks = C.useUsersState(s => s.dispatch.setUserBlocks)
-  const setUserBlocks = React.useCallback(
-    (newBlocks: NewBlocksMap) => {
-      // Convert our state block array to action payload.
-      const blocks = [...newBlocks.entries()]
-        .filter(
-          ([_, userBlocks]) => userBlocks.chatBlocked !== undefined || userBlocks.followBlocked !== undefined
-        )
-        .map(([username, userBlocks]) => ({
-          setChatBlock: userBlocks.chatBlocked,
-          setFollowBlock: userBlocks.followBlocked,
-          username,
-        }))
-      if (blocks.length) {
-        _setUserBlocks(blocks)
-      }
-    },
-    [_setUserBlocks]
-  )
-
-  const otherUsernames = others && others.length > 0 ? others : undefined
-  const props = {
-    adderUsername,
-    blockUserByDefault,
-    context,
-    conversationIDKey,
-    filterUserByDefault,
-    finishWaiting: waitingForLeave || waitingForBlocking || waitingForReport,
-    flagUserByDefault,
-    isBlocked: (username: string, which: BlockType) => {
-      const blockObj = _allKnownBlocks.get(username)
-      return blockObj ? blockObj[which] : false
-    },
-    loadingWaiting,
-    onClose,
-    onFinish: (newBlocks: NewBlocksMap, blockTeam: boolean) => {
-      let takingAction = false
-      if (blockTeam) {
-        if (teamname) {
-          takingAction = true
-          leaveTeamAndBlock(teamname)
-        } else if (conversationIDKey) {
-          takingAction = true
-          const anyReported = [...newBlocks.values()].some(v => v.report !== undefined)
-          setConversationStatus(anyReported)
-        }
-      }
-      if (newBlocks.size) {
-        takingAction = true
-        setUserBlocks(newBlocks)
-      }
-      newBlocks.forEach(({report}, username) => report && reportUser(username, conversationIDKey, report))
-      if (!takingAction) {
-        onClose()
-      }
-    },
-    otherUsernames,
-    refreshBlocks: () => {
-      const usernames = [...(adderUsername ? [adderUsername] : []), ...(otherUsernames || [])]
-      if (usernames.length) {
-        refreshBlocksFor(usernames)
-      }
-    },
-    reportsUserByDefault,
-    teamname,
-  }
-
-  return <BlockModal {...props} />
-}
-
 export default Container
 
 const getListHeightStyle = (numOthers: number, expanded: boolean) => ({

shared/chat/conversation/command-markdown.tsx

@@ -2,7 +2,7 @@ import * as C from '@/constants'
 import * as Kb from '@/common-adapters'
 import * as Styles from '@/styles'
 
-const Container = () => {
+const CommandMarkdown = () => {
   const md = C.useChatContext(s => s.commandMarkdown)
   const body = md?.body ?? ''
   const title = md?.title ?? undefined
@@ -63,4 +63,4 @@ const styles = Styles.styleSheetCreate(
     }) as const
 )
 
-export default Container
+export default CommandMarkdown

shared/chat/conversation/force-list-redraw-context.tsx

@@ -1,3 +1,2 @@
 import * as React from 'react'
-
 export const ForceListRedrawContext = React.createContext(() => {})