Update handling of join link previews (#10798)

Co-authored-by: Samuel Newman <mozzius@protonmail.com>

src/screens/Messages/JoinRequest.tsx

@@ -1,6 +1,6 @@
 import {View} from 'react-native'
 import {ImageBackground} from 'expo-image'
-import {moderateProfile} from '@atproto/api'
+import {ChatBskyGroupDefs, moderateProfile} from '@atproto/api'
 import {Trans, useLingui} from '@lingui/react/macro'
 
 import {createSanitizedDisplayName} from '#/lib/moderation/create-sanitized-display-name'
@@ -52,9 +52,7 @@ export function JoinRequest({setScreenState}: Props) {
       ? mobileDarkBg
       : mobileLightBg
 
-  const requiresApproval = data?.joinLinkPreviews[0]?.requireApproval
-  const requiresFollow =
-    data?.joinLinkPreviews[0]?.joinRule === 'followedByOwner'
+  const joinLinkPreview = data?.joinLinkPreviews[0]
 
   return (
     <View style={[a.util_screen_outer, a.w_full, t.atoms.bg_contrast_25]}>
@@ -69,7 +67,9 @@ export function JoinRequest({setScreenState}: Props) {
             a.justify_center,
             a.align_center,
           ]}>
-          {error ? (
+          {error ||
+          (data &&
+            !ChatBskyGroupDefs.isJoinLinkPreviewView(joinLinkPreview)) ? (
             <Wrapper>
               <ChainLinkBrokenIcon fill={t.palette.primary_500} size="3xl" />
               <Text
@@ -80,20 +80,19 @@ export function JoinRequest({setScreenState}: Props) {
                   a.font_semi_bold,
                   t.atoms.text,
                 ]}>
-                {l`This invite link has expired`}
+                <Trans>Chat invite link no longer available</Trans>
               </Text>
               <ActionButtons setScreenState={setScreenState} />
             </Wrapper>
-          ) : data && moderationOpts ? (
+          ) : data &&
+            moderationOpts &&
+            ChatBskyGroupDefs.isJoinLinkPreviewView(joinLinkPreview) ? (
             <Wrapper>
               <AvatarBubbles
                 profiles={[
-                  data.joinLinkPreviews[0].owner,
+                  joinLinkPreview.owner,
                   ...Array(
-                    Math.min(
-                      3,
-                      Math.max(0, data.joinLinkPreviews[0].memberCount - 1),
-                    ),
+                    Math.min(3, Math.max(0, joinLinkPreview.memberCount - 1)),
                   ).fill(undefined),
                 ]}
                 size={135}
@@ -130,8 +129,8 @@ export function JoinRequest({setScreenState}: Props) {
                       <Trans
                         context="group-chat-member-count"
                         comment="The number of active group chat members out of the total number allowed.">
-                        {data.joinLinkPreviews[0].memberCount}/
-                        {data.joinLinkPreviews[0].memberLimit}
+                        {joinLinkPreview.memberCount}/
+                        {joinLinkPreview.memberLimit}
                       </Trans>
                     </Text>
                   </View>
@@ -144,7 +143,7 @@ export function JoinRequest({setScreenState}: Props) {
                     a.font_bold,
                     t.atoms.text,
                   ]}>
-                  {data.joinLinkPreviews[0].name}
+                  {joinLinkPreview.name}
                 </Text>
               </View>
               <View style={[a.w_full]}>
@@ -168,17 +167,17 @@ export function JoinRequest({setScreenState}: Props) {
                     <Trans comment="The owner (creator) of a group chat.">
                       By{' '}
                       {createSanitizedDisplayName(
-                        data.joinLinkPreviews[0].owner,
+                        joinLinkPreview.owner,
                         true,
                         moderateProfile(
-                          data.joinLinkPreviews[0].owner,
+                          joinLinkPreview.owner,
                           moderationOpts,
                         ).ui('displayName'),
                       )}
                     </Trans>
                   </Text>
                   <ProfileBadges
-                    profile={data.joinLinkPreviews[0].owner}
+                    profile={joinLinkPreview.owner}
                     size="sm"
                     style={{marginTop: -4}}
                   />
@@ -192,7 +191,7 @@ export function JoinRequest({setScreenState}: Props) {
                     t.atoms.text_contrast_medium,
                     a.max_w_full,
                   ]}>
-                  {sanitizeHandle(data.joinLinkPreviews[0].owner.handle, '@')}
+                  {sanitizeHandle(joinLinkPreview.owner.handle, '@')}
                 </Text>
               </View>
               <Text
@@ -202,17 +201,16 @@ export function JoinRequest({setScreenState}: Props) {
                   a.leading_snug,
                   t.atoms.text_contrast_high,
                 ]}>
-                {requiresApproval
+                {joinLinkPreview.requireApproval
                   ? l`Sign in to request access to this group chat.`
                   : l`Sign in to accept invite.`}{' '}
-                {requiresFollow &&
+                {joinLinkPreview.joinRule === 'followedByOwner' &&
                   l`Only people ${createSanitizedDisplayName(
-                    data.joinLinkPreviews[0].owner,
+                    joinLinkPreview.owner,
                     true,
-                    moderateProfile(
-                      data.joinLinkPreviews[0].owner,
-                      moderationOpts,
-                    ).ui('displayName'),
+                    moderateProfile(joinLinkPreview.owner, moderationOpts).ui(
+                      'displayName',
+                    ),
                   )} follows can join.`}
               </Text>
               <ActionButtons setScreenState={setScreenState} />