From 9446c67880331452b3f79dabda183c23718edfa1 Mon Sep 17 00:00:00 2001 From: Ansh Date: Wed, 30 Aug 2023 15:21:12 -0700 Subject: Move `PreferencesHomeFeed` to a screen instead of a modal (#1335) * move `PreferencesHomeFeed` to a screen instead of a modal * add web route for home feed preferences * upgrade `@miblanchard/react-native-slider` to fix lint * fix web route naming * fix desktop web styling * add `react-native-slider` mock --- src/Navigation.tsx | 6 + src/lib/routes/types.ts | 1 + src/routes.ts | 1 + src/state/models/ui/shell.ts | 5 - src/view/com/modals/Modal.tsx | 4 - src/view/com/modals/Modal.web.tsx | 4 - src/view/com/modals/PreferencesHomeFeed.tsx | 176 ------------------------- src/view/screens/PreferencesHomeFeed.tsx | 192 ++++++++++++++++++++++++++++ src/view/screens/Settings.tsx | 8 +- 9 files changed, 203 insertions(+), 194 deletions(-) delete mode 100644 src/view/com/modals/PreferencesHomeFeed.tsx create mode 100644 src/view/screens/PreferencesHomeFeed.tsx (limited to 'src') diff --git a/src/Navigation.tsx b/src/Navigation.tsx index 48bab182d..df601d0cd 100644 --- a/src/Navigation.tsx +++ b/src/Navigation.tsx @@ -67,6 +67,7 @@ import {getRoutingInstrumentation} from 'lib/sentry' import {bskyTitle} from 'lib/strings/headings' import {JSX} from 'react/jsx-runtime' import {timeout} from 'lib/async/timeout' +import {PreferencesHomeFeed} from 'view/screens/PreferencesHomeFeed' const navigationRef = createNavigationContainerRef() @@ -219,6 +220,11 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) { component={SavedFeeds} options={{title: title('Edit My Feeds')}} /> + ) } diff --git a/src/lib/routes/types.ts b/src/lib/routes/types.ts index 4eb5e29d2..7159bcb51 100644 --- a/src/lib/routes/types.ts +++ b/src/lib/routes/types.ts @@ -29,6 +29,7 @@ export type CommonNavigatorParams = { CopyrightPolicy: undefined AppPasswords: undefined SavedFeeds: undefined + PreferencesHomeFeed: undefined } export type BottomTabNavigatorParams = CommonNavigatorParams & { diff --git a/src/routes.ts b/src/routes.ts index 54faba22d..45a8fa572 100644 --- a/src/routes.ts +++ b/src/routes.ts @@ -23,6 +23,7 @@ export const router = new Router({ Debug: '/sys/debug', Log: '/sys/log', AppPasswords: '/settings/app-passwords', + PreferencesHomeFeed: '/settings/home-feed', SavedFeeds: '/settings/saved-feeds', Support: '/support', PrivacyPolicy: '/support/privacy', diff --git a/src/state/models/ui/shell.ts b/src/state/models/ui/shell.ts index 6f6ed06bc..d19de4b96 100644 --- a/src/state/models/ui/shell.ts +++ b/src/state/models/ui/shell.ts @@ -136,10 +136,6 @@ export interface PostLanguagesSettingsModal { name: 'post-languages-settings' } -export interface PreferencesHomeFeed { - name: 'preferences-home-feed' -} - export interface OnboardingModal { name: 'onboarding' } @@ -156,7 +152,6 @@ export type Modal = | ContentFilteringSettingsModal | ContentLanguagesSettingsModal | PostLanguagesSettingsModal - | PreferencesHomeFeed // Moderation | ModerationDetailsModal diff --git a/src/view/com/modals/Modal.tsx b/src/view/com/modals/Modal.tsx index efd06412d..d6d1e212d 100644 --- a/src/view/com/modals/Modal.tsx +++ b/src/view/com/modals/Modal.tsx @@ -28,7 +28,6 @@ import * as AddAppPassword from './AddAppPasswords' import * as ContentFilteringSettingsModal from './ContentFilteringSettings' import * as ContentLanguagesSettingsModal from './lang-settings/ContentLanguagesSettings' import * as PostLanguagesSettingsModal from './lang-settings/PostLanguagesSettings' -import * as PreferencesHomeFeed from './PreferencesHomeFeed' import * as OnboardingModal from './OnboardingModal' import * as ModerationDetailsModal from './ModerationDetails' @@ -131,9 +130,6 @@ export const ModalsContainer = observer(function ModalsContainer() { } else if (activeModal?.name === 'post-languages-settings') { snapPoints = PostLanguagesSettingsModal.snapPoints element = - } else if (activeModal?.name === 'preferences-home-feed') { - snapPoints = PreferencesHomeFeed.snapPoints - element = } else if (activeModal?.name === 'onboarding') { snapPoints = OnboardingModal.snapPoints element = diff --git a/src/view/com/modals/Modal.web.tsx b/src/view/com/modals/Modal.web.tsx index 687c4fba3..05bb7161f 100644 --- a/src/view/com/modals/Modal.web.tsx +++ b/src/view/com/modals/Modal.web.tsx @@ -29,8 +29,6 @@ import * as PostLanguagesSettingsModal from './lang-settings/PostLanguagesSettin import * as OnboardingModal from './OnboardingModal' import * as ModerationDetailsModal from './ModerationDetails' -import * as PreferencesHomeFeed from './PreferencesHomeFeed' - export const ModalsContainer = observer(function ModalsContainer() { const store = useStores() @@ -107,8 +105,6 @@ function Modal({modal}: {modal: ModalIface}) { element = } else if (modal.name === 'edit-image') { element = - } else if (modal.name === 'preferences-home-feed') { - element = } else if (modal.name === 'onboarding') { element = } else if (modal.name === 'moderation-details') { diff --git a/src/view/com/modals/PreferencesHomeFeed.tsx b/src/view/com/modals/PreferencesHomeFeed.tsx deleted file mode 100644 index 15f7625b5..000000000 --- a/src/view/com/modals/PreferencesHomeFeed.tsx +++ /dev/null @@ -1,176 +0,0 @@ -import React, {useState} from 'react' -import {StyleSheet, TouchableOpacity, View} from 'react-native' -import {observer} from 'mobx-react-lite' -import {Slider} from '@miblanchard/react-native-slider' -import {Text} from '../util/text/Text' -import {useStores} from 'state/index' -import {s, colors} from 'lib/styles' -import {usePalette} from 'lib/hooks/usePalette' -import {isWeb, isDesktopWeb} from 'platform/detection' -import {ToggleButton} from 'view/com/util/forms/ToggleButton' -import {ScrollView} from 'view/com/modals/util' - -export const snapPoints = ['90%'] - -function RepliesThresholdInput({enabled}: {enabled: boolean}) { - const store = useStores() - const pal = usePalette('default') - const [value, setValue] = useState(store.preferences.homeFeedRepliesThreshold) - - return ( - - - {value === 0 - ? `Show all replies` - : `Show replies with at least ${value} ${ - value > 1 ? `likes` : `like` - }`} - - { - const threshold = Math.floor(Array.isArray(v) ? v[0] : v) - setValue(threshold) - store.preferences.setHomeFeedRepliesThreshold(threshold) - }} - minimumValue={0} - maximumValue={25} - containerStyle={isWeb ? undefined : s.flex1} - disabled={!enabled} - thumbTintColor={colors.blue3} - /> - - ) -} - -export const Component = observer(function Component() { - const pal = usePalette('default') - const store = useStores() - - return ( - - - - Home Feed Preferences - - - Fine-tune the content you see on your home screen. - - - - - - - - Show Replies - - - Adjust the number of likes a reply must have to be shown in your - feed. - - - - - - - - - Show Reposts - - - Set this setting to "No" to hide all reposts from your feed. - - - - - - - Show Quote Posts - - - Set this setting to "No" to hide all quote posts from your feed. - Reposts will still be visible. - - - - - - - - { - store.shell.closeModal() - }} - style={[styles.btn]} - accessibilityRole="button" - accessibilityLabel="Confirm" - accessibilityHint=""> - Done - - - - ) -}) - -const styles = StyleSheet.create({ - container: { - flex: 1, - paddingBottom: isDesktopWeb ? 0 : 60, - }, - titleSection: { - padding: 20, - 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, - }, - btnContainer: { - paddingTop: 20, - paddingHorizontal: 20, - borderTopWidth: isDesktopWeb ? 0 : 1, - }, - dimmed: { - opacity: 0.3, - }, -}) diff --git a/src/view/screens/PreferencesHomeFeed.tsx b/src/view/screens/PreferencesHomeFeed.tsx new file mode 100644 index 000000000..b04f274f7 --- /dev/null +++ b/src/view/screens/PreferencesHomeFeed.tsx @@ -0,0 +1,192 @@ +import React, {useState} from 'react' +import {ScrollView, StyleSheet, TouchableOpacity, View} from 'react-native' +import {observer} from 'mobx-react-lite' +import {Slider} from '@miblanchard/react-native-slider' +import {Text} from '../com/util/text/Text' +import {useStores} from 'state/index' +import {s, colors} from 'lib/styles' +import {usePalette} from 'lib/hooks/usePalette' +import {isWeb, isDesktopWeb} 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' + +function RepliesThresholdInput({enabled}: {enabled: boolean}) { + const store = useStores() + const pal = usePalette('default') + const [value, setValue] = useState(store.preferences.homeFeedRepliesThreshold) + + return ( + + + {value === 0 + ? `Show all replies` + : `Show replies with at least ${value} ${ + value > 1 ? `likes` : `like` + }`} + + { + const threshold = Math.floor(Array.isArray(v) ? v[0] : v) + setValue(threshold) + store.preferences.setHomeFeedRepliesThreshold(threshold) + }} + minimumValue={0} + maximumValue={25} + containerStyle={isWeb ? undefined : s.flex1} + disabled={!enabled} + thumbTintColor={colors.blue3} + /> + + ) +} + +type Props = NativeStackScreenProps< + CommonNavigatorParams, + 'PreferencesHomeFeed' +> +export const PreferencesHomeFeed = observer(({navigation}: Props) => { + const pal = usePalette('default') + const store = useStores() + + return ( + + + + + Fine-tune the content you see on your home screen. + + + + + + + + Show Replies + + + Adjust the number of likes a reply must have to be shown in your + feed. + + + + + + + + + Show Reposts + + + Set this setting to "No" to hide all reposts from your feed. + + + + + + + Show Quote Posts + + + Set this setting to "No" to hide all quote posts from your feed. + Reposts will still be visible. + + + + + + + + { + navigation.canGoBack() + ? navigation.goBack() + : navigation.navigate('Settings') + }} + style={[styles.btn, isDesktopWeb && styles.btnDesktop]} + accessibilityRole="button" + accessibilityLabel="Confirm" + accessibilityHint=""> + Done + + + + ) +}) + +const styles = StyleSheet.create({ + container: { + flex: 1, + paddingBottom: isDesktopWeb ? 40 : 90, + }, + desktopContainer: { + borderLeftWidth: 1, + borderRightWidth: 1, + }, + titleSection: { + paddingBottom: 30, + paddingTop: isDesktopWeb ? 20 : 0, + }, + 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, + borderTopWidth: isDesktopWeb ? 0 : 1, + }, + dimmed: { + opacity: 0.3, + }, +}) diff --git a/src/view/screens/Settings.tsx b/src/view/screens/Settings.tsx index f1d4767f3..b20d36310 100644 --- a/src/view/screens/Settings.tsx +++ b/src/view/screens/Settings.tsx @@ -170,10 +170,8 @@ export const SettingsScreen = withAuthRequired( }, []) const openPreferencesModal = React.useCallback(() => { - store.shell.openModal({ - name: 'preferences-home-feed', - }) - }, [store]) + navigation.navigate('PreferencesHomeFeed') + }, [navigation]) const onPressAppPasswords = React.useCallback(() => { navigation.navigate('AppPasswords') @@ -386,7 +384,7 @@ export const SettingsScreen = withAuthRequired( Advanced