Simplify the RecommendedFeeds with breakpoint components
This commit is contained in:
Paul Frazee
parent
3fa9b6daba
commit
8bc8dcc094
6 changed files with 203 additions and 259 deletions
|
|
@ -1,11 +1,176 @@
|
||||||
import 'react'
|
import React from 'react'
|
||||||
import {withBreakpoints} from 'view/com/util/layouts/withBreakpoints'
|
import {FlatList, StyleSheet, View} from 'react-native'
|
||||||
import {RecommendedFeedsDesktop} from './RecommendedFeedsDesktop'
|
import {observer} from 'mobx-react-lite'
|
||||||
import {RecommendedFeedsTablet} from './RecommendedFeedsTablet'
|
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
||||||
import {RecommendedFeedsMobile} from './RecommendedFeedsMobile'
|
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(
|
type Props = {
|
||||||
RecommendedFeedsMobile,
|
next: () => void
|
||||||
RecommendedFeedsTablet,
|
}
|
||||||
RecommendedFeedsDesktop,
|
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,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
|
||||||
|
|
@ -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',
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
@ -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,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
@ -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
Normal file
8
src/view/com/util/layouts/Breakpoints.tsx
Normal 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
Normal file
20
src/view/com/util/layouts/Breakpoints.web.tsx
Normal 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>
|
||||||
|
)
|
||||||
Loading…
Add table
Add a link
Reference in a new issue