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',