diff options
Diffstat (limited to 'src/view/screens/Profile.tsx')
| -rw-r--r-- | src/view/screens/Profile.tsx | 317 |
1 files changed, 161 insertions, 156 deletions
diff --git a/src/view/screens/Profile.tsx b/src/view/screens/Profile.tsx index e0d0a5884..b5073f28d 100644 --- a/src/view/screens/Profile.tsx +++ b/src/view/screens/Profile.tsx @@ -3,6 +3,7 @@ import {ActivityIndicator, StyleSheet, View} from 'react-native' import {observer} from 'mobx-react-lite' import {useFocusEffect} from '@react-navigation/native' import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' +import {withAuthRequired} from 'view/com/auth/withAuthRequired' import {ViewSelector} from '../com/util/ViewSelector' import {CenteredView} from '../com/util/Views' import {ProfileUiModel, Sections} from 'state/models/profile-ui' @@ -25,178 +26,182 @@ const END_ITEM = {_reactKey: '__end__'} const EMPTY_ITEM = {_reactKey: '__empty__'} type Props = NativeStackScreenProps<CommonNavigatorParams, 'Profile'> -export const ProfileScreen = observer(({route}: Props) => { - const store = useStores() - const {screen, track} = useAnalytics() +export const ProfileScreen = withAuthRequired( + observer(({route}: Props) => { + const store = useStores() + const {screen, track} = useAnalytics() - useEffect(() => { - screen('Profile') - }, [screen]) + useEffect(() => { + screen('Profile') + }, [screen]) - const onMainScroll = useOnMainScroll(store) - const [hasSetup, setHasSetup] = useState<boolean>(false) - const uiState = React.useMemo( - () => new ProfileUiModel(store, {user: route.params.name}), - [route.params.name, store], - ) + const onMainScroll = useOnMainScroll(store) + const [hasSetup, setHasSetup] = useState<boolean>(false) + const uiState = React.useMemo( + () => new ProfileUiModel(store, {user: route.params.name}), + [route.params.name, store], + ) - useFocusEffect( - React.useCallback(() => { - let aborted = false - const feedCleanup = uiState.feed.registerListeners() - if (hasSetup) { - uiState.update() - } else { - uiState.setup().then(() => { - if (aborted) { - return - } - setHasSetup(true) - }) - } - return () => { - aborted = true - feedCleanup() - } - }, [hasSetup, uiState]), - ) + useFocusEffect( + React.useCallback(() => { + let aborted = false + const feedCleanup = uiState.feed.registerListeners() + if (hasSetup) { + uiState.update() + } else { + uiState.setup().then(() => { + if (aborted) { + return + } + setHasSetup(true) + }) + } + return () => { + aborted = true + feedCleanup() + } + }, [hasSetup, uiState]), + ) - // events - // = + // events + // = - const onPressCompose = React.useCallback(() => { - track('ProfileScreen:PressCompose') - store.shell.openComposer({}) - }, [store, track]) - const onSelectView = (index: number) => { - uiState.setSelectedViewIndex(index) - } - const onRefresh = () => { - uiState - .refresh() - .catch((err: any) => - store.log.error('Failed to refresh user profile', err), - ) - } - const onEndReached = () => { - uiState - .loadMore() - .catch((err: any) => - store.log.error('Failed to load more entries in user profile', err), - ) - } - const onPressTryAgain = () => { - uiState.setup() - } + const onPressCompose = React.useCallback(() => { + track('ProfileScreen:PressCompose') + store.shell.openComposer({}) + }, [store, track]) + const onSelectView = (index: number) => { + uiState.setSelectedViewIndex(index) + } + const onRefresh = () => { + uiState + .refresh() + .catch((err: any) => + store.log.error('Failed to refresh user profile', err), + ) + } + const onEndReached = () => { + uiState + .loadMore() + .catch((err: any) => + store.log.error('Failed to load more entries in user profile', err), + ) + } + const onPressTryAgain = () => { + uiState.setup() + } - // rendering - // = + // rendering + // = - const renderHeader = () => { - if (!uiState) { - return <View /> + const renderHeader = () => { + if (!uiState) { + return <View /> + } + return <ProfileHeader view={uiState.profile} onRefreshAll={onRefresh} /> } - return <ProfileHeader view={uiState.profile} onRefreshAll={onRefresh} /> - } - let renderItem - let Footer - let items: any[] = [] - if (uiState) { - if (uiState.isInitialLoading) { - items = items.concat([LOADING_ITEM]) - renderItem = () => <PostFeedLoadingPlaceholder /> - } else if (uiState.currentView.hasError) { - items = items.concat([ - { - _reactKey: '__error__', - error: uiState.currentView.error, - }, - ]) - renderItem = (item: any) => ( - <View style={s.p5}> - <ErrorMessage - message={item.error} - onPressTryAgain={onPressTryAgain} - /> - </View> - ) - } else { - 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> + let renderItem + let Footer + let items: any[] = [] + if (uiState) { + if (uiState.isInitialLoading) { + items = items.concat([LOADING_ITEM]) + renderItem = () => <PostFeedLoadingPlaceholder /> + } else if (uiState.currentView.hasError) { + items = items.concat([ + { + _reactKey: '__error__', + error: uiState.currentView.error, + }, + ]) + renderItem = (item: any) => ( + <View style={s.p5}> + <ErrorMessage + message={item.error} + onPressTryAgain={onPressTryAgain} + /> + </View> + ) + } else { + 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 } - return <FeedItem item={item} ignoreMuteFor={uiState.profile.did} /> + renderItem = (item: any) => { + if (item === END_ITEM) { + return <Text style={styles.endItem}>- end of feed -</Text> + } + return ( + <FeedItem item={item} ignoreMuteFor={uiState.profile.did} /> + ) + } + } else if (uiState.feed.isEmpty) { + items = items.concat([EMPTY_ITEM]) + renderItem = () => ( + <EmptyState + icon={['far', 'message']} + message="No posts yet!" + style={styles.emptyState} + /> + ) } - } else if (uiState.feed.isEmpty) { + } else { items = items.concat([EMPTY_ITEM]) - renderItem = () => ( - <EmptyState - icon={['far', 'message']} - message="No posts yet!" - style={styles.emptyState} - /> - ) + renderItem = () => <Text>TODO</Text> } - } else { - items = items.concat([EMPTY_ITEM]) - renderItem = () => <Text>TODO</Text> } } - } - if (!renderItem) { - renderItem = () => <View /> - } + if (!renderItem) { + renderItem = () => <View /> + } - return ( - <View testID="profileView" style={styles.container}> - {uiState.profile.hasError ? ( - <ErrorScreen - testID="profileErrorScreen" - title="Failed to load profile" - message={`There was an issue when attempting to load ${route.params.name}`} - details={uiState.profile.error} - onPressTryAgain={onPressTryAgain} - /> - ) : uiState.profile.hasLoaded ? ( - <ViewSelector - swipeEnabled - sections={uiState.selectorItems} - items={items} - renderHeader={renderHeader} - renderItem={renderItem} - ListFooterComponent={Footer} - refreshing={uiState.isRefreshing || false} - onSelectView={onSelectView} - onScroll={onMainScroll} - onRefresh={onRefresh} - onEndReached={onEndReached} + return ( + <View testID="profileView" style={styles.container}> + {uiState.profile.hasError ? ( + <ErrorScreen + testID="profileErrorScreen" + title="Failed to load profile" + message={`There was an issue when attempting to load ${route.params.name}`} + details={uiState.profile.error} + onPressTryAgain={onPressTryAgain} + /> + ) : uiState.profile.hasLoaded ? ( + <ViewSelector + swipeEnabled + sections={uiState.selectorItems} + items={items} + renderHeader={renderHeader} + renderItem={renderItem} + ListFooterComponent={Footer} + refreshing={uiState.isRefreshing || false} + onSelectView={onSelectView} + onScroll={onMainScroll} + onRefresh={onRefresh} + onEndReached={onEndReached} + /> + ) : ( + <CenteredView>{renderHeader()}</CenteredView> + )} + <FAB + testID="composeFAB" + onPress={onPressCompose} + icon={<ComposeIcon2 strokeWidth={1.5} size={29} style={s.white} />} /> - ) : ( - <CenteredView>{renderHeader()}</CenteredView> - )} - <FAB - testID="composeFAB" - onPress={onPressCompose} - icon={<ComposeIcon2 strokeWidth={1.5} size={29} style={s.white} />} - /> - </View> - ) -}) + </View> + ) + }), +) function LoadingMoreFooter() { return ( |