Use native SectionList (#28516)

Author: chrisnojima

shared/app/global-errors/hook.tsx

@@ -45,14 +45,6 @@ const useData = () => {
     }
   }, [clearCountdown])
 
-  C.useOnUnMountOnce(() => {
-    clearCountdown()
-  })
-
-  C.useOnMountOnce(() => {
-    resetError(!!error)
-  })
-
   const resetError = React.useCallback(
     (newError: boolean) => {
       setSize(newError ? 'Small' : 'Closed')
@@ -68,6 +60,14 @@ const useData = () => {
     [clearCountdown, onDismiss]
   )
 
+  C.useOnUnMountOnce(() => {
+    clearCountdown()
+  })
+
+  C.useOnMountOnce(() => {
+    resetError(!!error)
+  })
+
   React.useEffect(() => {
     const id = setTimeout(
       () => {

shared/app/global-errors/index.desktop.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import logger from '@/logger'
 import * as Kb from '@/common-adapters'
 import {ignoreDisconnectOverlay} from '@/local-debug.desktop'

shared/app/global-errors/index.native.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import * as Kb from '@/common-adapters'
 import NativeScrollView from '@/common-adapters/scroll-view.native'
 import useData from './hook'

shared/chat/audio/audio-recorder.native.tsx

@@ -179,7 +179,6 @@ const useIconAndOverlay = (p: {
     }
     const cleanupOverlayTimeout = () => {
       clearTimeout(id)
-      // eslint-disable-next-line
       id = 0
     }
 
@@ -766,10 +765,10 @@ const SendRecordingButton = (props: {fadeSV: SVN; lockedSV: SVN; sendRecording:
 
 const AudioCounter = () => {
   const [seconds, setSeconds] = React.useState(0)
-  const startTime = React.useRef(Date.now())
+  const [startTime] = React.useState(() => Date.now())
   React.useEffect(() => {
     const timer = setTimeout(() => {
-      setSeconds((Date.now() - startTime.current) / 1000)
+      setSeconds((Date.now() - startTime) / 1000)
     }, 1000)
     return () => clearTimeout(timer)
   }, [seconds, startTime])

shared/chat/blocking/block-modal/index.tsx

@@ -127,7 +127,7 @@ 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((p: Props) => {
+const BlockModal = React.memo(function BlockModal(p: Props) {
   const {finishWaiting, onClose, refreshBlocks, context, blockUserByDefault, otherUsernames} = p
   const {reportsUserByDefault, flagUserByDefault, conversationIDKey, adderUsername} = p
   const [blockTeam, setBlockTeam] = React.useState(true)

shared/chat/conversation/bot/search.tsx

@@ -8,20 +8,29 @@ import {Bot} from '../info-panel/bot'
 
 type Props = {teamID?: T.Teams.TeamID}
 
-const renderSectionHeader = ({section}: {section: {title: string}}) => {
+const renderSectionHeader = ({section}: {section: {title?: string}}) => {
   return <Kb.SectionDivider label={section.title} />
 }
 
-const userEmptyPlaceholder = '---EMPTYUSERS---'
-const resultEmptyPlaceholder = '---EMPTYRESULT---'
+const userEmptyPlaceholder = '---EMPTYUSERS---' as const
+const resultEmptyPlaceholder = '---EMPTYRESULT---' as const
+
+type Item =
+  | {type: 'bot'; bot: T.RPCGen.FeaturedBot}
+  | {type: 'str'; str: string}
+  | {type: 'dummy'; value: typeof userEmptyPlaceholder | typeof resultEmptyPlaceholder}
+type Section = Omit<Kb.SectionType<Item>, 'title'> & {title: string}
 
 const SearchBotPopup = (props: Props) => {
   const conversationIDKey = C.useChatContext(s => s.id)
   const teamID = props.teamID
   const [lastQuery, setLastQuery] = React.useState('')
   const featuredBotsMap = C.useBotsState(s => s.featuredBotsMap)
   const botSearchResults = C.useBotsState(s => s.botSearchResults)
-  const waiting = C.Waiting.useAnyWaiting([C.Bots.waitingKeyBotSearchUsers, C.Bots.waitingKeyBotSearchFeatured])
+  const waiting = C.Waiting.useAnyWaiting([
+    C.Bots.waitingKeyBotSearchUsers,
+    C.Bots.waitingKeyBotSearchFeatured,
+  ])
   const clearModals = C.useRouterState(s => s.dispatch.clearModals)
   const onClose = () => {
     clearModals()
@@ -52,60 +61,66 @@ const SearchBotPopup = (props: Props) => {
     getFeaturedBots()
   })
 
-  const botData: Array<T.RPCGen.FeaturedBot | string> =
+  const botData: Array<Item> =
     lastQuery.length > 0
-      ? botSearchResults.get(lastQuery)?.bots.slice() ?? []
-      : C.Bots.getFeaturedSorted(featuredBotsMap)
+      ? (botSearchResults
+          .get(lastQuery)
+          ?.bots.slice()
+          .map(bot => ({bot, type: 'bot'}) as const) ?? [])
+      : C.Bots.getFeaturedSorted(featuredBotsMap).map(bot => ({bot, type: 'bot'}))
   if (!botData.length && !waiting) {
-    botData.push(resultEmptyPlaceholder)
+    botData.push({type: 'dummy', value: resultEmptyPlaceholder})
   }
-  const botSection = {
+  const botSection: Section = {
     data: botData,
-    renderItem: ({index, item}: {index: number; item: T.RPCGen.FeaturedBot | string}) => {
-      return item === resultEmptyPlaceholder ? (
+    renderItem: ({index, item}: {index: number; item: Item}) => {
+      return item.type === 'dummy' && item.value === resultEmptyPlaceholder ? (
         <Kb.Text
           style={{...Styles.padding(Styles.globalMargins.tiny, Styles.globalMargins.tiny)}}
           type="BodySmall"
         >
           No results were found
         </Kb.Text>
-      ) : typeof item !== 'string' ? (
-        <Bot {...item} onClick={onSelect} firstItem={index === 0} />
+      ) : item.type === 'bot' ? (
+        <Bot {...item.bot} onClick={onSelect} firstItem={index === 0} />
       ) : null
     },
     title: 'Featured bots',
   }
-  const userData = !lastQuery.length
-    ? [userEmptyPlaceholder]
-    : botSearchResults
-        .get(lastQuery)
-        ?.users.filter(u => !featuredBotsMap.get(u))
-        .slice(0, 3) ?? []
+  const userData: Array<Item> = !lastQuery.length
+    ? [{type: 'dummy', value: userEmptyPlaceholder} as const]
+    : (
+        botSearchResults
+          .get(lastQuery)
+          ?.users.filter(u => !featuredBotsMap.get(u))
+          .slice(0, 3) ?? []
+      ).map(str => ({str, type: 'str'}) as const)
+
   if (!userData.length && !waiting) {
-    userData.push(resultEmptyPlaceholder)
+    userData.push({type: 'dummy', value: resultEmptyPlaceholder} as const)
   }
-  const usersSection = {
+  const usersSection: Section = {
     data: userData,
-    renderItem: ({item}: {item: string}) => {
+    renderItem: ({item}: {item: Item}) => {
       return (
         <Kb.Box2
           direction="horizontal"
           fullWidth={true}
           style={{...Styles.padding(Styles.globalMargins.tiny, Styles.globalMargins.tiny)}}
         >
-          {item === userEmptyPlaceholder ? (
+          {item.type === 'dummy' && item.value === userEmptyPlaceholder ? (
             <Kb.Text type="BodySmall">Enter a bot username above</Kb.Text>
-          ) : item === resultEmptyPlaceholder ? (
+          ) : item.type === 'dummy' && item.value === resultEmptyPlaceholder ? (
             <Kb.Text type="BodySmall">No results were found</Kb.Text>
-          ) : (
+          ) : item.type === 'str' ? (
             <Kb.NameWithIcon
-              username={item}
+              username={item.str}
               horizontal={true}
               colorFollowing={true}
               onClick={onSelect}
               clickType="onClick"
             />
-          )}
+          ) : null}
         </Kb.Box2>
       )
     },

shared/chat/conversation/giphy/index.desktop.tsx

@@ -40,7 +40,7 @@ const GiphySearch = () => {
       >
         <Kb.Box2 direction="horizontal" style={styles.instructionsContainer} fullWidth={true} gap="xtiny">
           <Kb.Text style={styles.instructions} type="BodySmall">
-            Tip: hit 'Enter' now to send a random GIF.
+            {"Tip: hit 'Enter' now to send a random GIF."}
           </Kb.Text>
           <Kb.Text
             style={styles.instructions}