diff --git a/src/state/models/invited-users.ts b/src/state/models/invited-users.ts index 121161a3..a28e0309 100644 --- a/src/state/models/invited-users.ts +++ b/src/state/models/invited-users.ts @@ -4,6 +4,7 @@ import {RootStoreModel} from './root-store' import {isObj, hasProp, isStrArray} from 'lib/type-guards' export class InvitedUsers { + copiedInvites: string[] = [] seenDids: string[] = [] profiles: AppBskyActorDefs.ProfileViewDetailed[] = [] @@ -20,13 +21,20 @@ export class InvitedUsers { } serialize() { - return {seenDids: this.seenDids} + return {seenDids: this.seenDids, copiedInvites: this.copiedInvites} } hydrate(v: unknown) { if (isObj(v) && hasProp(v, 'seenDids') && isStrArray(v.seenDids)) { this.seenDids = v.seenDids } + if ( + isObj(v) && + hasProp(v, 'copiedInvites') && + isStrArray(v.copiedInvites) + ) { + this.copiedInvites = v.copiedInvites + } } async fetch(invites: ComAtprotoServerDefs.InviteCode[]) { @@ -63,6 +71,16 @@ export class InvitedUsers { } } + isInviteCopied(invite: string) { + return this.copiedInvites.includes(invite) + } + + setInviteCopied(invite: string) { + if (!this.isInviteCopied(invite)) { + this.copiedInvites.push(invite) + } + } + markSeen(did: string) { this.seenDids.push(did) this.profiles = this.profiles.filter(profile => profile.did !== did) diff --git a/src/view/com/modals/InviteCodes.tsx b/src/view/com/modals/InviteCodes.tsx index 5e31e16a..8d54a50b 100644 --- a/src/view/com/modals/InviteCodes.tsx +++ b/src/view/com/modals/InviteCodes.tsx @@ -1,5 +1,6 @@ import React from 'react' import {StyleSheet, TouchableOpacity, View} from 'react-native' +import {observer} from 'mobx-react-lite' import { FontAwesomeIcon, FontAwesomeIconStyle, @@ -82,46 +83,42 @@ export function Component({}: {}) { ) } -function InviteCode({ - testID, - code, - used, -}: { - testID: string - code: string - used?: boolean -}) { - const pal = usePalette('default') - const [wasCopied, setWasCopied] = React.useState(false) +const InviteCode = observer( + ({testID, code, used}: {testID: string; code: string; used?: boolean}) => { + const pal = usePalette('default') + const store = useStores() - const onPress = React.useCallback(() => { - Clipboard.setString(code) - Toast.show('Copied to clipboard') - setWasCopied(true) - }, [code]) + const onPress = React.useCallback(() => { + Clipboard.setString(code) + Toast.show('Copied to clipboard') + store.invitedUsers.setInviteCopied(code) + }, [store, code]) - return ( - - - {code} - - {wasCopied ? ( - Copied - ) : !used ? ( - - ) : undefined} - - ) -} + return ( + + + {code} + + + {!used && store.invitedUsers.isInviteCopied(code) && ( + Copied + )} + {!used && ( + + )} + + ) + }, +) const styles = StyleSheet.create({ container: { @@ -163,11 +160,13 @@ const styles = StyleSheet.create({ inviteCode: { flexDirection: 'row', alignItems: 'center', - justifyContent: 'space-between', borderBottomWidth: 1, paddingHorizontal: 20, paddingVertical: 14, }, + codeCopied: { + marginRight: 8, + }, strikeThrough: { textDecorationLine: 'line-through', textDecorationStyle: 'solid',