From 9446c67880331452b3f79dabda183c23718edfa1 Mon Sep 17 00:00:00 2001 From: Ansh Date: Wed, 30 Aug 2023 15:21:12 -0700 Subject: [PATCH] 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 --- __mocks__/@miblanchard/react-native-slider.js | 1 + bskyweb/cmd/bskyweb/server.go | 1 + package.json | 2 +- 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 -- .../PreferencesHomeFeed.tsx | 52 ++++++++++++------- src/view/screens/Settings.tsx | 8 ++- yarn.lock | 2 +- 12 files changed, 49 insertions(+), 38 deletions(-) create mode 100644 __mocks__/@miblanchard/react-native-slider.js rename src/view/{com/modals => screens}/PreferencesHomeFeed.tsx (80%) diff --git a/__mocks__/@miblanchard/react-native-slider.js b/__mocks__/@miblanchard/react-native-slider.js new file mode 100644 index 00000000..99c6a925 --- /dev/null +++ b/__mocks__/@miblanchard/react-native-slider.js @@ -0,0 +1 @@ +export const Slider = {} diff --git a/bskyweb/cmd/bskyweb/server.go b/bskyweb/cmd/bskyweb/server.go index 5cc4ef66..9a8f3bbd 100644 --- a/bskyweb/cmd/bskyweb/server.go +++ b/bskyweb/cmd/bskyweb/server.go @@ -168,6 +168,7 @@ func serve(cctx *cli.Context) error { e.GET("/moderation/blocked-accounts", server.WebGeneric) e.GET("/settings", server.WebGeneric) e.GET("/settings/app-passwords", server.WebGeneric) + e.GET("/settings/home-feed", server.WebGeneric) e.GET("/settings/saved-feeds", server.WebGeneric) e.GET("/sys/debug", server.WebGeneric) e.GET("/sys/log", server.WebGeneric) diff --git a/package.json b/package.json index 92cc7442..f11d482f 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,7 @@ "@fortawesome/react-native-fontawesome": "^0.3.0", "@gorhom/bottom-sheet": "^4.4.7", "@mattermost/react-native-paste-input": "^0.6.4", - "@miblanchard/react-native-slider": "^2.2.0", + "@miblanchard/react-native-slider": "^2.3.1", "@react-native-async-storage/async-storage": "^1.17.6", "@react-native-camera-roll/camera-roll": "^5.2.2", "@react-native-clipboard/clipboard": "^1.10.0", diff --git a/src/Navigation.tsx b/src/Navigation.tsx index 48bab182..df601d0c 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 4eb5e29d..7159bcb5 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 54faba22..45a8fa57 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 6f6ed06b..d19de4b9 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 efd06412..d6d1e212 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 687c4fba..05bb7161 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/screens/PreferencesHomeFeed.tsx similarity index 80% rename from src/view/com/modals/PreferencesHomeFeed.tsx rename to src/view/screens/PreferencesHomeFeed.tsx index 15f7625b..b04f274f 100644 --- a/src/view/com/modals/PreferencesHomeFeed.tsx +++ b/src/view/screens/PreferencesHomeFeed.tsx @@ -1,16 +1,16 @@ import React, {useState} from 'react' -import {StyleSheet, TouchableOpacity, View} from 'react-native' +import {ScrollView, 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 {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 {ScrollView} from 'view/com/modals/util' - -export const snapPoints = ['90%'] +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() @@ -43,18 +43,25 @@ function RepliesThresholdInput({enabled}: {enabled: boolean}) { ) } -export const Component = observer(function Component() { +type Props = NativeStackScreenProps< + CommonNavigatorParams, + 'PreferencesHomeFeed' +> +export const PreferencesHomeFeed = observer(({navigation}: Props) => { const pal = usePalette('default') const store = useStores() return ( - + + - - Home Feed Preferences - Fine-tune the content you see on your home screen. @@ -119,27 +126,33 @@ export const Component = observer(function Component() { { - store.shell.closeModal() + navigation.canGoBack() + ? navigation.goBack() + : navigation.navigate('Settings') }} - style={[styles.btn]} + style={[styles.btn, isDesktopWeb && styles.btnDesktop]} accessibilityRole="button" accessibilityLabel="Confirm" accessibilityHint=""> Done - + ) }) const styles = StyleSheet.create({ container: { flex: 1, - paddingBottom: isDesktopWeb ? 0 : 60, + paddingBottom: isDesktopWeb ? 40 : 90, + }, + desktopContainer: { + borderLeftWidth: 1, + borderRightWidth: 1, }, titleSection: { - padding: 20, paddingBottom: 30, + paddingTop: isDesktopWeb ? 20 : 0, }, title: { textAlign: 'center', @@ -165,9 +178,12 @@ const styles = StyleSheet.create({ padding: 14, backgroundColor: colors.blue3, }, + btnDesktop: { + marginHorizontal: 'auto', + paddingHorizontal: 80, + }, btnContainer: { paddingTop: 20, - paddingHorizontal: 20, borderTopWidth: isDesktopWeb ? 0 : 1, }, dimmed: { diff --git a/src/view/screens/Settings.tsx b/src/view/screens/Settings.tsx index f1d4767f..b20d3631 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