acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Handle saved feed screen edge case

Browse Source
This commit is contained in:
Eric Bailey
2024-04-18 10:34:51 -05:00
parent 6a8b670ae3
commit aa1d1c23a5
3 changed files with 86 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/view/com/feeds/FeedSourceCard.tsx
+52 -49
View File
@@ -193,11 +193,9 @@ export function FeedSourceCardLoaded({
</View>
)
const showFeedSaveButton = showSaveBtn && feed.type === 'feed'
const primaryAlgo = preferences?.primaryAlgorithm
const isPrimaryAlgo =
preferences.primaryAlgorithm?.enabled &&
preferences.primaryAlgorithm?.uri &&
preferences.primaryAlgorithm.uri === feed.uri
primaryAlgo?.enabled && primaryAlgo?.uri && primaryAlgo.uri === feed.uri
return (
<>
@@ -236,52 +234,57 @@ export function FeedSourceCardLoaded({
</Text>
</View>
{showFeedSaveButton &&
(gate('reduced_onboarding_and_home_algo') && isPrimaryAlgo ? (
<Button
variant="solid"
color="secondary"
size="small"
label={_(
msg`This feed is already set as your primary algorithm.`,
)}
onPress={() => {
primaryAlgoDialogControl.open()
}}>
<ButtonIcon icon={Check} position="left" />
<ButtonText>Primary Algorithm</ButtonText>
</Button>
) : (
<View style={[s.justifyCenter]}>
<Pressable
testID={`feed-${feed.displayName}-toggleSave`}
disabled={isSavePending || isPinPending || isRemovePending}
accessibilityRole="button"
accessibilityLabel={
isSaved
? _(msg`Remove from my feeds`)
: _(msg`Add to my feeds`)
}
accessibilityHint=""
onPress={onToggleSaved}
hitSlop={15}
style={styles.btn}>
{isSaved ? (
<FontAwesomeIcon
icon={['far', 'trash-can']}
size={19}
color={pal.colors.icon}
/>
) : (
<FontAwesomeIcon
icon="plus"
size={18}
color={pal.colors.link}
/>
{showSaveBtn && feed.type === 'feed' && (
<>
{gate('reduced_onboarding_and_home_algo') && isPrimaryAlgo ? (
<Button
variant="solid"
color="secondary"
size="small"
label={_(
msg`This feed is already set as your primary algorithm.`,
)}
</Pressable>
</View>
))}
onPress={() => {
primaryAlgoDialogControl.open()
}}>
<ButtonIcon icon={Check} position="left" />
<ButtonText>
<Trans>Primary Algorithm</Trans>
</ButtonText>
</Button>
) : (
<View style={[s.justifyCenter]}>
<Pressable
testID={`feed-${feed.displayName}-toggleSave`}
disabled={isSavePending || isPinPending || isRemovePending}
accessibilityRole="button"
accessibilityLabel={
isSaved
? _(msg`Remove from my feeds`)
: _(msg`Add to my feeds`)
}
accessibilityHint=""
onPress={onToggleSaved}
hitSlop={15}
style={styles.btn}>
{isSaved ? (
<FontAwesomeIcon
icon={['far', 'trash-can']}
size={19}
color={pal.colors.icon}
/>
) : (
<FontAwesomeIcon
icon="plus"
size={18}
color={pal.colors.link}
/>
)}
</Pressable>
</View>
)}
</>
)}
</View>
{showDescription && feed.description ? (
src/view/screens/ProfileFeed.tsx
+3 -1
View File
@@ -341,7 +341,9 @@ export function ProfileFeedScreenInner({
primaryAlgoDialogControl.open()
}}>
<ButtonIcon icon={Check} position="left" />
<ButtonText>Primary Algorithm</ButtonText>
<ButtonText>
<Trans>Primary Algorithm</Trans>
</ButtonText>
</NewButton>
) : (
<NewButton
src/view/screens/SavedFeeds.tsx
+31 -15
View File
@@ -7,6 +7,7 @@ import {useFocusEffect} from '@react-navigation/native'
import {NativeStackScreenProps} from '@react-navigation/native-stack'
import {track} from '#/lib/analytics/analytics'
import {useGate} from '#/lib/statsig/statsig'
import {logger} from '#/logger'
import {
usePinFeedMutation,
@@ -14,6 +15,7 @@ import {
useSetSaveFeedsMutation,
useUnpinFeedMutation,
} 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'
@@ -112,6 +114,7 @@ export function SavedFeeds({}: Props) {
setSavedFeeds={setSavedFeeds}
resetSaveFeedsMutationState={resetSaveFeedsMutationState}
currentFeeds={currentFeeds}
preferences={preferences}
/>
))
)
@@ -145,6 +148,7 @@ export function SavedFeeds({}: Props) {
setSavedFeeds={setSavedFeeds}
resetSaveFeedsMutationState={resetSaveFeedsMutationState}
currentFeeds={currentFeeds}
preferences={preferences}
/>
))
)
@@ -179,6 +183,7 @@ function ListItem({
currentFeeds,
setSavedFeeds,
resetSaveFeedsMutationState,
preferences,
}: {
feedUri: string // uri
isPinned: boolean
@@ -187,6 +192,7 @@ function ListItem({
resetSaveFeedsMutationState: ReturnType<
typeof useSetSaveFeedsMutation
>['reset']
preferences: UsePreferencesQueryResponse
}) {
const pal = usePalette('default')
const {_} = useLingui()
@@ -195,6 +201,13 @@ function ListItem({
const {isPending: isUnpinPending, mutateAsync: unpinFeed} =
useUnpinFeedMutation()
const isPending = isPinPending || isUnpinPending
const gate = useGate()
const primaryAlgo = preferences.primaryAlgorithm
const isPrimaryAlgoExperimentEnabled = gate(
'reduced_onboarding_and_home_algo',
)
const isPrimaryAlgo = primaryAlgo?.enabled && primaryAlgo?.uri === feedUri
const showPinButton = !(isPrimaryAlgoExperimentEnabled && isPrimaryAlgo)
const onTogglePinned = React.useCallback(async () => {
playHaptic()
@@ -303,20 +316,24 @@ function ListItem({
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}
/>
</Pressable>
{showPinButton && (
<View style={{paddingRight: 16}}>
<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}
/>
</Pressable>
</View>
)}
</Pressable>
)
}
@@ -345,7 +362,6 @@ const styles = StyleSheet.create({
flexDirection: 'row',
alignItems: 'center',
borderBottomWidth: 1,
paddingRight: 16,
},
webArrowButtonsContainer: {
paddingLeft: 16,