Delete unused modals and invite code stuff (#8244) · quilling.dev/social-app@46a97fa

+16 -19

src/App.native.tsx

··· 38 } from '#/state/geolocation' 39 import {GlobalGestureEventsProvider} from '#/state/global-gesture-events' 40 import {Provider as HomeBadgeProvider} from '#/state/home-badge' 41 - import {Provider as InvitesStateProvider} from '#/state/invites' 42 import {Provider as LightboxStateProvider} from '#/state/lightbox' 43 import {MessagesProvider} from '#/state/messages' 44 import {Provider as ModalStateProvider} from '#/state/modals' ··· 225 <PrefsStateProvider> 226 <I18nProvider> 227 <ShellStateProvider> 228 - <InvitesStateProvider> 229 - <ModalStateProvider> 230 - <DialogStateProvider> 231 - <LightboxStateProvider> 232 - <PortalProvider> 233 - <BottomSheetProvider> 234 - <StarterPackProvider> 235 - <SafeAreaProvider 236 - initialMetrics={initialWindowMetrics}> 237 - <InnerApp /> 238 - </SafeAreaProvider> 239 - </StarterPackProvider> 240 - </BottomSheetProvider> 241 - </PortalProvider> 242 - </LightboxStateProvider> 243 - </DialogStateProvider> 244 - </ModalStateProvider> 245 - </InvitesStateProvider> 246 </ShellStateProvider> 247 </I18nProvider> 248 </PrefsStateProvider>

··· 38 } from '#/state/geolocation' 39 import {GlobalGestureEventsProvider} from '#/state/global-gesture-events' 40 import {Provider as HomeBadgeProvider} from '#/state/home-badge' 41 import {Provider as LightboxStateProvider} from '#/state/lightbox' 42 import {MessagesProvider} from '#/state/messages' 43 import {Provider as ModalStateProvider} from '#/state/modals' ··· 224 <PrefsStateProvider> 225 <I18nProvider> 226 <ShellStateProvider> 227 + <ModalStateProvider> 228 + <DialogStateProvider> 229 + <LightboxStateProvider> 230 + <PortalProvider> 231 + <BottomSheetProvider> 232 + <StarterPackProvider> 233 + <SafeAreaProvider 234 + initialMetrics={initialWindowMetrics}> 235 + <InnerApp /> 236 + </SafeAreaProvider> 237 + </StarterPackProvider> 238 + </BottomSheetProvider> 239 + </PortalProvider> 240 + </LightboxStateProvider> 241 + </DialogStateProvider> 242 + </ModalStateProvider> 243 </ShellStateProvider> 244 </I18nProvider> 245 </PrefsStateProvider>

+11 -14

src/App.web.tsx

··· 26 Provider as GeolocationProvider, 27 } from '#/state/geolocation' 28 import {Provider as HomeBadgeProvider} from '#/state/home-badge' 29 - import {Provider as InvitesStateProvider} from '#/state/invites' 30 import {Provider as LightboxStateProvider} from '#/state/lightbox' 31 import {MessagesProvider} from '#/state/messages' 32 import {Provider as ModalStateProvider} from '#/state/modals' ··· 199 <PrefsStateProvider> 200 <I18nProvider> 201 <ShellStateProvider> 202 - <InvitesStateProvider> 203 - <ModalStateProvider> 204 - <DialogStateProvider> 205 - <LightboxStateProvider> 206 - <PortalProvider> 207 - <StarterPackProvider> 208 - <InnerApp /> 209 - </StarterPackProvider> 210 - </PortalProvider> 211 - </LightboxStateProvider> 212 - </DialogStateProvider> 213 - </ModalStateProvider> 214 - </InvitesStateProvider> 215 </ShellStateProvider> 216 </I18nProvider> 217 </PrefsStateProvider>

··· 26 Provider as GeolocationProvider, 27 } from '#/state/geolocation' 28 import {Provider as HomeBadgeProvider} from '#/state/home-badge' 29 import {Provider as LightboxStateProvider} from '#/state/lightbox' 30 import {MessagesProvider} from '#/state/messages' 31 import {Provider as ModalStateProvider} from '#/state/modals' ··· 198 <PrefsStateProvider> 199 <I18nProvider> 200 <ShellStateProvider> 201 + <ModalStateProvider> 202 + <DialogStateProvider> 203 + <LightboxStateProvider> 204 + <PortalProvider> 205 + <StarterPackProvider> 206 + <InnerApp /> 207 + </StarterPackProvider> 208 + </PortalProvider> 209 + </LightboxStateProvider> 210 + </DialogStateProvider> 211 + </ModalStateProvider> 212 </ShellStateProvider> 213 </I18nProvider> 214 </PrefsStateProvider>

-59

src/state/invites.tsx

