From 894f00d687355ad3b35e49fda1bb3d17b20ad51c Mon Sep 17 00:00:00 2001 From: dan Date: Thu, 22 Feb 2024 16:51:11 +0000 Subject: Rename Home Feed Prefs to Following Feed Prefs (#2965) --- src/Navigation.tsx | 11 +- src/lib/routes/types.ts | 2 +- src/routes.ts | 2 +- src/view/com/feeds/FeedPage.tsx | 2 +- src/view/com/home/HomeHeaderLayoutMobile.tsx | 4 +- src/view/screens/PreferencesFollowingFeed.tsx | 366 ++++++++++++++++++++++++++ src/view/screens/PreferencesHomeFeed.tsx | 366 -------------------------- src/view/screens/Settings/index.tsx | 8 +- 8 files changed, 382 insertions(+), 379 deletions(-) create mode 100644 src/view/screens/PreferencesFollowingFeed.tsx delete mode 100644 src/view/screens/PreferencesHomeFeed.tsx (limited to 'src') diff --git a/src/Navigation.tsx b/src/Navigation.tsx index 897d86e40..6ca4212e2 100644 --- a/src/Navigation.tsx +++ b/src/Navigation.tsx @@ -71,7 +71,7 @@ import {AppPasswords} from 'view/screens/AppPasswords' import {ModerationMutedAccounts} from 'view/screens/ModerationMutedAccounts' import {ModerationBlockedAccounts} from 'view/screens/ModerationBlockedAccounts' import {SavedFeeds} from 'view/screens/SavedFeeds' -import {PreferencesHomeFeed} from 'view/screens/PreferencesHomeFeed' +import {PreferencesFollowingFeed} from 'view/screens/PreferencesFollowingFeed' import {PreferencesThreads} from 'view/screens/PreferencesThreads' import {PreferencesExternalEmbeds} from '#/view/screens/PreferencesExternalEmbeds' import {createNativeStackNavigatorWithAuth} from './view/shell/createNativeStackNavigatorWithAuth' @@ -242,9 +242,12 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) { options={{title: title(msg`Edit My Feeds`), requireAuth: true}} /> PreferencesHomeFeed} - options={{title: title(msg`Home Feed Preferences`), requireAuth: true}} + name="PreferencesFollowingFeed" + getComponent={() => PreferencesFollowingFeed} + options={{ + title: title(msg`Following Feed Preferences`), + requireAuth: true, + }} /> + debounce( + threshold => + setFeedViewPref({ + hideRepliesByLikeCount: threshold, + }), + 500, + ), // debouce for 500ms + [setFeedViewPref], + ) + + return ( + + { + let threshold = Array.isArray(v) ? v[0] : v + if (threshold > preValue.current) threshold = Math.floor(threshold) + else threshold = Math.ceil(threshold) + + preValue.current = threshold + + setValue(threshold) + save(threshold) + }} + minimumValue={0} + maximumValue={25} + containerStyle={isWeb ? undefined : s.flex1} + disabled={!enabled} + thumbTintColor={colors.blue3} + /> + + {value === 0 + ? _(msg`Show all replies`) + : _( + msg`Show replies with at least ${value} ${ + value > 1 ? `likes` : `like` + }`, + )} + + + ) +} + +type Props = NativeStackScreenProps< + CommonNavigatorParams, + 'PreferencesFollowingFeed' +> +export function PreferencesFollowingFeed({navigation}: Props) { + const pal = usePalette('default') + const {_} = useLingui() + const {isTabletOrDesktop} = useWebMediaQueries() + const {data: preferences} = usePreferencesQuery() + const {mutate: setFeedViewPref, variables} = + useSetFeedViewPreferencesMutation() + + const showReplies = !( + variables?.hideReplies ?? preferences?.feedViewPrefs?.hideReplies + ) + + return ( + + + + + Fine-tune the content you see on your Following feed. + + + + + + + + Show Replies + + + + Set this setting to "No" to hide all replies from your feed. + + + + setFeedViewPref({ + hideReplies: !( + variables?.hideReplies ?? + preferences?.feedViewPrefs?.hideReplies + ), + }) + } + /> + + + + Reply Filters + + + + Enable this setting to only see replies between people you + follow. + + + + setFeedViewPref({ + hideRepliesByUnfollowed: !( + variables?.hideRepliesByUnfollowed ?? + preferences?.feedViewPrefs?.hideRepliesByUnfollowed + ), + }) + : undefined + } + style={[s.mb10]} + /> + + + Adjust the number of likes a reply must have to be shown in your + feed. + + + {preferences && ( + + )} + + + + + Show Reposts + + + + Set this setting to "No" to hide all reposts from your feed. + + + + setFeedViewPref({ + hideReposts: !( + variables?.hideReposts ?? + preferences?.feedViewPrefs?.hideReposts + ), + }) + } + /> + + + + + Show Quote Posts + + + + Set this setting to "No" to hide all quote posts from your feed. + Reposts will still be visible. + + + + setFeedViewPref({ + hideQuotePosts: !( + variables?.hideQuotePosts ?? + preferences?.feedViewPrefs?.hideQuotePosts + ), + }) + } + /> + + + + + + Show Posts from My Feeds + + + + Set this setting to "Yes" to show samples of your saved feeds in + your Following feed. This is an experimental feature. + + + + setFeedViewPref({ + lab_mergeFeedEnabled: !( + variables?.lab_mergeFeedEnabled ?? + preferences?.feedViewPrefs?.lab_mergeFeedEnabled + ), + }) + } + /> + + + + + + { + navigation.canGoBack() + ? navigation.goBack() + : navigation.navigate('Settings') + }} + style={[styles.btn, isTabletOrDesktop && styles.btnDesktop]} + accessibilityRole="button" + accessibilityLabel={_(msg`Confirm`)} + accessibilityHint=""> + + Done + + + + + ) +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + paddingBottom: 90, + }, + desktopContainer: { + borderLeftWidth: 1, + borderRightWidth: 1, + paddingBottom: 40, + }, + titleSection: { + paddingBottom: 30, + }, + title: { + textAlign: 'center', + marginBottom: 5, + }, + description: { + textAlign: 'center', + paddingHorizontal: 32, + }, + cardsContainer: { + paddingHorizontal: 20, + }, + card: { + padding: 16, + borderRadius: 10, + marginBottom: 20, + }, + btn: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + borderRadius: 32, + padding: 14, + backgroundColor: colors.blue3, + }, + btnDesktop: { + marginHorizontal: 'auto', + paddingHorizontal: 80, + }, + btnContainer: { + paddingTop: 20, + }, + dimmed: { + opacity: 0.3, + }, +}) diff --git a/src/view/screens/PreferencesHomeFeed.tsx b/src/view/screens/PreferencesHomeFeed.tsx deleted file mode 100644 index 7ad870937..000000000 --- a/src/view/screens/PreferencesHomeFeed.tsx +++ /dev/null @@ -1,366 +0,0 @@ -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} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import { - usePreferencesQuery, - useSetFeedViewPreferencesMutation, -} from '#/state/queries/preferences' - -function RepliesThresholdInput({ - enabled, - initialValue, -}: { - enabled: boolean - initialValue: number -}) { - const pal = usePalette('default') - const {_} = useLingui() - const [value, setValue] = useState(initialValue) - const {mutate: setFeedViewPref} = useSetFeedViewPreferencesMutation() - const preValue = React.useRef(initialValue) - const save = React.useMemo( - () => - debounce( - threshold => - setFeedViewPref({ - hideRepliesByLikeCount: threshold, - }), - 500, - ), // debouce for 500ms - [setFeedViewPref], - ) - - return ( - - { - let threshold = Array.isArray(v) ? v[0] : v - if (threshold > preValue.current) threshold = Math.floor(threshold) - else threshold = Math.ceil(threshold) - - preValue.current = threshold - - setValue(threshold) - save(threshold) - }} - minimumValue={0} - maximumValue={25} - containerStyle={isWeb ? undefined : s.flex1} - disabled={!enabled} - thumbTintColor={colors.blue3} - /> - - {value === 0 - ? _(msg`Show all replies`) - : _( - msg`Show replies with at least ${value} ${ - value > 1 ? `likes` : `like` - }`, - )} - - - ) -} - -type Props = NativeStackScreenProps< - CommonNavigatorParams, - 'PreferencesHomeFeed' -> -export function PreferencesHomeFeed({navigation}: Props) { - const pal = usePalette('default') - const {_} = useLingui() - const {isTabletOrDesktop} = useWebMediaQueries() - const {data: preferences} = usePreferencesQuery() - const {mutate: setFeedViewPref, variables} = - useSetFeedViewPreferencesMutation() - - const showReplies = !( - variables?.hideReplies ?? preferences?.feedViewPrefs?.hideReplies - ) - - return ( - - - - - Fine-tune the content you see on your home screen. - - - - - - - - Show Replies - - - - Set this setting to "No" to hide all replies from your feed. - - - - setFeedViewPref({ - hideReplies: !( - variables?.hideReplies ?? - preferences?.feedViewPrefs?.hideReplies - ), - }) - } - /> - - - - Reply Filters - - - - Enable this setting to only see replies between people you - follow. - - - - setFeedViewPref({ - hideRepliesByUnfollowed: !( - variables?.hideRepliesByUnfollowed ?? - preferences?.feedViewPrefs?.hideRepliesByUnfollowed - ), - }) - : undefined - } - style={[s.mb10]} - /> - - - Adjust the number of likes a reply must have to be shown in your - feed. - - - {preferences && ( - - )} - - - - - Show Reposts - - - - Set this setting to "No" to hide all reposts from your feed. - - - - setFeedViewPref({ - hideReposts: !( - variables?.hideReposts ?? - preferences?.feedViewPrefs?.hideReposts - ), - }) - } - /> - - - - - Show Quote Posts - - - - Set this setting to "No" to hide all quote posts from your feed. - Reposts will still be visible. - - - - setFeedViewPref({ - hideQuotePosts: !( - variables?.hideQuotePosts ?? - preferences?.feedViewPrefs?.hideQuotePosts - ), - }) - } - /> - - - - - - Show Posts from My Feeds - - - - Set this setting to "Yes" to show samples of your saved feeds in - your following feed. This is an experimental feature. - - - - setFeedViewPref({ - lab_mergeFeedEnabled: !( - variables?.lab_mergeFeedEnabled ?? - preferences?.feedViewPrefs?.lab_mergeFeedEnabled - ), - }) - } - /> - - - - - - { - navigation.canGoBack() - ? navigation.goBack() - : navigation.navigate('Settings') - }} - style={[styles.btn, isTabletOrDesktop && styles.btnDesktop]} - accessibilityRole="button" - accessibilityLabel={_(msg`Confirm`)} - accessibilityHint=""> - - Done - - - - - ) -} - -const styles = StyleSheet.create({ - container: { - flex: 1, - paddingBottom: 90, - }, - desktopContainer: { - borderLeftWidth: 1, - borderRightWidth: 1, - paddingBottom: 40, - }, - titleSection: { - paddingBottom: 30, - }, - title: { - textAlign: 'center', - marginBottom: 5, - }, - description: { - textAlign: 'center', - paddingHorizontal: 32, - }, - cardsContainer: { - paddingHorizontal: 20, - }, - card: { - padding: 16, - borderRadius: 10, - marginBottom: 20, - }, - btn: { - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'center', - borderRadius: 32, - padding: 14, - backgroundColor: colors.blue3, - }, - btnDesktop: { - marginHorizontal: 'auto', - paddingHorizontal: 80, - }, - btnContainer: { - paddingTop: 20, - }, - dimmed: { - opacity: 0.3, - }, -}) diff --git a/src/view/screens/Settings/index.tsx b/src/view/screens/Settings/index.tsx index 9abf0f2bd..00b507a99 100644 --- a/src/view/screens/Settings/index.tsx +++ b/src/view/screens/Settings/index.tsx @@ -241,8 +241,8 @@ export function SettingsScreen({}: Props) { Toast.show(_(msg`Copied build version to clipboard`)) }, [_]) - const openHomeFeedPreferences = React.useCallback(() => { - navigation.navigate('PreferencesHomeFeed') + const openFollowingFeedPreferences = React.useCallback(() => { + navigation.navigate('PreferencesFollowingFeed') }, [navigation]) const openThreadsPreferences = React.useCallback(() => { @@ -529,7 +529,7 @@ export function SettingsScreen({}: Props) { pal.view, isSwitchingAccounts && styles.dimmed, ]} - onPress={openHomeFeedPreferences} + onPress={openFollowingFeedPreferences} accessibilityRole="button" accessibilityHint="" accessibilityLabel={_(msg`Opens the home feed preferences`)}> @@ -540,7 +540,7 @@ export function SettingsScreen({}: Props) { /> - Home Feed Preferences + Following Feed Preferences