[APP-562] Persist 'copied' state of invite codes (#535)

* Persist 'copied' state of invite codes (close APP-562)

* Dont show copied message if invite used

1 files changed, 38 insertions, 39 deletions

diff --git a/src/view/com/modals/InviteCodes.tsx b/src/view/com/modals/InviteCodes.tsx
index 5e31e16a8..8d54a50b1 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 (
-    <TouchableOpacity
-      testID={testID}
-      style={[styles.inviteCode, pal.border]}
-      onPress={onPress}>
-      <Text
-        testID={`${testID}-code`}
-        type={used ? 'md' : 'md-bold'}
-        style={used ? [pal.textLight, styles.strikeThrough] : pal.text}>
-        {code}
-      </Text>
-      {wasCopied ? (
-        <Text style={pal.textLight}>Copied</Text>
-      ) : !used ? (
-        <FontAwesomeIcon
-          icon={['far', 'clone']}
-          style={pal.text as FontAwesomeIconStyle}
-        />
-      ) : undefined}
-    </TouchableOpacity>
-  )
-}
+    return (
+      <TouchableOpacity
+        testID={testID}
+        style={[styles.inviteCode, pal.border]}
+        onPress={onPress}>
+        <Text
+          testID={`${testID}-code`}
+          type={used ? 'md' : 'md-bold'}
+          style={used ? [pal.textLight, styles.strikeThrough] : pal.text}>
+          {code}
+        </Text>
+        <View style={styles.flex1} />
+        {!used && store.invitedUsers.isInviteCopied(code) && (
+          <Text style={[pal.textLight, styles.codeCopied]}>Copied</Text>
+        )}
+        {!used && (
+          <FontAwesomeIcon
+            icon={['far', 'clone']}
+            style={pal.text as FontAwesomeIconStyle}
+          />
+        )}
+      </TouchableOpacity>
+    )
+  },
+)
 
 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',