··· 1 - import React from 'react' 2 - 3 - import * as persisted from '#/state/persisted' 4 - 5 - type StateContext = persisted.Schema['invites'] 6 - type ApiContext = { 7 - setInviteCopied: (code: string) => void 8 - } 9 - 10 - const stateContext = React.createContext<StateContext>( 11 - persisted.defaults.invites, 12 - ) 13 - stateContext.displayName = 'InvitesStateContext' 14 - const apiContext = React.createContext<ApiContext>({ 15 - setInviteCopied(_: string) {}, 16 - }) 17 - apiContext.displayName = 'InvitesApiContext' 18 - 19 - export function Provider({children}: React.PropsWithChildren<{}>) { 20 - const [state, setState] = React.useState(persisted.get('invites')) 21 - 22 - const api = React.useMemo( 23 - () => ({ 24 - setInviteCopied(code: string) { 25 - setState(state => { 26 - state = { 27 - ...state, 28 - copiedInvites: state.copiedInvites.includes(code) 29 - ? state.copiedInvites 30 - : state.copiedInvites.concat([code]), 31 - } 32 - persisted.write('invites', state) 33 - return state 34 - }) 35 - }, 36 - }), 37 - [setState], 38 - ) 39 - 40 - React.useEffect(() => { 41 - return persisted.onUpdate('invites', nextInvites => { 42 - setState(nextInvites) 43 - }) 44 - }, [setState]) 45 - 46 - return ( 47 - <stateContext.Provider value={state}> 48 - <apiContext.Provider value={api}>{children}</apiContext.Provider> 49 - </stateContext.Provider> 50 - ) 51 - } 52 - 53 - export function useInvitesState() { 54 - return React.useContext(stateContext) 55 - } 56 - 57 - export function useInvitesAPI() { 58 - return React.useContext(apiContext) 59 - }

···

-12

src/state/modals/index.tsx

··· 15 name: 'delete-account' 16 } 17 18 - export interface WaitlistModal { 19 - name: 'waitlist' 20 - } 21 - 22 - export interface InviteCodesModal { 23 - name: 'invite-codes' 24 - } 25 - 26 export interface ContentLanguagesSettingsModal { 27 name: 'content-languages-settings' 28 } ··· 39 40 // Lists 41 | UserAddRemoveListsModal 42 - 43 - // Bluesky access 44 - | WaitlistModal 45 - | InviteCodesModal 46 47 const ModalContext = React.createContext<{ 48 isModalActive: boolean

··· 15 name: 'delete-account' 16 } 17 18 export interface ContentLanguagesSettingsModal { 19 name: 'content-languages-settings' 20 } ··· 31 32 // Lists 33 | UserAddRemoveListsModal 34 35 const ModalContext = React.createContext<{ 36 isModalActive: boolean

-65

src/state/queries/invites.ts

··· 1 - import {type ComAtprotoServerDefs} from '@atproto/api' 2 - import {useQuery} from '@tanstack/react-query' 3 - 4 - import {cleanError} from '#/lib/strings/errors' 5 - import {STALE} from '#/state/queries' 6 - import {useAgent} from '#/state/session' 7 - 8 - function isInviteAvailable(invite: ComAtprotoServerDefs.InviteCode): boolean { 9 - return invite.available - invite.uses.length > 0 && !invite.disabled 10 - } 11 - 12 - const inviteCodesQueryKeyRoot = 'inviteCodes' 13 - 14 - export type InviteCodesQueryResponse = Exclude< 15 - ReturnType<typeof useInviteCodesQuery>['data'], 16 - undefined 17 - > 18 - export function useInviteCodesQuery() { 19 - const agent = useAgent() 20 - return useQuery({ 21 - staleTime: STALE.MINUTES.FIVE, 22 - queryKey: [inviteCodesQueryKeyRoot], 23 - queryFn: async () => { 24 - const res = await agent.com.atproto.server 25 - .getAccountInviteCodes({}) 26 - .catch(e => { 27 - if (cleanError(e) === 'Bad token scope') { 28 - return null 29 - } else { 30 - throw e 31 - } 32 - }) 33 - 34 - if (res === null) { 35 - return { 36 - disabled: true, 37 - all: [], 38 - available: [], 39 - used: [], 40 - } 41 - } 42 - 43 - if (!res.data?.codes) { 44 - throw new Error(`useInviteCodesQuery: no codes returned`) 45 - } 46 - 47 - const available = res.data.codes.filter(isInviteAvailable) 48 - const used = res.data.codes 49 - .filter(code => !isInviteAvailable(code)) 50 - .sort((a, b) => { 51 - return ( 52 - new Date(b.uses[0].usedAt).getTime() - 53 - new Date(a.uses[0].usedAt).getTime() 54 - ) 55 - }) 56 - 57 - return { 58 - disabled: false, 59 - all: [...available, ...used], 60 - available, 61 - used, 62 - } 63 - }, 64 - }) 65 - }

···

-403

src/view/com/modals/CreateOrEditList.tsx

