mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
lenooby09.tech
1import React, {useState} from 'react'
2import {Platform, StyleSheet, TouchableOpacity, View} from 'react-native'
3import {
4 FontAwesomeIcon,
5 FontAwesomeIconStyle,
6} from '@fortawesome/react-native-fontawesome'
7import {ScrollView, TextInput} from './util'
8import {Text} from '../util/text/Text'
9import {useStores} from 'state/index'
10import {s, colors} from 'lib/styles'
11import {usePalette} from 'lib/hooks/usePalette'
12import {useTheme} from 'lib/ThemeContext'
13import {LOCAL_DEV_SERVICE, STAGING_SERVICE, PROD_SERVICE} from 'state/index'
14import {LOGIN_INCLUDE_DEV_SERVERS} from 'lib/build-flags'
15
16export const snapPoints = ['80%']
17
18export function Component({onSelect}: {onSelect: (url: string) => void}) {
19 const theme = useTheme()
20 const pal = usePalette('default')
21 const store = useStores()
22 const [customUrl, setCustomUrl] = useState<string>('')
23
24 const doSelect = (url: string) => {
25 if (!url.startsWith('http://') && !url.startsWith('https://')) {
26 url = `https://${url}`
27 }
28 store.shell.closeModal()
29 onSelect(url)
30 }
31
32 return (
33 <View style={[pal.view, s.flex1]} testID="serverInputModal">
34 <Text type="2xl-bold" style={[pal.text, s.textCenter]}>
35 Choose Service
36 </Text>
37 <ScrollView style={styles.inner}>
38 <View style={styles.group}>
39 {LOGIN_INCLUDE_DEV_SERVERS ? (
40 <>
41 <TouchableOpacity
42 testID="localDevServerButton"
43 style={styles.btn}
44 onPress={() => doSelect(LOCAL_DEV_SERVICE)}
45 accessibilityRole="button">
46 <Text style={styles.btnText}>Local dev server</Text>
47 <FontAwesomeIcon
48 icon="arrow-right"
49 style={s.white as FontAwesomeIconStyle}
50 />
51 </TouchableOpacity>
52 <TouchableOpacity
53 style={styles.btn}
54 onPress={() => doSelect(STAGING_SERVICE)}
55 accessibilityRole="button">
56 <Text style={styles.btnText}>Staging</Text>
57 <FontAwesomeIcon
58 icon="arrow-right"
59 style={s.white as FontAwesomeIconStyle}
60 />
61 </TouchableOpacity>
62 </>
63 ) : undefined}
64 <TouchableOpacity
65 style={styles.btn}
66 onPress={() => doSelect(PROD_SERVICE)}
67 accessibilityRole="button"
68 accessibilityLabel="Select Bluesky Social"
69 accessibilityHint="Sets Bluesky Social as your service provider">
70 <Text style={styles.btnText}>Bluesky.Social</Text>
71 <FontAwesomeIcon
72 icon="arrow-right"
73 style={s.white as FontAwesomeIconStyle}
74 />
75 </TouchableOpacity>
76 </View>
77 <View style={styles.group}>
78 <Text style={[pal.text, styles.label]}>Other service</Text>
79 <View style={s.flexRow}>
80 <TextInput
81 testID="customServerTextInput"
82 style={[pal.borderDark, pal.text, styles.textInput]}
83 placeholder="e.g. https://bsky.app"
84 placeholderTextColor={colors.gray4}
85 autoCapitalize="none"
86 autoComplete="off"
87 autoCorrect={false}
88 keyboardAppearance={theme.colorScheme}
89 value={customUrl}
90 onChangeText={setCustomUrl}
91 accessibilityLabel="Custom domain"
92 // TODO: Simplify this wording further to be understandable by everyone
93 accessibilityHint="Use your domain as your Bluesky client service provider"
94 />
95 <TouchableOpacity
96 testID="customServerSelectBtn"
97 style={[pal.borderDark, pal.text, styles.textInputBtn]}
98 onPress={() => doSelect(customUrl)}
99 accessibilityRole="button"
100 accessibilityLabel={`Confirm service. ${
101 customUrl === ''
102 ? 'Button disabled. Input custom domain to proceed.'
103 : ''
104 }`}
105 accessibilityHint=""
106 // TODO - accessibility: Need to inform state change on failure
107 disabled={customUrl === ''}>
108 <FontAwesomeIcon
109 icon="check"
110 style={[pal.text as FontAwesomeIconStyle, styles.checkIcon]}
111 size={18}
112 />
113 </TouchableOpacity>
114 </View>
115 </View>
116 </ScrollView>
117 </View>
118 )
119}
120
121const styles = StyleSheet.create({
122 inner: {
123 padding: 14,
124 },
125 group: {
126 marginBottom: 20,
127 },
128 label: {
129 fontWeight: 'bold',
130 paddingHorizontal: 4,
131 paddingBottom: 4,
132 },
133 textInput: {
134 flex: 1,
135 borderWidth: 1,
136 borderTopLeftRadius: 6,
137 borderBottomLeftRadius: 6,
138 paddingHorizontal: 14,
139 paddingVertical: 12,
140 fontSize: 16,
141 },
142 textInputBtn: {
143 borderWidth: 1,
144 borderLeftWidth: 0,
145 borderTopRightRadius: 6,
146 borderBottomRightRadius: 6,
147 paddingHorizontal: 14,
148 paddingVertical: 10,
149 },
150 btn: {
151 flexDirection: 'row',
152 alignItems: 'center',
153 backgroundColor: colors.blue3,
154 borderRadius: 6,
155 paddingHorizontal: 14,
156 paddingVertical: 10,
157 marginBottom: 6,
158 },
159 btnText: {
160 flex: 1,
161 fontSize: 18,
162 fontWeight: '500',
163 color: colors.white,
164 },
165 checkIcon: {
166 position: 'relative',
167 ...Platform.select({
168 android: {
169 top: 8,
170 },
171 ios: {
172 top: 2,
173 },
174 }),
175 },
176})