Web: go lighter for now, ditch the composer prompt in feed

zio/stable
Paul Frazee 2023-02-23 10:48:50 -06:00
parent 86652c071a
commit ac655a0cf4
6 changed files with 16 additions and 66 deletions

View File

@ -1,5 +0,0 @@
export function ComposerPrompt(_opts: {
onPressCompose: (imagesOpen?: boolean) => void
}) {
return null
}

View File

@ -1,41 +0,0 @@
import React from 'react'
import {StyleSheet, TouchableWithoutFeedback, View} from 'react-native'
import {Text} from '../util/text/Text'
import {usePalette} from 'lib/hooks/usePalette'
import {s} from 'lib/styles'
export function ComposerPrompt({
onPressCompose,
}: {
onPressCompose: (imagesOpen?: boolean) => void
}) {
const pal = usePalette('default')
return (
<TouchableWithoutFeedback onPress={() => onPressCompose(false)}>
<View style={[pal.view, pal.border, styles.container]}>
<Text type="xl" style={pal.textLight}>
What's up?
</Text>
<View style={s.flex1} />
<View style={[styles.btn, pal.btn]}>
<Text>Post</Text>
</View>
</View>
</TouchableWithoutFeedback>
)
}
const styles = StyleSheet.create({
container: {
paddingVertical: 16,
paddingHorizontal: 18,
flexDirection: 'row',
alignItems: 'center',
borderTopWidth: 1,
},
btn: {
paddingVertical: 6,
paddingHorizontal: 14,
borderRadius: 30,
},
})

View File

