lenooby09.tech
mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
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 {LOCAL_DEV_SERVICE, STAGING_SERVICE, PROD_SERVICE} from 'state/index'
12import {LOGIN_INCLUDE_DEV_SERVERS} from 'lib/build-flags'
13
14export const snapPoints = ['80%']
15
16export function Component({onSelect}: {onSelect: (url: string) => void}) {
17 const store = useStores()
18 const [customUrl, setCustomUrl] = useState<string>('')
19
20 const doSelect = (url: string) => {
21 if (!url.startsWith('http://') && !url.startsWith('https://')) {
22 url = `https://${url}`
23 }
24 store.shell.closeModal()
25 onSelect(url)
26 }
27
28 return (
29 <View style={s.flex1} testID="serverInputModal">
30 <Text style={[s.textCenter, s.bold, s.f18]}>Choose Service</Text>
31 <ScrollView style={styles.inner}>
32 <View style={styles.group}>
33 {LOGIN_INCLUDE_DEV_SERVERS ? (
34 <>
35 <TouchableOpacity
36 testID="localDevServerButton"
37 style={styles.btn}
38 onPress={() => doSelect(LOCAL_DEV_SERVICE)}>
39 <Text style={styles.btnText}>Local dev server</Text>
40 <FontAwesomeIcon
41 icon="arrow-right"
42 style={s.white as FontAwesomeIconStyle}
43 />
44 </TouchableOpacity>
45 <TouchableOpacity
46 style={styles.btn}
47 onPress={() => doSelect(STAGING_SERVICE)}>
48 <Text style={styles.btnText}>Staging</Text>
49 <FontAwesomeIcon
50 icon="arrow-right"
51 style={s.white as FontAwesomeIconStyle}
52 />
53 </TouchableOpacity>
54 </>
55 ) : undefined}
56 <TouchableOpacity
57 style={styles.btn}
58 onPress={() => doSelect(PROD_SERVICE)}>
59 <Text style={styles.btnText}>Bluesky.Social</Text>
60 <FontAwesomeIcon
61 icon="arrow-right"
62 style={s.white as FontAwesomeIconStyle}
63 />
64 </TouchableOpacity>
65 </View>
66 <View style={styles.group}>
67 <Text style={styles.label}>Other service</Text>
68 <View style={s.flexRow}>
69 <TextInput
70 testID="customServerTextInput"
71 style={styles.textInput}
72 placeholder="e.g. https://bsky.app"
73 placeholderTextColor={colors.gray4}
74 autoCapitalize="none"
75 autoComplete="off"
76 autoCorrect={false}
77 value={customUrl}
78 onChangeText={setCustomUrl}
79 />
80 <TouchableOpacity
81 testID="customServerSelectBtn"
82 style={styles.textInputBtn}
83 onPress={() => doSelect(customUrl)}>
84 <FontAwesomeIcon
85 icon="check"
86 style={[s.black as FontAwesomeIconStyle, styles.checkIcon]}
87 size={18}
88 />
89 </TouchableOpacity>
90 </View>
91 </View>
92 </ScrollView>
93 </View>
94 )
95}
96
97const styles = StyleSheet.create({
98 inner: {
99 padding: 14,
100 },
101 group: {
102 marginBottom: 20,
103 },
104 label: {
105 fontWeight: 'bold',
106 paddingHorizontal: 4,
107 paddingBottom: 4,
108 },
109 textInput: {
110 flex: 1,
111 borderWidth: 1,
112 borderColor: colors.gray3,
113 borderTopLeftRadius: 6,
114 borderBottomLeftRadius: 6,
115 paddingHorizontal: 14,
116 paddingVertical: 12,
117 fontSize: 16,
118 color: colors.black,
119 },
120 textInputBtn: {
121 borderWidth: 1,
122 borderLeftWidth: 0,
123 borderColor: colors.gray3,
124 borderTopRightRadius: 6,
125 borderBottomRightRadius: 6,
126 paddingHorizontal: 14,
127 paddingVertical: 10,
128 },
129 btn: {
130 flexDirection: 'row',
131 alignItems: 'center',
132 backgroundColor: colors.blue3,
133 borderRadius: 6,
134 paddingHorizontal: 14,
135 paddingVertical: 10,
136 marginBottom: 6,
137 },
138 btnText: {
139 flex: 1,
140 fontSize: 18,
141 fontWeight: '500',
142 color: colors.white,
143 },
144 checkIcon: {
145 position: 'relative',
146 ...Platform.select({
147 android: {
148 top: 8,
149 },
150 ios: {
151 top: 2,
152 },
153 }),
154 },
155})