··· 1 - import {useCallback, useMemo, useState} from 'react' 2 - import { 3 - ActivityIndicator, 4 - KeyboardAvoidingView, 5 - ScrollView, 6 - StyleSheet, 7 - TextInput, 8 - TouchableOpacity, 9 - View, 10 - } from 'react-native' 11 - import {LinearGradient} from 'expo-linear-gradient' 12 - import {type AppBskyGraphDefs, RichText as RichTextAPI} from '@atproto/api' 13 - import {msg, Trans} from '@lingui/macro' 14 - import {useLingui} from '@lingui/react' 15 - 16 - import {usePalette} from '#/lib/hooks/usePalette' 17 - import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' 18 - import {cleanError, isNetworkError} from '#/lib/strings/errors' 19 - import {enforceLen} from '#/lib/strings/helpers' 20 - import {richTextToString} from '#/lib/strings/rich-text-helpers' 21 - import {shortenLinks, stripInvalidMentions} from '#/lib/strings/rich-text-manip' 22 - import {colors, gradients, s} from '#/lib/styles' 23 - import {useTheme} from '#/lib/ThemeContext' 24 - import {type ImageMeta} from '#/state/gallery' 25 - import {useModalControls} from '#/state/modals' 26 - import { 27 - useListCreateMutation, 28 - useListMetadataMutation, 29 - } from '#/state/queries/list' 30 - import {useAgent} from '#/state/session' 31 - import {ErrorMessage} from '#/view/com/util/error/ErrorMessage' 32 - import {Text} from '#/view/com/util/text/Text' 33 - import * as Toast from '#/view/com/util/Toast' 34 - import {EditableUserAvatar} from '#/view/com/util/UserAvatar' 35 - 36 - const MAX_NAME = 64 // todo 37 - const MAX_DESCRIPTION = 300 // todo 38 - 39 - export const snapPoints = ['fullscreen'] 40 - 41 - export function Component({ 42 - purpose, 43 - onSave, 44 - list, 45 - }: { 46 - purpose?: string 47 - onSave?: (uri: string) => void 48 - list?: AppBskyGraphDefs.ListView 49 - }) { 50 - const {closeModal} = useModalControls() 51 - const {isMobile} = useWebMediaQueries() 52 - const [error, setError] = useState<string>('') 53 - const pal = usePalette('default') 54 - const theme = useTheme() 55 - const {_} = useLingui() 56 - const listCreateMutation = useListCreateMutation() 57 - const listMetadataMutation = useListMetadataMutation() 58 - const agent = useAgent() 59 - 60 - const activePurpose = useMemo(() => { 61 - if (list?.purpose) { 62 - return list.purpose 63 - } 64 - if (purpose) { 65 - return purpose 66 - } 67 - return 'app.bsky.graph.defs#curatelist' 68 - }, [list, purpose]) 69 - const isCurateList = activePurpose === 'app.bsky.graph.defs#curatelist' 70 - 71 - const [isProcessing, setProcessing] = useState<boolean>(false) 72 - const [name, setName] = useState<string>(list?.name || '') 73 - 74 - const [descriptionRt, setDescriptionRt] = useState<RichTextAPI>(() => { 75 - const text = list?.description 76 - const facets = list?.descriptionFacets 77 - 78 - if (!text || !facets) { 79 - return new RichTextAPI({text: text || ''}) 80 - } 81 - 82 - // We want to be working with a blank state here, so let's get the 83 - // serialized version and turn it back into a RichText 84 - const serialized = richTextToString(new RichTextAPI({text, facets}), false) 85 - 86 - const richText = new RichTextAPI({text: serialized}) 87 - richText.detectFacetsWithoutResolution() 88 - 89 - return richText 90 - }) 91 - const graphemeLength = useMemo(() => { 92 - return shortenLinks(descriptionRt).graphemeLength 93 - }, [descriptionRt]) 94 - const isDescriptionOver = graphemeLength > MAX_DESCRIPTION 95 - 96 - const [avatar, setAvatar] = useState<string | undefined>(list?.avatar) 97 - const [newAvatar, setNewAvatar] = useState<ImageMeta | undefined | null>() 98 - 99 - const onDescriptionChange = useCallback( 100 - (newText: string) => { 101 - const richText = new RichTextAPI({text: newText}) 102 - richText.detectFacetsWithoutResolution() 103 - 104 - setDescriptionRt(richText) 105 - }, 106 - [setDescriptionRt], 107 - ) 108 - 109 - const onPressCancel = useCallback(() => { 110 - closeModal() 111 - }, [closeModal]) 112 - 113 - const onSelectNewAvatar = useCallback( 114 - (img: ImageMeta | null) => { 115 - if (!img) { 116 - setNewAvatar(null) 117 - setAvatar(undefined) 118 - return 119 - } 120 - try { 121 - setNewAvatar(img) 122 - setAvatar(img.path) 123 - } catch (e: any) { 124 - setError(cleanError(e)) 125 - } 126 - }, 127 - [setNewAvatar, setAvatar, setError], 128 - ) 129 - 130 - const onPressSave = useCallback(async () => { 131 - const nameTrimmed = name.trim() 132 - if (!nameTrimmed) { 133 - setError(_(msg`Name is required`)) 134 - return 135 - } 136 - setProcessing(true) 137 - if (error) { 138 - setError('') 139 - } 140 - try { 141 - let richText = new RichTextAPI( 142 - {text: descriptionRt.text.trimEnd()}, 143 - {cleanNewlines: true}, 144 - ) 145 - 146 - await richText.detectFacets(agent) 147 - richText = shortenLinks(richText) 148 - richText = stripInvalidMentions(richText) 149 - 150 - if (list) { 151 - await listMetadataMutation.mutateAsync({ 152 - uri: list.uri, 153 - name: nameTrimmed, 154 - description: richText.text, 155 - descriptionFacets: richText.facets, 156 - avatar: newAvatar, 157 - }) 158 - Toast.show( 159 - isCurateList 160 - ? _(msg({message: 'User list updated', context: 'toast'})) 161 - : _(msg({message: 'Moderation list updated', context: 'toast'})), 162 - ) 163 - onSave?.(list.uri) 164 - } else { 165 - const res = await listCreateMutation.mutateAsync({ 166 - purpose: activePurpose, 167 - name, 168 - description: richText.text, 169 - descriptionFacets: richText.facets, 170 - avatar: newAvatar, 171 - }) 172 - Toast.show( 173 - isCurateList 174 - ? _(msg({message: 'User list created', context: 'toast'})) 175 - : _(msg({message: 'Moderation list created', context: 'toast'})), 176 - ) 177 - onSave?.(res.uri) 178 - } 179 - closeModal() 180 - } catch (e: any) { 181 - if (isNetworkError(e)) { 182 - setError( 183 - _( 184 - msg`Failed to create the list. Check your internet connection and try again.`, 185 - ), 186 - ) 187 - } else { 188 - setError(cleanError(e)) 189 - } 190 - } 191 - setProcessing(false) 192 - }, [ 193 - setProcessing, 194 - setError, 195 - error, 196 - onSave, 197 - closeModal, 198 - activePurpose, 199 - isCurateList, 200 - name, 201 - descriptionRt, 202 - newAvatar, 203 - list, 204 - listMetadataMutation, 205 - listCreateMutation, 206 - _, 207 - agent, 208 - ]) 209 - 210 - return ( 211 - <KeyboardAvoidingView behavior="height"> 212 - <ScrollView 213 - style={[ 214 - pal.view, 215 - { 216 - paddingHorizontal: isMobile ? 16 : 0, 217 - }, 218 - ]} 219 - testID="createOrEditListModal"> 220 - <Text style={[styles.title, pal.text]}> 221 - {isCurateList ? ( 222 - list ? ( 223 - <Trans>Edit User List</Trans> 224 - ) : ( 225 - <Trans>New User List</Trans> 226 - ) 227 - ) : list ? ( 228 - <Trans>Edit Moderation List</Trans> 229 - ) : ( 230 - <Trans>New Moderation List</Trans> 231 - )} 232 - </Text> 233 - {error !== '' && ( 234 - <View style={styles.errorContainer}> 235 - <ErrorMessage message={error} /> 236 - </View> 237 - )} 238 - <Text style={[styles.label, pal.text]}> 239 - <Trans>List Avatar</Trans> 240 - </Text> 241 - <View style={[styles.avi, {borderColor: pal.colors.background}]}> 242 - <EditableUserAvatar 243 - type="list" 244 - size={80} 245 - avatar={avatar} 246 - onSelectNewAvatar={onSelectNewAvatar} 247 - /> 248 - </View> 249 - <View style={styles.form}> 250 - <View> 251 - <View style={styles.labelWrapper}> 252 - <Text style={[styles.label, pal.text]} nativeID="list-name"> 253 - <Trans>List Name</Trans> 254 - </Text> 255 - </View> 256 - <TextInput 257 - testID="editNameInput" 258 - style={[styles.textInput, pal.border, pal.text]} 259 - placeholder={ 260 - isCurateList 261 - ? _(msg`e.g. Great Posters`) 262 - : _(msg`e.g. Spammers`) 263 - } 264 - placeholderTextColor={colors.gray4} 265 - value={name} 266 - onChangeText={v => setName(enforceLen(v, MAX_NAME))} 267 - accessible={true} 268 - accessibilityLabel={_(msg`Name`)} 269 - accessibilityHint="" 270 - accessibilityLabelledBy="list-name" 271 - /> 272 - </View> 273 - <View style={s.pb10}> 274 - <View style={styles.labelWrapper}> 275 - <Text 276 - style={[styles.label, pal.text]} 277 - nativeID="list-description"> 278 - <Trans>Description</Trans> 279 - </Text> 280 - <Text 281 - style={[!isDescriptionOver ? pal.textLight : s.red3, s.f13]}> 282 - {graphemeLength}/{MAX_DESCRIPTION} 283 - </Text> 284 - </View> 285 - <TextInput 286 - testID="editDescriptionInput" 287 - style={[styles.textArea, pal.border, pal.text]} 288 - placeholder={ 289 - isCurateList 290 - ? _(msg`e.g. The posters who never miss.`) 291 - : _(msg`e.g. Users that repeatedly reply with ads.`) 292 - } 293 - placeholderTextColor={colors.gray4} 294 - keyboardAppearance={theme.colorScheme} 295 - multiline 296 - value={descriptionRt.text} 297 - onChangeText={onDescriptionChange} 298 - accessible={true} 299 - accessibilityLabel={_(msg`Description`)} 300 - accessibilityHint="" 301 - accessibilityLabelledBy="list-description" 302 - /> 303 - </View> 304 - {isProcessing ? ( 305 - <View style={[styles.btn, s.mt10, {backgroundColor: colors.gray2}]}> 306 - <ActivityIndicator /> 307 - </View> 308 - ) : ( 309 - <TouchableOpacity 310 - testID="saveBtn" 311 - style={[s.mt10, isDescriptionOver && s.dimmed]} 312 - disabled={isDescriptionOver} 313 - onPress={onPressSave} 314 - accessibilityRole="button" 315 - accessibilityLabel={_(msg`Save`)} 316 - accessibilityHint=""> 317 - <LinearGradient 318 - colors={[gradients.blueLight.start, gradients.blueLight.end]} 319 - start={{x: 0, y: 0}} 320 - end={{x: 1, y: 1}} 321 - style={styles.btn}> 322 - <Text style={[s.white, s.bold]}> 323 - <Trans context="action">Save</Trans> 324 - </Text> 325 - </LinearGradient> 326 - </TouchableOpacity> 327 - )} 328 - <TouchableOpacity 329 - testID="cancelBtn" 330 - style={s.mt5} 331 - onPress={onPressCancel} 332 - accessibilityRole="button" 333 - accessibilityLabel={_(msg`Cancel`)} 334 - accessibilityHint="" 335 - onAccessibilityEscape={onPressCancel}> 336 - <View style={[styles.btn]}> 337 - <Text style={[s.black, s.bold, pal.text]}> 338 - <Trans context="action">Cancel</Trans> 339 - </Text> 340 - </View> 341 - </TouchableOpacity> 342 - </View> 343 - </ScrollView> 344 - </KeyboardAvoidingView> 345 - ) 346 - } 347 - 348 - const styles = StyleSheet.create({ 349 - title: { 350 - textAlign: 'center', 351 - fontWeight: '600', 352 - fontSize: 24, 353 - marginBottom: 18, 354 - }, 355 - labelWrapper: { 356 - flexDirection: 'row', 357 - gap: 8, 358 - alignItems: 'center', 359 - justifyContent: 'space-between', 360 - paddingHorizontal: 4, 361 - paddingBottom: 4, 362 - marginTop: 20, 363 - }, 364 - label: { 365 - fontWeight: '600', 366 - }, 367 - form: { 368 - paddingHorizontal: 6, 369 - }, 370 - textInput: { 371 - borderWidth: 1, 372 - borderRadius: 6, 373 - paddingHorizontal: 14, 374 - paddingVertical: 10, 375 - fontSize: 16, 376 - }, 377 - textArea: { 378 - borderWidth: 1, 379 - borderRadius: 6, 380 - paddingHorizontal: 12, 381 - paddingTop: 10, 382 - fontSize: 16, 383 - height: 100, 384 - textAlignVertical: 'top', 385 - }, 386 - btn: { 387 - flexDirection: 'row', 388 - alignItems: 'center', 389 - justifyContent: 'center', 390 - width: '100%', 391 - borderRadius: 32, 392 - padding: 10, 393 - marginBottom: 10, 394 - }, 395 - avi: { 396 - width: 84, 397 - height: 84, 398 - borderWidth: 2, 399 - borderRadius: 42, 400 - marginTop: 4, 401 - }, 402 - errorContainer: {marginTop: 20}, 403 - })

