diff --git a/src/view/com/notifications/Feed.tsx b/src/view/com/notifications/Feed.tsx index d3a911f2..a6af0f88 100644 --- a/src/view/com/notifications/Feed.tsx +++ b/src/view/com/notifications/Feed.tsx @@ -1,15 +1,14 @@ import React from 'react' import {observer} from 'mobx-react-lite' import {View, FlatList} from 'react-native' -import { - NotificationsViewModel, - NotificationsViewItemModel, -} from '../../../state/models/notifications-view' +import {NotificationsViewModel} from '../../../state/models/notifications-view' import {FeedItem} from './FeedItem' import {NotificationFeedLoadingPlaceholder} from '../util/LoadingPlaceholder' import {ErrorMessage} from '../util/ErrorMessage' import {EmptyState} from '../util/EmptyState' +const EMPTY_FEED_ITEM = {_reactKey: '__empty__'} + export const Feed = observer(function Feed({ view, onPressTryAgain, @@ -21,20 +20,35 @@ export const Feed = observer(function Feed({ // VirtualizedList: You have a large list that is slow to update - make sure your // renderItem function renders components that follow React performance best practices // like PureComponent, shouldComponentUpdate, etc - const renderItem = ({item}: {item: NotificationsViewItemModel}) => ( - - ) + const renderItem = ({item}: {item: any}) => { + if (item === EMPTY_FEED_ITEM) { + return ( + + ) + } + return + } const onRefresh = () => { view.refresh().catch(err => console.error('Failed to refresh', err)) } const onEndReached = () => { view.loadMore().catch(err => console.error('Failed to load more', err)) } + let data + if (view.hasLoaded) { + if (view.isEmpty) { + data = [EMPTY_FEED_ITEM] + } else { + data = view.notifications + } + } return ( - {view.isLoading && !view.isRefreshing && !view.hasContent && ( - - )} + {view.isLoading && !data && } {view.hasError && ( )} - {view.hasLoaded && ( + {data && ( item._reactKey} renderItem={renderItem} refreshing={view.isRefreshing} @@ -53,9 +67,6 @@ export const Feed = observer(function Feed({ onEndReached={onEndReached} /> )} - {view.hasLoaded && view.isEmpty && ( - - )} ) }) diff --git a/src/view/com/posts/Feed.tsx b/src/view/com/posts/Feed.tsx index d37e5137..9e261638 100644 --- a/src/view/com/posts/Feed.tsx +++ b/src/view/com/posts/Feed.tsx @@ -4,11 +4,12 @@ import {View, FlatList, StyleProp, ViewStyle} from 'react-native' import {PostFeedLoadingPlaceholder} from '../util/LoadingPlaceholder' import {EmptyState} from '../util/EmptyState' import {ErrorMessage} from '../util/ErrorMessage' -import {FeedModel, FeedItemModel} from '../../../state/models/feed-view' +import {FeedModel} from '../../../state/models/feed-view' import {FeedItem} from './FeedItem' import {ComposePrompt} from '../composer/Prompt' const COMPOSE_PROMPT_ITEM = {_reactKey: '__prompt__'} +const EMPTY_FEED_ITEM = {_reactKey: '__empty__'} export const Feed = observer(function Feed({ feed, @@ -27,9 +28,17 @@ export const Feed = observer(function Feed({ // VirtualizedList: You have a large list that is slow to update - make sure your // renderItem function renders components that follow React performance best practices // like PureComponent, shouldComponentUpdate, etc - const renderItem = ({item}: {item: FeedItemModel}) => { + const renderItem = ({item}: {item: any}) => { if (item === COMPOSE_PROMPT_ITEM) { return + } else if (item === EMPTY_FEED_ITEM) { + return ( + + ) } else { return } @@ -40,11 +49,18 @@ export const Feed = observer(function Feed({ const onEndReached = () => { feed.loadMore().catch(err => console.error('Failed to load more', err)) } + let data + if (feed.hasLoaded) { + if (feed.isEmpty) { + data = [COMPOSE_PROMPT_ITEM, EMPTY_FEED_ITEM] + } else { + data = [COMPOSE_PROMPT_ITEM].concat(feed.feed) + } + } return ( - {feed.isLoading && !feed.isRefreshing && !feed.hasContent && ( - - )} + {!data && } + {feed.isLoading && !data && } {feed.hasError && ( )} - {feed.hasContent && ( + {feed.hasLoaded && data && ( item._reactKey} renderItem={renderItem} refreshing={feed.isRefreshing} @@ -65,12 +81,6 @@ export const Feed = observer(function Feed({ onEndReached={onEndReached} /> )} - {feed.isEmpty && ( - - - - - )} ) })