zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

Simplify the RecommendedFeeds with breakpoint components

zio/stable
Paul Frazee 2023-08-30 16:13:09 -07:00
parent 3fa9b6daba
commit 8bc8dcc094
6 changed files with 203 additions and 259 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

185
src/view/com/auth/onboarding/RecommendedFeeds.tsx
View File

@ -1,11 +1,176 @@
import 'react'
import {withBreakpoints} from 'view/com/util/layouts/withBreakpoints'
import {RecommendedFeedsDesktop} from './RecommendedFeedsDesktop'
import {RecommendedFeedsTablet} from './RecommendedFeedsTablet'
import {RecommendedFeedsMobile} from './RecommendedFeedsMobile'
import React from 'react'
import {FlatList, StyleSheet, View} from 'react-native'
import {observer} from 'mobx-react-lite'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {TabletOrDesktop, Mobile} from 'view/com/util/layouts/Breakpoints'
import {Text} from 'view/com/util/text/Text'
import {ViewHeader} from 'view/com/util/ViewHeader'
import {TitleColumnLayout} from 'view/com/util/layouts/TitleColumnLayout'
import {Button} from 'view/com/util/forms/Button'
import {RecommendedFeedsItem} from './RecommendedFeedsItem'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {usePalette} from 'lib/hooks/usePalette'
import {RECOMMENDED_FEEDS} from 'lib/constants'
export const RecommendedFeeds = withBreakpoints(
RecommendedFeedsMobile,
RecommendedFeedsTablet,
RecommendedFeedsDesktop,
)
type Props = {
next: () => void
}
export const RecommendedFeeds = observer(({next}: Props) => {
const pal = usePalette('default')
const {isTabletOrMobile} = useWebMediaQueries()
const title = (
<>
<Text
style={[
pal.textLight,
tdStyles.title1,
isTabletOrMobile && tdStyles.title1Small,
]}>
Choose your
</Text>
<Text
style={[
pal.link,
tdStyles.title2,
isTabletOrMobile && tdStyles.title2Small,
]}>
Recomended
</Text>
<Text
style={[
pal.link,
tdStyles.title2,
isTabletOrMobile && tdStyles.title2Small,
]}>
Feeds
</Text>
<Text type="2xl-medium" style={[pal.textLight, tdStyles.description]}>
Feeds are created by users to curate content. Choose some feeds that you
find interesting.
</Text>
<View
style={{
flexDirection: 'row',
justifyContent: 'flex-end',
marginTop: 20,
}}>
<Button onPress={next} testID="continueBtn">
<View
style={{
flexDirection: 'row',
alignItems: 'center',
paddingLeft: 2,
gap: 6,
}}>
<Text
type="2xl-medium"
style={{color: '#fff', position: 'relative', top: -1}}>
Done
</Text>
<FontAwesomeIcon icon="angle-right" color="#fff" size={14} />
</View>
</Button>
</View>
</>
)
return (
<>
<TabletOrDesktop>
<TitleColumnLayout
testID="recommendedFeedsScreen"
title={title}
horizontal
titleStyle={isTabletOrMobile ? undefined : {minWidth: 470}}
contentStyle={{paddingHorizontal: 0}}>
<FlatList
data={RECOMMENDED_FEEDS}
renderItem={({item}) => <RecommendedFeedsItem {...item} />}
keyExtractor={item => item.did + item.rkey}
style={{flex: 1}}
/>
</TitleColumnLayout>
</TabletOrDesktop>
<Mobile>
<View style={[mStyles.container]} testID="recommendedFeedsScreen">
<ViewHeader
title="Recommended Feeds"
showBackButton={false}
showOnDesktop
/>
<Text type="lg-medium" style={[pal.text, mStyles.header]}>
Check out some recommended feeds. Tap + to add them to your list of
pinned feeds.
</Text>
<FlatList
data={RECOMMENDED_FEEDS}
renderItem={({item}) => <RecommendedFeedsItem {...item} />}
keyExtractor={item => item.did + item.rkey}
style={{flex: 1}}
/>
<Button
onPress={next}
label="Continue"
testID="continueBtn"
style={mStyles.button}
labelStyle={mStyles.buttonText}
/>
</View>
</Mobile>
</>
)
})
const tdStyles = StyleSheet.create({
container: {
flex: 1,
marginHorizontal: 16,
justifyContent: 'space-between',
},
title1: {
fontSize: 36,
fontWeight: '800',
textAlign: 'right',
},
title1Small: {
fontSize: 24,
},
title2: {
fontSize: 58,
fontWeight: '800',
textAlign: 'right',
},
title2Small: {
fontSize: 36,
},
description: {
maxWidth: 400,
marginTop: 10,
marginLeft: 'auto',
textAlign: 'right',
},
})
const mStyles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'space-between',
},
header: {
marginBottom: 16,
marginHorizontal: 16,
},
button: {
marginBottom: 16,
marginHorizontal: 16,
marginTop: 16,
},
buttonText: {
textAlign: 'center',
fontSize: 18,
paddingVertical: 4,
},
})

