Optimize and refactor profile rendering a bit

zio/stable
Paul Frazee 2023-03-15 15:46:39 -05:00
parent 8a279b8d2c
commit 474b4b7840
2 changed files with 90 additions and 76 deletions

View File

@ -15,6 +15,10 @@ export interface ProfileUiParams {
} }
export class ProfileUiModel { export class ProfileUiModel {
static LOADING_ITEM = {_reactKey: '__loading__'}
static END_ITEM = {_reactKey: '__end__'}
static EMPTY_ITEM = {_reactKey: '__empty__'}
// data // data
profile: ProfileViewModel profile: ProfileViewModel
feed: FeedModel feed: FeedModel
@ -76,6 +80,51 @@ export class ProfileUiModel {
return this.selectorItems[this.selectedViewIndex] return this.selectorItems[this.selectedViewIndex]
} }
get uiItems() {
let arr: any[] = []
if (this.isInitialLoading) {
arr = arr.concat([ProfileUiModel.LOADING_ITEM])
} else if (this.currentView.hasError) {
arr = arr.concat([
{
_reactKey: '__error__',
error: this.currentView.error,
},
])
} else {
if (
this.selectedView === Sections.Posts ||
this.selectedView === Sections.PostsWithReplies
) {
if (this.feed.hasContent) {
if (this.selectedView === Sections.Posts) {
arr = this.feed.nonReplyFeed
} else {
arr = this.feed.feed.slice()
}
if (!this.feed.hasMore) {
arr = arr.concat([ProfileUiModel.END_ITEM])
}
} else if (this.feed.isEmpty) {
arr = arr.concat([ProfileUiModel.EMPTY_ITEM])
}
} else {
arr = arr.concat([ProfileUiModel.EMPTY_ITEM])
}
}
return arr
}
get showLoadingMoreFooter() {
if (
this.selectedView === Sections.Posts ||
this.selectedView === Sections.PostsWithReplies
) {
return this.feed.hasContent && this.feed.hasMore && this.feed.isLoading
}
return false
}
// public api // public api
// = // =

View File

@ -8,6 +8,7 @@ import {ViewSelector} from '../com/util/ViewSelector'
import {CenteredView} from '../com/util/Views' import {CenteredView} from '../com/util/Views'
import {ProfileUiModel, Sections} from 'state/models/ui/profile' import {ProfileUiModel, Sections} from 'state/models/ui/profile'
import {useStores} from 'state/index' import {useStores} from 'state/index'
import {FeedItemModel} from 'state/models/feed-view'
import {ProfileHeader} from '../com/profile/ProfileHeader' import {ProfileHeader} from '../com/profile/ProfileHeader'
import {FeedItem} from '../com/posts/FeedItem' import {FeedItem} from '../com/posts/FeedItem'
import {PostFeedLoadingPlaceholder} from '../com/util/LoadingPlaceholder' import {PostFeedLoadingPlaceholder} from '../com/util/LoadingPlaceholder'
@ -21,10 +22,6 @@ import {useOnMainScroll} from 'lib/hooks/useOnMainScroll'
import {useAnalytics} from 'lib/analytics' import {useAnalytics} from 'lib/analytics'
import {ComposeIcon2} from 'lib/icons' import {ComposeIcon2} from 'lib/icons'
const LOADING_ITEM = {_reactKey: '__loading__'}
const END_ITEM = {_reactKey: '__end__'}
const EMPTY_ITEM = {_reactKey: '__empty__'}
type Props = NativeStackScreenProps<CommonNavigatorParams, 'Profile'> type Props = NativeStackScreenProps<CommonNavigatorParams, 'Profile'>
export const ProfileScreen = withAuthRequired( export const ProfileScreen = withAuthRequired(
observer(({route}: Props) => { observer(({route}: Props) => {
@ -73,48 +70,44 @@ export const ProfileScreen = withAuthRequired(
const onSelectView = (index: number) => { const onSelectView = (index: number) => {
uiState.setSelectedViewIndex(index) uiState.setSelectedViewIndex(index)
} }
const onRefresh = () => { const onRefresh = React.useCallback(() => {
uiState uiState
.refresh() .refresh()
.catch((err: any) => .catch((err: any) =>
store.log.error('Failed to refresh user profile', err), store.log.error('Failed to refresh user profile', err),
) )
} }, [uiState, store])
const onEndReached = () => { const onEndReached = React.useCallback(() => {
uiState uiState
.loadMore() .loadMore()
.catch((err: any) => .catch((err: any) =>
store.log.error('Failed to load more entries in user profile', err), store.log.error('Failed to load more entries in user profile', err),
) )
} }, [uiState, store])
const onPressTryAgain = () => { const onPressTryAgain = React.useCallback(() => {
uiState.setup() uiState.setup()
} }, [uiState])
// rendering // rendering
// = // =
const renderHeader = () => { const renderHeader = React.useCallback(() => {
if (!uiState) { if (!uiState) {
return <View /> return <View />
} }
return <ProfileHeader view={uiState.profile} onRefreshAll={onRefresh} /> return <ProfileHeader view={uiState.profile} onRefreshAll={onRefresh} />
} }, [uiState, onRefresh])
let renderItem const Footer = React.useMemo(() => {
let Footer return uiState.showLoadingMoreFooter ? LoadingMoreFooter : undefined
let items: any[] = [] }, [uiState.showLoadingMoreFooter])
if (uiState) { const renderItem = React.useCallback(
if (uiState.isInitialLoading) { (item: any) => {
items = items.concat([LOADING_ITEM]) if (item === ProfileUiModel.END_ITEM) {
renderItem = () => <PostFeedLoadingPlaceholder /> return <Text style={styles.endItem}>- end of feed -</Text>
} else if (uiState.currentView.hasError) { } else if (item === ProfileUiModel.LOADING_ITEM) {
items = items.concat([ return <PostFeedLoadingPlaceholder />
{ } else if (item._reactKey === '__error__') {
_reactKey: '__error__', return (
error: uiState.currentView.error,
},
])
renderItem = (item: any) => (
<View style={s.p5}> <View style={s.p5}>
<ErrorMessage <ErrorMessage
message={item.error} message={item.error}
@ -122,49 +115,21 @@ export const ProfileScreen = withAuthRequired(
/> />
</View> </View>
) )
} else { } else if (item === ProfileUiModel.EMPTY_ITEM) {
if (
uiState.selectedView === Sections.Posts ||
uiState.selectedView === Sections.PostsWithReplies
) {
if (uiState.feed.hasContent) {
if (uiState.selectedView === Sections.Posts) {
items = uiState.feed.nonReplyFeed
} else {
items = uiState.feed.feed.slice()
}
if (!uiState.feed.hasMore) {
items = items.concat([END_ITEM])
} else if (uiState.feed.isLoading) {
Footer = LoadingMoreFooter
}
renderItem = (item: any) => {
if (item === END_ITEM) {
return <Text style={styles.endItem}>- end of feed -</Text>
}
return ( return (
<FeedItem item={item} ignoreMuteFor={uiState.profile.did} />
)
}
} else if (uiState.feed.isEmpty) {
items = items.concat([EMPTY_ITEM])
renderItem = () => (
<EmptyState <EmptyState
icon={['far', 'message']} icon={['far', 'message']}
message="No posts yet!" message="No posts yet!"
style={styles.emptyState} style={styles.emptyState}
/> />
) )
} else if (item instanceof FeedItemModel) {
return <FeedItem item={item} ignoreMuteFor={uiState.profile.did} />
} }
} else { return <View />
items = items.concat([EMPTY_ITEM]) },
renderItem = () => <Text>TODO</Text> [onPressTryAgain, uiState.profile.did],
} )
}
}
if (!renderItem) {
renderItem = () => <View />
}
return ( return (
<View testID="profileView" style={styles.container}> <View testID="profileView" style={styles.container}>
@ -180,7 +145,7 @@ export const ProfileScreen = withAuthRequired(
<ViewSelector <ViewSelector
swipeEnabled={false} swipeEnabled={false}
sections={uiState.selectorItems} sections={uiState.selectorItems}
items={items} items={uiState.uiItems}
renderHeader={renderHeader} renderHeader={renderHeader}
renderItem={renderItem} renderItem={renderItem}
ListFooterComponent={Footer} ListFooterComponent={Footer}