lenooby09.tech
mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
Fix onboarding on mobile web
+260
-214
+9
-90
src/view/com/auth/onboarding/RecommendedFeeds.tsx
+9
-90
src/view/com/auth/onboarding/RecommendedFeeds.tsx
···
1
-
import React from 'react'
2
-
import {FlatList, StyleSheet, View} from 'react-native'
3
-
import {Text} from 'view/com/util/text/Text'
4
-
import {usePalette} from 'lib/hooks/usePalette'
5
-
import {Button} from 'view/com/util/forms/Button'
6
-
import {observer} from 'mobx-react-lite'
7
-
import {CustomFeed} from 'view/com/feeds/CustomFeed'
8
-
import {useCustomFeed} from 'lib/hooks/useCustomFeed'
9
-
import {makeRecordUri} from 'lib/strings/url-helpers'
10
-
import {ViewHeader} from 'view/com/util/ViewHeader'
11
-
import {isDesktopWeb} from 'platform/detection'
12
-
import {RECOMMENDED_FEEDS} from 'lib/constants'
13
-
14
-
type Props = {
15
-
next: () => void
16
-
}
17
-
export const RecommendedFeeds = observer(({next}: Props) => {
18
-
const pal = usePalette('default')
19
-
20
-
return (
21
-
<View style={[styles.container]} testID="recommendedFeedsScreen">
22
-
<ViewHeader title="Recommended Feeds" showBackButton={false} />
23
-
<Text type="lg-medium" style={[pal.text, styles.header]}>
24
-
Check out some recommended feeds. Tap + to add them to your list of
25
-
pinned feeds.
26
-
</Text>
1
+
import 'react'
2
+
import {withBreakpoints} from 'view/com/util/layouts/withBreakpoints'
3
+
import {RecommendedFeedsDesktop} from './RecommendedFeedsDesktop'
4
+
import {RecommendedFeedsMobile} from './RecommendedFeedsMobile'
27
5
28
-
<FlatList
29
-
data={RECOMMENDED_FEEDS}
30
-
renderItem={({item}) => <Item item={item} />}
31
-
keyExtractor={item => item.did + item.rkey}
32
-
style={{flex: 1}}
33
-
/>
34
-
35
-
<Button
36
-
onPress={next}
37
-
label="Continue"
38
-
testID="continueBtn"
39
-
style={styles.button}
40
-
labelStyle={styles.buttonText}
41
-
/>
42
-
</View>
43
-
)
44
-
})
45
-
46
-
type ItemProps = {
47
-
did: string
48
-
rkey: string
49
-
}
50
-
51
-
const Item = ({item}: {item: ItemProps}) => {
52
-
const uri = makeRecordUri(item.did, 'app.bsky.feed.generator', item.rkey)
53
-
const data = useCustomFeed(uri)
54
-
if (!data) return null
55
-
return (
56
-
<CustomFeed
57
-
item={data}
58
-
key={uri}
59
-
showDescription
60
-
showLikes
61
-
showSaveBtn
62
-
style={[
63
-
{
64
-
// @ts-ignore
65
-
cursor: isDesktopWeb ? 'pointer' : 'auto',
66
-
},
67
-
]}
68
-
/>
69
-
)
70
-
}
71
-
72
-
const styles = StyleSheet.create({
73
-
container: {
74
-
flex: 1,
75
-
justifyContent: 'space-between',
76
-
},
77
-
header: {
78
-
marginBottom: 16,
79
-
marginHorizontal: 16,
80
-
},
81
-
button: {
82
-
marginBottom: 24,
83
-
marginHorizontal: 16,
84
-
marginTop: 16,
85
-
},
86
-
buttonText: {
87
-
textAlign: 'center',
88
-
fontSize: 18,
89
-
paddingVertical: 4,
90
-
},
91
-
})
6
+
export const RecommendedFeeds = withBreakpoints(
7
+
RecommendedFeedsMobile,
8
+
RecommendedFeedsMobile,
9
+
RecommendedFeedsDesktop,
10
+
)
+1
-1
src/view/com/auth/onboarding/RecommendedFeeds.web.tsx
src/view/com/auth/onboarding/RecommendedFeedsDesktop.tsx
+1
-1
src/view/com/auth/onboarding/RecommendedFeeds.web.tsx
src/view/com/auth/onboarding/RecommendedFeedsDesktop.tsx
+95
src/view/com/auth/onboarding/RecommendedFeedsMobile.tsx
+95
src/view/com/auth/onboarding/RecommendedFeedsMobile.tsx
···
1
+
import React from 'react'
2
+
import {FlatList, StyleSheet, View} from 'react-native'
3
+
import {Text} from 'view/com/util/text/Text'
4
+
import {usePalette} from 'lib/hooks/usePalette'
5
+
import {Button} from 'view/com/util/forms/Button'
6
+
import {observer} from 'mobx-react-lite'
7
+
import {CustomFeed} from 'view/com/feeds/CustomFeed'
8
+
import {useCustomFeed} from 'lib/hooks/useCustomFeed'
9
+
import {makeRecordUri} from 'lib/strings/url-helpers'
10
+
import {ViewHeader} from 'view/com/util/ViewHeader'
11
+
import {isDesktopWeb} from 'platform/detection'
12
+
import {RECOMMENDED_FEEDS} from 'lib/constants'
13
+
14
+
type Props = {
15
+
next: () => void
16
+
}
17
+
export const RecommendedFeedsMobile = observer(({next}: Props) => {
18
+
const pal = usePalette('default')
19
+
20
+
return (
21
+
<View style={[styles.container]} testID="recommendedFeedsScreen">
22
+
<ViewHeader
23
+
title="Recommended Feeds"
24
+
showBackButton={false}
25
+
showOnDesktop
26
+
/>
27
+
<Text type="lg-medium" style={[pal.text, styles.header]}>
28
+
Check out some recommended feeds. Tap + to add them to your list of
29
+
pinned feeds.
30
+
</Text>
31
+
32
+
<FlatList
33
+
data={RECOMMENDED_FEEDS}
34
+
renderItem={({item}) => <Item item={item} />}
35
+
keyExtractor={item => item.did + item.rkey}
36
+
style={{flex: 1}}
37
+
/>
38
+
39
+
<Button
40
+
onPress={next}
41
+
label="Continue"
42
+
testID="continueBtn"
43
+
style={styles.button}
44
+
labelStyle={styles.buttonText}
45
+
/>
46
+
</View>
47
+
)
48
+
})
49
+
50
+
type ItemProps = {
51
+
did: string
52
+
rkey: string
53
+
}
54
+
55
+
const Item = ({item}: {item: ItemProps}) => {
56
+
const uri = makeRecordUri(item.did, 'app.bsky.feed.generator', item.rkey)
57
+
const data = useCustomFeed(uri)
58
+
if (!data) return null
59
+
return (
60
+
<CustomFeed
61
+
item={data}
62
+
key={uri}
63
+
showDescription
64
+
showLikes
65
+
showSaveBtn
66
+
style={[
67
+
{
68
+
// @ts-ignore
69
+
cursor: isDesktopWeb ? 'pointer' : 'auto',
70
+
},
71
+
]}
72
+
/>
73
+
)
74
+
}
75
+
76
+
const styles = StyleSheet.create({
77
+
container: {
78
+
flex: 1,
79
+
justifyContent: 'space-between',
80
+
},
81
+
header: {
82
+
marginBottom: 16,
83
+
marginHorizontal: 16,
84
+
},
85
+
button: {
86
+
marginBottom: 24,
87
+
marginHorizontal: 16,
88
+
marginTop: 16,
89
+
},
90
+
buttonText: {
91
+
textAlign: 'center',
92
+
fontSize: 18,
93
+
paddingVertical: 4,
94
+
},
95
+
})
+9
-122
src/view/com/auth/onboarding/Welcome.tsx
+9
-122
src/view/com/auth/onboarding/Welcome.tsx
···
1
-
import React from 'react'
2
-
import {Pressable, StyleSheet, View} from 'react-native'
3
-
import {Text} from 'view/com/util/text/Text'
4
-
import {s} from 'lib/styles'
5
-
import {usePalette} from 'lib/hooks/usePalette'
6
-
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
7
-
import {Button} from 'view/com/util/forms/Button'
8
-
import {observer} from 'mobx-react-lite'
9
-
import {ViewHeader} from 'view/com/util/ViewHeader'
10
-
import {isDesktopWeb} from 'platform/detection'
1
+
import 'react'
2
+
import {withBreakpoints} from 'view/com/util/layouts/withBreakpoints'
3
+
import {WelcomeDesktop} from './WelcomeDesktop'
4
+
import {WelcomeMobile} from './WelcomeMobile'
11
5
12
-
type Props = {
13
-
next: () => void
14
-
skip: () => void
15
-
}
16
-
17
-
export const Welcome = observer(({next, skip}: Props) => {
18
-
const pal = usePalette('default')
19
-
20
-
return (
21
-
<View style={[styles.container]} testID="welcomeOnboarding">
22
-
<ViewHeader
23
-
showOnDesktop
24
-
showBorder={false}
25
-
showBackButton={false}
26
-
title=""
27
-
renderButton={() => {
28
-
return (
29
-
<Pressable
30
-
accessibilityRole="button"
31
-
style={[s.flexRow, s.alignCenter]}
32
-
onPress={skip}>
33
-
<Text style={[pal.link]}>Skip</Text>
34
-
<FontAwesomeIcon
35
-
icon={'chevron-right'}
36
-
size={14}
37
-
color={pal.colors.link}
38
-
/>
39
-
</Pressable>
40
-
)
41
-
}}
42
-
/>
43
-
<View>
44
-
<Text style={[pal.text, styles.title]}>
45
-
Welcome to{' '}
46
-
<Text style={[pal.text, pal.link, styles.title]}>Bluesky</Text>
47
-
</Text>
48
-
<View style={styles.spacer} />
49
-
<View style={[styles.row]}>
50
-
<FontAwesomeIcon icon={'globe'} size={36} color={pal.colors.link} />
51
-
<View style={[styles.rowText]}>
52
-
<Text type="lg-bold" style={[pal.text]}>
53
-
Bluesky is public.
54
-
</Text>
55
-
<Text type="lg-thin" style={[pal.text, s.pt2]}>
56
-
Your posts, likes, and blocks are public. Mutes are private.
57
-
</Text>
58
-
</View>
59
-
</View>
60
-
<View style={[styles.row]}>
61
-
<FontAwesomeIcon icon={'at'} size={36} color={pal.colors.link} />
62
-
<View style={[styles.rowText]}>
63
-
<Text type="lg-bold" style={[pal.text]}>
64
-
Bluesky is open.
65
-
</Text>
66
-
<Text type="lg-thin" style={[pal.text, s.pt2]}>
67
-
Never lose access to your followers and data.
68
-
</Text>
69
-
</View>
70
-
</View>
71
-
<View style={[styles.row]}>
72
-
<FontAwesomeIcon icon={'gear'} size={36} color={pal.colors.link} />
73
-
<View style={[styles.rowText]}>
74
-
<Text type="lg-bold" style={[pal.text]}>
75
-
Bluesky is flexible.
76
-
</Text>
77
-
<Text type="lg-thin" style={[pal.text, s.pt2]}>
78
-
Choose the algorithms that power your experience with custom
79
-
feeds.
80
-
</Text>
81
-
</View>
82
-
</View>
83
-
</View>
84
-
85
-
<Button
86
-
onPress={next}
87
-
label="Continue"
88
-
testID="continueBtn"
89
-
labelStyle={styles.buttonText}
90
-
/>
91
-
</View>
92
-
)
93
-
})
94
-
95
-
const styles = StyleSheet.create({
96
-
container: {
97
-
flex: 1,
98
-
marginBottom: isDesktopWeb ? 30 : 60,
99
-
marginHorizontal: 16,
100
-
justifyContent: 'space-between',
101
-
},
102
-
title: {
103
-
fontSize: 42,
104
-
fontWeight: '800',
105
-
},
106
-
row: {
107
-
flexDirection: 'row',
108
-
columnGap: 20,
109
-
alignItems: 'center',
110
-
marginVertical: 20,
111
-
},
112
-
rowText: {
113
-
flex: 1,
114
-
},
115
-
spacer: {
116
-
height: 20,
117
-
},
118
-
buttonText: {
119
-
textAlign: 'center',
120
-
fontSize: 18,
121
-
marginVertical: 4,
122
-
},
123
-
})
6
+
export const Welcome = withBreakpoints(
7
+
WelcomeMobile,
8
+
WelcomeDesktop,
9
+
WelcomeDesktop,
10
+
)
+1
-1
src/view/com/auth/onboarding/Welcome.web.tsx
src/view/com/auth/onboarding/WelcomeDesktop.tsx
+1
-1
src/view/com/auth/onboarding/Welcome.web.tsx
src/view/com/auth/onboarding/WelcomeDesktop.tsx
+123
src/view/com/auth/onboarding/WelcomeMobile.tsx
+123
src/view/com/auth/onboarding/WelcomeMobile.tsx
···
1
+
import React from 'react'
2
+
import {Pressable, StyleSheet, View} from 'react-native'
3
+
import {Text} from 'view/com/util/text/Text'
4
+
import {s} from 'lib/styles'
5
+
import {usePalette} from 'lib/hooks/usePalette'
6
+
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
7
+
import {Button} from 'view/com/util/forms/Button'
8
+
import {observer} from 'mobx-react-lite'
9
+
import {ViewHeader} from 'view/com/util/ViewHeader'
10
+
import {isDesktopWeb} from 'platform/detection'
11
+
12
+
type Props = {
13
+
next: () => void
14
+
skip: () => void
15
+
}
16
+
17
+
export const WelcomeMobile = observer(({next, skip}: Props) => {
18
+
const pal = usePalette('default')
19
+
20
+
return (
21
+
<View style={[styles.container]} testID="welcomeOnboarding">
22
+
<ViewHeader
23
+
showOnDesktop
24
+
showBorder={false}
25
+
showBackButton={false}
26
+
title=""
27
+
renderButton={() => {
28
+
return (
29
+
<Pressable
30
+
accessibilityRole="button"
31
+
style={[s.flexRow, s.alignCenter]}
32
+
onPress={skip}>
33
+
<Text style={[pal.link]}>Skip</Text>
34
+
<FontAwesomeIcon
35
+
icon={'chevron-right'}
36
+
size={14}
37
+
color={pal.colors.link}
38
+
/>
39
+
</Pressable>
40
+
)
41
+
}}
42
+
/>
43
+
<View>
44
+
<Text style={[pal.text, styles.title]}>
45
+
Welcome to{' '}
46
+
<Text style={[pal.text, pal.link, styles.title]}>Bluesky</Text>
47
+
</Text>
48
+
<View style={styles.spacer} />
49
+
<View style={[styles.row]}>
50
+
<FontAwesomeIcon icon={'globe'} size={36} color={pal.colors.link} />
51
+
<View style={[styles.rowText]}>
52
+
<Text type="lg-bold" style={[pal.text]}>
53
+
Bluesky is public.
54
+
</Text>
55
+
<Text type="lg-thin" style={[pal.text, s.pt2]}>
56
+
Your posts, likes, and blocks are public. Mutes are private.
57
+
</Text>
58
+
</View>
59
+
</View>
60
+
<View style={[styles.row]}>
61
+
<FontAwesomeIcon icon={'at'} size={36} color={pal.colors.link} />
62
+
<View style={[styles.rowText]}>
63
+
<Text type="lg-bold" style={[pal.text]}>
64
+
Bluesky is open.
65
+
</Text>
66
+
<Text type="lg-thin" style={[pal.text, s.pt2]}>
67
+
Never lose access to your followers and data.
68
+
</Text>
69
+
</View>
70
+
</View>
71
+
<View style={[styles.row]}>
72
+
<FontAwesomeIcon icon={'gear'} size={36} color={pal.colors.link} />
73
+
<View style={[styles.rowText]}>
74
+
<Text type="lg-bold" style={[pal.text]}>
75
+
Bluesky is flexible.
76
+
</Text>
77
+
<Text type="lg-thin" style={[pal.text, s.pt2]}>
78
+
Choose the algorithms that power your experience with custom
79
+
feeds.
80
+
</Text>
81
+
</View>
82
+
</View>
83
+
</View>
84
+
85
+
<Button
86
+
onPress={next}
87
+
label="Continue"
88
+
testID="continueBtn"
89
+
labelStyle={styles.buttonText}
90
+
/>
91
+
</View>
92
+
)
93
+
})
94
+
95
+
const styles = StyleSheet.create({
96
+
container: {
97
+
flex: 1,
98
+
marginBottom: isDesktopWeb ? 30 : 60,
99
+
marginHorizontal: 16,
100
+
justifyContent: 'space-between',
101
+
},
102
+
title: {
103
+
fontSize: 42,
104
+
fontWeight: '800',
105
+
},
106
+
row: {
107
+
flexDirection: 'row',
108
+
columnGap: 20,
109
+
alignItems: 'center',
110
+
marginVertical: 20,
111
+
},
112
+
rowText: {
113
+
flex: 1,
114
+
},
115
+
spacer: {
116
+
height: 20,
117
+
},
118
+
buttonText: {
119
+
textAlign: 'center',
120
+
fontSize: 18,
121
+
marginVertical: 4,
122
+
},
123
+
})
+22
src/view/com/util/layouts/withBreakpoints.tsx
+22
src/view/com/util/layouts/withBreakpoints.tsx
···
1
+
import React from 'react'
2
+
import {useMediaQuery} from 'react-responsive'
3
+
import {isNative} from 'platform/detection'
4
+
5
+
export const withBreakpoints =
6
+
<P extends object>(
7
+
Mobile: React.ComponentType<P>,
8
+
Tablet: React.ComponentType<P>,
9
+
Desktop: React.ComponentType<P>,
10
+
): React.FC<P> =>
11
+
(props: P) => {
12
+
const isTabletOrMobile = useMediaQuery({query: '(max-width: 1224px)'})
13
+
const isMobile = useMediaQuery({query: '(max-width: 800px)'})
14
+
15
+
if (isMobile || isNative) {
16
+
return <Mobile {...props} />
17
+
}
18
+
if (isTabletOrMobile) {
19
+
return <Tablet {...props} />
20
+
}
21
+
return <Desktop {...props} />
22
+
}