New onboarding (#241)

* delete old onboarding files and code

* add custom FollowButton component to Post, FeedItem, & ProfileCard

* move building suggested feed into helper lib

* show suggested posts/feed if follower list is empty

* Update tsconfig.json

* add pagination to getting new onboarding

* remove unnecessary console log

* fix naming, add better null check for combinedCursor

* In locally-combined feeds, correctly produce an undefined cursor when out of data

* Minor refactors of the suggested posts lib functions

* Show 'follow button' style of post meta in certain conditions only

* Only show follow btn in posts on the main feed and the discovery feed

* Add a welcome notice to the home feed

* Tune the timing of when the welcome banner shows or hides

* Make the follow button an observer (closes #244)

* Update postmeta to keep the follow btn after press until next render

* A couple of fixes that ensure consistent welcome screen

* Fix lint

* Rework the welcome banner

* Fix cache invalidation of follows model on user switch

* Show welcome banner while loading

* Update the home onboarding feed to get top posts from hardcode recommends

* Drop unused helper function

* Update happy path tests

---------

Co-authored-by: Paul Frazee <pfrazee@gmail.com>

1 files changed, 0 insertions, 202 deletions

diff --git a/src/view/com/onboard/FeatureExplainer.web.tsx b/src/view/com/onboard/FeatureExplainer.web.tsx
deleted file mode 100644
index 177ac58dd..000000000
--- a/src/view/com/onboard/FeatureExplainer.web.tsx
+++ /dev/null
@@ -1,202 +0,0 @@
-import React, {useState} from 'react'
-import {
-  Animated,
-  Image,
-  StyleSheet,
-  TouchableOpacity,
-  useWindowDimensions,
-  View,
-} from 'react-native'
-import {TabView, SceneMap, Route, TabBarProps} from 'react-native-tab-view'
-import {
-  FontAwesomeIcon,
-  FontAwesomeIconStyle,
-} from '@fortawesome/react-native-fontawesome'
-import {CenteredView} from '../util/Views.web'
-import {Text} from '../util/text/Text'
-import {useStores} from 'state/index'
-import {s, colors} from 'lib/styles'
-import {TABS_EXPLAINER} from 'lib/assets'
-import {TABS_ENABLED} from 'lib/build-flags'
-
-const ROUTES = TABS_ENABLED
-  ? [
-      {key: 'intro', title: 'Intro'},
-      {key: 'tabs', title: 'Tabs'},
-    ]
-  : [{key: 'intro', title: 'Intro'}]
-
-const Intro = () => (
-  <View style={styles.explainer}>
-    <Text
-      style={[styles.explainerHeading, s.normal, styles.explainerHeadingIntro]}>
-      Welcome to{' '}
-      <Text style={[s.bold, s.blue3, styles.explainerHeadingBrand]}>
-        Bluesky
-      </Text>
-    </Text>
-    <Text style={[styles.explainerDesc, styles.explainerDescIntro]}>
-      This is an early beta. Your feedback is appreciated!
-    </Text>
-  </View>
-)
-
-const Tabs = () => (
-  <View style={styles.explainer}>
-    <View style={styles.explainerIcon}>
-      <View style={s.flex1} />
-      <FontAwesomeIcon
-        icon={['far', 'clone']}
-        style={[s.black as FontAwesomeIconStyle, s.mb5]}
-        size={36}
-      />
-      <View style={s.flex1} />
-    </View>
-    <Text style={styles.explainerHeading}>Tabs</Text>
-    <Text style={styles.explainerDesc}>
-      Never lose your place! Long-press to open posts and profiles in a new tab.
-    </Text>
-    <Text style={styles.explainerDesc}>
-      <Image source={TABS_EXPLAINER} style={styles.explainerImg} />
-    </Text>
-  </View>
-)
-
-const SCENE_MAP = {
-  intro: Intro,
-  tabs: Tabs,
-}
-const renderScene = SceneMap(SCENE_MAP)
-
-export const FeatureExplainer = () => {
-  const layout = useWindowDimensions()
-  const store = useStores()
-  const [index, setIndex] = useState(0)
-
-  const onPressSkip = () => store.onboard.next()
-  const onPressNext = () => {
-    if (index >= ROUTES.length - 1) {
-      store.onboard.next()
-    } else {
-      setIndex(index + 1)
-    }
-  }
-
-  const renderTabBar = (props: TabBarProps<Route>) => {
-    const inputRange = props.navigationState.routes.map((x, i) => i)
-    return (
-      <View style={styles.tabBar}>
-        <View style={s.flex1} />
-        {props.navigationState.routes.map((route, i) => {
-          const opacity = props.position.interpolate({
-            inputRange,
-            outputRange: inputRange.map(inputIndex =>
-              inputIndex === i ? 1 : 0.5,
-            ),
-          })
-
-          return (
-            <TouchableOpacity
-              key={i}
-              style={styles.tabItem}
-              onPress={() => setIndex(i)}>
-              <Animated.Text style={{opacity}}>&deg;</Animated.Text>
-            </TouchableOpacity>
-          )
-        })}
-        <View style={s.flex1} />
-      </View>
-    )
-  }
-
-  const FirstExplainer = SCENE_MAP[ROUTES[0]?.key as keyof typeof SCENE_MAP]
-  return (
-    <CenteredView style={styles.container}>
-      {ROUTES.length > 1 ? (
-        <TabView
-          navigationState={{index, routes: ROUTES}}
-          renderScene={renderScene}
-          renderTabBar={renderTabBar}
-          onIndexChange={setIndex}
-          initialLayout={{width: layout.width}}
-          tabBarPosition="bottom"
-        />
-      ) : FirstExplainer ? (
-        <FirstExplainer />
-      ) : (
-        <View />
-      )}
-      <View style={styles.footer}>
-        <TouchableOpacity onPress={onPressSkip}>
-          <Text style={styles.footerBtn}>Skip</Text>
-        </TouchableOpacity>
-        <TouchableOpacity onPress={onPressNext}>
-          <Text style={[styles.footerBtn, styles.footerBtnNext]}>Next</Text>
-        </TouchableOpacity>
-      </View>
-    </CenteredView>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    height: '100%',
-    justifyContent: 'center',
-    paddingBottom: '10%',
-  },
-
-  tabBar: {
-    flexDirection: 'row',
-  },
-  tabItem: {
-    alignItems: 'center',
-    padding: 16,
-  },
-
-  explainer: {
-    paddingHorizontal: 16,
-  },
-  explainerIcon: {
-    flexDirection: 'row',
-  },
-  explainerHeading: {
-    fontSize: 42,
-    fontWeight: 'bold',
-    textAlign: 'center',
-    marginBottom: 16,
-  },
-  explainerHeadingIntro: {
-    lineHeight: 40,
-  },
-  explainerHeadingBrand: {fontSize: 56},
-  explainerDesc: {
-    fontSize: 18,
-    textAlign: 'center',
-    marginBottom: 16,
-    color: colors.gray5,
-  },
-  explainerDescIntro: {fontSize: 24},
-  explainerImg: {
-    resizeMode: 'contain',
-    maxWidth: '100%',
-    maxHeight: 330,
-  },
-
-  footer: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    paddingTop: 24,
-  },
-  footerBtn: {
-    color: colors.blue3,
-    fontSize: 19,
-    paddingHorizontal: 36,
-    paddingVertical: 8,
-  },
-  footerBtnNext: {
-    marginLeft: 10,
-    borderWidth: 1,
-    borderColor: colors.blue3,
-    borderRadius: 6,
-  },
-})