mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
lenooby09.tech
1import React from 'react'
2import {
3 ActivityIndicator,
4 ScrollView,
5 StyleSheet,
6 TouchableOpacity,
7 View,
8} from 'react-native'
9import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
10import {Text} from '../com/util/text/Text'
11import {s, colors} from 'lib/styles'
12import {usePalette} from 'lib/hooks/usePalette'
13import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
14import {ToggleButton} from 'view/com/util/forms/ToggleButton'
15import {RadioGroup} from 'view/com/util/forms/RadioGroup'
16import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types'
17import {ViewHeader} from 'view/com/util/ViewHeader'
18import {CenteredView} from 'view/com/util/Views'
19import {Trans, msg} from '@lingui/macro'
20import {useLingui} from '@lingui/react'
21import {
22 usePreferencesQuery,
23 useSetThreadViewPreferencesMutation,
24} from '#/state/queries/preferences'
25
26type Props = NativeStackScreenProps<CommonNavigatorParams, 'PreferencesThreads'>
27export function PreferencesThreads({navigation}: Props) {
28 const pal = usePalette('default')
29 const {_} = useLingui()
30 const {isTabletOrDesktop} = useWebMediaQueries()
31 const {data: preferences} = usePreferencesQuery()
32 const {mutate: setThreadViewPrefs, variables} =
33 useSetThreadViewPreferencesMutation()
34
35 const prioritizeFollowedUsers = Boolean(
36 variables?.prioritizeFollowedUsers ??
37 preferences?.threadViewPrefs?.prioritizeFollowedUsers,
38 )
39 const treeViewEnabled = Boolean(
40 variables?.lab_treeViewEnabled ??
41 preferences?.threadViewPrefs?.lab_treeViewEnabled,
42 )
43
44 return (
45 <CenteredView
46 testID="preferencesThreadsScreen"
47 style={[
48 pal.view,
49 pal.border,
50 styles.container,
51 isTabletOrDesktop && styles.desktopContainer,
52 ]}>
53 <ViewHeader title={_(msg`Thread Preferences`)} showOnDesktop />
54 <View
55 style={[
56 styles.titleSection,
57 isTabletOrDesktop && {paddingTop: 20, paddingBottom: 20},
58 ]}>
59 <Text type="xl" style={[pal.textLight, styles.description]}>
60 <Trans>Fine-tune the discussion threads.</Trans>
61 </Text>
62 </View>
63
64 {preferences ? (
65 <ScrollView>
66 <View style={styles.cardsContainer}>
67 <View style={[pal.viewLight, styles.card]}>
68 <Text type="title-sm" style={[pal.text, s.pb5]}>
69 <Trans>Sort Replies</Trans>
70 </Text>
71 <Text style={[pal.text, s.pb10]}>
72 <Trans>Sort replies to the same post by:</Trans>
73 </Text>
74 <View style={[pal.view, {borderRadius: 8, paddingVertical: 6}]}>
75 <RadioGroup
76 type="default-light"
77 items={[
78 {key: 'oldest', label: _(msg`Oldest replies first`)},
79 {key: 'newest', label: _(msg`Newest replies first`)},
80 {
81 key: 'most-likes',
82 label: _(msg`Most-liked replies first`),
83 },
84 {
85 key: 'random',
86 label: _(msg`Random (aka "Poster's Roulette")`),
87 },
88 ]}
89 onSelect={key => setThreadViewPrefs({sort: key})}
90 initialSelection={preferences?.threadViewPrefs?.sort}
91 />
92 </View>
93 </View>
94
95 <View style={[pal.viewLight, styles.card]}>
96 <Text type="title-sm" style={[pal.text, s.pb5]}>
97 <Trans>Prioritize Your Follows</Trans>
98 </Text>
99 <Text style={[pal.text, s.pb10]}>
100 <Trans>
101 Show replies by people you follow before all other replies.
102 </Trans>
103 </Text>
104 <ToggleButton
105 type="default-light"
106 label={prioritizeFollowedUsers ? _(msg`Yes`) : _(msg`No`)}
107 isSelected={prioritizeFollowedUsers}
108 onPress={() =>
109 setThreadViewPrefs({
110 prioritizeFollowedUsers: !prioritizeFollowedUsers,
111 })
112 }
113 />
114 </View>
115
116 <View style={[pal.viewLight, styles.card]}>
117 <Text type="title-sm" style={[pal.text, s.pb5]}>
118 <FontAwesomeIcon icon="flask" color={pal.colors.text} />{' '}
119 <Trans>Threaded Mode</Trans>
120 </Text>
121 <Text style={[pal.text, s.pb10]}>
122 <Trans>
123 Set this setting to "Yes" to show replies in a threaded view.
124 This is an experimental feature.
125 </Trans>
126 </Text>
127 <ToggleButton
128 type="default-light"
129 label={treeViewEnabled ? _(msg`Yes`) : _(msg`No`)}
130 isSelected={treeViewEnabled}
131 onPress={() =>
132 setThreadViewPrefs({
133 lab_treeViewEnabled: !treeViewEnabled,
134 })
135 }
136 />
137 </View>
138 </View>
139 </ScrollView>
140 ) : (
141 <ActivityIndicator />
142 )}
143
144 <View
145 style={[
146 styles.btnContainer,
147 !isTabletOrDesktop && {borderTopWidth: 1, paddingHorizontal: 20},
148 pal.border,
149 ]}>
150 <TouchableOpacity
151 testID="confirmBtn"
152 onPress={() => {
153 navigation.canGoBack()
154 ? navigation.goBack()
155 : navigation.navigate('Settings')
156 }}
157 style={[styles.btn, isTabletOrDesktop && styles.btnDesktop]}
158 accessibilityRole="button"
159 accessibilityLabel={_(msg`Confirm`)}
160 accessibilityHint="">
161 <Text style={[s.white, s.bold, s.f18]}>
162 <Trans context="action">Done</Trans>
163 </Text>
164 </TouchableOpacity>
165 </View>
166 </CenteredView>
167 )
168}
169
170const styles = StyleSheet.create({
171 container: {
172 flex: 1,
173 paddingBottom: 90,
174 },
175 desktopContainer: {
176 borderLeftWidth: 1,
177 borderRightWidth: 1,
178 paddingBottom: 40,
179 },
180 titleSection: {
181 paddingBottom: 30,
182 },
183 title: {
184 textAlign: 'center',
185 marginBottom: 5,
186 },
187 description: {
188 textAlign: 'center',
189 paddingHorizontal: 32,
190 },
191 cardsContainer: {
192 paddingHorizontal: 20,
193 },
194 card: {
195 padding: 16,
196 borderRadius: 10,
197 marginBottom: 20,
198 },
199 btn: {
200 flexDirection: 'row',
201 alignItems: 'center',
202 justifyContent: 'center',
203 borderRadius: 32,
204 padding: 14,
205 backgroundColor: colors.blue3,
206 },
207 btnDesktop: {
208 marginHorizontal: 'auto',
209 paddingHorizontal: 80,
210 },
211 btnContainer: {
212 paddingTop: 20,
213 },
214 dimmed: {
215 opacity: 0.3,
216 },
217})