lenooby09.tech
mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
1import React from 'react'
2import {observer} from 'mobx-react-lite'
3import {StyleSheet, TouchableOpacity, View} from 'react-native'
4import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
5import {usePalette} from 'lib/hooks/usePalette'
6import {DesktopSearch} from './Search'
7import {Text} from 'view/com/util/text/Text'
8import {TextLink} from 'view/com/util/Link'
9import {FEEDBACK_FORM_URL, HELP_DESK_URL} from 'lib/constants'
10import {s} from 'lib/styles'
11import {useStores} from 'state/index'
12import {pluralize} from 'lib/strings/helpers'
13import {formatCount} from 'view/com/util/numeric/format'
14
15export const DesktopRightNav = observer(function DesktopRightNav() {
16 const store = useStores()
17 const pal = usePalette('default')
18 const palError = usePalette('error')
19
20 return (
21 <View style={[styles.rightNav, pal.view]}>
22 {store.session.hasSession && <DesktopSearch />}
23 <View style={styles.message}>
24 {store.session.isSandbox ? (
25 <View style={[palError.view, styles.messageLine, s.p10]}>
26 <Text type="md" style={[palError.text, s.bold]}>
27 SANDBOX. Posts and accounts are not permanent.
28 </Text>
29 </View>
30 ) : undefined}
31 <View style={[s.flexRow]}>
32 <TextLink
33 type="md"
34 style={pal.link}
35 href={FEEDBACK_FORM_URL({
36 email: store.session.currentSession?.email,
37 handle: store.session.currentSession?.handle,
38 })}
39 text="Send feedback"
40 />
41 <Text type="md" style={pal.textLight}>
42 ·
43 </Text>
44 <TextLink
45 type="md"
46 style={pal.link}
47 href="https://blueskyweb.xyz/support/privacy-policy"
48 text="Privacy"
49 />
50 <Text type="md" style={pal.textLight}>
51 ·
52 </Text>
53 <TextLink
54 type="md"
55 style={pal.link}
56 href="https://blueskyweb.xyz/support/tos"
57 text="Terms"
58 />
59 <Text type="md" style={pal.textLight}>
60 ·
61 </Text>
62 <TextLink
63 type="md"
64 style={pal.link}
65 href={HELP_DESK_URL}
66 text="Help"
67 />
68 </View>
69 </View>
70 <InviteCodes />
71 </View>
72 )
73})
74
75const InviteCodes = observer(() => {
76 const store = useStores()
77 const pal = usePalette('default')
78
79 const {invitesAvailable} = store.me
80
81 const onPress = React.useCallback(() => {
82 store.shell.openModal({name: 'invite-codes'})
83 }, [store])
84 return (
85 <TouchableOpacity
86 style={[styles.inviteCodes, pal.border]}
87 onPress={onPress}
88 accessibilityRole="button"
89 accessibilityLabel={
90 invitesAvailable === 1
91 ? 'Invite codes: 1 available'
92 : `Invite codes: ${invitesAvailable} available`
93 }
94 accessibilityHint="Opens list of invite codes">
95 <FontAwesomeIcon
96 icon="ticket"
97 style={[
98 styles.inviteCodesIcon,
99 store.me.invitesAvailable > 0 ? pal.link : pal.textLight,
100 ]}
101 size={16}
102 />
103 <Text
104 type="md-medium"
105 style={store.me.invitesAvailable > 0 ? pal.link : pal.textLight}>
106 {formatCount(store.me.invitesAvailable)} invite{' '}
107 {pluralize(store.me.invitesAvailable, 'code')} available
108 </Text>
109 </TouchableOpacity>
110 )
111})
112
113const styles = StyleSheet.create({
114 rightNav: {
115 position: 'absolute',
116 top: 20,
117 left: 'calc(50vw + 310px)',
118 width: 304,
119 },
120
121 message: {
122 marginTop: 20,
123 paddingHorizontal: 10,
124 },
125 messageLine: {
126 marginBottom: 10,
127 },
128
129 inviteCodes: {
130 marginTop: 12,
131 borderTopWidth: 1,
132 paddingHorizontal: 16,
133 paddingVertical: 12,
134 flexDirection: 'row',
135 alignItems: 'center',
136 },
137 inviteCodesIcon: {
138 marginRight: 6,
139 },
140})