···

-145

src/view/com/modals/CropImage.web.tsx

··· 1 - import React from 'react' 2 - import {StyleSheet, TouchableOpacity, View} from 'react-native' 3 - import {manipulateAsync, SaveFormat} from 'expo-image-manipulator' 4 - import {LinearGradient} from 'expo-linear-gradient' 5 - import {msg, Trans} from '@lingui/macro' 6 - import {useLingui} from '@lingui/react' 7 - import ReactCrop, {type PercentCrop} from 'react-image-crop' 8 - 9 - import {usePalette} from '#/lib/hooks/usePalette' 10 - import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' 11 - import {type PickerImage} from '#/lib/media/picker.shared' 12 - import {getDataUriSize} from '#/lib/media/util' 13 - import {gradients, s} from '#/lib/styles' 14 - import {useModalControls} from '#/state/modals' 15 - import {Text} from '#/view/com/util/text/Text' 16 - 17 - export const snapPoints = ['0%'] 18 - 19 - export function Component({ 20 - uri, 21 - aspect, 22 - circular, 23 - onSelect, 24 - }: { 25 - uri: string 26 - aspect?: number 27 - circular?: boolean 28 - onSelect: (img?: PickerImage) => void 29 - }) { 30 - const pal = usePalette('default') 31 - const {_} = useLingui() 32 - 33 - const {closeModal} = useModalControls() 34 - const {isMobile} = useWebMediaQueries() 35 - 36 - const imageRef = React.useRef<HTMLImageElement>(null) 37 - const [crop, setCrop] = React.useState<PercentCrop>() 38 - 39 - const isEmpty = !crop || (crop.width || crop.height) === 0 40 - 41 - const onPressCancel = () => { 42 - onSelect(undefined) 43 - closeModal() 44 - } 45 - const onPressDone = async () => { 46 - const img = imageRef.current! 47 - 48 - const result = await manipulateAsync( 49 - uri, 50 - isEmpty 51 - ? [] 52 - : [ 53 - { 54 - crop: { 55 - originX: (crop.x * img.naturalWidth) / 100, 56 - originY: (crop.y * img.naturalHeight) / 100, 57 - width: (crop.width * img.naturalWidth) / 100, 58 - height: (crop.height * img.naturalHeight) / 100, 59 - }, 60 - }, 61 - ], 62 - { 63 - base64: true, 64 - format: SaveFormat.JPEG, 65 - }, 66 - ) 67 - 68 - onSelect({ 69 - path: result.uri, 70 - mime: 'image/jpeg', 71 - size: result.base64 !== undefined ? getDataUriSize(result.base64) : 0, 72 - width: result.width, 73 - height: result.height, 74 - }) 75 - 76 - closeModal() 77 - } 78 - 79 - return ( 80 - <View> 81 - <View style={[styles.cropper, pal.borderDark]}> 82 - <ReactCrop 83 - aspect={aspect} 84 - crop={crop} 85 - onChange={(_pixelCrop, percentCrop) => setCrop(percentCrop)} 86 - circularCrop={circular}> 87 - <img ref={imageRef} src={uri} style={{maxHeight: '75vh'}} /> 88 - </ReactCrop> 89 - </View> 90 - <View style={[styles.btns, isMobile && {paddingHorizontal: 16}]}> 91 - <TouchableOpacity 92 - onPress={onPressCancel} 93 - accessibilityRole="button" 94 - accessibilityLabel={_(msg`Cancel image crop`)} 95 - accessibilityHint={_(msg`Exits image cropping process`)}> 96 - <Text type="xl" style={pal.link}> 97 - <Trans>Cancel</Trans> 98 - </Text> 99 - </TouchableOpacity> 100 - <View style={s.flex1} /> 101 - <TouchableOpacity 102 - onPress={onPressDone} 103 - accessibilityRole="button" 104 - accessibilityLabel={_(msg`Save image crop`)} 105 - accessibilityHint={_(msg`Saves image crop settings`)}> 106 - <LinearGradient 107 - colors={[gradients.blueLight.start, gradients.blueLight.end]} 108 - start={{x: 0, y: 0}} 109 - end={{x: 1, y: 1}} 110 - style={[styles.btn]}> 111 - <Text type="xl-medium" style={s.white}> 112 - <Trans>Done</Trans> 113 - </Text> 114 - </LinearGradient> 115 - </TouchableOpacity> 116 - </View> 117 - </View> 118 - ) 119 - } 120 - 121 - const styles = StyleSheet.create({ 122 - cropper: { 123 - marginLeft: 'auto', 124 - marginRight: 'auto', 125 - borderWidth: 1, 126 - borderRadius: 4, 127 - overflow: 'hidden', 128 - alignItems: 'center', 129 - }, 130 - ctrls: { 131 - flexDirection: 'row', 132 - alignItems: 'center', 133 - marginTop: 10, 134 - }, 135 - btns: { 136 - flexDirection: 'row', 137 - alignItems: 'center', 138 - marginTop: 10, 139 - }, 140 - btn: { 141 - borderRadius: 4, 142 - paddingVertical: 8, 143 - paddingHorizontal: 24, 144 - }, 145 - })

