diff --git a/src/view/com/composer/Prompt.tsx b/src/view/com/composer/Prompt.tsx new file mode 100644 index 00000000..4a84c716 --- /dev/null +++ b/src/view/com/composer/Prompt.tsx @@ -0,0 +1,63 @@ +import React from 'react' +import {StyleSheet, Text, TouchableOpacity, View} from 'react-native' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {colors} from '../../lib/styles' +import {useStores} from '../../../state' +import {UserAvatar} from '../util/UserAvatar' + +export function ComposePrompt({onPressCompose}: {onPressCompose: () => void}) { + const store = useStores() + const onPressAvatar = () => { + store.nav.navigate(`/profile/${store.me.handle}`) + } + return ( + + + + + + What's happening? + + + Post + + + ) +} + +const styles = StyleSheet.create({ + container: { + borderRadius: 6, + margin: 2, + marginBottom: 0, + paddingHorizontal: 10, + paddingVertical: 10, + flexDirection: 'row', + alignItems: 'center', + backgroundColor: colors.white, + }, + avatar: { + width: 50, + }, + textContainer: { + marginLeft: 10, + flex: 1, + }, + text: { + color: colors.gray4, + fontSize: 17, + }, + btn: { + backgroundColor: colors.gray1, + paddingVertical: 6, + paddingHorizontal: 14, + borderRadius: 30, + }, + btnText: { + color: colors.gray5, + }, +}) diff --git a/src/view/com/posts/Feed.tsx b/src/view/com/posts/Feed.tsx index d10be821..3a2bc618 100644 --- a/src/view/com/posts/Feed.tsx +++ b/src/view/com/posts/Feed.tsx @@ -6,23 +6,34 @@ import {EmptyState} from '../util/EmptyState' import {ErrorMessage} from '../util/ErrorMessage' import {FeedModel, FeedItemModel} from '../../../state/models/feed-view' import {FeedItem} from './FeedItem' +import {ComposePrompt} from '../composer/Prompt' + +const COMPOSE_PROMPT_ITEM = {_reactKey: '__prompt__'} export const Feed = observer(function Feed({ feed, style, scrollElRef, + onPressCompose, onPressTryAgain, }: { feed: FeedModel style?: StyleProp scrollElRef?: MutableRefObject | null> + onPressCompose?: () => void onPressTryAgain?: () => void }) { // TODO optimize renderItem or FeedItem, we're getting this notice from RN: -prf // 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: FeedItemModel}) => { + if (item === COMPOSE_PROMPT_ITEM) { + return + } else { + return + } + } const onRefresh = () => { feed.refresh().catch(err => console.error('Failed to refresh', err)) } @@ -45,7 +56,7 @@ export const Feed = observer(function Feed({ {feed.hasContent && ( item._reactKey} renderItem={renderItem} refreshing={feed.isRefreshing} diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx index 609b1ca3..d90d337a 100644 --- a/src/view/screens/Home.tsx +++ b/src/view/screens/Home.tsx @@ -65,7 +65,7 @@ export const Home = observer(function Home({ } }, [visible, store]) - const onComposePress = () => { + const onPressCompose = () => { store.shell.openComposer({onPost: onCreatePost}) } const onCreatePost = () => { @@ -81,12 +81,12 @@ export const Home = observer(function Home({ return ( - {defaultFeedView.hasNewLatest ? ( @@ -95,7 +95,6 @@ export const Home = observer(function Home({ Load new posts ) : undefined} - ) }) diff --git a/src/view/screens/Notifications.tsx b/src/view/screens/Notifications.tsx index 7e4de497..1e7abdb9 100644 --- a/src/view/screens/Notifications.tsx +++ b/src/view/screens/Notifications.tsx @@ -1,7 +1,6 @@ import React, {useState, useEffect} from 'react' import {View} from 'react-native' import {ViewHeader} from '../com/util/ViewHeader' -import {FAB} from '../com/util/FloatingActionButton' import {Feed} from '../com/notifications/Feed' import {useStores} from '../../state' import {NotificationsViewModel} from '../../state/models/notifications-view' @@ -37,9 +36,6 @@ export const Notifications = ({navIdx, visible}: ScreenParams) => { } }, [visible, store]) - const onComposePress = () => { - store.shell.openComposer({}) - } const onPressTryAgain = () => { notesView?.refresh() } @@ -48,7 +44,6 @@ export const Notifications = ({navIdx, visible}: ScreenParams) => { {notesView && } - ) } diff --git a/src/view/screens/Profile.tsx b/src/view/screens/Profile.tsx index e637c6ad..1187e626 100644 --- a/src/view/screens/Profile.tsx +++ b/src/view/screens/Profile.tsx @@ -3,7 +3,6 @@ import {StyleSheet, Text, View} from 'react-native' import {observer} from 'mobx-react-lite' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {ViewSelector} from '../com/util/ViewSelector' -import {FAB} from '../com/util/FloatingActionButton' import {ScreenParams} from '../routes' import {ProfileUiModel, Sections} from '../../state/models/profile-ui' import {MembershipItem} from '../../state/models/memberships-view' @@ -86,9 +85,6 @@ export const Profile = observer(({navIdx, visible, params}: ScreenParams) => { ), ) } - const onComposePress = () => { - store.shell.openComposer({}) - } // rendering // = @@ -241,7 +237,6 @@ export const Profile = observer(({navIdx, visible, params}: ScreenParams) => { ) : ( renderHeader() )} - ) })