92
src/view/com/auth/onboarding/RecommendedFeedsDesktop.tsx
View File

@ -1,92 +0,0 @@
import React from 'react'
import {FlatList, StyleSheet, View} from 'react-native'
import {observer} from 'mobx-react-lite'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {Text} from 'view/com/util/text/Text'
import {TitleColumnLayout} from 'view/com/util/layouts/TitleColumnLayout'
import {Button} from 'view/com/util/forms/Button'
import {RecommendedFeedsItem} from './RecommendedFeedsItem'
import {usePalette} from 'lib/hooks/usePalette'
import {RECOMMENDED_FEEDS} from 'lib/constants'
type Props = {
next: () => void
}
export const RecommendedFeedsDesktop = observer(({next}: Props) => {
const pal = usePalette('default')
const title = (
<>
<Text style={[pal.textLight, styles.title1]}>Choose your</Text>
<Text style={[pal.link, styles.title2]}>Recomended</Text>
<Text style={[pal.link, styles.title2]}>Feeds</Text>
<Text type="2xl-medium" style={[pal.textLight, styles.description]}>
Feeds are created by users to curate content. Choose some feeds that you
find interesting.
</Text>
<View
style={{
flexDirection: 'row',
justifyContent: 'flex-end',
marginTop: 20,
}}>
<Button onPress={next} testID="continueBtn">
<View
style={{
flexDirection: 'row',
alignItems: 'center',
paddingLeft: 2,
gap: 6,
}}>
<Text
type="2xl-medium"
style={{color: '#fff', position: 'relative', top: -1}}>
Done
</Text>
<FontAwesomeIcon icon="angle-right" color="#fff" size={14} />
</View>
</Button>
</View>
</>
)
return (
<TitleColumnLayout
testID="recommendedFeedsScreen"
title={title}
horizontal
titleStyle={{minWidth: 470}}
contentStyle={{paddingHorizontal: 0}}>
<FlatList
data={RECOMMENDED_FEEDS}
renderItem={({item}) => <RecommendedFeedsItem {...item} />}
keyExtractor={item => item.did + item.rkey}
style={{flex: 1}}
/>
</TitleColumnLayout>
)
})
const styles = StyleSheet.create({
container: {
flex: 1,
marginHorizontal: 16,
justifyContent: 'space-between',
},
title1: {
fontSize: 36,
fontWeight: '800',
textAlign: 'right',
},
title2: {
fontSize: 58,
fontWeight: '800',
textAlign: 'right',
},
description: {
maxWidth: 400,
marginTop: 10,
marginLeft: 'auto',
textAlign: 'right',
},
})

66
src/view/com/auth/onboarding/RecommendedFeedsMobile.tsx
View File

@ -1,66 +0,0 @@
import React from 'react'
import {FlatList, StyleSheet, View} from 'react-native'
import {observer} from 'mobx-react-lite'
import {Text} from 'view/com/util/text/Text'
import {Button} from 'view/com/util/forms/Button'
import {ViewHeader} from 'view/com/util/ViewHeader'
import {RecommendedFeedsItem} from './RecommendedFeedsItem'
import {usePalette} from 'lib/hooks/usePalette'
import {RECOMMENDED_FEEDS} from 'lib/constants'
type Props = {
next: () => void
}
export const RecommendedFeedsMobile = observer(({next}: Props) => {
const pal = usePalette('default')
return (
<View style={[styles.container]} testID="recommendedFeedsScreen">
<ViewHeader
title="Recommended Feeds"
showBackButton={false}
showOnDesktop
/>
<Text type="lg-medium" style={[pal.text, styles.header]}>
Check out some recommended feeds. Tap + to add them to your list of
pinned feeds.
</Text>
<FlatList
data={RECOMMENDED_FEEDS}
renderItem={({item}) => <RecommendedFeedsItem {...item} />}
keyExtractor={item => item.did + item.rkey}
style={{flex: 1}}
/>
<Button
onPress={next}
label="Continue"
testID="continueBtn"
style={styles.button}
labelStyle={styles.buttonText}
/>
</View>
)
})
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'space-between',
},
header: {
marginBottom: 16,
marginHorizontal: 16,
},
button: {
marginBottom: 16,
marginHorizontal: 16,
marginTop: 16,
},
buttonText: {
textAlign: 'center',
fontSize: 18,
paddingVertical: 4,
},
})