···

-287

src/view/com/modals/InviteCodes.tsx

··· 1 - import React from 'react' 2 - import { 3 - ActivityIndicator, 4 - StyleSheet, 5 - TouchableOpacity, 6 - View, 7 - } from 'react-native' 8 - import {setStringAsync} from 'expo-clipboard' 9 - import {type ComAtprotoServerDefs} from '@atproto/api' 10 - import { 11 - FontAwesomeIcon, 12 - type FontAwesomeIconStyle, 13 - } from '@fortawesome/react-native-fontawesome' 14 - import {msg, Trans} from '@lingui/macro' 15 - import {useLingui} from '@lingui/react' 16 - 17 - import {usePalette} from '#/lib/hooks/usePalette' 18 - import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' 19 - import {makeProfileLink} from '#/lib/routes/links' 20 - import {cleanError} from '#/lib/strings/errors' 21 - import {isWeb} from '#/platform/detection' 22 - import {useInvitesAPI, useInvitesState} from '#/state/invites' 23 - import {useModalControls} from '#/state/modals' 24 - import { 25 - type InviteCodesQueryResponse, 26 - useInviteCodesQuery, 27 - } from '#/state/queries/invites' 28 - import {ErrorMessage} from '../util/error/ErrorMessage' 29 - import {Button} from '../util/forms/Button' 30 - import {Link} from '../util/Link' 31 - import {Text} from '../util/text/Text' 32 - import * as Toast from '../util/Toast' 33 - import {UserInfoText} from '../util/UserInfoText' 34 - import {ScrollView} from './util' 35 - 36 - export const snapPoints = ['70%'] 37 - 38 - export function Component() { 39 - const {isLoading, data: invites, error} = useInviteCodesQuery() 40 - 41 - return error ? ( 42 - <ErrorMessage message={cleanError(error)} /> 43 - ) : isLoading || !invites ? ( 44 - <View style={{padding: 18}}> 45 - <ActivityIndicator /> 46 - </View> 47 - ) : ( 48 - <Inner invites={invites} /> 49 - ) 50 - } 51 - 52 - export function Inner({invites}: {invites: InviteCodesQueryResponse}) { 53 - const pal = usePalette('default') 54 - const {_} = useLingui() 55 - const {closeModal} = useModalControls() 56 - const {isTabletOrDesktop} = useWebMediaQueries() 57 - 58 - const onClose = React.useCallback(() => { 59 - closeModal() 60 - }, [closeModal]) 61 - 62 - if (invites.all.length === 0) { 63 - return ( 64 - <View style={[styles.container, pal.view]} testID="inviteCodesModal"> 65 - <View style={[styles.empty, pal.viewLight]}> 66 - <Text type="lg" style={[pal.text, styles.emptyText]}> 67 - <Trans> 68 - You don't have any invite codes yet! We'll send you some when 69 - you've been on Bluesky for a little longer. 70 - </Trans> 71 - </Text> 72 - </View> 73 - <View style={styles.flex1} /> 74 - <View 75 - style={[ 76 - styles.btnContainer, 77 - isTabletOrDesktop && styles.btnContainerDesktop, 78 - ]}> 79 - <Button 80 - type="primary" 81 - label={_(msg`Done`)} 82 - style={styles.btn} 83 - labelStyle={styles.btnLabel} 84 - onPress={onClose} 85 - /> 86 - </View> 87 - </View> 88 - ) 89 - } 90 - 91 - return ( 92 - <View style={[styles.container, pal.view]} testID="inviteCodesModal"> 93 - <Text type="title-xl" style={[styles.title, pal.text]}> 94 - <Trans>Invite a Friend</Trans> 95 - </Text> 96 - <Text type="lg" style={[styles.description, pal.text]}> 97 - <Trans> 98 - Each code works once. You'll receive more invite codes periodically. 99 - </Trans> 100 - </Text> 101 - <ScrollView style={[styles.scrollContainer, pal.border]}> 102 - {invites.available.map((invite, i) => ( 103 - <InviteCode 104 - testID={`inviteCode-${i}`} 105 - key={invite.code} 106 - invite={invite} 107 - invites={invites} 108 - /> 109 - ))} 110 - {invites.used.map((invite, i) => ( 111 - <InviteCode 112 - used 113 - testID={`inviteCode-${i}`} 114 - key={invite.code} 115 - invite={invite} 116 - invites={invites} 117 - /> 118 - ))} 119 - </ScrollView> 120 - <View style={styles.btnContainer}> 121 - <Button 122 - testID="closeBtn" 123 - type="primary" 124 - label={_(msg`Done`)} 125 - style={styles.btn} 126 - labelStyle={styles.btnLabel} 127 - onPress={onClose} 128 - /> 129 - </View> 130 - </View> 131 - ) 132 - } 133 - 134 - function InviteCode({ 135 - testID, 136 - invite, 137 - used, 138 - invites, 139 - }: { 140 - testID: string 141 - invite: ComAtprotoServerDefs.InviteCode 142 - used?: boolean 143 - invites: InviteCodesQueryResponse 144 - }) { 145 - const pal = usePalette('default') 146 - const {_} = useLingui() 147 - const invitesState = useInvitesState() 148 - const {setInviteCopied} = useInvitesAPI() 149 - const uses = invite.uses 150 - 151 - const onPress = React.useCallback(() => { 152 - setStringAsync(invite.code) 153 - Toast.show(_(msg`Copied to clipboard`), 'clipboard-check') 154 - setInviteCopied(invite.code) 155 - }, [setInviteCopied, invite, _]) 156 - 157 - return ( 158 - <View 159 - style={[ 160 - pal.border, 161 - {borderBottomWidth: 1, paddingHorizontal: 20, paddingVertical: 14}, 162 - ]}> 163 - <TouchableOpacity 164 - testID={testID} 165 - style={[styles.inviteCode]} 166 - onPress={onPress} 167 - accessibilityRole="button" 168 - accessibilityLabel={ 169 - invites.available.length === 1 170 - ? _(msg`Invite codes: 1 available`) 171 - : _(msg`Invite codes: ${invites.available.length} available`) 172 - } 173 - accessibilityHint={_(msg`Opens list of invite codes`)}> 174 - <Text 175 - testID={`${testID}-code`} 176 - type={used ? 'md' : 'md-bold'} 177 - style={used ? [pal.textLight, styles.strikeThrough] : pal.text}> 178 - {invite.code} 179 - </Text> 180 - <View style={styles.flex1} /> 181 - {!used && invitesState.copiedInvites.includes(invite.code) && ( 182 - <Text style={[pal.textLight, styles.codeCopied]}> 183 - <Trans>Copied</Trans> 184 - </Text> 185 - )} 186 - {!used && ( 187 - <FontAwesomeIcon 188 - icon={['far', 'clone']} 189 - style={pal.text as FontAwesomeIconStyle} 190 - /> 191 - )} 192 - </TouchableOpacity> 193 - {uses.length > 0 ? ( 194 - <View 195 - style={{ 196 - flexDirection: 'column', 197 - gap: 8, 198 - paddingTop: 6, 199 - }}> 200 - <Text style={pal.text}> 201 - <Trans>Used by:</Trans>{' '} 202 - {uses.map((use, i) => ( 203 - <Link 204 - key={use.usedBy} 205 - href={makeProfileLink({handle: use.usedBy, did: ''})} 206 - style={{ 207 - flexDirection: 'row', 208 - }}> 209 - <UserInfoText did={use.usedBy} style={pal.link} /> 210 - {i !== uses.length - 1 && <Text style={pal.text}>, </Text>} 211 - </Link> 212 - ))} 213 - </Text> 214 - </View> 215 - ) : null} 216 - </View> 217 - ) 218 - } 219 - 220 - const styles = StyleSheet.create({ 221 - container: { 222 - flex: 1, 223 - paddingBottom: isWeb ? 0 : 50, 224 - }, 225 - title: { 226 - textAlign: 'center', 227 - marginTop: 12, 228 - marginBottom: 12, 229 - }, 230 - description: { 231 - textAlign: 'center', 232 - paddingHorizontal: 42, 233 - marginBottom: 14, 234 - }, 235 - 236 - scrollContainer: { 237 - flex: 1, 238 - borderTopWidth: 1, 239 - marginTop: 4, 240 - marginBottom: 16, 241 - }, 242 - 243 - flex1: { 244 - flex: 1, 245 - }, 246 - empty: { 247 - paddingHorizontal: 20, 248 - paddingVertical: 20, 249 - borderRadius: 16, 250 - marginHorizontal: 24, 251 - marginTop: 10, 252 - }, 253 - emptyText: { 254 - textAlign: 'center', 255 - }, 256 - 257 - inviteCode: { 258 - flexDirection: 'row', 259 - alignItems: 'center', 260 - }, 261 - codeCopied: { 262 - marginRight: 8, 263 - }, 264 - strikeThrough: { 265 - textDecorationLine: 'line-through', 266 - textDecorationStyle: 'solid', 267 - }, 268 - 269 - btnContainer: { 270 - flexDirection: 'row', 271 - justifyContent: 'center', 272 - }, 273 - btnContainerDesktop: { 274 - marginTop: 14, 275 - }, 276 - btn: { 277 - flexDirection: 'row', 278 - alignItems: 'center', 279 - justifyContent: 'center', 280 - borderRadius: 32, 281 - paddingHorizontal: 60, 282 - paddingVertical: 14, 283 - }, 284 - btnLabel: { 285 - fontSize: 18, 286 - }, 287 - })

