add list footer to list list

src/components/Lists.tsx

@@ -1,5 +1,5 @@
-import React, {memo} from 'react'
-import {StyleProp, View, ViewStyle} from 'react-native'
+import {memo} from 'react'
+import {type StyleProp, View, type ViewStyle} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 

src/components/dialogs/GifSelect.tsx

@@ -1,4 +1,4 @@
-import React, {
+import {
   useCallback,
   useImperativeHandle,
   useMemo,
@@ -119,7 +119,7 @@ function GifList({
     [onSelectGif],
   )
 
-  const onEndReached = React.useCallback(() => {
+  const onEndReached = useCallback(() => {
     if (isFetchingNextPage || !hasNextPage || error) return
     fetchNextPage()
   }, [isFetchingNextPage, hasNextPage, error, fetchNextPage])

src/view/com/lists/MyLists.tsx

@@ -1,28 +1,25 @@
-import React from 'react'
+import {useCallback, useMemo, useState} from 'react'
 import {
   ActivityIndicator,
-  FlatList as RNFlatList,
-  RefreshControl,
-  StyleProp,
+  type StyleProp,
   View,
-  ViewStyle,
+  type ViewStyle,
 } from 'react-native'
-import {AppBskyGraphDefs as GraphDefs} from '@atproto/api'
+import {type AppBskyGraphDefs as GraphDefs} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {usePalette} from '#/lib/hooks/usePalette'
 import {cleanError} from '#/lib/strings/errors'
-import {s} from '#/lib/styles'
 import {logger} from '#/logger'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
-import {MyListsFilter, useMyListsQuery} from '#/state/queries/my-lists'
+import {type MyListsFilter, useMyListsQuery} from '#/state/queries/my-lists'
+import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
+import {List} from '#/view/com/util/List'
 import {atoms as a, useTheme} from '#/alf'
 import {BulletList_Stroke2_Corner0_Rounded as ListIcon} from '#/components/icons/BulletList'
 import * as ListCard from '#/components/ListCard'
+import {ListFooter} from '#/components/Lists'
 import {Text} from '#/components/Typography'
-import {ErrorMessage} from '../util/error/ErrorMessage'
-import {List} from '../util/List'
 
 const LOADING = {_reactKey: '__loading__'}
 const EMPTY = {_reactKey: '__empty__'}
@@ -30,27 +27,24 @@ const ERROR_ITEM = {_reactKey: '__error__'}
 
 export function MyLists({
   filter,
-  inline,
   style,
   renderItem,
   testID,
 }: {
   filter: MyListsFilter
-  inline?: boolean
   style?: StyleProp<ViewStyle>
   renderItem?: (list: GraphDefs.ListView, index: number) => JSX.Element
   testID?: string
 }) {
-  const pal = usePalette('default')
   const t = useTheme()
   const {_} = useLingui()
   const moderationOpts = useModerationOpts()
-  const [isPTRing, setIsPTRing] = React.useState(false)
+  const [isPTRing, setIsPTRing] = useState(false)
   const {data, isFetching, isFetched, isError, error, refetch} =
     useMyListsQuery(filter)
   const isEmpty = !isFetching && !data?.length
 
-  const items = React.useMemo(() => {
+  const items = useMemo(() => {
     let items: any[] = []
     if (isError && isEmpty) {
       items = items.concat([ERROR_ITEM])
@@ -85,7 +79,7 @@ export function MyLists({
   // events
   // =
 
-  const onRefresh = React.useCallback(async () => {
+  const onRefresh = useCallback(async () => {
     setIsPTRing(true)
     try {
       await refetch()
@@ -98,7 +92,7 @@ export function MyLists({
   // rendering
   // =
 
-  const renderItemInner = React.useCallback(
+  const renderItemInner = useCallback(
     ({item, index}: {item: any; index: number}) => {
       if (item === EMPTY) {
         return (
@@ -162,47 +156,24 @@ export function MyLists({
     [t, renderItem, error, onRefresh, emptyText],
   )
 
-  if (inline) {
-    return (
-      <View testID={testID} style={style}>
-        {items.length > 0 && (
-          <RNFlatList
-            testID={testID ? `${testID}-flatlist` : undefined}
-            data={items}
-            keyExtractor={item => (item.uri ? item.uri : item._reactKey)}
-            renderItem={renderItemInner}
-            refreshControl={
-              <RefreshControl
-                refreshing={isPTRing}
-                onRefresh={onRefresh}
-                tintColor={pal.colors.text}
-                titleColor={pal.colors.text}
-              />
-            }
-            contentContainerStyle={[s.contentContainer]}
-            removeClippedSubviews={true}
-          />
-        )}
-      </View>
-    )
-  } else {
-    return (
-      <View testID={testID} style={style}>
-        {items.length > 0 && (
-          <List
-            testID={testID ? `${testID}-flatlist` : undefined}
-            data={items}
-            keyExtractor={item => (item.uri ? item.uri : item._reactKey)}
-            renderItem={renderItemInner}
-            refreshing={isPTRing}
-            onRefresh={onRefresh}
-            contentContainerStyle={[s.contentContainer]}
-            removeClippedSubviews={true}
-            desktopFixedHeight
-            sideBorders={false}
-          />
-        )}
-      </View>
-    )
-  }
+  return (
+    <View testID={testID} style={style}>
+      {items.length > 0 && (
+        <List
+          testID={testID ? `${testID}-flatlist` : undefined}
+          data={items}
+          keyExtractor={item => (item.uri ? item.uri : item._reactKey)}
+          renderItem={renderItemInner}
+          refreshing={isPTRing}
+          onRefresh={onRefresh}
+          removeClippedSubviews={true}
+          desktopFixedHeight
+          sideBorders={false}
+          ListFooterComponent={
+            <ListFooter error={cleanError(error)} onRetry={refetch} />
+          }
+        />
+      )}
+    </View>
+  )
 }