@ -13,12 +13,10 @@ import {EmptyState} from '../util/EmptyState'
import {ErrorMessage} from '../util/error/ErrorMessage' import {ErrorMessage} from '../util/error/ErrorMessage'
import {FeedModel} from 'state/models/feed-view' import {FeedModel} from 'state/models/feed-view'
import {FeedItem} from './FeedItem' import {FeedItem} from './FeedItem'
import {ComposerPrompt} from './ComposerPrompt'
import {OnScrollCb} from 'lib/hooks/useOnMainScroll' import {OnScrollCb} from 'lib/hooks/useOnMainScroll'
import {s} from 'lib/styles' import {s} from 'lib/styles'
import {useAnalytics} from 'lib/analytics' import {useAnalytics} from 'lib/analytics'
const COMPOSE_PROMPT_ITEM = {_reactKey: '__prompt__'}
const EMPTY_FEED_ITEM = {_reactKey: '__empty__'} const EMPTY_FEED_ITEM = {_reactKey: '__empty__'}
const ERROR_FEED_ITEM = {_reactKey: '__error__'} const ERROR_FEED_ITEM = {_reactKey: '__error__'}
@ -27,7 +25,6 @@ export const Feed = observer(function Feed({
style, style,
scrollElRef, scrollElRef,
onPressTryAgain, onPressTryAgain,
onPressCompose,
onScroll, onScroll,
testID, testID,
headerOffset = 0, headerOffset = 0,
@ -36,7 +33,6 @@ export const Feed = observer(function Feed({
style?: StyleProp<ViewStyle> style?: StyleProp<ViewStyle>
scrollElRef?: MutableRefObject<FlatList<any> | null> scrollElRef?: MutableRefObject<FlatList<any> | null>
onPressTryAgain?: () => void onPressTryAgain?: () => void
onPressCompose: (imagesOpen?: boolean) => void
onScroll?: OnScrollCb onScroll?: OnScrollCb
testID?: string testID?: string
headerOffset?: number headerOffset?: number
@ -47,7 +43,6 @@ export const Feed = observer(function Feed({
const data = React.useMemo(() => { const data = React.useMemo(() => {
let feedItems: any[] = [] let feedItems: any[] = []
if (feed.hasLoaded) { if (feed.hasLoaded) {
feedItems = feedItems.concat([COMPOSE_PROMPT_ITEM])
if (feed.hasError) { if (feed.hasError) {
feedItems = feedItems.concat([ERROR_FEED_ITEM]) feedItems = feedItems.concat([ERROR_FEED_ITEM])
} }
@ -91,9 +86,7 @@ export const Feed = observer(function Feed({
// like PureComponent, shouldComponentUpdate, etc // like PureComponent, shouldComponentUpdate, etc
const renderItem = React.useCallback( const renderItem = React.useCallback(
({item}: {item: any}) => { ({item}: {item: any}) => {
if (item === COMPOSE_PROMPT_ITEM) { if (item === EMPTY_FEED_ITEM) {
return <ComposerPrompt onPressCompose={onPressCompose} />
} else if (item === EMPTY_FEED_ITEM) {
return ( return (
<EmptyState <EmptyState
icon="bars" icon="bars"
@ -111,7 +104,7 @@ export const Feed = observer(function Feed({
} }
return <FeedItem item={item} /> return <FeedItem item={item} />
}, },
[feed, onPressTryAgain, onPressCompose], [feed, onPressTryAgain],
) )
const FeedFooter = React.useCallback( const FeedFooter = React.useCallback(

View File

@ -11,7 +11,7 @@ import {ScreenParams} from '../routes'
import {s} from 'lib/styles' import {s} from 'lib/styles'
import {useOnMainScroll} from 'lib/hooks/useOnMainScroll' import {useOnMainScroll} from 'lib/hooks/useOnMainScroll'
import {useAnalytics} from 'lib/analytics' import {useAnalytics} from 'lib/analytics'
import {isWeb} from 'platform/detection' import {isWeb} from '../../platform/detection'
const HEADER_HEIGHT = 42 const HEADER_HEIGHT = 42
@ -100,7 +100,6 @@ export const Home = observer(function Home({navIdx, visible}: ScreenParams) {
scrollElRef={scrollElRef} scrollElRef={scrollElRef}
style={s.h100pct} style={s.h100pct}
onPressTryAgain={onPressTryAgain} onPressTryAgain={onPressTryAgain}
onPressCompose={onPressCompose}
onScroll={onMainScroll} onScroll={onMainScroll}
headerOffset={HEADER_HEIGHT} headerOffset={HEADER_HEIGHT}
/> />

View File

@ -92,27 +92,27 @@ export const DesktopHeader = observer(function DesktopHeader({}: {
const onPressCompose = () => store.shell.openComposer({}) const onPressCompose = () => store.shell.openComposer({})
return ( return (
<View style={[styles.header, pal.borderDark, pal.view]}> <View style={[styles.header, pal.borderDark, pal.view]}>
<Text type="title-2xl" style={[pal.text, styles.title]}> <Text type="title-xl" style={[pal.text, styles.title]}>
Bluesky Bluesky
</Text> </Text>
<View style={styles.space30} /> <View style={styles.space30} />
<NavItem <NavItem
href="/" href="/"
icon={<HomeIcon size={28} />} icon={<HomeIcon size={24} />}
iconFilled={<HomeIconSolid size={28} />} iconFilled={<HomeIconSolid size={24} />}
/> />
<View style={styles.space15} /> <View style={styles.space15} />
<NavItem <NavItem
href="/search" href="/search"
icon={<MagnifyingGlassIcon size={28} />} icon={<MagnifyingGlassIcon size={24} />}
iconFilled={<MagnifyingGlassIcon strokeWidth={3} size={28} />} iconFilled={<MagnifyingGlassIcon strokeWidth={3} size={24} />}
/> />
<View style={styles.space15} /> <View style={styles.space15} />
<NavItem <NavItem
href="/notifications" href="/notifications"
count={store.me.notifications.unreadCount} count={store.me.notifications.unreadCount}
icon={<BellIcon size={28} />} icon={<BellIcon size={24} />}
iconFilled={<BellIconSolid size={28} />} iconFilled={<BellIconSolid size={24} />}
/> />
<View style={styles.spaceFlex} /> <View style={styles.spaceFlex} />
<TouchableOpacity style={[styles.newPostBtn]} onPress={onPressCompose}> <TouchableOpacity style={[styles.newPostBtn]} onPress={onPressCompose}>
@ -191,6 +191,10 @@ const styles = StyleSheet.create({
backgroundColor: colors.blue3, backgroundColor: colors.blue3,
}, },
navItemIconWrapper: { navItemIconWrapper: {
alignItems: 'center',
justifyContent: 'center',
width: 28,
height: 28,
marginBottom: 2, marginBottom: 2,
}, },
navItemCount: { navItemCount: {

View File

@ -131,10 +131,10 @@ const styles = StyleSheet.create({
height: '100%', height: '100%',
}, },
bgLight: { bgLight: {
backgroundColor: colors.gray1, backgroundColor: colors.white,
}, },
bgDark: { bgDark: {
backgroundColor: colors.gray1, // TODO backgroundColor: colors.black, // TODO
}, },
visible: { visible: {
display: 'flex', display: 'flex',