Simplify list logic further to prevent misuse (#3334)

* simplify list logic further

more simplification

simplify by removing `isEmpty`

use `isFetchingNextPage` everywhere for clarity

change `isFetching` to `isFetchingNextPage` for clarity

remove some useless `useMemo`s

move `renderItem` and `keyExtractor` out of component

* clean bundle size check

* update deploy

* adjust

* adjust

* one test

* try now

* test it

* done

src/screens/Hashtag.tsx

@@ -1,28 +1,30 @@
 import React from 'react'
 import {ListRenderItemInfo, Pressable} from 'react-native'
-import {useFocusEffect} from '@react-navigation/native'
-import {useSetMinimalShellMode} from 'state/shell'
-import {ViewHeader} from 'view/com/util/ViewHeader'
-import {NativeStackScreenProps} from '@react-navigation/native-stack'
-import {CommonNavigatorParams} from 'lib/routes/types'
-import {useSearchPostsQuery} from 'state/queries/search-posts'
-import {Post} from 'view/com/post/Post'
 import {PostView} from '@atproto/api/dist/client/types/app/bsky/feed/defs'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {useFocusEffect} from '@react-navigation/native'
+import {NativeStackScreenProps} from '@react-navigation/native-stack'
+
+import {HITSLOP_10} from 'lib/constants'
+import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender'
+import {CommonNavigatorParams} from 'lib/routes/types'
+import {shareUrl} from 'lib/sharing'
+import {cleanError} from 'lib/strings/errors'
+import {sanitizeHandle} from 'lib/strings/handles'
 import {enforceLen} from 'lib/strings/helpers'
+import {isNative} from 'platform/detection'
+import {useSearchPostsQuery} from 'state/queries/search-posts'
+import {useSetMinimalShellMode} from 'state/shell'
+import {Post} from 'view/com/post/Post'
+import {List} from 'view/com/util/List'
+import {ViewHeader} from 'view/com/util/ViewHeader'
+import {ArrowOutOfBox_Stroke2_Corner0_Rounded} from '#/components/icons/ArrowOutOfBox'
 import {
   ListFooter,
   ListHeaderDesktop,
   ListMaybePlaceholder,
 } from '#/components/Lists'
-import {List} from 'view/com/util/List'
-import {msg} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-import {sanitizeHandle} from 'lib/strings/handles'
-import {ArrowOutOfBox_Stroke2_Corner0_Rounded} from '#/components/icons/ArrowOutOfBox'
-import {shareUrl} from 'lib/sharing'
-import {HITSLOP_10} from 'lib/constants'
-import {isNative} from 'platform/detection'
-import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender'
 
 const renderItem = ({item}: ListRenderItemInfo<PostView>) => {
   return <Post post={item} />
@@ -61,9 +63,8 @@ export default function HashtagScreen({
 
   const {
     data,
-    isFetching,
+    isFetchingNextPage,
     isLoading,
-    isRefetching,
     isError,
     error,
     refetch,
@@ -97,9 +98,9 @@ export default function HashtagScreen({
   }, [refetch])
 
   const onEndReached = React.useCallback(() => {
-    if (isFetching || !hasNextPage || error) return
+    if (isFetchingNextPage || !hasNextPage || error) return
     fetchNextPage()
-  }, [isFetching, hasNextPage, error, fetchNextPage])
+  }, [isFetchingNextPage, hasNextPage, error, fetchNextPage])
 
   return (
     <>
@@ -123,16 +124,16 @@ export default function HashtagScreen({
             : undefined
         }
       />
-      <ListMaybePlaceholder
-        isLoading={isLoading || isRefetching}
-        isError={isError}
-        isEmpty={posts.length < 1}
-        onRetry={refetch}
-        emptyTitle="results"
-        emptyMessage={_(msg`We couldn't find any results for that hashtag.`)}
-      />
-      {!isLoading && posts.length > 0 && (
-        <List<PostView>
+      {posts.length < 1 ? (
+        <ListMaybePlaceholder
+          isLoading={isLoading}
+          isError={isError}
+          onRetry={refetch}
+          emptyType="results"
+          emptyMessage={_(msg`We couldn't find any results for that hashtag.`)}
+        />
+      ) : (
+        <List
           data={posts}
           renderItem={renderItem}
           keyExtractor={keyExtractor}
@@ -150,9 +151,8 @@ export default function HashtagScreen({
           }
           ListFooterComponent={
             <ListFooter
-              isFetching={isFetching && !isRefetching}
-              isError={isError}
-              error={error?.name}
+              isFetchingNextPage={isFetchingNextPage}
+              error={cleanError(error)}
               onRetry={fetchNextPage}
             />
           }

src/screens/Profile/ProfileLabelerLikedBy.tsx

@@ -4,13 +4,11 @@ import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useFocusEffect} from '@react-navigation/native'
 
-import {NativeStackScreenProps, CommonNavigatorParams} from '#/lib/routes/types'
+import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
+import {makeRecordUri} from '#/lib/strings/url-helpers'
+import {useSetMinimalShellMode} from '#/state/shell'
 import {ViewHeader} from '#/view/com/util/ViewHeader'
 import {LikedByList} from '#/components/LikedByList'
-import {useSetMinimalShellMode} from '#/state/shell'
-import {makeRecordUri} from '#/lib/strings/url-helpers'
-
-import {atoms as a, useBreakpoints} from '#/alf'
 
 export function ProfileLabelerLikedByScreen({
   route,
@@ -19,7 +17,6 @@ export function ProfileLabelerLikedByScreen({
   const {name: handleOrDid} = route.params
   const uri = makeRecordUri(handleOrDid, 'app.bsky.labeler.service', 'self')
   const {_} = useLingui()
-  const {gtMobile} = useBreakpoints()
 
   useFocusEffect(
     React.useCallback(() => {
@@ -28,17 +25,7 @@ export function ProfileLabelerLikedByScreen({
   )
 
   return (
-    <View
-      style={[
-        a.mx_auto,
-        a.w_full,
-        a.h_full_vh,
-        gtMobile && [
-          {
-            maxWidth: 600,
-          },
-        ],
-      ]}>
+    <View style={{flex: 1}}>
       <ViewHeader title={_(msg`Liked By`)} />
       <LikedByList uri={uri} />
     </View>