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
zio/stable
Ansh 2023-08-30 15:21:12 -07:00 committed by GitHub
parent a29f10aefe
commit 9446c67880
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 49 additions and 38 deletions

View File

@ -0,0 +1 @@
export const Slider = {}

View File

@ -168,6 +168,7 @@ func serve(cctx *cli.Context) error {
e.GET("/moderation/blocked-accounts", server.WebGeneric) e.GET("/moderation/blocked-accounts", server.WebGeneric)
e.GET("/settings", server.WebGeneric) e.GET("/settings", server.WebGeneric)
e.GET("/settings/app-passwords", 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("/settings/saved-feeds", server.WebGeneric)
e.GET("/sys/debug", server.WebGeneric) e.GET("/sys/debug", server.WebGeneric)
e.GET("/sys/log", server.WebGeneric) e.GET("/sys/log", server.WebGeneric)

View File

@ -36,7 +36,7 @@
"@fortawesome/react-native-fontawesome": "^0.3.0", "@fortawesome/react-native-fontawesome": "^0.3.0",
"@gorhom/bottom-sheet": "^4.4.7", "@gorhom/bottom-sheet": "^4.4.7",
"@mattermost/react-native-paste-input": "^0.6.4", "@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-async-storage/async-storage": "^1.17.6",
"@react-native-camera-roll/camera-roll": "^5.2.2", "@react-native-camera-roll/camera-roll": "^5.2.2",
"@react-native-clipboard/clipboard": "^1.10.0", "@react-native-clipboard/clipboard": "^1.10.0",

View File

@ -67,6 +67,7 @@ import {getRoutingInstrumentation} from 'lib/sentry'
import {bskyTitle} from 'lib/strings/headings' import {bskyTitle} from 'lib/strings/headings'
import {JSX} from 'react/jsx-runtime' import {JSX} from 'react/jsx-runtime'
import {timeout} from 'lib/async/timeout' import {timeout} from 'lib/async/timeout'
import {PreferencesHomeFeed} from 'view/screens/PreferencesHomeFeed'
const navigationRef = createNavigationContainerRef<AllNavigatorParams>() const navigationRef = createNavigationContainerRef<AllNavigatorParams>()
@ -219,6 +220,11 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
component={SavedFeeds} component={SavedFeeds}
options={{title: title('Edit My Feeds')}} options={{title: title('Edit My Feeds')}}
/> />
<Stack.Screen
name="PreferencesHomeFeed"
component={PreferencesHomeFeed}
options={{title: title('Home Feed Preferences')}}
/>
</> </>
) )
} }

View File

@ -29,6 +29,7 @@ export type CommonNavigatorParams = {
CopyrightPolicy: undefined CopyrightPolicy: undefined
AppPasswords: undefined AppPasswords: undefined
SavedFeeds: undefined SavedFeeds: undefined
PreferencesHomeFeed: undefined
} }
export type BottomTabNavigatorParams = CommonNavigatorParams & { export type BottomTabNavigatorParams = CommonNavigatorParams & {

View File

@ -23,6 +23,7 @@ export const router = new Router({
Debug: '/sys/debug', Debug: '/sys/debug',
Log: '/sys/log', Log: '/sys/log',
AppPasswords: '/settings/app-passwords', AppPasswords: '/settings/app-passwords',
PreferencesHomeFeed: '/settings/home-feed',
SavedFeeds: '/settings/saved-feeds', SavedFeeds: '/settings/saved-feeds',
Support: '/support', Support: '/support',
PrivacyPolicy: '/support/privacy', PrivacyPolicy: '/support/privacy',

View File

@ -136,10 +136,6 @@ export interface PostLanguagesSettingsModal {
name: 'post-languages-settings' name: 'post-languages-settings'
} }
export interface PreferencesHomeFeed {
name: 'preferences-home-feed'
}
export interface OnboardingModal { export interface OnboardingModal {
name: 'onboarding' name: 'onboarding'
} }
@ -156,7 +152,6 @@ export type Modal =
| ContentFilteringSettingsModal | ContentFilteringSettingsModal
| ContentLanguagesSettingsModal | ContentLanguagesSettingsModal
| PostLanguagesSettingsModal | PostLanguagesSettingsModal
| PreferencesHomeFeed
// Moderation // Moderation
| ModerationDetailsModal | ModerationDetailsModal

View File

@ -28,7 +28,6 @@ import * as AddAppPassword from './AddAppPasswords'
import * as ContentFilteringSettingsModal from './ContentFilteringSettings' import * as ContentFilteringSettingsModal from './ContentFilteringSettings'
import * as ContentLanguagesSettingsModal from './lang-settings/ContentLanguagesSettings' import * as ContentLanguagesSettingsModal from './lang-settings/ContentLanguagesSettings'
import * as PostLanguagesSettingsModal from './lang-settings/PostLanguagesSettings' import * as PostLanguagesSettingsModal from './lang-settings/PostLanguagesSettings'
import * as PreferencesHomeFeed from './PreferencesHomeFeed'
import * as OnboardingModal from './OnboardingModal' import * as OnboardingModal from './OnboardingModal'
import * as ModerationDetailsModal from './ModerationDetails' import * as ModerationDetailsModal from './ModerationDetails'
@ -131,9 +130,6 @@ export const ModalsContainer = observer(function ModalsContainer() {
} else if (activeModal?.name === 'post-languages-settings') { } else if (activeModal?.name === 'post-languages-settings') {
snapPoints = PostLanguagesSettingsModal.snapPoints snapPoints = PostLanguagesSettingsModal.snapPoints
element = <PostLanguagesSettingsModal.Component /> element = <PostLanguagesSettingsModal.Component />
} else if (activeModal?.name === 'preferences-home-feed') {
snapPoints = PreferencesHomeFeed.snapPoints
element = <PreferencesHomeFeed.Component />
} else if (activeModal?.name === 'onboarding') { } else if (activeModal?.name === 'onboarding') {
snapPoints = OnboardingModal.snapPoints snapPoints = OnboardingModal.snapPoints
element = <OnboardingModal.Component /> element = <OnboardingModal.Component />

View File

@ -29,8 +29,6 @@ import * as PostLanguagesSettingsModal from './lang-settings/PostLanguagesSettin
import * as OnboardingModal from './OnboardingModal' import * as OnboardingModal from './OnboardingModal'
import * as ModerationDetailsModal from './ModerationDetails' import * as ModerationDetailsModal from './ModerationDetails'
import * as PreferencesHomeFeed from './PreferencesHomeFeed'
export const ModalsContainer = observer(function ModalsContainer() { export const ModalsContainer = observer(function ModalsContainer() {
const store = useStores() const store = useStores()
@ -107,8 +105,6 @@ function Modal({modal}: {modal: ModalIface}) {
element = <AltTextImageModal.Component {...modal} /> element = <AltTextImageModal.Component {...modal} />
} else if (modal.name === 'edit-image') { } else if (modal.name === 'edit-image') {
element = <EditImageModal.Component {...modal} /> element = <EditImageModal.Component {...modal} />
} else if (modal.name === 'preferences-home-feed') {
element = <PreferencesHomeFeed.Component />
} else if (modal.name === 'onboarding') { } else if (modal.name === 'onboarding') {
element = <OnboardingModal.Component /> element = <OnboardingModal.Component />
} else if (modal.name === 'moderation-details') { } else if (modal.name === 'moderation-details') {

View File

@ -1,16 +1,16 @@
import React, {useState} from 'react' 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 {observer} from 'mobx-react-lite'
import {Slider} from '@miblanchard/react-native-slider' 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 {useStores} from 'state/index'
import {s, colors} from 'lib/styles' import {s, colors} from 'lib/styles'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
import {isWeb, isDesktopWeb} from 'platform/detection' import {isWeb, isDesktopWeb} from 'platform/detection'
import {ToggleButton} from 'view/com/util/forms/ToggleButton' import {ToggleButton} from 'view/com/util/forms/ToggleButton'
import {ScrollView} from 'view/com/modals/util' import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types'
import {ViewHeader} from 'view/com/util/ViewHeader'
export const snapPoints = ['90%'] import {CenteredView} from 'view/com/util/Views'
function RepliesThresholdInput({enabled}: {enabled: boolean}) { function RepliesThresholdInput({enabled}: {enabled: boolean}) {
const store = useStores() 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 pal = usePalette('default')
const store = useStores() const store = useStores()
return ( return (
<View <CenteredView
testID="preferencesHomeFeedModal" testID="preferencesHomeFeedScreen"
style={[pal.view, styles.container]}> style={[
pal.view,
pal.border,
styles.container,
isDesktopWeb && styles.desktopContainer,
]}>
<ViewHeader title="Home Feed Preferences" showOnDesktop />
<View style={styles.titleSection}> <View style={styles.titleSection}>
<Text type="title-lg" style={[pal.text, styles.title]}>
Home Feed Preferences
</Text>
<Text type="xl" style={[pal.textLight, styles.description]}> <Text type="xl" style={[pal.textLight, styles.description]}>
Fine-tune the content you see on your home screen. Fine-tune the content you see on your home screen.
</Text> </Text>
@ -119,27 +126,33 @@ export const Component = observer(function Component() {
<TouchableOpacity <TouchableOpacity
testID="confirmBtn" testID="confirmBtn"
onPress={() => { onPress={() => {
store.shell.closeModal() navigation.canGoBack()
? navigation.goBack()
: navigation.navigate('Settings')
}} }}
style={[styles.btn]} style={[styles.btn, isDesktopWeb && styles.btnDesktop]}
accessibilityRole="button" accessibilityRole="button"
accessibilityLabel="Confirm" accessibilityLabel="Confirm"
accessibilityHint=""> accessibilityHint="">
<Text style={[s.white, s.bold, s.f18]}>Done</Text> <Text style={[s.white, s.bold, s.f18]}>Done</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </CenteredView>
) )
}) })
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
flex: 1, flex: 1,
paddingBottom: isDesktopWeb ? 0 : 60, paddingBottom: isDesktopWeb ? 40 : 90,
},
desktopContainer: {
borderLeftWidth: 1,
borderRightWidth: 1,
}, },
titleSection: { titleSection: {
padding: 20,
paddingBottom: 30, paddingBottom: 30,
paddingTop: isDesktopWeb ? 20 : 0,
}, },
title: { title: {
textAlign: 'center', textAlign: 'center',
@ -165,9 +178,12 @@ const styles = StyleSheet.create({
padding: 14, padding: 14,
backgroundColor: colors.blue3, backgroundColor: colors.blue3,
}, },
btnDesktop: {
marginHorizontal: 'auto',
paddingHorizontal: 80,
},
btnContainer: { btnContainer: {
paddingTop: 20, paddingTop: 20,
paddingHorizontal: 20,
borderTopWidth: isDesktopWeb ? 0 : 1, borderTopWidth: isDesktopWeb ? 0 : 1,
}, },
dimmed: { dimmed: {

View File

@ -170,10 +170,8 @@ export const SettingsScreen = withAuthRequired(
}, []) }, [])
const openPreferencesModal = React.useCallback(() => { const openPreferencesModal = React.useCallback(() => {
store.shell.openModal({ navigation.navigate('PreferencesHomeFeed')
name: 'preferences-home-feed', }, [navigation])
})
}, [store])
const onPressAppPasswords = React.useCallback(() => { const onPressAppPasswords = React.useCallback(() => {
navigation.navigate('AppPasswords') navigation.navigate('AppPasswords')
@ -386,7 +384,7 @@ export const SettingsScreen = withAuthRequired(
Advanced Advanced
</Text> </Text>
<TouchableOpacity <TouchableOpacity
testID="preferencesHomeFeedModalButton" testID="preferencesHomeFeedButton"
style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]} style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]}
onPress={openPreferencesModal} onPress={openPreferencesModal}
accessibilityRole="button" accessibilityRole="button"

View File

@ -3497,7 +3497,7 @@
dependencies: dependencies:
semver "7.5.4" semver "7.5.4"
"@miblanchard/react-native-slider@^2.2.0": "@miblanchard/react-native-slider@^2.3.1":
version "2.3.1" version "2.3.1"
resolved "https://registry.yarnpkg.com/@miblanchard/react-native-slider/-/react-native-slider-2.3.1.tgz#79e0f1f9b1ce43ef25ee51ee9256c012e5dfa412" resolved "https://registry.yarnpkg.com/@miblanchard/react-native-slider/-/react-native-slider-2.3.1.tgz#79e0f1f9b1ce43ef25ee51ee9256c012e5dfa412"
integrity sha512-J/hZDBWmXq8fJeOnTVHqIUVDHshqMSpJVxJ4WqwuCBKl5Rke9OBYXIdkSlgi75OgtScAr8FKK5KNkDKHUf6JIg== integrity sha512-J/hZDBWmXq8fJeOnTVHqIUVDHshqMSpJVxJ4WqwuCBKl5Rke9OBYXIdkSlgi75OgtScAr8FKK5KNkDKHUf6JIg==