zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

More profile refactor updates (#1886)

Browse source 
* Update the profile avatar lightbox

* Update profile editor

* Add dynamic likes tab

* Add dynamic feeds and lists tabs

* Implement lists listing on profiles
This commit is contained in:
Paul Frazee 2023-11-13 13:29:33 -08:00 • committed by GitHub
parent 8217761363
commit a01463788d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 432 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

160
src/view/com/lists/ListsList.tsx
View file

@ -1,160 +0,0 @@
import React from 'react'
import {
ActivityIndicator,
FlatList as RNFlatList,
RefreshControl,
StyleProp,
StyleSheet,
View,
ViewStyle,
} from 'react-native'
import {AppBskyGraphDefs as GraphDefs} from '@atproto/api'
import {ListCard} from './ListCard'
import {MyListsFilter, useMyListsQuery} from '#/state/queries/my-lists'
import {ErrorMessage} from '../util/error/ErrorMessage'
import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn'
import {Text} from '../util/text/Text'
import {useAnalytics} from 'lib/analytics/analytics'
import {usePalette} from 'lib/hooks/usePalette'
import {FlatList} from '../util/Views'
import {s} from 'lib/styles'
import {logger} from '#/logger'
import {Trans} from '@lingui/macro'
import {cleanError} from '#/lib/strings/errors'
const LOADING = {_reactKey: '__loading__'}
const EMPTY = {_reactKey: '__empty__'}
const ERROR_ITEM = {_reactKey: '__error__'}
const LOAD_MORE_ERROR_ITEM = {_reactKey: '__load_more_error__'}
export function ListsList({
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 {track} = useAnalytics()
const [isRefreshing, setIsRefreshing] = React.useState(false)
const {data, isFetching, isFetched, isError, error, refetch} =
useMyListsQuery(filter)
const isEmpty = !isFetching && !data?.length
const items = React.useMemo(() => {
let items: any[] = []
if (isError && isEmpty) {
items = items.concat([ERROR_ITEM])
}
if (!isFetched && isFetching) {
items = items.concat([LOADING])
} else if (isEmpty) {
items = items.concat([EMPTY])
} else {
items = items.concat(data)
}
return items
}, [isError, isEmpty, isFetched, isFetching, data])
// events
// =
const onRefresh = React.useCallback(async () => {
track('Lists:onRefresh')
setIsRefreshing(true)
try {
await refetch()
} catch (err) {
logger.error('Failed to refresh lists', {error: err})
}
setIsRefreshing(false)
}, [refetch, track, setIsRefreshing])
// rendering
// =
const renderItemInner = React.useCallback(
({item, index}: {item: any; index: number}) => {
if (item === EMPTY) {
return (
<View
testID="listsEmpty"
style={[{padding: 18, borderTopWidth: 1}, pal.border]}>
<Text style={pal.textLight}>
<Trans>You have no lists.</Trans>
</Text>
</View>
)
} else if (item === ERROR_ITEM) {
return (
<ErrorMessage
message={cleanError(error)}
onPressTryAgain={onRefresh}
/>
)
} else if (item === LOAD_MORE_ERROR_ITEM) {
return (
<LoadMoreRetryBtn
label="There was an issue fetching your lists. Tap here to try again."
onPress={onRefresh}
/>
)
} else if (item === LOADING) {
return (
<View style={{padding: 20}}>
<ActivityIndicator />
</View>
)
}
return renderItem ? (
renderItem(item, index)
) : (
<ListCard
list={item}
testID={`list-${item.name}`}
style={styles.item}
/>
)
},
[error, onRefresh, renderItem, pal],
)
const FlatListCom = inline ? RNFlatList : FlatList
return (
<View testID={testID} style={style}>
{items.length > 0 && (
<FlatListCom
testID={testID ? `${testID}-flatlist` : undefined}
data={items}
keyExtractor={(item: any) => item._reactKey}
renderItem={renderItemInner}
refreshControl={
<RefreshControl
refreshing={isRefreshing}
onRefresh={onRefresh}
tintColor={pal.colors.text}
titleColor={pal.colors.text}
/>
}
contentContainerStyle={[s.contentContainer]}
removeClippedSubviews={true}
// @ts-ignore our .web version only -prf
desktopFixedHeight
/>
)}
</View>
)
}
const styles = StyleSheet.create({
item: {
paddingHorizontal: 18,
paddingVertical: 4,
},
})