91
src/view/com/auth/onboarding/RecommendedFeedsTablet.tsx
View File

@ -1,91 +0,0 @@
import React from 'react'
import {FlatList, StyleSheet, View} from 'react-native'
import {observer} from 'mobx-react-lite'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {Text} from 'view/com/util/text/Text'
import {TitleColumnLayout} from 'view/com/util/layouts/TitleColumnLayout'
import {Button} from 'view/com/util/forms/Button'
import {RecommendedFeedsItem} from './RecommendedFeedsItem'
import {usePalette} from 'lib/hooks/usePalette'
import {RECOMMENDED_FEEDS} from 'lib/constants'
type Props = {
next: () => void
}
export const RecommendedFeedsTablet = observer(({next}: Props) => {
const pal = usePalette('default')
const title = (
<>
<Text style={[pal.textLight, styles.title1]}>Choose your</Text>
<Text style={[pal.link, styles.title2]}>Recomended</Text>
<Text style={[pal.link, styles.title2]}>Feeds</Text>
<Text type="2xl-medium" style={[pal.textLight, styles.description]}>
Feeds are created by users to curate content. Choose some feeds that you
find interesting.
</Text>
<View
style={{
flexDirection: 'row',
justifyContent: 'flex-end',
marginTop: 20,
}}>
<Button onPress={next} testID="continueBtn">
<View
style={{
flexDirection: 'row',
alignItems: 'center',
paddingLeft: 2,
gap: 6,
}}>
<Text
type="2xl-medium"
style={{color: '#fff', position: 'relative', top: -1}}>
Done
</Text>
<FontAwesomeIcon icon="angle-right" color="#fff" size={14} />
</View>
</Button>
</View>
</>
)
return (
<TitleColumnLayout
testID="recommendedFeedsScreen"
title={title}
horizontal
contentStyle={{paddingHorizontal: 0}}>
<FlatList
data={RECOMMENDED_FEEDS}
renderItem={({item}) => <RecommendedFeedsItem {...item} />}
keyExtractor={item => item.did + item.rkey}
style={{flex: 1}}
/>
</TitleColumnLayout>
)
})
const styles = StyleSheet.create({
container: {
flex: 1,
marginHorizontal: 16,
justifyContent: 'space-between',
},
title1: {
fontSize: 24,
fontWeight: '800',
textAlign: 'right',
},
title2: {
fontSize: 36,
fontWeight: '800',
textAlign: 'right',
},
description: {
maxWidth: 400,
marginTop: 10,
marginLeft: 'auto',
textAlign: 'right',
},
})

8
src/view/com/util/layouts/Breakpoints.tsx 100644
View File

@ -0,0 +1,8 @@
import React from 'react'
export const Desktop = ({}: React.PropsWithChildren<{}>) => null
export const TabletOrDesktop = ({}: React.PropsWithChildren<{}>) => null
export const Tablet = ({}: React.PropsWithChildren<{}>) => null
export const TabletOrMobile = ({children}: React.PropsWithChildren<{}>) =>
children
export const Mobile = ({children}: React.PropsWithChildren<{}>) => children

20
src/view/com/util/layouts/Breakpoints.web.tsx 100644
View File

@ -0,0 +1,20 @@
import React from 'react'
import MediaQuery from 'react-responsive'
export const Desktop = ({children}: React.PropsWithChildren<{}>) => (
<MediaQuery minWidth={1224}>{children}</MediaQuery>
)
export const TabletOrDesktop = ({children}: React.PropsWithChildren<{}>) => (
<MediaQuery minWidth={800}>{children}</MediaQuery>
)
export const Tablet = ({children}: React.PropsWithChildren<{}>) => (
<MediaQuery minWidth={800} maxWidth={1224}>
{children}
</MediaQuery>
)
export const TabletOrMobile = ({children}: React.PropsWithChildren<{}>) => (
<MediaQuery maxWidth={1224}>{children}</MediaQuery>
)
export const Mobile = ({children}: React.PropsWithChildren<{}>) => (
<MediaQuery maxWidth={800}>{children}</MediaQuery>
)