diff options
Diffstat (limited to 'src/view/screens/PreferencesHomeFeed.tsx')
| -rw-r--r-- | src/view/screens/PreferencesHomeFeed.tsx | 208 |
1 files changed, 151 insertions, 57 deletions
diff --git a/src/view/screens/PreferencesHomeFeed.tsx b/src/view/screens/PreferencesHomeFeed.tsx index 21c15931f..fe17be5e8 100644 --- a/src/view/screens/PreferencesHomeFeed.tsx +++ b/src/view/screens/PreferencesHomeFeed.tsx @@ -1,10 +1,8 @@ import React, {useState} from 'react' import {ScrollView, StyleSheet, TouchableOpacity, View} from 'react-native' -import {observer} from 'mobx-react-lite' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' 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 {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' @@ -14,21 +12,33 @@ 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}: {enabled: boolean}) { - const store = useStores() +function RepliesThresholdInput({ + enabled, + initialValue, +}: { + enabled: boolean + initialValue: number +}) { const pal = usePalette('default') - const [value, setValue] = useState( - store.preferences.homeFeed.hideRepliesByLikeCount, - ) + const [value, setValue] = useState(initialValue) + const {mutate: setFeedViewPref} = useSetFeedViewPreferencesMutation() const save = React.useMemo( () => debounce( threshold => - store.preferences.setHomeFeedHideRepliesByLikeCount(threshold), + setFeedViewPref({ + hideRepliesByLikeCount: threshold, + }), 500, ), // debouce for 500ms - [store], + [setFeedViewPref], ) return ( @@ -61,12 +71,17 @@ type Props = NativeStackScreenProps< CommonNavigatorParams, 'PreferencesHomeFeed' > -export const PreferencesHomeFeed = observer(function PreferencesHomeFeedImpl({ - navigation, -}: Props) { +export function PreferencesHomeFeed({navigation}: Props) { const pal = usePalette('default') - const store = useStores() + const {_} = useLingui() const {isTabletOrDesktop} = useWebMediaQueries() + const {data: preferences} = usePreferencesQuery() + const {mutate: setFeedViewPref, variables} = + useSetFeedViewPreferencesMutation() + + const showReplies = !( + variables?.hideReplies ?? preferences?.feedViewPrefs?.hideReplies + ) return ( <CenteredView @@ -77,14 +92,14 @@ export const PreferencesHomeFeed = observer(function PreferencesHomeFeedImpl({ styles.container, isTabletOrDesktop && styles.desktopContainer, ]}> - <ViewHeader title="Home Feed Preferences" showOnDesktop /> + <ViewHeader title={_(msg`Home Feed Preferences`)} showOnDesktop /> <View style={[ styles.titleSection, isTabletOrDesktop && {paddingTop: 20, paddingBottom: 20}, ]}> <Text type="xl" style={[pal.textLight, styles.description]}> - Fine-tune the content you see on your home screen. + <Trans>Fine-tune the content you see on your home screen.</Trans> </Text> </View> @@ -92,98 +107,175 @@ export const PreferencesHomeFeed = observer(function PreferencesHomeFeedImpl({ <View style={styles.cardsContainer}> <View style={[pal.viewLight, styles.card]}> <Text type="title-sm" style={[pal.text, s.pb5]}> - Show Replies + <Trans>Show Replies</Trans> </Text> <Text style={[pal.text, s.pb10]}> - Set this setting to "No" to hide all replies from your feed. + <Trans> + Set this setting to "No" to hide all replies from your feed. + </Trans> </Text> <ToggleButton testID="toggleRepliesBtn" type="default-light" - label={store.preferences.homeFeed.hideReplies ? 'No' : 'Yes'} - isSelected={!store.preferences.homeFeed.hideReplies} - onPress={store.preferences.toggleHomeFeedHideReplies} + label={showReplies ? 'Yes' : 'No'} + isSelected={showReplies} + onPress={() => + setFeedViewPref({ + hideReplies: !( + variables?.hideReplies ?? + preferences?.feedViewPrefs?.hideReplies + ), + }) + } /> </View> <View - style={[ - pal.viewLight, - styles.card, - store.preferences.homeFeed.hideReplies && styles.dimmed, - ]}> + style={[pal.viewLight, styles.card, !showReplies && styles.dimmed]}> <Text type="title-sm" style={[pal.text, s.pb5]}> - Reply Filters + <Trans>Reply Filters</Trans> </Text> <Text style={[pal.text, s.pb10]}> - Enable this setting to only see replies between people you follow. + <Trans> + Enable this setting to only see replies between people you + follow. + </Trans> </Text> <ToggleButton type="default-light" - label="Followed users only" - isSelected={store.preferences.homeFeed.hideRepliesByUnfollowed} + label={_(msg`Followed users only`)} + isSelected={Boolean( + variables?.hideRepliesByUnfollowed ?? + preferences?.feedViewPrefs?.hideRepliesByUnfollowed, + )} onPress={ - !store.preferences.homeFeed.hideReplies - ? store.preferences.toggleHomeFeedHideRepliesByUnfollowed + showReplies + ? () => + setFeedViewPref({ + hideRepliesByUnfollowed: !( + variables?.hideRepliesByUnfollowed ?? + preferences?.feedViewPrefs?.hideRepliesByUnfollowed + ), + }) : undefined } style={[s.mb10]} /> <Text style={[pal.text]}> - Adjust the number of likes a reply must have to be shown in your - feed. + <Trans> + Adjust the number of likes a reply must have to be shown in your + feed. + </Trans> </Text> - <RepliesThresholdInput - enabled={!store.preferences.homeFeed.hideReplies} - /> + {preferences && ( + <RepliesThresholdInput + enabled={showReplies} + initialValue={preferences.feedViewPrefs.hideRepliesByLikeCount} + /> + )} </View> <View style={[pal.viewLight, styles.card]}> <Text type="title-sm" style={[pal.text, s.pb5]}> - Show Reposts + <Trans>Show Reposts</Trans> </Text> <Text style={[pal.text, s.pb10]}> - Set this setting to "No" to hide all reposts from your feed. + <Trans> + Set this setting to "No" to hide all reposts from your feed. + </Trans> </Text> <ToggleButton type="default-light" - label={store.preferences.homeFeed.hideReposts ? 'No' : 'Yes'} - isSelected={!store.preferences.homeFeed.hideReposts} - onPress={store.preferences.toggleHomeFeedHideReposts} + label={ + variables?.hideReposts ?? + preferences?.feedViewPrefs?.hideReposts + ? _(msg`No`) + : _(msg`Yes`) + } + isSelected={ + !( + variables?.hideReposts ?? + preferences?.feedViewPrefs?.hideReposts + ) + } + onPress={() => + setFeedViewPref({ + hideReposts: !( + variables?.hideReposts ?? + preferences?.feedViewPrefs?.hideReposts + ), + }) + } /> </View> <View style={[pal.viewLight, styles.card]}> <Text type="title-sm" style={[pal.text, s.pb5]}> - Show Quote Posts + <Trans>Show Quote Posts</Trans> </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. + <Trans> + Set this setting to "No" to hide all quote posts from your feed. + Reposts will still be visible. + </Trans> </Text> <ToggleButton type="default-light" - label={store.preferences.homeFeed.hideQuotePosts ? 'No' : 'Yes'} - isSelected={!store.preferences.homeFeed.hideQuotePosts} - onPress={store.preferences.toggleHomeFeedHideQuotePosts} + label={ + variables?.hideQuotePosts ?? + preferences?.feedViewPrefs?.hideQuotePosts + ? _(msg`No`) + : _(msg`Yes`) + } + isSelected={ + !( + variables?.hideQuotePosts ?? + preferences?.feedViewPrefs?.hideQuotePosts + ) + } + onPress={() => + setFeedViewPref({ + hideQuotePosts: !( + variables?.hideQuotePosts ?? + preferences?.feedViewPrefs?.hideQuotePosts + ), + }) + } /> </View> <View style={[pal.viewLight, styles.card]}> <Text type="title-sm" style={[pal.text, s.pb5]}> - <FontAwesomeIcon icon="flask" color={pal.colors.text} /> Show - Posts from My Feeds + <FontAwesomeIcon icon="flask" color={pal.colors.text} /> + <Trans>Show Posts from My Feeds</Trans> </Text> <Text style={[pal.text, s.pb10]}> - Set this setting to "Yes" to show samples of your saved feeds in - your following feed. This is an experimental feature. + <Trans> + Set this setting to "Yes" to show samples of your saved feeds in + your following feed. This is an experimental feature. + </Trans> </Text> <ToggleButton type="default-light" label={ - store.preferences.homeFeed.lab_mergeFeedEnabled ? 'Yes' : 'No' + variables?.lab_mergeFeedEnabled ?? + preferences?.feedViewPrefs?.lab_mergeFeedEnabled + ? _(msg`Yes`) + : _(msg`No`) + } + isSelected={ + !!( + variables?.lab_mergeFeedEnabled ?? + preferences?.feedViewPrefs?.lab_mergeFeedEnabled + ) + } + onPress={() => + setFeedViewPref({ + lab_mergeFeedEnabled: !( + variables?.lab_mergeFeedEnabled ?? + preferences?.feedViewPrefs?.lab_mergeFeedEnabled + ), + }) } - isSelected={!!store.preferences.homeFeed.lab_mergeFeedEnabled} - onPress={store.preferences.toggleHomeFeedMergeFeedEnabled} /> </View> </View> @@ -204,14 +296,16 @@ export const PreferencesHomeFeed = observer(function PreferencesHomeFeedImpl({ }} style={[styles.btn, isTabletOrDesktop && styles.btnDesktop]} accessibilityRole="button" - accessibilityLabel="Confirm" + accessibilityLabel={_(msg`Confirm`)} accessibilityHint=""> - <Text style={[s.white, s.bold, s.f18]}>Done</Text> + <Text style={[s.white, s.bold, s.f18]}> + <Trans>Done</Trans> + </Text> </TouchableOpacity> </View> </CenteredView> ) -}) +} const styles = StyleSheet.create({ container: { |