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 <dan.abramov@gmail.com>
This commit is contained in:
Eric Bailey
GitHub
parent
2974ce1b20
commit
08979f37e7
37 changed files with 1142 additions and 561 deletions
|
|
@ -1,5 +1,6 @@
|
|||
import React from 'react'
|
||||
import {useWindowDimensions, View} from 'react-native'
|
||||
import {View} from 'react-native'
|
||||
import {AppBskyActorDefs} from '@atproto/api'
|
||||
import {msg} from '@lingui/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
import {useNavigation} from '@react-navigation/native'
|
||||
|
|
@ -17,9 +18,9 @@ import {useSession} from '#/state/session'
|
|||
import {useSetMinimalShellMode} from '#/state/shell'
|
||||
import {useComposerControls} from '#/state/shell/composer'
|
||||
import {useAnalytics} from 'lib/analytics/analytics'
|
||||
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
|
||||
import {ComposeIcon2} from 'lib/icons'
|
||||
import {s} from 'lib/styles'
|
||||
import {useHeaderOffset} from '#/components/hooks/useHeaderOffset'
|
||||
import {Feed} from '../posts/Feed'
|
||||
import {FAB} from '../util/fab/FAB'
|
||||
import {ListMethods} from '../util/List'
|
||||
|
|
@ -35,6 +36,7 @@ export function FeedPage({
|
|||
feedParams,
|
||||
renderEmptyState,
|
||||
renderEndOfFeed,
|
||||
savedFeedConfig,
|
||||
}: {
|
||||
testID?: string
|
||||
feed: FeedDescriptor
|
||||
|
|
@ -42,6 +44,7 @@ export function FeedPage({
|
|||
isPageFocused: boolean
|
||||
renderEmptyState: () => JSX.Element
|
||||
renderEndOfFeed?: () => JSX.Element
|
||||
savedFeedConfig?: AppBskyActorDefs.SavedFeed
|
||||
}) {
|
||||
const {hasSession} = useSession()
|
||||
const {_} = useLingui()
|
||||
|
|
@ -129,6 +132,7 @@ export function FeedPage({
|
|||
renderEmptyState={renderEmptyState}
|
||||
renderEndOfFeed={renderEndOfFeed}
|
||||
headerOffset={headerOffset}
|
||||
savedFeedConfig={savedFeedConfig}
|
||||
/>
|
||||
</FeedFeedbackProvider>
|
||||
</MainScrollProvider>
|
||||
|
|
@ -153,16 +157,3 @@ export function FeedPage({
|
|||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,29 +1,30 @@
|
|||
import React from 'react'
|
||||
import {Pressable, StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
||||
import {Text} from '../util/text/Text'
|
||||
import {RichText} from '#/components/RichText'
|
||||
import {usePalette} from 'lib/hooks/usePalette'
|
||||
import {s} from 'lib/styles'
|
||||
import {UserAvatar} from '../util/UserAvatar'
|
||||
import {AtUri} from '@atproto/api'
|
||||
import * as Toast from 'view/com/util/Toast'
|
||||
import {sanitizeHandle} from 'lib/strings/handles'
|
||||
import {logger} from '#/logger'
|
||||
import {Trans, msg, Plural} from '@lingui/macro'
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
||||
import {msg, Plural, Trans} from '@lingui/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
|
||||
import {logger} from '#/logger'
|
||||
import {FeedSourceInfo, useFeedSourceInfoQuery} from '#/state/queries/feed'
|
||||
import {
|
||||
usePinFeedMutation,
|
||||
UsePreferencesQueryResponse,
|
||||
useAddSavedFeedsMutation,
|
||||
usePreferencesQuery,
|
||||
useSaveFeedMutation,
|
||||
UsePreferencesQueryResponse,
|
||||
useRemoveFeedMutation,
|
||||
} from '#/state/queries/preferences'
|
||||
import {useFeedSourceInfoQuery, FeedSourceInfo} from '#/state/queries/feed'
|
||||
import {FeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
|
||||
import {useTheme} from '#/alf'
|
||||
import * as Prompt from '#/components/Prompt'
|
||||
import {useNavigationDeduped} from 'lib/hooks/useNavigationDeduped'
|
||||
import {usePalette} from 'lib/hooks/usePalette'
|
||||
import {sanitizeHandle} from 'lib/strings/handles'
|
||||
import {s} from 'lib/styles'
|
||||
import {FeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
|
||||
import * as Toast from 'view/com/util/Toast'
|
||||
import {useTheme} from '#/alf'
|
||||
import {atoms as a} from '#/alf'
|
||||
import * as Prompt from '#/components/Prompt'
|
||||
import {RichText} from '#/components/RichText'
|
||||
import {Text} from '../util/text/Text'
|
||||
import {UserAvatar} from '../util/UserAvatar'
|
||||
|
||||
export function FeedSourceCard({
|
||||
feedUri,
|
||||
|
|
@ -87,53 +88,54 @@ export function FeedSourceCardLoaded({
|
|||
const removePromptControl = Prompt.usePromptControl()
|
||||
const navigation = useNavigationDeduped()
|
||||
|
||||
const {isPending: isSavePending, mutateAsync: saveFeed} =
|
||||
useSaveFeedMutation()
|
||||
const {isPending: isAddSavedFeedPending, mutateAsync: addSavedFeeds} =
|
||||
useAddSavedFeedsMutation()
|
||||
const {isPending: isRemovePending, mutateAsync: removeFeed} =
|
||||
useRemoveFeedMutation()
|
||||
const {isPending: isPinPending, mutateAsync: pinFeed} = usePinFeedMutation()
|
||||
|
||||
const isSaved = Boolean(preferences?.feeds?.saved?.includes(feed?.uri || ''))
|
||||
const savedFeedConfig = preferences?.savedFeeds?.find(
|
||||
f => f.value === feed?.uri,
|
||||
)
|
||||
const isSaved = Boolean(savedFeedConfig)
|
||||
|
||||
const onSave = React.useCallback(async () => {
|
||||
if (!feed) return
|
||||
if (!feed || isSaved) return
|
||||
|
||||
try {
|
||||
if (pinOnSave) {
|
||||
await pinFeed({uri: feed.uri})
|
||||
} else {
|
||||
await saveFeed({uri: feed.uri})
|
||||
}
|
||||
await addSavedFeeds([
|
||||
{
|
||||
type: 'feed',
|
||||
value: feed.uri,
|
||||
pinned: pinOnSave,
|
||||
},
|
||||
])
|
||||
Toast.show(_(msg`Added to my feeds`))
|
||||
} catch (e) {
|
||||
Toast.show(_(msg`There was an issue contacting your server`))
|
||||
logger.error('Failed to save feed', {message: e})
|
||||
}
|
||||
}, [_, feed, pinFeed, pinOnSave, saveFeed])
|
||||
}, [_, feed, pinOnSave, addSavedFeeds, isSaved])
|
||||
|
||||
const onUnsave = React.useCallback(async () => {
|
||||
if (!feed) return
|
||||
if (!savedFeedConfig) return
|
||||
|
||||
try {
|
||||
await removeFeed({uri: feed.uri})
|
||||
await removeFeed(savedFeedConfig)
|
||||
// await item.unsave()
|
||||
Toast.show(_(msg`Removed from my feeds`))
|
||||
} catch (e) {
|
||||
Toast.show(_(msg`There was an issue contacting your server`))
|
||||
logger.error('Failed to unsave feed', {message: e})
|
||||
}
|
||||
}, [_, feed, removeFeed])
|
||||
}, [_, removeFeed, savedFeedConfig])
|
||||
|
||||
const onToggleSaved = React.useCallback(async () => {
|
||||
// Only feeds can be un/saved, lists are handled elsewhere
|
||||
if (feed?.type !== 'feed') return
|
||||
|
||||
if (isSaved) {
|
||||
removePromptControl.open()
|
||||
} else {
|
||||
await onSave()
|
||||
}
|
||||
}, [feed?.type, isSaved, removePromptControl, onSave])
|
||||
}, [isSaved, removePromptControl, onSave])
|
||||
|
||||
/*
|
||||
* LOAD STATE
|
||||
|
|
@ -204,7 +206,7 @@ export function FeedSourceCardLoaded({
|
|||
}
|
||||
}}
|
||||
key={feed.uri}>
|
||||
<View style={[styles.headerContainer]}>
|
||||
<View style={[styles.headerContainer, a.align_start]}>
|
||||
<View style={[s.mr10]}>
|
||||
<UserAvatar type="algo" size={36} avatar={feed.avatar} />
|
||||
</View>
|
||||
|
|
@ -221,11 +223,11 @@ export function FeedSourceCardLoaded({
|
|||
</Text>
|
||||
</View>
|
||||
|
||||
{showSaveBtn && feed.type === 'feed' && (
|
||||
{showSaveBtn && (
|
||||
<View style={[s.justifyCenter]}>
|
||||
<Pressable
|
||||
testID={`feed-${feed.displayName}-toggleSave`}
|
||||
disabled={isSavePending || isPinPending || isRemovePending}
|
||||
disabled={isAddSavedFeedPending || isRemovePending}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel={
|
||||
isSaved
|
||||
|
|
|
|||
|
|
@ -1,12 +1,14 @@
|
|||
import React from 'react'
|
||||
import {RenderTabBarFnProps} from 'view/com/pager/Pager'
|
||||
import {HomeHeaderLayout} from './HomeHeaderLayout'
|
||||
import {FeedSourceInfo} from '#/state/queries/feed'
|
||||
import {useNavigation} from '@react-navigation/native'
|
||||
|
||||
import {usePalette} from '#/lib/hooks/usePalette'
|
||||
import {FeedSourceInfo} from '#/state/queries/feed'
|
||||
import {useSession} from '#/state/session'
|
||||
import {NavigationProp} from 'lib/routes/types'
|
||||
import {isWeb} from 'platform/detection'
|
||||
import {RenderTabBarFnProps} from 'view/com/pager/Pager'
|
||||
import {TabBar} from '../pager/TabBar'
|
||||
import {usePalette} from '#/lib/hooks/usePalette'
|
||||
import {HomeHeaderLayout} from './HomeHeaderLayout'
|
||||
|
||||
export function HomeHeader(
|
||||
props: RenderTabBarFnProps & {
|
||||
|
|
@ -16,12 +18,17 @@ export function HomeHeader(
|
|||
},
|
||||
) {
|
||||
const {feeds} = props
|
||||
const {hasSession} = useSession()
|
||||
const navigation = useNavigation<NavigationProp>()
|
||||
const pal = usePalette('default')
|
||||
|
||||
const hasPinnedCustom = React.useMemo<boolean>(() => {
|
||||
return feeds.some(tab => tab.uri !== '')
|
||||
}, [feeds])
|
||||
if (!hasSession) return false
|
||||
return feeds.some(tab => {
|
||||
const isFollowing = tab.uri === 'following'
|
||||
return !isFollowing
|
||||
})
|
||||
}, [feeds, hasSession])
|
||||
|
||||
const items = React.useMemo(() => {
|
||||
const pinnedNames = feeds.map(f => f.displayName)
|
||||
|
|
|
|||
|
|
@ -1,22 +1,23 @@
|
|||
import React from 'react'
|
||||
import {LayoutAnimation, StyleSheet, View} from 'react-native'
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
||||
import ImageView from './ImageViewing'
|
||||
import {shareImageModal, saveImageToMediaLibrary} from 'lib/media/manip'
|
||||
import * as Toast from '../util/Toast'
|
||||
import {Text} from '../util/text/Text'
|
||||
import {s, colors} from 'lib/styles'
|
||||
import {Button} from '../util/forms/Button'
|
||||
import {isIOS} from 'platform/detection'
|
||||
import * as MediaLibrary from 'expo-media-library'
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
||||
import {msg, Trans} from '@lingui/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
|
||||
import {
|
||||
ImagesLightbox,
|
||||
ProfileImageLightbox,
|
||||
useLightbox,
|
||||
useLightboxControls,
|
||||
ProfileImageLightbox,
|
||||
ImagesLightbox,
|
||||
} from '#/state/lightbox'
|
||||
import {Trans, msg} from '@lingui/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
import {saveImageToMediaLibrary, shareImageModal} from 'lib/media/manip'
|
||||
import {colors, s} from 'lib/styles'
|
||||
import {isIOS} from 'platform/detection'
|
||||
import {Button} from '../util/forms/Button'
|
||||
import {Text} from '../util/text/Text'
|
||||
import * as Toast from '../util/Toast'
|
||||
import ImageView from './ImageViewing'
|
||||
|
||||
export function Lightbox() {
|
||||
const {activeLightbox} = useLightbox()
|
||||
|
|
|
|||
|
|
@ -1,16 +1,17 @@
|
|||
import React, {useState} from 'react'
|
||||
import {StyleSheet, TouchableOpacity, View} from 'react-native'
|
||||
import {Text} from '../util/text/Text'
|
||||
import {s, colors} from 'lib/styles'
|
||||
import {msg, Trans} from '@lingui/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
|
||||
import {useModalControls} from '#/state/modals'
|
||||
import {usePalette} from 'lib/hooks/usePalette'
|
||||
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
|
||||
import {colors, s} from 'lib/styles'
|
||||
import {isWeb} from 'platform/detection'
|
||||
import {ScrollView} from 'view/com/modals/util'
|
||||
import {Button} from '../util/forms/Button'
|
||||
import {SelectableBtn} from '../util/forms/SelectableBtn'
|
||||
import {ScrollView} from 'view/com/modals/util'
|
||||
import {Trans, msg} from '@lingui/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
import {useModalControls} from '#/state/modals'
|
||||
import {Text} from '../util/text/Text'
|
||||
|
||||
const ADULT_CONTENT_LABELS = ['sexual', 'nudity', 'porn']
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
import React, {useRef, useMemo, useEffect, useState, useCallback} from 'react'
|
||||
import {StyleSheet, View, ScrollView, LayoutChangeEvent} from 'react-native'
|
||||
import {Text} from '../util/text/Text'
|
||||
import {PressableWithHover} from '../util/PressableWithHover'
|
||||
import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'
|
||||
import {LayoutChangeEvent, ScrollView, StyleSheet, View} from 'react-native'
|
||||
|
||||
import {isNative} from '#/platform/detection'
|
||||
import {usePalette} from 'lib/hooks/usePalette'
|
||||
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
|
||||
import {PressableWithHover} from '../util/PressableWithHover'
|
||||
import {Text} from '../util/text/Text'
|
||||
import {DraggableScrollView} from './DraggableScrollView'
|
||||
import {isNative} from '#/platform/detection'
|
||||
|
||||
export interface TabBarProps {
|
||||
testID?: string
|
||||
|
|
@ -139,7 +140,10 @@ export function TabBar({
|
|||
<Text
|
||||
type={isDesktop || isTablet ? 'xl-bold' : 'lg-bold'}
|
||||
testID={testID ? `${testID}-${item}` : undefined}
|
||||
style={selected ? pal.text : pal.textLight}>
|
||||
style={[
|
||||
selected ? pal.text : pal.textLight,
|
||||
{lineHeight: 20},
|
||||
]}>
|
||||
{item}
|
||||
</Text>
|
||||
</View>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import {
|
|||
View,
|
||||
ViewStyle,
|
||||
} from 'react-native'
|
||||
import {AppBskyActorDefs} from '@atproto/api'
|
||||
import {msg} from '@lingui/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
import {useQueryClient} from '@tanstack/react-query'
|
||||
|
|
@ -64,6 +65,7 @@ let Feed = ({
|
|||
desktopFixedHeightOffset,
|
||||
ListHeaderComponent,
|
||||
extraData,
|
||||
savedFeedConfig,
|
||||
}: {
|
||||
feed: FeedDescriptor
|
||||
feedParams?: FeedParams
|
||||
|
|
@ -82,6 +84,7 @@ let Feed = ({
|
|||
desktopFixedHeightOffset?: number
|
||||
ListHeaderComponent?: () => JSX.Element
|
||||
extraData?: any
|
||||
savedFeedConfig?: AppBskyActorDefs.SavedFeed
|
||||
}): React.ReactNode => {
|
||||
const theme = useTheme()
|
||||
const {track} = useAnalytics()
|
||||
|
|
@ -140,7 +143,6 @@ let Feed = ({
|
|||
if (
|
||||
data?.pages.length === 1 &&
|
||||
(feed === 'following' ||
|
||||
feed === 'home' ||
|
||||
feed === `author|${myDid}|posts_and_author_threads`)
|
||||
) {
|
||||
queryClient.invalidateQueries({queryKey: RQKEY(feed)})
|
||||
|
|
@ -280,6 +282,7 @@ let Feed = ({
|
|||
feedDesc={feed}
|
||||
error={error ?? undefined}
|
||||
onPressTryAgain={onPressTryAgain}
|
||||
savedFeedConfig={savedFeedConfig}
|
||||
/>
|
||||
)
|
||||
} else if (item === LOAD_MORE_ERROR_ITEM) {
|
||||
|
|
@ -302,7 +305,15 @@ let Feed = ({
|
|||
}
|
||||
return <FeedSlice slice={item} />
|
||||
},
|
||||
[feed, error, onPressTryAgain, onPressRetryLoadMore, renderEmptyState, _],
|
||||
[
|
||||
feed,
|
||||
error,
|
||||
onPressTryAgain,
|
||||
onPressRetryLoadMore,
|
||||
renderEmptyState,
|
||||
_,
|
||||
savedFeedConfig,
|
||||
],
|
||||
)
|
||||
|
||||
const shouldRenderEndOfFeed =
|
||||
|
|
|
|||
|
|
@ -1,21 +1,22 @@
|
|||
import React from 'react'
|
||||
import {View} from 'react-native'
|
||||
import {AppBskyFeedGetAuthorFeed, AtUri} from '@atproto/api'
|
||||
import {Text} from '../util/text/Text'
|
||||
import {Button} from '../util/forms/Button'
|
||||
import * as Toast from '../util/Toast'
|
||||
import {ErrorMessage} from '../util/error/ErrorMessage'
|
||||
import {usePalette} from 'lib/hooks/usePalette'
|
||||
import {useNavigation} from '@react-navigation/native'
|
||||
import {NavigationProp} from 'lib/routes/types'
|
||||
import {logger} from '#/logger'
|
||||
import {AppBskyActorDefs, AppBskyFeedGetAuthorFeed, AtUri} from '@atproto/api'
|
||||
import {msg as msgLingui, Trans} from '@lingui/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
import {FeedDescriptor} from '#/state/queries/post-feed'
|
||||
import {EmptyState} from '../util/EmptyState'
|
||||
import {useNavigation} from '@react-navigation/native'
|
||||
|
||||
import {cleanError} from '#/lib/strings/errors'
|
||||
import {logger} from '#/logger'
|
||||
import {FeedDescriptor} from '#/state/queries/post-feed'
|
||||
import {useRemoveFeedMutation} from '#/state/queries/preferences'
|
||||
import {usePalette} from 'lib/hooks/usePalette'
|
||||
import {NavigationProp} from 'lib/routes/types'
|
||||
import * as Prompt from '#/components/Prompt'
|
||||
import {EmptyState} from '../util/EmptyState'
|
||||
import {ErrorMessage} from '../util/error/ErrorMessage'
|
||||
import {Button} from '../util/forms/Button'
|
||||
import {Text} from '../util/text/Text'
|
||||
import * as Toast from '../util/Toast'
|
||||
|
||||
export enum KnownError {
|
||||
Block = 'Block',
|
||||
|
|
@ -33,10 +34,12 @@ export function FeedErrorMessage({
|
|||
feedDesc,
|
||||
error,
|
||||
onPressTryAgain,
|
||||
savedFeedConfig,
|
||||
}: {
|
||||
feedDesc: FeedDescriptor
|
||||
error?: Error
|
||||
onPressTryAgain: () => void
|
||||
savedFeedConfig?: AppBskyActorDefs.SavedFeed
|
||||
}) {
|
||||
const {_: _l} = useLingui()
|
||||
const knownError = React.useMemo(
|
||||
|
|
@ -46,13 +49,15 @@ export function FeedErrorMessage({
|
|||
if (
|
||||
typeof knownError !== 'undefined' &&
|
||||
knownError !== KnownError.Unknown &&
|
||||
(feedDesc.startsWith('feedgen') || knownError === KnownError.FeedNSFPublic)
|
||||
(savedFeedConfig?.type === 'feed' ||
|
||||
knownError === KnownError.FeedNSFPublic)
|
||||
) {
|
||||
return (
|
||||
<FeedgenErrorMessage
|
||||
feedDesc={feedDesc}
|
||||
knownError={knownError}
|
||||
rawError={error}
|
||||
savedFeedConfig={savedFeedConfig}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
@ -79,10 +84,12 @@ function FeedgenErrorMessage({
|
|||
feedDesc,
|
||||
knownError,
|
||||
rawError,
|
||||
savedFeedConfig,
|
||||
}: {
|
||||
feedDesc: FeedDescriptor
|
||||
knownError: KnownError
|
||||
rawError?: Error
|
||||
savedFeedConfig?: AppBskyActorDefs.SavedFeed
|
||||
}) {
|
||||
const pal = usePalette('default')
|
||||
const {_: _l} = useLingui()
|
||||
|
|
@ -131,7 +138,8 @@ function FeedgenErrorMessage({
|
|||
|
||||
const onRemoveFeed = React.useCallback(async () => {
|
||||
try {
|
||||
await removeFeed({uri})
|
||||
if (!savedFeedConfig) return
|
||||
await removeFeed(savedFeedConfig)
|
||||
} catch (err) {
|
||||
Toast.show(
|
||||
_l(
|
||||
|
|
@ -140,7 +148,7 @@ function FeedgenErrorMessage({
|
|||
)
|
||||
logger.error('Failed to remove feed', {message: err})
|
||||
}
|
||||
}, [uri, removeFeed, _l])
|
||||
}, [removeFeed, _l, savedFeedConfig])
|
||||
|
||||
const cta = React.useMemo(() => {
|
||||
switch (knownError) {
|
||||
|
|
@ -154,13 +162,14 @@ function FeedgenErrorMessage({
|
|||
case KnownError.FeedgenUnknown: {
|
||||
return (
|
||||
<View style={{flexDirection: 'row', alignItems: 'center', gap: 10}}>
|
||||
{knownError === KnownError.FeedgenDoesNotExist && (
|
||||
<Button
|
||||
type="inverted"
|
||||
label={_l(msgLingui`Remove feed`)}
|
||||
onPress={onRemoveFeed}
|
||||
/>
|
||||
)}
|
||||
{knownError === KnownError.FeedgenDoesNotExist &&
|
||||
savedFeedConfig && (
|
||||
<Button
|
||||
type="inverted"
|
||||
label={_l(msgLingui`Remove feed`)}
|
||||
onPress={onRemoveFeed}
|
||||
/>
|
||||
)}
|
||||
<Button
|
||||
type="default-light"
|
||||
label={_l(msgLingui`View profile`)}
|
||||
|
|
@ -170,7 +179,7 @@ function FeedgenErrorMessage({
|
|||
)
|
||||
}
|
||||
}
|
||||
}, [knownError, onViewProfile, onRemoveFeed, _l])
|
||||
}, [knownError, onViewProfile, onRemoveFeed, _l, savedFeedConfig])
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,16 @@
|
|||
import React, {memo, useCallback} from 'react'
|
||||
import {StyleProp, StyleSheet, TouchableOpacity, ViewStyle} from 'react-native'
|
||||
import {RepostIcon} from 'lib/icons'
|
||||
import {s, colors} from 'lib/styles'
|
||||
import {useTheme} from 'lib/ThemeContext'
|
||||
import {Text} from '../text/Text'
|
||||
import {HITSLOP_10, HITSLOP_20} from 'lib/constants'
|
||||
import {useModalControls} from '#/state/modals'
|
||||
import {useRequireAuth} from '#/state/session'
|
||||
import {msg, plural} from '@lingui/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
|
||||
import {useModalControls} from '#/state/modals'
|
||||
import {useRequireAuth} from '#/state/session'
|
||||
import {HITSLOP_10, HITSLOP_20} from 'lib/constants'
|
||||
import {RepostIcon} from 'lib/icons'
|
||||
import {colors, s} from 'lib/styles'
|
||||
import {useTheme} from 'lib/ThemeContext'
|
||||
import {Text} from '../text/Text'
|
||||
|
||||
interface Props {
|
||||
isReposted: boolean
|
||||
repostCount?: number
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import {
|
|||
StyleSheet,
|
||||
View,
|
||||
} from 'react-native'
|
||||
import {AppBskyActorDefs} from '@atproto/api'
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
||||
import {FontAwesomeIconStyle} from '@fortawesome/react-native-fontawesome'
|
||||
import {msg, Trans} from '@lingui/macro'
|
||||
|
|
@ -44,8 +45,11 @@ import {
|
|||
import {Text} from 'view/com/util/text/Text'
|
||||
import {UserAvatar} from 'view/com/util/UserAvatar'
|
||||
import {ViewHeader} from 'view/com/util/ViewHeader'
|
||||
import {NoFollowingFeed} from '#/screens/Feeds/NoFollowingFeed'
|
||||
import {NoSavedFeedsOfAnyType} from '#/screens/Feeds/NoSavedFeedsOfAnyType'
|
||||
import {atoms as a, useTheme} from '#/alf'
|
||||
import {IconCircle} from '#/components/IconCircle'
|
||||
import {FilterTimeline_Stroke2_Corner0_Rounded as FilterTimeline} from '#/components/icons/FilterTimeline'
|
||||
import {ListMagnifyingGlass_Stroke2_Corner0_Rounded} from '#/components/icons/ListMagnifyingGlass'
|
||||
import {ListSparkle_Stroke2_Corner0_Rounded} from '#/components/icons/ListSparkle'
|
||||
|
||||
|
|
@ -74,6 +78,7 @@ type FlatlistSlice =
|
|||
type: 'savedFeed'
|
||||
key: string
|
||||
feedUri: string
|
||||
savedFeedConfig: AppBskyActorDefs.SavedFeed
|
||||
}
|
||||
| {
|
||||
type: 'savedFeedsLoadMore'
|
||||
|
|
@ -100,6 +105,10 @@ type FlatlistSlice =
|
|||
type: 'popularFeedsLoadingMore'
|
||||
key: string
|
||||
}
|
||||
| {
|
||||
type: 'noFollowingFeed'
|
||||
key: string
|
||||
}
|
||||
|
||||
// HACK
|
||||
// the protocol doesn't yet tell us which feeds are personalized
|
||||
|
|
@ -229,33 +238,54 @@ export function FeedsScreen(_props: Props) {
|
|||
error: cleanError(preferencesError.toString()),
|
||||
})
|
||||
} else {
|
||||
if (isPreferencesLoading || !preferences?.feeds?.saved) {
|
||||
if (isPreferencesLoading || !preferences?.savedFeeds) {
|
||||
slices.push({
|
||||
key: 'savedFeedsLoading',
|
||||
type: 'savedFeedsLoading',
|
||||
// pendingItems: this.rootStore.preferences.savedFeeds.length || 3,
|
||||
})
|
||||
} else {
|
||||
if (preferences?.feeds?.saved.length !== 0) {
|
||||
const {saved, pinned} = preferences.feeds
|
||||
|
||||
slices = slices.concat(
|
||||
pinned.map(uri => ({
|
||||
key: `savedFeed:${uri}`,
|
||||
type: 'savedFeed',
|
||||
feedUri: uri,
|
||||
})),
|
||||
if (preferences.savedFeeds?.length) {
|
||||
const noFollowingFeed = preferences.savedFeeds.every(
|
||||
f => f.type !== 'timeline',
|
||||
)
|
||||
|
||||
slices = slices.concat(
|
||||
saved
|
||||
.filter(uri => !pinned.includes(uri))
|
||||
.map(uri => ({
|
||||
key: `savedFeed:${uri}`,
|
||||
preferences.savedFeeds
|
||||
.filter(f => {
|
||||
return f.pinned
|
||||
})
|
||||
.map(feed => ({
|
||||
key: `savedFeed:${feed.value}:${feed.id}`,
|
||||
type: 'savedFeed',
|
||||
feedUri: uri,
|
||||
feedUri: feed.value,
|
||||
savedFeedConfig: feed,
|
||||
})),
|
||||
)
|
||||
slices = slices.concat(
|
||||
preferences.savedFeeds
|
||||
.filter(f => {
|
||||
return !f.pinned
|
||||
})
|
||||
.map(feed => ({
|
||||
key: `savedFeed:${feed.value}:${feed.id}`,
|
||||
type: 'savedFeed',
|
||||
feedUri: feed.value,
|
||||
savedFeedConfig: feed,
|
||||
})),
|
||||
)
|
||||
|
||||
if (noFollowingFeed) {
|
||||
slices.push({
|
||||
key: 'noFollowingFeed',
|
||||
type: 'noFollowingFeed',
|
||||
})
|
||||
}
|
||||
} else {
|
||||
slices.push({
|
||||
key: 'savedFeedNoResults',
|
||||
type: 'savedFeedNoResults',
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -323,7 +353,12 @@ export function FeedsScreen(_props: Props) {
|
|||
) {
|
||||
return false
|
||||
}
|
||||
return !preferences?.feeds?.saved.includes(feed.uri)
|
||||
const alreadySaved = Boolean(
|
||||
preferences?.savedFeeds?.find(f => {
|
||||
return f.value === feed.uri
|
||||
}),
|
||||
)
|
||||
return !alreadySaved
|
||||
})
|
||||
.map(feed => ({
|
||||
key: `popularFeed:${feed.uri}`,
|
||||
|
|
@ -463,23 +498,23 @@ export function FeedsScreen(_props: Props) {
|
|||
</View>
|
||||
</View>
|
||||
)}
|
||||
{preferences?.feeds?.saved?.length !== 0 && <FeedsSavedHeader />}
|
||||
<FeedsSavedHeader />
|
||||
</>
|
||||
)
|
||||
} else if (item.type === 'savedFeedNoResults') {
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
paddingHorizontal: 16,
|
||||
paddingTop: 10,
|
||||
}}>
|
||||
<Text type="lg" style={pal.textLight}>
|
||||
<Trans>You don't have any saved feeds!</Trans>
|
||||
</Text>
|
||||
style={[
|
||||
pal.border,
|
||||
{
|
||||
borderBottomWidth: 1,
|
||||
},
|
||||
]}>
|
||||
<NoSavedFeedsOfAnyType />
|
||||
</View>
|
||||
)
|
||||
} else if (item.type === 'savedFeed') {
|
||||
return <SavedFeed feedUri={item.feedUri} />
|
||||
return <FeedOrFollowing savedFeedConfig={item.savedFeedConfig} />
|
||||
} else if (item.type === 'popularFeedsHeader') {
|
||||
return (
|
||||
<>
|
||||
|
|
@ -521,6 +556,18 @@ export function FeedsScreen(_props: Props) {
|
|||
</Text>
|
||||
</View>
|
||||
)
|
||||
} else if (item.type === 'noFollowingFeed') {
|
||||
return (
|
||||
<View
|
||||
style={[
|
||||
pal.border,
|
||||
{
|
||||
borderBottomWidth: 1,
|
||||
},
|
||||
]}>
|
||||
<NoFollowingFeed />
|
||||
</View>
|
||||
)
|
||||
}
|
||||
return null
|
||||
},
|
||||
|
|
@ -532,7 +579,6 @@ export function FeedsScreen(_props: Props) {
|
|||
pal.icon,
|
||||
pal.textLight,
|
||||
_,
|
||||
preferences?.feeds?.saved?.length,
|
||||
query,
|
||||
onChangeQuery,
|
||||
onPressCancelSearch,
|
||||
|
|
@ -585,16 +631,75 @@ export function FeedsScreen(_props: Props) {
|
|||
)
|
||||
}
|
||||
|
||||
function SavedFeed({feedUri}: {feedUri: string}) {
|
||||
function FeedOrFollowing({
|
||||
savedFeedConfig: feed,
|
||||
}: {
|
||||
savedFeedConfig: AppBskyActorDefs.SavedFeed
|
||||
}) {
|
||||
return feed.type === 'timeline' ? (
|
||||
<FollowingFeed />
|
||||
) : (
|
||||
<SavedFeed savedFeedConfig={feed} />
|
||||
)
|
||||
}
|
||||
|
||||
function FollowingFeed() {
|
||||
const pal = usePalette('default')
|
||||
const t = useTheme()
|
||||
const {isMobile} = useWebMediaQueries()
|
||||
return (
|
||||
<View
|
||||
testID={`saved-feed-timeline`}
|
||||
style={[
|
||||
pal.border,
|
||||
styles.savedFeed,
|
||||
isMobile && styles.savedFeedMobile,
|
||||
]}>
|
||||
<View
|
||||
style={[
|
||||
a.align_center,
|
||||
a.justify_center,
|
||||
{
|
||||
width: 28,
|
||||
height: 28,
|
||||
borderRadius: 3,
|
||||
backgroundColor: t.palette.primary_500,
|
||||
},
|
||||
]}>
|
||||
<FilterTimeline
|
||||
style={[
|
||||
{
|
||||
width: 18,
|
||||
height: 18,
|
||||
},
|
||||
]}
|
||||
fill={t.palette.white}
|
||||
/>
|
||||
</View>
|
||||
<View
|
||||
style={{flex: 1, flexDirection: 'row', gap: 8, alignItems: 'center'}}>
|
||||
<Text type="lg-medium" style={pal.text} numberOfLines={1}>
|
||||
<Trans>Following</Trans>
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
function SavedFeed({
|
||||
savedFeedConfig: feed,
|
||||
}: {
|
||||
savedFeedConfig: AppBskyActorDefs.SavedFeed
|
||||
}) {
|
||||
const pal = usePalette('default')
|
||||
const {isMobile} = useWebMediaQueries()
|
||||
const {data: info, error} = useFeedSourceInfoQuery({uri: feedUri})
|
||||
const typeAvatar = getAvatarTypeFromUri(feedUri)
|
||||
const {data: info, error} = useFeedSourceInfoQuery({uri: feed.value})
|
||||
const typeAvatar = getAvatarTypeFromUri(feed.value)
|
||||
|
||||
if (!info)
|
||||
return (
|
||||
<SavedFeedLoadingPlaceholder
|
||||
key={`savedFeedLoadingPlaceholder:${feedUri}`}
|
||||
key={`savedFeedLoadingPlaceholder:${feed.value}`}
|
||||
/>
|
||||
)
|
||||
|
||||
|
|
@ -632,6 +737,7 @@ function SavedFeed({feedUri}: {feedUri: string}) {
|
|||
</View>
|
||||
) : null}
|
||||
</View>
|
||||
|
||||
{isMobile && (
|
||||
<FontAwesomeIcon
|
||||
icon="chevron-right"
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@ import {useSetTitle} from '#/lib/hooks/useSetTitle'
|
|||
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
|
||||
import {logEvent, LogEvents, useGate} from '#/lib/statsig/statsig'
|
||||
import {emitSoftReset} from '#/state/events'
|
||||
import {FeedSourceInfo, usePinnedFeedsInfos} from '#/state/queries/feed'
|
||||
import {FeedDescriptor, FeedParams} from '#/state/queries/post-feed'
|
||||
import {SavedFeedSourceInfo, usePinnedFeedsInfos} from '#/state/queries/feed'
|
||||
import {FeedParams} from '#/state/queries/post-feed'
|
||||
import {usePreferencesQuery} from '#/state/queries/preferences'
|
||||
import {UsePreferencesQueryResponse} from '#/state/queries/preferences/types'
|
||||
import {useSession} from '#/state/session'
|
||||
|
|
@ -26,6 +26,7 @@ import {Pager, PagerRef, RenderTabBarFnProps} from 'view/com/pager/Pager'
|
|||
import {CustomFeedEmptyState} from 'view/com/posts/CustomFeedEmptyState'
|
||||
import {FollowingEmptyState} from 'view/com/posts/FollowingEmptyState'
|
||||
import {FollowingEndOfFeed} from 'view/com/posts/FollowingEndOfFeed'
|
||||
import {NoFeedsPinned} from '#/screens/Home/NoFeedsPinned'
|
||||
import {HomeHeader} from '../com/home/HomeHeader'
|
||||
|
||||
type Props = NativeStackScreenProps<HomeTabNavigatorParams, 'Home'>
|
||||
|
|
@ -55,26 +56,16 @@ function HomeScreenReady({
|
|||
pinnedFeedInfos,
|
||||
}: Props & {
|
||||
preferences: UsePreferencesQueryResponse
|
||||
pinnedFeedInfos: FeedSourceInfo[]
|
||||
pinnedFeedInfos: SavedFeedSourceInfo[]
|
||||
}) {
|
||||
useOTAUpdates()
|
||||
|
||||
const allFeeds = React.useMemo(() => {
|
||||
const feeds: FeedDescriptor[] = []
|
||||
feeds.push('home')
|
||||
for (const {uri} of pinnedFeedInfos) {
|
||||
if (uri.includes('app.bsky.feed.generator')) {
|
||||
feeds.push(`feedgen|${uri}`)
|
||||
} else if (uri.includes('app.bsky.graph.list')) {
|
||||
feeds.push(`list|${uri}`)
|
||||
}
|
||||
}
|
||||
return feeds
|
||||
}, [pinnedFeedInfos])
|
||||
|
||||
const rawSelectedFeed = useSelectedFeed()
|
||||
const allFeeds = React.useMemo(
|
||||
() => pinnedFeedInfos.map(f => f.feedDescriptor),
|
||||
[pinnedFeedInfos],
|
||||
)
|
||||
const rawSelectedFeed = useSelectedFeed() ?? allFeeds[0]
|
||||
const setSelectedFeed = useSetSelectedFeed()
|
||||
const maybeFoundIndex = allFeeds.indexOf(rawSelectedFeed as FeedDescriptor)
|
||||
const maybeFoundIndex = allFeeds.indexOf(rawSelectedFeed)
|
||||
const selectedIndex = Math.max(0, maybeFoundIndex)
|
||||
const selectedFeed = allFeeds[selectedIndex]
|
||||
|
||||
|
|
@ -107,12 +98,14 @@ function HomeScreenReady({
|
|||
|
||||
useFocusEffect(
|
||||
useNonReactiveCallback(() => {
|
||||
logEvent('home:feedDisplayed', {
|
||||
index: selectedIndex,
|
||||
feedType: selectedFeed.split('|')[0],
|
||||
feedUrl: selectedFeed,
|
||||
reason: 'focus',
|
||||
})
|
||||
if (selectedFeed) {
|
||||
logEvent('home:feedDisplayed', {
|
||||
index: selectedIndex,
|
||||
feedType: selectedFeed.split('|')[0],
|
||||
feedUrl: selectedFeed,
|
||||
reason: 'focus',
|
||||
})
|
||||
}
|
||||
}),
|
||||
)
|
||||
|
||||
|
|
@ -198,12 +191,13 @@ function HomeScreenReady({
|
|||
return <CustomFeedEmptyState />
|
||||
}, [])
|
||||
|
||||
const [homeFeed, ...customFeeds] = allFeeds
|
||||
const homeFeedParams = React.useMemo<FeedParams>(() => {
|
||||
return {
|
||||
mergeFeedEnabled: Boolean(preferences.feedViewPrefs.lab_mergeFeedEnabled),
|
||||
mergeFeedSources: preferences.feedViewPrefs.lab_mergeFeedEnabled
|
||||
? preferences.feeds.saved
|
||||
? preferences.savedFeeds
|
||||
.filter(f => f.type === 'feed' || f.type === 'list')
|
||||
.map(f => f.value)
|
||||
: [],
|
||||
}
|
||||
}, [preferences])
|
||||
|
|
@ -218,26 +212,37 @@ function HomeScreenReady({
|
|||
onPageSelected={onPageSelected}
|
||||
onPageScrollStateChanged={onPageScrollStateChanged}
|
||||
renderTabBar={renderTabBar}>
|
||||
<FeedPage
|
||||
key={homeFeed}
|
||||
testID="followingFeedPage"
|
||||
isPageFocused={selectedFeed === homeFeed}
|
||||
feed={homeFeed}
|
||||
feedParams={homeFeedParams}
|
||||
renderEmptyState={renderFollowingEmptyState}
|
||||
renderEndOfFeed={FollowingEndOfFeed}
|
||||
/>
|
||||
{customFeeds.map(feed => {
|
||||
return (
|
||||
<FeedPage
|
||||
key={feed}
|
||||
testID="customFeedPage"
|
||||
isPageFocused={selectedFeed === feed}
|
||||
feed={feed}
|
||||
renderEmptyState={renderCustomFeedEmptyState}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
{pinnedFeedInfos.length ? (
|
||||
pinnedFeedInfos.map(feedInfo => {
|
||||
const feed = feedInfo.feedDescriptor
|
||||
if (feed === 'following') {
|
||||
return (
|
||||
<FeedPage
|
||||
key={feed}
|
||||
testID="followingFeedPage"
|
||||
isPageFocused={selectedFeed === feed}
|
||||
feed={feed}
|
||||
feedParams={homeFeedParams}
|
||||
renderEmptyState={renderFollowingEmptyState}
|
||||
renderEndOfFeed={FollowingEndOfFeed}
|
||||
/>
|
||||
)
|
||||
}
|
||||
const savedFeedConfig = feedInfo.savedFeed
|
||||
return (
|
||||
<FeedPage
|
||||
key={feed}
|
||||
testID="customFeedPage"
|
||||
isPageFocused={selectedFeed === feed}
|
||||
feed={feed}
|
||||
renderEmptyState={renderCustomFeedEmptyState}
|
||||
savedFeedConfig={savedFeedConfig}
|
||||
/>
|
||||
)
|
||||
})
|
||||
) : (
|
||||
<NoFeedsPinned preferences={preferences} />
|
||||
)}
|
||||
</Pager>
|
||||
) : (
|
||||
<Pager
|
||||
|
|
|
|||
|
|
@ -1,23 +1,24 @@
|
|||
import React, {useState} from 'react'
|
||||
import {ScrollView, StyleSheet, TouchableOpacity, View} from 'react-native'
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
||||
import {Slider} from '@miblanchard/react-native-slider'
|
||||
import {Text} from '../com/util/text/Text'
|
||||
import {s, colors} from 'lib/styles'
|
||||
import {usePalette} from 'lib/hooks/usePalette'
|
||||
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
|
||||
import {isWeb} from 'platform/detection'
|
||||
import {ToggleButton} from 'view/com/util/forms/ToggleButton'
|
||||
import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types'
|
||||
import {ViewHeader} from 'view/com/util/ViewHeader'
|
||||
import {CenteredView} from 'view/com/util/Views'
|
||||
import debounce from 'lodash.debounce'
|
||||
import {Trans, msg, Plural} from '@lingui/macro'
|
||||
import {msg, Plural, Trans} from '@lingui/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
import {Slider} from '@miblanchard/react-native-slider'
|
||||
import debounce from 'lodash.debounce'
|
||||
|
||||
import {
|
||||
usePreferencesQuery,
|
||||
useSetFeedViewPreferencesMutation,
|
||||
} from '#/state/queries/preferences'
|
||||
import {usePalette} from 'lib/hooks/usePalette'
|
||||
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
|
||||
import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types'
|
||||
import {colors, s} from 'lib/styles'
|
||||
import {isWeb} from 'platform/detection'
|
||||
import {ToggleButton} from 'view/com/util/forms/ToggleButton'
|
||||
import {ViewHeader} from 'view/com/util/ViewHeader'
|
||||
import {CenteredView} from 'view/com/util/Views'
|
||||
import {Text} from '../com/util/text/Text'
|
||||
|
||||
function RepliesThresholdInput({
|
||||
enabled,
|
||||
|
|
|
|||
|
|
@ -16,12 +16,11 @@ import {useLikeMutation, useUnlikeMutation} from '#/state/queries/like'
|
|||
import {FeedDescriptor} from '#/state/queries/post-feed'
|
||||
import {RQKEY as FEED_RQKEY} from '#/state/queries/post-feed'
|
||||
import {
|
||||
usePinFeedMutation,
|
||||
useAddSavedFeedsMutation,
|
||||
usePreferencesQuery,
|
||||
UsePreferencesQueryResponse,
|
||||
useRemoveFeedMutation,
|
||||
useSaveFeedMutation,
|
||||
useUnpinFeedMutation,
|
||||
useUpdateSavedFeedsMutation,
|
||||
} from '#/state/queries/preferences'
|
||||
import {useResolveUriQuery} from '#/state/queries/resolve-uri'
|
||||
import {truncateAndInvalidate} from '#/state/queries/util'
|
||||
|
|
@ -163,37 +162,20 @@ export function ProfileFeedScreenInner({
|
|||
const feedSectionRef = React.useRef<SectionRef>(null)
|
||||
const isScreenFocused = useIsFocused()
|
||||
|
||||
const {
|
||||
mutateAsync: saveFeed,
|
||||
variables: savedFeed,
|
||||
reset: resetSaveFeed,
|
||||
isPending: isSavePending,
|
||||
} = useSaveFeedMutation()
|
||||
const {
|
||||
mutateAsync: removeFeed,
|
||||
variables: removedFeed,
|
||||
reset: resetRemoveFeed,
|
||||
isPending: isRemovePending,
|
||||
} = useRemoveFeedMutation()
|
||||
const {
|
||||
mutateAsync: pinFeed,
|
||||
variables: pinnedFeed,
|
||||
reset: resetPinFeed,
|
||||
isPending: isPinPending,
|
||||
} = usePinFeedMutation()
|
||||
const {
|
||||
mutateAsync: unpinFeed,
|
||||
variables: unpinnedFeed,
|
||||
reset: resetUnpinFeed,
|
||||
isPending: isUnpinPending,
|
||||
} = useUnpinFeedMutation()
|
||||
const {mutateAsync: addSavedFeeds, isPending: isAddSavedFeedPending} =
|
||||
useAddSavedFeedsMutation()
|
||||
const {mutateAsync: removeFeed, isPending: isRemovePending} =
|
||||
useRemoveFeedMutation()
|
||||
const {mutateAsync: updateSavedFeeds, isPending: isUpdateFeedPending} =
|
||||
useUpdateSavedFeedsMutation()
|
||||
|
||||
const isSaved =
|
||||
!removedFeed &&
|
||||
(!!savedFeed || preferences.feeds.saved.includes(feedInfo.uri))
|
||||
const isPinned =
|
||||
!unpinnedFeed &&
|
||||
(!!pinnedFeed || preferences.feeds.pinned.includes(feedInfo.uri))
|
||||
const isPending =
|
||||
isAddSavedFeedPending || isRemovePending || isUpdateFeedPending
|
||||
const savedFeedConfig = preferences.savedFeeds.find(
|
||||
f => f.value === feedInfo.uri,
|
||||
)
|
||||
const isSaved = Boolean(savedFeedConfig)
|
||||
const isPinned = Boolean(savedFeedConfig?.pinned)
|
||||
|
||||
useSetTitle(feedInfo?.displayName)
|
||||
|
||||
|
|
@ -204,13 +186,17 @@ export function ProfileFeedScreenInner({
|
|||
try {
|
||||
playHaptic()
|
||||
|
||||
if (isSaved) {
|
||||
await removeFeed({uri: feedInfo.uri})
|
||||
resetRemoveFeed()
|
||||
if (savedFeedConfig) {
|
||||
await removeFeed(savedFeedConfig)
|
||||
Toast.show(_(msg`Removed from your feeds`))
|
||||
} else {
|
||||
await saveFeed({uri: feedInfo.uri})
|
||||
resetSaveFeed()
|
||||
await addSavedFeeds([
|
||||
{
|
||||
type: 'feed',
|
||||
value: feedInfo.uri,
|
||||
pinned: false,
|
||||
},
|
||||
])
|
||||
Toast.show(_(msg`Saved to your feeds`))
|
||||
}
|
||||
} catch (err) {
|
||||
|
|
@ -221,27 +207,27 @@ export function ProfileFeedScreenInner({
|
|||
)
|
||||
logger.error('Failed up update feeds', {message: err})
|
||||
}
|
||||
}, [
|
||||
playHaptic,
|
||||
isSaved,
|
||||
removeFeed,
|
||||
feedInfo,
|
||||
resetRemoveFeed,
|
||||
_,
|
||||
saveFeed,
|
||||
resetSaveFeed,
|
||||
])
|
||||
}, [_, playHaptic, feedInfo, removeFeed, addSavedFeeds, savedFeedConfig])
|
||||
|
||||
const onTogglePinned = React.useCallback(async () => {
|
||||
try {
|
||||
playHaptic()
|
||||
|
||||
if (isPinned) {
|
||||
await unpinFeed({uri: feedInfo.uri})
|
||||
resetUnpinFeed()
|
||||
if (savedFeedConfig) {
|
||||
await updateSavedFeeds([
|
||||
{
|
||||
...savedFeedConfig,
|
||||
pinned: !savedFeedConfig.pinned,
|
||||
},
|
||||
])
|
||||
} else {
|
||||
await pinFeed({uri: feedInfo.uri})
|
||||
resetPinFeed()
|
||||
await addSavedFeeds([
|
||||
{
|
||||
type: 'feed',
|
||||
value: feedInfo.uri,
|
||||
pinned: true,
|
||||
},
|
||||
])
|
||||
}
|
||||
} catch (e) {
|
||||
Toast.show(_(msg`There was an issue contacting the server`))
|
||||
|
|
@ -249,13 +235,11 @@ export function ProfileFeedScreenInner({
|
|||
}
|
||||
}, [
|
||||
playHaptic,
|
||||
isPinned,
|
||||
unpinFeed,
|
||||
feedInfo,
|
||||
resetUnpinFeed,
|
||||
pinFeed,
|
||||
resetPinFeed,
|
||||
_,
|
||||
savedFeedConfig,
|
||||
updateSavedFeeds,
|
||||
addSavedFeeds,
|
||||
])
|
||||
|
||||
const onPressShare = React.useCallback(() => {
|
||||
|
|
@ -296,7 +280,7 @@ export function ProfileFeedScreenInner({
|
|||
{feedInfo && hasSession && (
|
||||
<NewButton
|
||||
testID={isPinned ? 'unpinBtn' : 'pinBtn'}
|
||||
disabled={isPinPending || isUnpinPending}
|
||||
disabled={isPending}
|
||||
size="small"
|
||||
variant="solid"
|
||||
color={isPinned ? 'secondary' : 'primary'}
|
||||
|
|
@ -339,7 +323,7 @@ export function ProfileFeedScreenInner({
|
|||
{hasSession && (
|
||||
<>
|
||||
<Menu.Item
|
||||
disabled={isSavePending || isRemovePending}
|
||||
disabled={isPending}
|
||||
testID="feedHeaderDropdownToggleSavedBtn"
|
||||
label={
|
||||
isSaved
|
||||
|
|
@ -395,14 +379,11 @@ export function ProfileFeedScreenInner({
|
|||
onTogglePinned,
|
||||
onToggleSaved,
|
||||
currentAccount?.did,
|
||||
isPinPending,
|
||||
isRemovePending,
|
||||
isSavePending,
|
||||
isSaved,
|
||||
isUnpinPending,
|
||||
onPressReport,
|
||||
onPressShare,
|
||||
t,
|
||||
isPending,
|
||||
])
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -23,10 +23,10 @@ import {
|
|||
import {FeedDescriptor} from '#/state/queries/post-feed'
|
||||
import {RQKEY as FEED_RQKEY} from '#/state/queries/post-feed'
|
||||
import {
|
||||
usePinFeedMutation,
|
||||
useAddSavedFeedsMutation,
|
||||
usePreferencesQuery,
|
||||
useSetSaveFeedsMutation,
|
||||
useUnpinFeedMutation,
|
||||
useRemoveFeedMutation,
|
||||
useUpdateSavedFeedsMutation,
|
||||
} from '#/state/queries/preferences'
|
||||
import {useResolveUriQuery} from '#/state/queries/resolve-uri'
|
||||
import {truncateAndInvalidate} from '#/state/queries/util'
|
||||
|
|
@ -248,36 +248,76 @@ function Header({rkey, list}: {rkey: string; list: AppBskyGraphDefs.ListView}) {
|
|||
const isBlocking = !!list.viewer?.blocked
|
||||
const isMuting = !!list.viewer?.muted
|
||||
const isOwner = list.creator.did === currentAccount?.did
|
||||
const {isPending: isPinPending, mutateAsync: pinFeed} = usePinFeedMutation()
|
||||
const {isPending: isUnpinPending, mutateAsync: unpinFeed} =
|
||||
useUnpinFeedMutation()
|
||||
const isPending = isPinPending || isUnpinPending
|
||||
const {data: preferences} = usePreferencesQuery()
|
||||
const {mutate: setSavedFeeds} = useSetSaveFeedsMutation()
|
||||
const {track} = useAnalytics()
|
||||
const playHaptic = useHaptics()
|
||||
|
||||
const {mutateAsync: addSavedFeeds, isPending: isAddSavedFeedPending} =
|
||||
useAddSavedFeedsMutation()
|
||||
const {mutateAsync: removeSavedFeed, isPending: isRemovePending} =
|
||||
useRemoveFeedMutation()
|
||||
const {mutateAsync: updateSavedFeeds, isPending: isUpdatingSavedFeeds} =
|
||||
useUpdateSavedFeedsMutation()
|
||||
|
||||
const isPending =
|
||||
isAddSavedFeedPending || isRemovePending || isUpdatingSavedFeeds
|
||||
|
||||
const deleteListPromptControl = useDialogControl()
|
||||
const subscribeMutePromptControl = useDialogControl()
|
||||
const subscribeBlockPromptControl = useDialogControl()
|
||||
|
||||
const isPinned = preferences?.feeds?.pinned?.includes(list.uri)
|
||||
const isSaved = preferences?.feeds?.saved?.includes(list.uri)
|
||||
const savedFeedConfig = preferences?.savedFeeds?.find(
|
||||
f => f.value === list.uri,
|
||||
)
|
||||
const isPinned = Boolean(savedFeedConfig?.pinned)
|
||||
|
||||
const onTogglePinned = React.useCallback(async () => {
|
||||
playHaptic()
|
||||
|
||||
try {
|
||||
if (isPinned) {
|
||||
await unpinFeed({uri: list.uri})
|
||||
if (savedFeedConfig) {
|
||||
const pinned = !savedFeedConfig.pinned
|
||||
await updateSavedFeeds([
|
||||
{
|
||||
...savedFeedConfig,
|
||||
pinned,
|
||||
},
|
||||
])
|
||||
Toast.show(_(msg`${pinned ? 'Pinned to' : 'Unpinned from'} your feeds`))
|
||||
} else {
|
||||
await pinFeed({uri: list.uri})
|
||||
await addSavedFeeds([
|
||||
{
|
||||
type: 'list',
|
||||
value: list.uri,
|
||||
pinned: true,
|
||||
},
|
||||
])
|
||||
Toast.show(_(msg`Saved to your feeds`))
|
||||
}
|
||||
} catch (e) {
|
||||
Toast.show(_(msg`There was an issue contacting the server`))
|
||||
logger.error('Failed to toggle pinned feed', {message: e})
|
||||
}
|
||||
}, [playHaptic, isPinned, unpinFeed, list.uri, pinFeed, _])
|
||||
}, [
|
||||
playHaptic,
|
||||
addSavedFeeds,
|
||||
updateSavedFeeds,
|
||||
list.uri,
|
||||
_,
|
||||
savedFeedConfig,
|
||||
])
|
||||
|
||||
const onRemoveFromSavedFeeds = React.useCallback(async () => {
|
||||
playHaptic()
|
||||
if (!savedFeedConfig) return
|
||||
try {
|
||||
await removeSavedFeed(savedFeedConfig)
|
||||
Toast.show(_(msg`Removed from your feeds`))
|
||||
} catch (e) {
|
||||
Toast.show(_(msg`There was an issue contacting the server`))
|
||||
logger.error('Failed to remove pinned list', {message: e})
|
||||
}
|
||||
}, [playHaptic, removeSavedFeed, _, savedFeedConfig])
|
||||
|
||||
const onSubscribeMute = useCallback(async () => {
|
||||
try {
|
||||
|
|
@ -345,13 +385,8 @@ function Header({rkey, list}: {rkey: string; list: AppBskyGraphDefs.ListView}) {
|
|||
const onPressDelete = useCallback(async () => {
|
||||
await listDeleteMutation.mutateAsync({uri: list.uri})
|
||||
|
||||
if (isSaved || isPinned) {
|
||||
const {saved, pinned} = preferences!.feeds
|
||||
|
||||
setSavedFeeds({
|
||||
saved: isSaved ? saved.filter(uri => uri !== list.uri) : saved,
|
||||
pinned: isPinned ? pinned.filter(uri => uri !== list.uri) : pinned,
|
||||
})
|
||||
if (savedFeedConfig) {
|
||||
await removeSavedFeed(savedFeedConfig)
|
||||
}
|
||||
|
||||
Toast.show(_(msg`List deleted`))
|
||||
|
|
@ -367,10 +402,8 @@ function Header({rkey, list}: {rkey: string; list: AppBskyGraphDefs.ListView}) {
|
|||
navigation,
|
||||
track,
|
||||
_,
|
||||
preferences,
|
||||
isPinned,
|
||||
isSaved,
|
||||
setSavedFeeds,
|
||||
removeSavedFeed,
|
||||
savedFeedConfig,
|
||||
])
|
||||
|
||||
const onPressReport = useCallback(() => {
|
||||
|
|
@ -398,6 +431,22 @@ function Header({rkey, list}: {rkey: string; list: AppBskyGraphDefs.ListView}) {
|
|||
},
|
||||
},
|
||||
]
|
||||
|
||||
if (savedFeedConfig) {
|
||||
items.push({
|
||||
testID: 'listHeaderDropdownRemoveFromFeedsBtn',
|
||||
label: _(msg`Remove from my feeds`),
|
||||
onPress: onRemoveFromSavedFeeds,
|
||||
icon: {
|
||||
ios: {
|
||||
name: 'trash',
|
||||
},
|
||||
android: '',
|
||||
web: ['far', 'trash-can'],
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
if (isOwner) {
|
||||
items.push({label: 'separator'})
|
||||
items.push({
|
||||
|
|
@ -444,7 +493,10 @@ function Header({rkey, list}: {rkey: string; list: AppBskyGraphDefs.ListView}) {
|
|||
items.push({
|
||||
testID: 'listHeaderDropdownUnpinBtn',
|
||||
label: _(msg`Unpin moderation list`),
|
||||
onPress: isPending ? undefined : () => unpinFeed({uri: list.uri}),
|
||||
onPress:
|
||||
isPending || !savedFeedConfig
|
||||
? undefined
|
||||
: () => removeSavedFeed(savedFeedConfig),
|
||||
icon: {
|
||||
ios: {
|
||||
name: 'pin',
|
||||
|
|
@ -499,12 +551,13 @@ function Header({rkey, list}: {rkey: string; list: AppBskyGraphDefs.ListView}) {
|
|||
deleteListPromptControl.open,
|
||||
onPressReport,
|
||||
isPending,
|
||||
unpinFeed,
|
||||
list.uri,
|
||||
isBlocking,
|
||||
isMuting,
|
||||
onUnsubscribeMute,
|
||||
onUnsubscribeBlock,
|
||||
removeSavedFeed,
|
||||
savedFeedConfig,
|
||||
onRemoveFromSavedFeeds,
|
||||
])
|
||||
|
||||
const subscribeDropdownItems: DropdownItem[] = useMemo(() => {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import React from 'react'
|
||||
import {ActivityIndicator, Pressable, StyleSheet, View} from 'react-native'
|
||||
import {AppBskyActorDefs} from '@atproto/api'
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
||||
import {msg, Trans} from '@lingui/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
|
|
@ -9,11 +10,11 @@ import {NativeStackScreenProps} from '@react-navigation/native-stack'
|
|||
import {track} from '#/lib/analytics/analytics'
|
||||
import {logger} from '#/logger'
|
||||
import {
|
||||
usePinFeedMutation,
|
||||
useOverwriteSavedFeedsMutation,
|
||||
usePreferencesQuery,
|
||||
useSetSaveFeedsMutation,
|
||||
useUnpinFeedMutation,
|
||||
useUpdateSavedFeedsMutation,
|
||||
} from '#/state/queries/preferences'
|
||||
import {UsePreferencesQueryResponse} from '#/state/queries/preferences/types'
|
||||
import {useSetMinimalShellMode} from '#/state/shell'
|
||||
import {useAnalytics} from 'lib/analytics/analytics'
|
||||
import {useHaptics} from 'lib/haptics'
|
||||
|
|
@ -27,6 +28,10 @@ import {Text} from 'view/com/util/text/Text'
|
|||
import * as Toast from 'view/com/util/Toast'
|
||||
import {ViewHeader} from 'view/com/util/ViewHeader'
|
||||
import {CenteredView, ScrollView} from 'view/com/util/Views'
|
||||
import {NoFollowingFeed} from '#/screens/Feeds/NoFollowingFeed'
|
||||
import {NoSavedFeedsOfAnyType} from '#/screens/Feeds/NoSavedFeedsOfAnyType'
|
||||
import {atoms as a, useTheme} from '#/alf'
|
||||
import {FilterTimeline_Stroke2_Corner0_Rounded as FilterTimeline} from '#/components/icons/FilterTimeline'
|
||||
|
||||
const HITSLOP_TOP = {
|
||||
top: 20,
|
||||
|
|
@ -50,23 +55,25 @@ export function SavedFeeds({}: Props) {
|
|||
const setMinimalShellMode = useSetMinimalShellMode()
|
||||
const {data: preferences} = usePreferencesQuery()
|
||||
const {
|
||||
mutateAsync: setSavedFeeds,
|
||||
mutateAsync: overwriteSavedFeeds,
|
||||
variables: optimisticSavedFeedsResponse,
|
||||
reset: resetSaveFeedsMutationState,
|
||||
error: setSavedFeedsError,
|
||||
} = useSetSaveFeedsMutation()
|
||||
error: savedFeedsError,
|
||||
} = useOverwriteSavedFeedsMutation()
|
||||
|
||||
/*
|
||||
* Use optimistic data if exists and no error, otherwise fallback to remote
|
||||
* data
|
||||
*/
|
||||
const currentFeeds =
|
||||
optimisticSavedFeedsResponse && !setSavedFeedsError
|
||||
optimisticSavedFeedsResponse && !savedFeedsError
|
||||
? optimisticSavedFeedsResponse
|
||||
: preferences?.feeds || {saved: [], pinned: []}
|
||||
const unpinned = currentFeeds.saved.filter(f => {
|
||||
return !currentFeeds.pinned?.includes(f)
|
||||
})
|
||||
: preferences?.savedFeeds || []
|
||||
const pinnedFeeds = currentFeeds.filter(f => f.pinned)
|
||||
const unpinnedFeeds = currentFeeds.filter(f => !f.pinned)
|
||||
const noSavedFeedsOfAnyType = pinnedFeeds.length + unpinnedFeeds.length === 0
|
||||
const noFollowingFeed =
|
||||
currentFeeds.every(f => f.type !== 'timeline') && !noSavedFeedsOfAnyType
|
||||
|
||||
useFocusEffect(
|
||||
React.useCallback(() => {
|
||||
|
|
@ -84,14 +91,20 @@ export function SavedFeeds({}: Props) {
|
|||
]}>
|
||||
<ViewHeader title={_(msg`Edit My Feeds`)} showOnDesktop showBorder />
|
||||
<ScrollView style={s.flex1} contentContainerStyle={[styles.noBorder]}>
|
||||
{noSavedFeedsOfAnyType && (
|
||||
<View style={[pal.border, {borderBottomWidth: 1}]}>
|
||||
<NoSavedFeedsOfAnyType />
|
||||
</View>
|
||||
)}
|
||||
|
||||
<View style={[pal.text, pal.border, styles.title]}>
|
||||
<Text type="title" style={pal.text}>
|
||||
<Trans>Pinned Feeds</Trans>
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{preferences?.feeds ? (
|
||||
!currentFeeds.pinned.length ? (
|
||||
{preferences ? (
|
||||
!pinnedFeeds.length ? (
|
||||
<View
|
||||
style={[
|
||||
pal.border,
|
||||
|
|
@ -104,27 +117,35 @@ export function SavedFeeds({}: Props) {
|
|||
</Text>
|
||||
</View>
|
||||
) : (
|
||||
currentFeeds.pinned.map(uri => (
|
||||
pinnedFeeds.map(f => (
|
||||
<ListItem
|
||||
key={uri}
|
||||
feedUri={uri}
|
||||
key={f.id}
|
||||
feed={f}
|
||||
isPinned
|
||||
setSavedFeeds={setSavedFeeds}
|
||||
overwriteSavedFeeds={overwriteSavedFeeds}
|
||||
resetSaveFeedsMutationState={resetSaveFeedsMutationState}
|
||||
currentFeeds={currentFeeds}
|
||||
preferences={preferences}
|
||||
/>
|
||||
))
|
||||
)
|
||||
) : (
|
||||
<ActivityIndicator style={{marginTop: 20}} />
|
||||
)}
|
||||
|
||||
{noFollowingFeed && (
|
||||
<View style={[pal.border, {borderBottomWidth: 1}]}>
|
||||
<NoFollowingFeed />
|
||||
</View>
|
||||
)}
|
||||
|
||||
<View style={[pal.text, pal.border, styles.title]}>
|
||||
<Text type="title" style={pal.text}>
|
||||
<Trans>Saved Feeds</Trans>
|
||||
</Text>
|
||||
</View>
|
||||
{preferences?.feeds ? (
|
||||
!unpinned.length ? (
|
||||
{preferences ? (
|
||||
!unpinnedFeeds.length ? (
|
||||
<View
|
||||
style={[
|
||||
pal.border,
|
||||
|
|
@ -137,14 +158,15 @@ export function SavedFeeds({}: Props) {
|
|||
</Text>
|
||||
</View>
|
||||
) : (
|
||||
unpinned.map(uri => (
|
||||
unpinnedFeeds.map(f => (
|
||||
<ListItem
|
||||
key={uri}
|
||||
feedUri={uri}
|
||||
key={f.id}
|
||||
feed={f}
|
||||
isPinned={false}
|
||||
setSavedFeeds={setSavedFeeds}
|
||||
overwriteSavedFeeds={overwriteSavedFeeds}
|
||||
resetSaveFeedsMutationState={resetSaveFeedsMutationState}
|
||||
currentFeeds={currentFeeds}
|
||||
preferences={preferences}
|
||||
/>
|
||||
))
|
||||
)
|
||||
|
|
@ -174,27 +196,29 @@ export function SavedFeeds({}: Props) {
|
|||
}
|
||||
|
||||
function ListItem({
|
||||
feedUri,
|
||||
feed,
|
||||
isPinned,
|
||||
currentFeeds,
|
||||
setSavedFeeds,
|
||||
overwriteSavedFeeds,
|
||||
resetSaveFeedsMutationState,
|
||||
}: {
|
||||
feedUri: string // uri
|
||||
feed: AppBskyActorDefs.SavedFeed
|
||||
isPinned: boolean
|
||||
currentFeeds: {saved: string[]; pinned: string[]}
|
||||
setSavedFeeds: ReturnType<typeof useSetSaveFeedsMutation>['mutateAsync']
|
||||
currentFeeds: AppBskyActorDefs.SavedFeed[]
|
||||
overwriteSavedFeeds: ReturnType<
|
||||
typeof useOverwriteSavedFeedsMutation
|
||||
>['mutateAsync']
|
||||
resetSaveFeedsMutationState: ReturnType<
|
||||
typeof useSetSaveFeedsMutation
|
||||
typeof useOverwriteSavedFeedsMutation
|
||||
>['reset']
|
||||
preferences: UsePreferencesQueryResponse
|
||||
}) {
|
||||
const pal = usePalette('default')
|
||||
const {_} = useLingui()
|
||||
const playHaptic = useHaptics()
|
||||
const {isPending: isPinPending, mutateAsync: pinFeed} = usePinFeedMutation()
|
||||
const {isPending: isUnpinPending, mutateAsync: unpinFeed} =
|
||||
useUnpinFeedMutation()
|
||||
const isPending = isPinPending || isUnpinPending
|
||||
const {isPending: isUpdatePending, mutateAsync: updateSavedFeeds} =
|
||||
useUpdateSavedFeedsMutation()
|
||||
const feedUri = feed.value
|
||||
|
||||
const onTogglePinned = React.useCallback(async () => {
|
||||
playHaptic()
|
||||
|
|
@ -202,81 +226,82 @@ function ListItem({
|
|||
try {
|
||||
resetSaveFeedsMutationState()
|
||||
|
||||
if (isPinned) {
|
||||
await unpinFeed({uri: feedUri})
|
||||
} else {
|
||||
await pinFeed({uri: feedUri})
|
||||
}
|
||||
await updateSavedFeeds([
|
||||
{
|
||||
...feed,
|
||||
pinned: !feed.pinned,
|
||||
},
|
||||
])
|
||||
} catch (e) {
|
||||
Toast.show(_(msg`There was an issue contacting the server`))
|
||||
logger.error('Failed to toggle pinned feed', {message: e})
|
||||
}
|
||||
}, [
|
||||
playHaptic,
|
||||
resetSaveFeedsMutationState,
|
||||
isPinned,
|
||||
unpinFeed,
|
||||
feedUri,
|
||||
pinFeed,
|
||||
_,
|
||||
])
|
||||
}, [_, playHaptic, feed, updateSavedFeeds, resetSaveFeedsMutationState])
|
||||
|
||||
const onPressUp = React.useCallback(async () => {
|
||||
if (!isPinned) return
|
||||
|
||||
// create new array, do not mutate
|
||||
const pinned = [...currentFeeds.pinned]
|
||||
const index = pinned.indexOf(feedUri)
|
||||
const nextFeeds = currentFeeds.slice()
|
||||
const ids = currentFeeds.map(f => f.id)
|
||||
const index = ids.indexOf(feed.id)
|
||||
const nextIndex = index - 1
|
||||
|
||||
if (index === -1 || index === 0) return
|
||||
;[pinned[index], pinned[index - 1]] = [pinned[index - 1], pinned[index]]
|
||||
;[nextFeeds[index], nextFeeds[nextIndex]] = [
|
||||
nextFeeds[nextIndex],
|
||||
nextFeeds[index],
|
||||
]
|
||||
|
||||
try {
|
||||
await setSavedFeeds({saved: currentFeeds.saved, pinned})
|
||||
await overwriteSavedFeeds(nextFeeds)
|
||||
track('CustomFeed:Reorder', {
|
||||
uri: feedUri,
|
||||
index: pinned.indexOf(feedUri),
|
||||
uri: feed.value,
|
||||
index: nextIndex,
|
||||
})
|
||||
} catch (e) {
|
||||
Toast.show(_(msg`There was an issue contacting the server`))
|
||||
logger.error('Failed to set pinned feed order', {message: e})
|
||||
}
|
||||
}, [feedUri, isPinned, setSavedFeeds, currentFeeds, _])
|
||||
}, [feed, isPinned, overwriteSavedFeeds, currentFeeds, _])
|
||||
|
||||
const onPressDown = React.useCallback(async () => {
|
||||
if (!isPinned) return
|
||||
|
||||
const pinned = [...currentFeeds.pinned]
|
||||
const index = pinned.indexOf(feedUri)
|
||||
const nextFeeds = currentFeeds.slice()
|
||||
const ids = currentFeeds.map(f => f.id)
|
||||
const index = ids.indexOf(feed.id)
|
||||
const nextIndex = index + 1
|
||||
|
||||
if (index === -1 || index >= pinned.length - 1) return
|
||||
;[pinned[index], pinned[index + 1]] = [pinned[index + 1], pinned[index]]
|
||||
if (index === -1 || index >= nextFeeds.length - 1) return
|
||||
;[nextFeeds[index], nextFeeds[nextIndex]] = [
|
||||
nextFeeds[nextIndex],
|
||||
nextFeeds[index],
|
||||
]
|
||||
|
||||
try {
|
||||
await setSavedFeeds({saved: currentFeeds.saved, pinned})
|
||||
await overwriteSavedFeeds(nextFeeds)
|
||||
track('CustomFeed:Reorder', {
|
||||
uri: feedUri,
|
||||
index: pinned.indexOf(feedUri),
|
||||
uri: feed.value,
|
||||
index: nextIndex,
|
||||
})
|
||||
} catch (e) {
|
||||
Toast.show(_(msg`There was an issue contacting the server`))
|
||||
logger.error('Failed to set pinned feed order', {message: e})
|
||||
}
|
||||
}, [feedUri, isPinned, setSavedFeeds, currentFeeds, _])
|
||||
}, [feed, isPinned, overwriteSavedFeeds, currentFeeds, _])
|
||||
|
||||
return (
|
||||
<Pressable
|
||||
accessibilityRole="button"
|
||||
style={[styles.itemContainer, pal.border]}>
|
||||
<View style={[styles.itemContainer, pal.border]}>
|
||||
{isPinned ? (
|
||||
<View style={styles.webArrowButtonsContainer}>
|
||||
<Pressable
|
||||
disabled={isPending}
|
||||
disabled={isUpdatePending}
|
||||
accessibilityRole="button"
|
||||
onPress={onPressUp}
|
||||
hitSlop={HITSLOP_TOP}
|
||||
style={state => ({
|
||||
opacity: state.hovered || state.focused || isPending ? 0.5 : 1,
|
||||
opacity:
|
||||
state.hovered || state.focused || isUpdatePending ? 0.5 : 1,
|
||||
})}>
|
||||
<FontAwesomeIcon
|
||||
icon="arrow-up"
|
||||
|
|
@ -285,39 +310,92 @@ function ListItem({
|
|||
/>
|
||||
</Pressable>
|
||||
<Pressable
|
||||
disabled={isPending}
|
||||
disabled={isUpdatePending}
|
||||
accessibilityRole="button"
|
||||
onPress={onPressDown}
|
||||
hitSlop={HITSLOP_BOTTOM}
|
||||
style={state => ({
|
||||
opacity: state.hovered || state.focused || isPending ? 0.5 : 1,
|
||||
opacity:
|
||||
state.hovered || state.focused || isUpdatePending ? 0.5 : 1,
|
||||
})}>
|
||||
<FontAwesomeIcon icon="arrow-down" size={12} style={[pal.text]} />
|
||||
</Pressable>
|
||||
</View>
|
||||
) : null}
|
||||
<FeedSourceCard
|
||||
key={feedUri}
|
||||
feedUri={feedUri}
|
||||
style={styles.noTopBorder}
|
||||
showSaveBtn
|
||||
showMinimalPlaceholder
|
||||
/>
|
||||
<Pressable
|
||||
disabled={isPending}
|
||||
accessibilityRole="button"
|
||||
hitSlop={10}
|
||||
onPress={onTogglePinned}
|
||||
style={state => ({
|
||||
opacity: state.hovered || state.focused || isPending ? 0.5 : 1,
|
||||
})}>
|
||||
<FontAwesomeIcon
|
||||
icon="thumb-tack"
|
||||
size={20}
|
||||
color={isPinned ? colors.blue3 : pal.colors.icon}
|
||||
{feed.type === 'timeline' ? (
|
||||
<FollowingFeedCard />
|
||||
) : (
|
||||
<FeedSourceCard
|
||||
key={feedUri}
|
||||
feedUri={feedUri}
|
||||
style={styles.noTopBorder}
|
||||
showSaveBtn
|
||||
showMinimalPlaceholder
|
||||
/>
|
||||
</Pressable>
|
||||
</Pressable>
|
||||
)}
|
||||
<View style={{paddingRight: 16}}>
|
||||
<Pressable
|
||||
disabled={isUpdatePending}
|
||||
accessibilityRole="button"
|
||||
hitSlop={10}
|
||||
onPress={onTogglePinned}
|
||||
style={state => ({
|
||||
opacity:
|
||||
state.hovered || state.focused || isUpdatePending ? 0.5 : 1,
|
||||
})}>
|
||||
<FontAwesomeIcon
|
||||
icon="thumb-tack"
|
||||
size={20}
|
||||
color={isPinned ? colors.blue3 : pal.colors.icon}
|
||||
/>
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
function FollowingFeedCard() {
|
||||
const t = useTheme()
|
||||
return (
|
||||
<View
|
||||
style={[
|
||||
a.flex_row,
|
||||
a.align_center,
|
||||
a.flex_1,
|
||||
{
|
||||
paddingHorizontal: 18,
|
||||
paddingVertical: 20,
|
||||
},
|
||||
]}>
|
||||
<View
|
||||
style={[
|
||||
a.align_center,
|
||||
a.justify_center,
|
||||
a.rounded_sm,
|
||||
{
|
||||
width: 36,
|
||||
height: 36,
|
||||
backgroundColor: t.palette.primary_500,
|
||||
marginRight: 10,
|
||||
},
|
||||
]}>
|
||||
<FilterTimeline
|
||||
style={[
|
||||
{
|
||||
width: 22,
|
||||
height: 22,
|
||||
},
|
||||
]}
|
||||
fill={t.palette.white}
|
||||
/>
|
||||
</View>
|
||||
<View
|
||||
style={{flex: 1, flexDirection: 'row', gap: 8, alignItems: 'center'}}>
|
||||
<Text type="lg-medium" style={[t.atoms.text]} numberOfLines={1}>
|
||||
<Trans>Following</Trans>
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
@ -345,7 +423,6 @@ const styles = StyleSheet.create({
|
|||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
borderBottomWidth: 1,
|
||||
paddingRight: 16,
|
||||
},
|
||||
webArrowButtonsContainer: {
|
||||
paddingLeft: 16,
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
import React from 'react'
|
||||
import {View, StyleSheet} from 'react-native'
|
||||
import {useNavigationState, useNavigation} from '@react-navigation/native'
|
||||
import {usePalette} from 'lib/hooks/usePalette'
|
||||
import {TextLink} from 'view/com/util/Link'
|
||||
import {getCurrentRoute} from 'lib/routes/helpers'
|
||||
import {useLingui} from '@lingui/react'
|
||||
import {StyleSheet, View} from 'react-native'
|
||||
import {msg} from '@lingui/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
import {useNavigation, useNavigationState} from '@react-navigation/native'
|
||||
|
||||
import {emitSoftReset} from '#/state/events'
|
||||
import {usePinnedFeedsInfos} from '#/state/queries/feed'
|
||||
import {useSelectedFeed, useSetSelectedFeed} from '#/state/shell/selected-feed'
|
||||
import {FeedDescriptor} from '#/state/queries/post-feed'
|
||||
import {usePalette} from 'lib/hooks/usePalette'
|
||||
import {getCurrentRoute} from 'lib/routes/helpers'
|
||||
import {NavigationProp} from 'lib/routes/types'
|
||||
import {emitSoftReset} from '#/state/events'
|
||||
import {TextLink} from 'view/com/util/Link'
|
||||
|
||||
export function DesktopFeeds() {
|
||||
const pal = usePalette('default')
|
||||
|
|
@ -31,17 +31,7 @@ export function DesktopFeeds() {
|
|||
return (
|
||||
<View style={[styles.container, pal.view]}>
|
||||
{pinnedFeedInfos.map(feedInfo => {
|
||||
const uri = feedInfo.uri
|
||||
let feed: FeedDescriptor
|
||||
if (!uri) {
|
||||
feed = 'home'
|
||||
} else if (uri.includes('app.bsky.feed.generator')) {
|
||||
feed = `feedgen|${uri}`
|
||||
} else if (uri.includes('app.bsky.graph.list')) {
|
||||
feed = `list|${uri}`
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
const feed = feedInfo.feedDescriptor
|
||||
return (
|
||||
<FeedItem
|
||||
key={feed}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue