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
This commit is contained in:
Ansh
GitHub
parent
a29f10aefe
commit
9446c67880
12 changed files with 49 additions and 38 deletions
|
|
@ -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 = <PostLanguagesSettingsModal.Component />
|
||||
} else if (activeModal?.name === 'preferences-home-feed') {
|
||||
snapPoints = PreferencesHomeFeed.snapPoints
|
||||
element = <PreferencesHomeFeed.Component />
|
||||
} else if (activeModal?.name === 'onboarding') {
|
||||
snapPoints = OnboardingModal.snapPoints
|
||||
element = <OnboardingModal.Component />
|
||||
|
|
|
|||
|
|
@ -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 = <AltTextImageModal.Component {...modal} />
|
||||
} else if (modal.name === 'edit-image') {
|
||||
element = <EditImageModal.Component {...modal} />
|
||||
} else if (modal.name === 'preferences-home-feed') {
|
||||
element = <PreferencesHomeFeed.Component />
|
||||
} else if (modal.name === 'onboarding') {
|
||||
element = <OnboardingModal.Component />
|
||||
} else if (modal.name === 'moderation-details') {
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<View style={[s.mt10, !enabled && styles.dimmed]}>
|
||||
<Text type="xs" style={pal.text}>
|
||||
{value === 0
|
||||
? `Show all replies`
|
||||
: `Show replies with at least ${value} ${
|
||||
value > 1 ? `likes` : `like`
|
||||
}`}
|
||||
</Text>
|
||||
<Slider
|
||||
value={value}
|
||||
onValueChange={(v: number | number[]) => {
|
||||
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}
|
||||
/>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export const Component = observer(function Component() {
|
||||
const pal = usePalette('default')
|
||||
const store = useStores()
|
||||
|
||||
return (
|
||||
<View
|
||||
testID="preferencesHomeFeedModal"
|
||||
style={[pal.view, styles.container]}>
|
||||
<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]}>
|
||||
Fine-tune the content you see on your home screen.
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<ScrollView>
|
||||
<View style={styles.cardsContainer}>
|
||||
<View style={[pal.viewLight, styles.card]}>
|
||||
<Text type="title-sm" style={[pal.text, s.pb5]}>
|
||||
Show Replies
|
||||
</Text>
|
||||
<Text style={[pal.text, s.pb10]}>
|
||||
Adjust the number of likes a reply must have to be shown in your
|
||||
feed.
|
||||
</Text>
|
||||
<ToggleButton
|
||||
type="default-light"
|
||||
label={store.preferences.homeFeedRepliesEnabled ? 'Yes' : 'No'}
|
||||
isSelected={store.preferences.homeFeedRepliesEnabled}
|
||||
onPress={store.preferences.toggleHomeFeedRepliesEnabled}
|
||||
/>
|
||||
|
||||
<RepliesThresholdInput
|
||||
enabled={store.preferences.homeFeedRepliesEnabled}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View style={[pal.viewLight, styles.card]}>
|
||||
<Text type="title-sm" style={[pal.text, s.pb5]}>
|
||||
Show Reposts
|
||||
</Text>
|
||||
<Text style={[pal.text, s.pb10]}>
|
||||
Set this setting to "No" to hide all reposts from your feed.
|
||||
</Text>
|
||||
<ToggleButton
|
||||
type="default-light"
|
||||
label={store.preferences.homeFeedRepostsEnabled ? 'Yes' : 'No'}
|
||||
isSelected={store.preferences.homeFeedRepostsEnabled}
|
||||
onPress={store.preferences.toggleHomeFeedRepostsEnabled}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View style={[pal.viewLight, styles.card]}>
|
||||
<Text type="title-sm" style={[pal.text, s.pb5]}>
|
||||
Show Quote Posts
|
||||
</Text>
|
||||
<Text style={[pal.text, s.pb10]}>
|
||||
Set this setting to "No" to hide all quote posts from your feed.
|
||||
Reposts will still be visible.
|
||||
</Text>
|
||||
<ToggleButton
|
||||
type="default-light"
|
||||
label={store.preferences.homeFeedQuotePostsEnabled ? 'Yes' : 'No'}
|
||||
isSelected={store.preferences.homeFeedQuotePostsEnabled}
|
||||
onPress={store.preferences.toggleHomeFeedQuotePostsEnabled}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
|
||||
<View style={[styles.btnContainer, pal.borderDark]}>
|
||||
<TouchableOpacity
|
||||
testID="confirmBtn"
|
||||
onPress={() => {
|
||||
store.shell.closeModal()
|
||||
}}
|
||||
style={[styles.btn]}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel="Confirm"
|
||||
accessibilityHint="">
|
||||
<Text style={[s.white, s.bold, s.f18]}>Done</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
})
|
||||
|
||||
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,
|
||||
},
|
||||
})
|
||||
Loading…
Add table
Add a link
Reference in a new issue