Remove explicit 'onboarding' flow
parent
b711a49df9
commit
308b1e8beb
|
@ -377,7 +377,6 @@ export class SessionModel {
|
||||||
)
|
)
|
||||||
|
|
||||||
this.setActiveSession(agent, did)
|
this.setActiveSession(agent, did)
|
||||||
this.rootStore.shell.setOnboarding(true)
|
|
||||||
this._log('SessionModel:createAccount succeeded')
|
this._log('SessionModel:createAccount succeeded')
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -129,7 +129,6 @@ export class ShellUiModel {
|
||||||
activeLightbox: ProfileImageLightbox | ImagesLightbox | undefined
|
activeLightbox: ProfileImageLightbox | ImagesLightbox | undefined
|
||||||
isComposerActive = false
|
isComposerActive = false
|
||||||
composerOpts: ComposerOpts | undefined
|
composerOpts: ComposerOpts | undefined
|
||||||
isOnboarding = false
|
|
||||||
|
|
||||||
constructor(public rootStore: RootStoreModel) {
|
constructor(public rootStore: RootStoreModel) {
|
||||||
makeAutoObservable(this, {
|
makeAutoObservable(this, {
|
||||||
|
@ -205,13 +204,4 @@ export class ShellUiModel {
|
||||||
this.isComposerActive = false
|
this.isComposerActive = false
|
||||||
this.composerOpts = undefined
|
this.composerOpts = undefined
|
||||||
}
|
}
|
||||||
|
|
||||||
setOnboarding(v: boolean) {
|
|
||||||
this.isOnboarding = v
|
|
||||||
if (this.isOnboarding) {
|
|
||||||
this.rootStore.me.mainFeed.switchFeedType('suggested')
|
|
||||||
} else {
|
|
||||||
this.rootStore.me.mainFeed.switchFeedType('home')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,101 +0,0 @@
|
||||||
import React from 'react'
|
|
||||||
import {StyleSheet, View} from 'react-native'
|
|
||||||
import {observer} from 'mobx-react-lite'
|
|
||||||
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
|
||||||
import {usePalette} from 'lib/hooks/usePalette'
|
|
||||||
import {Text} from './text/Text'
|
|
||||||
import {Button} from './forms/Button'
|
|
||||||
import {s} from 'lib/styles'
|
|
||||||
import {useStores} from 'state/index'
|
|
||||||
import {SUGGESTED_FOLLOWS} from 'lib/constants'
|
|
||||||
// @ts-ignore no type definition -prf
|
|
||||||
import ProgressBar from 'react-native-progress/Bar'
|
|
||||||
import {CenteredView} from './Views'
|
|
||||||
|
|
||||||
export const WelcomeBanner = observer(() => {
|
|
||||||
const pal = usePalette('default')
|
|
||||||
const store = useStores()
|
|
||||||
const [isReady, setIsReady] = React.useState(false)
|
|
||||||
|
|
||||||
const numFollows = Math.min(
|
|
||||||
SUGGESTED_FOLLOWS(String(store.agent.service)).length,
|
|
||||||
5,
|
|
||||||
)
|
|
||||||
const remaining = numFollows - store.me.follows.numFollows
|
|
||||||
|
|
||||||
React.useEffect(() => {
|
|
||||||
if (remaining <= 0) {
|
|
||||||
// wait 500ms for the progress bar anim to finish
|
|
||||||
const ti = setTimeout(() => {
|
|
||||||
setIsReady(true)
|
|
||||||
}, 500)
|
|
||||||
return () => clearTimeout(ti)
|
|
||||||
} else {
|
|
||||||
setIsReady(false)
|
|
||||||
}
|
|
||||||
}, [remaining])
|
|
||||||
|
|
||||||
const onPressDone = React.useCallback(() => {
|
|
||||||
store.shell.setOnboarding(false)
|
|
||||||
}, [store])
|
|
||||||
|
|
||||||
return (
|
|
||||||
<CenteredView
|
|
||||||
testID="welcomeBanner"
|
|
||||||
style={[pal.view, styles.container, pal.border]}>
|
|
||||||
<Text
|
|
||||||
type="title-lg"
|
|
||||||
style={[pal.text, s.textCenter, s.bold, s.pb5]}
|
|
||||||
lineHeight={1.1}>
|
|
||||||
Welcome to Bluesky!
|
|
||||||
</Text>
|
|
||||||
{isReady ? (
|
|
||||||
<View style={styles.controls}>
|
|
||||||
<Button
|
|
||||||
type="primary"
|
|
||||||
style={[s.flexRow, s.alignCenter]}
|
|
||||||
onPress={onPressDone}>
|
|
||||||
<Text type="md-bold" style={s.white}>
|
|
||||||
See my feed!
|
|
||||||
</Text>
|
|
||||||
<FontAwesomeIcon icon="angle-right" size={14} style={s.white} />
|
|
||||||
</Button>
|
|
||||||
</View>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<Text type="lg" style={[pal.text, s.textCenter]}>
|
|
||||||
Follow at least {remaining} {remaining === 1 ? 'person' : 'people'}{' '}
|
|
||||||
to build your feed.
|
|
||||||
</Text>
|
|
||||||
<View style={[styles.controls, styles.progress]}>
|
|
||||||
<ProgressBar
|
|
||||||
progress={Math.max(
|
|
||||||
store.me.follows.numFollows / numFollows,
|
|
||||||
0.05,
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</View>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</CenteredView>
|
|
||||||
)
|
|
||||||
})
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
container: {
|
|
||||||
paddingTop: 16,
|
|
||||||
paddingBottom: 16,
|
|
||||||
paddingHorizontal: 20,
|
|
||||||
borderTopWidth: 1,
|
|
||||||
borderBottomWidth: 1,
|
|
||||||
},
|
|
||||||
controls: {
|
|
||||||
flexDirection: 'row',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
marginTop: 10,
|
|
||||||
},
|
|
||||||
progress: {
|
|
||||||
marginTop: 12,
|
|
||||||
},
|
|
||||||
})
|
|
|
@ -14,7 +14,6 @@ import {FeedModel} from 'state/models/feed-view'
|
||||||
import {withAuthRequired} from 'view/com/auth/withAuthRequired'
|
import {withAuthRequired} from 'view/com/auth/withAuthRequired'
|
||||||
import {Feed} from '../com/posts/Feed'
|
import {Feed} from '../com/posts/Feed'
|
||||||
import {LoadLatestBtn} from '../com/util/LoadLatestBtn'
|
import {LoadLatestBtn} from '../com/util/LoadLatestBtn'
|
||||||
import {WelcomeBanner} from '../com/util/WelcomeBanner'
|
|
||||||
import {TabBar} from 'view/com/util/TabBar'
|
import {TabBar} from 'view/com/util/TabBar'
|
||||||
import {Pager, PageSelectedEvent, TabBarProps} from 'view/com/util/Pager'
|
import {Pager, PageSelectedEvent, TabBarProps} from 'view/com/util/Pager'
|
||||||
import {FAB} from '../com/util/FAB'
|
import {FAB} from '../com/util/FAB'
|
||||||
|
@ -202,7 +201,6 @@ const FeedPage = observer(
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View style={containerStyle}>
|
<View style={containerStyle}>
|
||||||
{store.shell.isOnboarding && <WelcomeBanner />}
|
|
||||||
<Feed
|
<Feed
|
||||||
testID="homeFeed"
|
testID="homeFeed"
|
||||||
key="default"
|
key="default"
|
||||||
|
|
Loading…
Reference in New Issue