···

-4

src/view/com/modals/Modal.tsx

······

··· ···

-3

src/view/com/modals/Modal.web.tsx

······

··· ···

-8

src/view/com/testing/TestCtrls.e2e.tsx

··· 3 import {useQueryClient} from '@tanstack/react-query' 4 5 import {BLUESKY_PROXY_HEADER} from '#/lib/constants' 6 - import {useModalControls} from '#/state/modals' 7 import {useSessionApi, useAgent} from '#/state/session' 8 import {useLoggedOutViewControls} from '#/state/shell/logged-out' 9 import {useOnboardingDispatch} from '#/state/shell/onboarding' ··· 23 const agent = useAgent() 24 const queryClient = useQueryClient() 25 const {logoutEveryAccount, login} = useSessionApi() 26 - const {openModal} = useModalControls() 27 const onboardingDispatch = useOnboardingDispatch() 28 const {setShowLoggedOut} = useLoggedOutViewControls() 29 const onPressSignInAlice = async () => { ··· 118 <Pressable 119 testID="e2eRefreshHome" 120 onPress={() => queryClient.invalidateQueries({queryKey: ['post-feed']})} 121 - accessibilityRole="button" 122 - style={BTN} 123 - /> 124 - <Pressable 125 - testID="e2eOpenInviteCodesModal" 126 - onPress={() => openModal({name: 'invite-codes'})} 127 accessibilityRole="button" 128 style={BTN} 129 />

··· 3 import {useQueryClient} from '@tanstack/react-query' 4 5 import {BLUESKY_PROXY_HEADER} from '#/lib/constants' 6 import {useSessionApi, useAgent} from '#/state/session' 7 import {useLoggedOutViewControls} from '#/state/shell/logged-out' 8 import {useOnboardingDispatch} from '#/state/shell/onboarding' ··· 22 const agent = useAgent() 23 const queryClient = useQueryClient() 24 const {logoutEveryAccount, login} = useSessionApi() 25 const onboardingDispatch = useOnboardingDispatch() 26 const {setShowLoggedOut} = useLoggedOutViewControls() 27 const onPressSignInAlice = async () => { ··· 116 <Pressable 117 testID="e2eRefreshHome" 118 onPress={() => queryClient.invalidateQueries({queryKey: ['post-feed']})} 119 accessibilityRole="button" 120 style={BTN} 121 />