Movable following feed (#3593)

* Handle home algo with backwards compat * Remove todo, fix pwi view * Simplify filter logic * Handle edge case * Handle home algo in FeedSourceCard * Fix handling of pinned feed if home algo is disabled * Handle home algo on ProfileFeed screen * Rename * Fix pinned feeds key * Improve perf of pinned feeds with primary algo * Update statsig API * Revert unneeded changes * Support following feed as well * Better formatting * Clarify primary algo usage * Better comment * Handle saved feed screen edge case * Restore Feeds sparkle, fix line height * Move gate call down * Filter out primary algo from feeds page * Filter dupe from Feeds screen * Simplify logic * Missing following handling * Hide primary feed setting outside exp * Revert testing change * Migrate usePinnedFeedInfos * Migrate FeedSourceCard * Migrate Feeds screen * Migrate SavedFeeds screen * Handle timeline in feed infos * Finish migrating ProfileFeed, FeedSourceCard * Migrate ProfileList * Finalize mutation hooks * Allow unsaving lists * Handle following feed on Feeds screen * Handle following on SavedFeeds * Get rid of deprecated interface usages * Handle no pinned feeds * Handle no feeds on Feeds screen * Reuse component on SavedFeeds screen * Handle no following feed * Remove primary algo references * Migrate to new plural APIs * Remove unused event * Prevent duplicate keys * Make handling much more clear * Dedupe useHeaderOffset * Filter unknown feed types at source * Use just following * Immprove key handling * Resume from last tab * Bump sdk * Revert Gemfile * Additional protection in FeedSourceCard * Fix ProfileList save/unsave handling * Translate * Translate * Match existing handling post-signup * Ensure onboarding results in correct selected feeds * Some testing tweaks on create/onboarding * Revert primary algo consderations * Remove comment * Handle default feed setting * Rm unnecessary type cast * Remove premature gate check * Remove nullable check in onPageSelecting, assume the pager checks bounds * Use null for default selected feed * Rm unrelated change * Remove the concept of __key__ I don't think this concept is consistent. It's introduced on FeedSourceInfo which is used both by pinned feeds and by useFeedSourceInfoQuery. Pinned feeds use the pinning ID there. But there is no pinning ID for useFeedSourceInfoQuery. So this means this field is sometimes one thing and sometimes some other thing. That is a decent sign that it shouldn't be on that type at all. It's not used anywhere except the desktop feed enumeration. It seems reasonable to assume there that we wouldn't want to show the same feed URL twice. (And if it does occur in the array twice, IMO we should solve that at the API level and dedupe it on read or next write.) So I think we should just use the URL in that place. (I used the descriptor, which is equivalent.) * Dedupe pinned feeds by URL on read * Filter timeline out of mergefeed sources * Put FeedDescriptor into FeedSourceInfo * Group saved info with feed for pins This removes a loop within a loop within a loop. * Fix Feeds link on native --------- Co-authored-by: Dan Abramov <[email protected]>
bluesky-social · May 11, 2024 · 08979f3 · 08979f3
1 parent 2974ce1
commit 08979f3
Show file tree

Hide file tree

Showing 37 changed files with 1,132 additions and 551 deletions.
diff --git a/modules/expo-scroll-forwarder/src/ExpoScrollForwarderView.ios.tsx b/modules/expo-scroll-forwarder/src/ExpoScrollForwarderView.ios.tsx
@@ -1,5 +1,5 @@
-import {requireNativeViewManager} from 'expo-modules-core'
 import * as React from 'react'
+import {requireNativeViewManager} from 'expo-modules-core'
 
 import {ExpoScrollForwarderViewProps} from './ExpoScrollForwarder.types'
 

diff --git a/package.json b/package.json
@@ -51,7 +51,7 @@
   },
   "dependencies": {
     "@atproto-labs/api": "^0.12.8-clipclops.0",
-    "@atproto/api": "^0.12.5",
+    "@atproto/api": "^0.12.6",
     "@bam.tech/react-native-image-resizer": "^3.0.4",
     "@braintree/sanitize-url": "^6.0.2",
     "@discord/bottom-sheet": "bluesky-social/react-native-bottom-sheet",

diff --git a/src/components/LabelingServiceCard/index.tsx b/src/components/LabelingServiceCard/index.tsx
@@ -1,18 +1,18 @@
 import React from 'react'
 import {View} from 'react-native'
+import {AppBskyLabelerDefs} from '@atproto/api'
 import {msg, Plural, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import {AppBskyLabelerDefs} from '@atproto/api'
 
 import {getLabelingServiceTitle} from '#/lib/moderation'
-import {Link as InternalLink, LinkProps} from '#/components/Link'
-import {Text} from '#/components/Typography'
+import {sanitizeHandle} from '#/lib/strings/handles'
 import {useLabelerInfoQuery} from '#/state/queries/labeler'
+import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {atoms as a, useTheme, ViewStyleProp} from '#/alf'
+import {Link as InternalLink, LinkProps} from '#/components/Link'
 import {RichText} from '#/components/RichText'
+import {Text} from '#/components/Typography'
 import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '../icons/Chevron'
-import {UserAvatar} from '#/view/com/util/UserAvatar'
-import {sanitizeHandle} from '#/lib/strings/handles'
 
 type LabelingServiceProps = {
   labeler: AppBskyLabelerDefs.LabelerViewDetailed

diff --git a/src/components/hooks/useHeaderOffset.ts b/src/components/hooks/useHeaderOffset.ts
@@ -0,0 +1,16 @@
+import {useWindowDimensions} from 'react-native'
+
+import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
+
+export function useHeaderOffset() {
+  const {isDesktop, isTablet} = useWebMediaQueries()
+  const {fontScale} = useWindowDimensions()
+  if (isDesktop || isTablet) {
+    return 0
+  }
+  const navBarHeight = 42
+  const tabBarPad = 10 + 10 + 3 // padding + border
+  const normalLineHeight = 1.2
+  const tabBarText = 16 * normalLineHeight * fontScale
+  return navBarHeight + tabBarPad + tabBarText
+}
diff --git a/src/components/icons/Home.tsx b/src/components/icons/Home.tsx
@@ -0,0 +1,9 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const Home_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M11.46 1.362a2 2 0 0 1 1.08 0c.249.07.448.188.611.301.146.102.306.232.467.363l6.421 5.218.046.036c.169.137.38.308.54.53a2 2 0 0 1 .304.64c.073.264.072.536.071.753v9.229c0 .252 0 .498-.017.706a2.023 2.023 0 0 1-.201.77 2 2 0 0 1-.874.874 2.02 2.02 0 0 1-.77.201c-.208.017-.454.017-.706.017H5.568c-.252 0-.498 0-.706-.017a2.02 2.02 0 0 1-.77-.201 2 2 0 0 1-.874-.874 2.022 2.022 0 0 1-.201-.77C3 18.93 3 18.684 3 18.432V9.203c0-.217-.002-.49.07-.754a2 2 0 0 1 .304-.638c.16-.223.372-.394.541-.53l.045-.037 6.422-5.218c.161-.13.321-.26.467-.362.163-.114.362-.232.612-.302Zm.532 1.943c-.077.054-.18.136-.37.29l-6.4 5.2a6.315 6.315 0 0 0-.215.18c-.002 0-.003.002-.004.003v.004C5 9.036 5 9.112 5 9.262V18.4a8.18 8.18 0 0 0 .011.588l.014.002c.116.01.278.01.575.01H8v-5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v5h2.4a8.207 8.207 0 0 0 .589-.012v-.013c.01-.116.011-.279.011-.575V9.262c0-.15 0-.226-.003-.28v-.004l-.003-.003a6.448 6.448 0 0 0-.216-.18l-6.4-5.2a7.373 7.373 0 0 0-.37-.29L12 3.299l-.008.006ZM14 19v-5h-4v5h4Z',
+})
+
+export const Home_Filled_Corner0_Rounded = createSinglePathSVG({
+  path: 'M13.261 1.736a2 2 0 0 0-2.522 0l-7 5.687A2 2 0 0 0 3 8.976V19a2 2 0 0 0 2 2h3v-8a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v8h3a2 2 0 0 0 2-2V8.976a2 2 0 0 0-.739-1.553l-7-5.687ZM14 21h-4v-7h4v7Z',
+})
diff --git a/src/components/moderation/LabelsOnMe.tsx b/src/components/moderation/LabelsOnMe.tsx
@@ -3,10 +3,10 @@ import {StyleProp, View, ViewStyle} from 'react-native'
 import {AppBskyFeedDefs, ComAtprotoLabelDefs} from '@atproto/api'
 import {msg, Plural} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import {useSession} from '#/state/session'
 
+import {useSession} from '#/state/session'
 import {atoms as a} from '#/alf'
-import {Button, ButtonText, ButtonIcon, ButtonSize} from '#/components/Button'
+import {Button, ButtonIcon, ButtonSize, ButtonText} from '#/components/Button'
 import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
 import {
   LabelsOnMeDialog,

diff --git a/src/lib/constants.ts b/src/lib/constants.ts
@@ -1,4 +1,5 @@
 import {Insets, Platform} from 'react-native'
+import {AppBskyActorDefs} from '@atproto/api'
 
 export const LOCAL_DEV_SERVICE =
   Platform.OS === 'android' ? 'http://10.0.2.2:2583' : 'http://localhost:2583'
@@ -44,7 +45,7 @@ export function IS_TEST_USER(handle?: string) {
 }
 
 export function IS_PROD_SERVICE(url?: string) {
-  return url && url !== STAGING_SERVICE && url !== LOCAL_DEV_SERVICE
+  return url && url !== STAGING_SERVICE && !url.startsWith(LOCAL_DEV_SERVICE)
 }
 
 export const PROD_DEFAULT_FEED = (rkey: string) =>
@@ -92,6 +93,24 @@ export const BSKY_FEED_OWNER_DIDS = [
   'did:plc:q6gjnaw2blty4crticxkmujt',
 ]
 
+export const DISCOVER_FEED_URI =
+  'at://did:plc:z72i7hdynmk6r22z27h6tvur/app.bsky.feed.generator/whats-hot'
+export const DISCOVER_SAVED_FEED = {
+  type: 'feed',
+  value: DISCOVER_FEED_URI,
+  pinned: true,
+}
+export const TIMELINE_SAVED_FEED = {
+  type: 'timeline',
+  value: 'following',
+  pinned: true,
+}
+
+export const RECOMMENDED_SAVED_FEEDS: Pick<
+  AppBskyActorDefs.SavedFeed,
+  'type' | 'value' | 'pinned'
+>[] = [DISCOVER_SAVED_FEED, TIMELINE_SAVED_FEED]
+
 export const GIF_SERVICE = 'https://gifs.bsky.app'
 
 export const GIF_SEARCH = (params: string) =>

diff --git a/src/screens/Feeds/NoFollowingFeed.tsx b/src/screens/Feeds/NoFollowingFeed.tsx
@@ -0,0 +1,50 @@
+import React from 'react'
+import {View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {TIMELINE_SAVED_FEED} from '#/lib/constants'
+import {useAddSavedFeedsMutation} from '#/state/queries/preferences'
+import {atoms as a, useTheme} from '#/alf'
+import {InlineLinkText} from '#/components/Link'
+import {Text} from '#/components/Typography'
+
+export function NoFollowingFeed() {
+  const t = useTheme()
+  const {_} = useLingui()
+  const {mutateAsync: addSavedFeeds} = useAddSavedFeedsMutation()
+
+  const addRecommendedFeeds = React.useCallback(
+    (e: any) => {
+      e.preventDefault()
+
+      addSavedFeeds([
+        {
+          ...TIMELINE_SAVED_FEED,
+          pinned: true,
+        },
+      ])
+
+      // prevent navigation
+      return false
+    },
+    [addSavedFeeds],
+  )
+
+  return (
+    <View style={[a.flex_row, a.flex_wrap, a.align_center, a.py_md, a.px_lg]}>
+      <Text
+        style={[a.leading_snug, t.atoms.text_contrast_medium, {maxWidth: 310}]}>
+        <Trans>Looks like you're missing a following feed.</Trans>{' '}
+      </Text>
+
+      <InlineLinkText
+        to="/"
+        label={_(msg`Add the default feed of only people you follow`)}
+        onPress={addRecommendedFeeds}
+        style={[a.leading_snug]}>
+        <Trans>Click here to add one.</Trans>
+      </InlineLinkText>
+    </View>
+  )
+}
diff --git a/src/screens/Feeds/NoSavedFeedsOfAnyType.tsx b/src/screens/Feeds/NoSavedFeedsOfAnyType.tsx
@@ -0,0 +1,57 @@
+import React from 'react'
+import {View} from 'react-native'
+import {TID} from '@atproto/common-web'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {RECOMMENDED_SAVED_FEEDS} from '#/lib/constants'
+import {useOverwriteSavedFeedsMutation} from '#/state/queries/preferences'
+import {atoms as a, useTheme} from '#/alf'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
+import {Text} from '#/components/Typography'
+
+/**
+ * Explicitly named, since the CTA in this component will overwrite all saved
+ * feeds if pressed. It should only be presented to the user if they actually
+ * have no other feeds saved.
+ */
+export function NoSavedFeedsOfAnyType() {
+  const t = useTheme()
+  const {_} = useLingui()
+  const {isPending, mutateAsync: overwriteSavedFeeds} =
+    useOverwriteSavedFeedsMutation()
+
+  const addRecommendedFeeds = React.useCallback(async () => {
+    await overwriteSavedFeeds(
+      RECOMMENDED_SAVED_FEEDS.map(f => ({
+        ...f,
+        id: TID.nextStr(),
+      })),
+    )
+  }, [overwriteSavedFeeds])
+
+  return (
+    <View
+      style={[a.flex_row, a.flex_wrap, a.justify_between, a.p_xl, a.gap_md]}>
+      <Text
+        style={[a.leading_snug, t.atoms.text_contrast_medium, {maxWidth: 310}]}>
+        <Trans>
+          Looks like you haven't saved any feeds! Use our recommendations or
+          browse more below.
+        </Trans>
+      </Text>
+
+      <Button
+        disabled={isPending}
+        label={_(msg`Apply default recommended feeds`)}
+        size="small"
+        variant="solid"
+        color="primary"
+        onPress={addRecommendedFeeds}>
+        <ButtonIcon icon={Plus} position="left" />
+        <ButtonText>{_(msg`Use recommended`)}</ButtonText>
+      </Button>
+    </View>
+  )
+}
diff --git a/src/screens/Home/NoFeedsPinned.tsx b/src/screens/Home/NoFeedsPinned.tsx
@@ -0,0 +1,129 @@
+import React from 'react'
+import {View} from 'react-native'
+import {TID} from '@atproto/common-web'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {useNavigation} from '@react-navigation/native'
+
+import {DISCOVER_SAVED_FEED, TIMELINE_SAVED_FEED} from '#/lib/constants'
+import {isNative} from '#/platform/detection'
+import {useOverwriteSavedFeedsMutation} from '#/state/queries/preferences'
+import {UsePreferencesQueryResponse} from '#/state/queries/preferences'
+import {NavigationProp} from 'lib/routes/types'
+import {CenteredView} from '#/view/com/util/Views'
+import {atoms as a} from '#/alf'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {useHeaderOffset} from '#/components/hooks/useHeaderOffset'
+import {ListSparkle_Stroke2_Corner0_Rounded as ListSparkle} from '#/components/icons/ListSparkle'
+import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
+import {Link} from '#/components/Link'
+import {Text} from '#/components/Typography'
+
+export function NoFeedsPinned({
+  preferences,
+}: {
+  preferences: UsePreferencesQueryResponse
+}) {
+  const {_} = useLingui()
+  const headerOffset = useHeaderOffset()
+  const navigation = useNavigation<NavigationProp>()
+  const {isPending, mutateAsync: overwriteSavedFeeds} =
+    useOverwriteSavedFeedsMutation()
+
+  const addRecommendedFeeds = React.useCallback(async () => {
+    let skippedTimeline = false
+    let skippedDiscover = false
+    let remainingSavedFeeds = []
+
+    // remove first instance of both timeline and discover, since we're going to overwrite them
+    for (const savedFeed of preferences.savedFeeds) {
+      if (savedFeed.type === 'timeline' && !skippedTimeline) {
+        skippedTimeline = true
+      } else if (
+        savedFeed.value === DISCOVER_SAVED_FEED.value &&
+        !skippedDiscover
+      ) {
+        skippedDiscover = true
+      } else {
+        remainingSavedFeeds.push(savedFeed)
+      }
+    }
+
+    const toSave = [
+      {
+        ...DISCOVER_SAVED_FEED,
+        pinned: true,
+        id: TID.nextStr(),
+      },
+      {
+        ...TIMELINE_SAVED_FEED,
+        pinned: true,
+        id: TID.nextStr(),
+      },
+      ...remainingSavedFeeds,
+    ]
+
+    await overwriteSavedFeeds(toSave)
+  }, [overwriteSavedFeeds, preferences.savedFeeds])
+
+  const onPressFeedsLink = React.useCallback(() => {
+    if (isNative) {
+      // Hack that's necessary due to how our navigators are set up.
+      navigation.navigate('FeedsTab')
+      navigation.popToTop()
+      return false
+    }
+  }, [navigation])
+
+  return (
+    <CenteredView sideBorders style={[a.h_full_vh]}>
+      <View
+        style={[
+          a.align_center,
+          a.h_full_vh,
+          a.py_3xl,
+          a.px_xl,
+          {
+            paddingTop: headerOffset + a.py_3xl.paddingTop,
+          },
+        ]}>
+        <View style={[a.align_center, a.gap_sm, a.pb_xl]}>
+          <Text style={[a.text_xl, a.font_bold]}>
+            <Trans>Whoops!</Trans>
+          </Text>
+          <Text
+            style={[a.text_md, a.text_center, a.leading_snug, {maxWidth: 340}]}>
+            <Trans>
+              Looks like you unpinned all your feeds. But don't worry, you can
+              add some below 😄
+            </Trans>
+          </Text>
+        </View>
+
+        <View style={[a.flex_row, a.gap_md, a.justify_center, a.flex_wrap]}>
+          <Button
+            disabled={isPending}
+            label={_(msg`Apply default recommended feeds`)}
+            size="medium"
+            variant="solid"
+            color="primary"
+            onPress={addRecommendedFeeds}>
+            <ButtonIcon icon={Plus} position="left" />
+            <ButtonText>{_(msg`Add recommended feeds`)}</ButtonText>
+          </Button>
+
+          <Link
+            label={_(msg`Browse other feeds`)}
+            to="/feeds"
+            onPress={onPressFeedsLink}
+            size="medium"
+            variant="solid"
+            color="secondary">
+            <ButtonIcon icon={ListSparkle} position="left" />
+            <ButtonText>{_(msg`Browse other feeds`)}</ButtonText>
+          </Link>
+        </View>
+      </View>
+    </CenteredView>
+  )
+}
diff --git a/src/screens/Onboarding/StepAlgoFeeds/FeedCard.tsx b/src/screens/Onboarding/StepAlgoFeeds/FeedCard.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import {View} from 'react-native'
 import {Image} from 'expo-image'
 import {LinearGradient} from 'expo-linear-gradient'
-import {Trans, msg} from '@lingui/macro'
+import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {FeedSourceInfo, useFeedSourceInfoQuery} from '#/state/queries/feed'