Fix some minor issues with the invite link dialog (#10408)

src/screens/Messages/components/InviteLinkDialog.tsx

@@ -1,4 +1,4 @@
-import {useState} from 'react'
+import {useEffect, useState} from 'react'
 import {View} from 'react-native'
 import {Trans, useLingui} from '@lingui/react/macro'
 
@@ -36,16 +36,6 @@ enum Step {
   MANAGE,
 }
 
-const timeFormatter = new Intl.DateTimeFormat(undefined, {
-  hour: 'numeric',
-  minute: 'numeric',
-})
-const dateFormatter = new Intl.DateTimeFormat(undefined, {
-  month: 'long',
-  day: 'numeric',
-  year: 'numeric',
-})
-
 export function InviteLinkDialog({
   convo,
   control,
@@ -56,7 +46,7 @@ export function InviteLinkDialog({
   isOwner: boolean
 }) {
   const t = useTheme()
-  const {t: l} = useLingui()
+  const {t: l, i18n} = useLingui()
 
   const ownerName = createSanitizedDisplayName(convo.primaryMember)
 
@@ -70,9 +60,20 @@ export function InviteLinkDialog({
       ]
     : ['anyone']
 
-  const [step, setStep] = useState<Step>(defaultStep)
+  const [step, setStep] = useState(defaultStep)
   const [whoCanJoin, setWhoCanJoin] = useState(defaultWhoCanJoin)
 
+  // Resync local state when the server-side join link rules change (mutation
+  // success, refetch, or change from another client). Keyed on the rule string
+  // so identity-only refetches don't bump a user mid-edit.
+  const joinLinkRuleKey = joinLink
+    ? `${joinLink.joinRule}${joinLink.requireApproval ? ':requireApproval' : ''}`
+    : null
+  useEffect(() => {
+    setStep(joinLinkRuleKey ? Step.MANAGE : Step.INFO)
+    setWhoCanJoin([joinLinkRuleKey ?? 'anyone'])
+  }, [joinLinkRuleKey])
+
   const {openComposer} = useOpenComposer()
 
   const {mutate: createJoinLink, isPending: isCreating} = useCreateJoinLink(
@@ -204,7 +205,7 @@ export function InviteLinkDialog({
                 {whoCanJoinOptions.map(option => (
                   <Toggle.Item
                     key={option.name}
-                    highlightRow={true}
+                    highlightRow
                     label={isOwner ? option.owner : option.member}
                     name={option.name}
                     style={[a.flex_1]}>
@@ -253,13 +254,15 @@ export function InviteLinkDialog({
       )
       break
     case Step.MANAGE: {
-      const hasJoinLinkCode = joinLink && joinLink.code !== ''
+      const joinLinkURI = joinLink?.code
-      const joinLinkURI = hasJoinLinkCode
         ? `https://bsky.app/chat/${joinLink.code}`
         : 'https://bsky.app/chat'
       const createdAt = joinLink ? new Date(joinLink.createdAt) : null
+      const currentOptionName = joinLink
+        ? `${joinLink.joinRule}${joinLink.requireApproval ? ':requireApproval' : ''}`
+        : whoCanJoinOptions[0].name
       const currentOption = whoCanJoinOptions.find(
-        o => o.name === whoCanJoin[0],
+        o => o.name === currentOptionName,
       )
       const ownerValue = currentOption?.owner ?? whoCanJoinOptions[0].owner
       const memberValue = currentOption?.member ?? whoCanJoinOptions[0].member
@@ -269,7 +272,7 @@ export function InviteLinkDialog({
         <>
           <View style={[a.mt_lg]}>
             <CopyTextButton
-              disabled={enabledStatus === 'disabled' || !hasJoinLinkCode}
+              disabled={enabledStatus === 'disabled' || !joinLink?.code}
               label={l`Invite link`}
               value={joinLinkURI}>
               <Text
@@ -287,8 +290,11 @@ export function InviteLinkDialog({
             {createdAt ? (
               <Text style={[a.mt_xs, a.text_xs, t.atoms.text_contrast_medium]}>
                 <Trans>
-                  Created {timeFormatter.format(createdAt)}{' '}
+                  Created{' '}
-                  {dateFormatter.format(createdAt)}
+                  {i18n.date(createdAt, {
+                    dateStyle: 'long',
+                    timeStyle: 'short',
+                  })}
                 </Trans>
               </Text>
             ) : null}
@@ -300,16 +306,11 @@ export function InviteLinkDialog({
                   label={l`Edit link settings`}
                   value={ownerValue}
                   onPress={() => setStep(Step.GENERATE)}>
-                  <Text
+                  <View style={[a.flex_1, a.mr_xs]}>
-                    numberOfLines={1}
+                    <Text numberOfLines={1} style={[a.text_md, t.atoms.text]}>
-                    style={[
+                      {ownerValue}
-                      a.mr_xs,
+                    </Text>
-                      a.text_md,
+                  </View>
-                      t.atoms.text,
-                      {maxWidth: '80%'},
-                    ]}>
-                    {ownerValue}
-                  </Text>
                 </EditTextButton>
               ) : (
                 <Text style={[a.text_sm, t.atoms.text]}>{memberValue}</Text>
@@ -391,7 +392,7 @@ export function InviteLinkDialog({
     }
   }
 
-  if (!isOwner && (!joinLink || joinLink?.enabledStatus === 'disabled')) {
+  if (!isOwner && (!joinLink || joinLink.enabledStatus === 'disabled')) {
     header = l`Invite link`
     content = (
       <>