Skip to content

Commit da2f38e

Browse files
Rajat-Dabadeyasserfaraazkhan
Rajat-Dabade
and
yasserfaraazkhan
authored
Mention, embedded link and handling of post update on offline device (#9104)
* typescript and view component for permalink with user and message * Old post edited handling in permalink * Added test and update flag value to EnablePermalinkPreview * Added test for permalink_preview component * Added test for content/index.tsx for permalink * Addressed review comments * Unit test for missing file and review comments * Added test to check handlePostEdited permalink sync only calls one time only * Change TouchableOpacity to Pressable * When user not found fetch the user from the server * Removed the redundant test in the test for permalink_preview/index? * ts to tsx * Removed the circular dependency * Address review comments * displayname fallback * remove permalink when permalink post is deleted * UX review comments * Linter fixes * Test fixes * File attachment in permalink preview component * Fix the width and height of the image in permalink * Added gredient when exceeds height of permalink container * Minor * Updated tests * Minor * Review comments * Minor review comments * type fixes * Review comments * Minor * Mention ability in permalink preview * Support for external link in permalink * Handle device not connected update permalink post * test fixes * Address review comments * Minor * Merge fixes * Addressed review comments * Fix content.test.tsx after permalink branch merge - Updated test expectations to use embedData prop instead of post prop - Fixed assertions to match the new PermalinkPreview API - All content tests now pass * review comments * Review comments * Some more review comments * Minor * Fixed the undefined issue for opengraph component metadata * More fixes * type chech for site name * linter fixes * UX review and remove show more height not require * Fix tests * Review nitpick and fixes * Minor UX changes --------- Co-authored-by: yasserfaraazkhan <[email protected]>
1 parent d732b5a commit da2f38e

File tree

11 files changed

+557
-62
lines changed

11 files changed

+557
-62
lines changed

‎app/components/post_list/post/body/content/content.test.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,7 @@ describe('components/post_list/post/body/content/Content - PermalinkPreview', ()
9595
);
9696

9797
const permalinkPreview = getByTestId('permalink-preview');
98+
expect(permalinkPreview.props.embedData).toBeDefined();
9899
expect(permalinkPreview.props.embedData).toEqual(permalinkEmbedData);
99100
});
100101

@@ -134,6 +135,7 @@ describe('components/post_list/post/body/content/Content - PermalinkPreview', ()
134135
);
135136

136137
const permalinkPreview = getByTestId('permalink-preview');
138+
expect(permalinkPreview.props.embedData).toBeDefined();
137139
expect(permalinkPreview.props.embedData).toEqual(customEmbedData);
138140
});
139141

@@ -202,6 +204,7 @@ describe('components/post_list/post/body/content/Content - PermalinkPreview', ()
202204
);
203205

204206
const permalinkPreview = getByTestId('permalink-preview');
207+
expect(permalinkPreview.props.embedData).toBeDefined();
205208
expect(permalinkPreview.props.embedData).toEqual(firstEmbedData);
206209
});
207210

@@ -234,6 +237,7 @@ describe('components/post_list/post/body/content/Content - PermalinkPreview', ()
234237
);
235238

236239
const permalinkPreview = getByTestId('permalink-preview');
240+
expect(permalinkPreview.props.embedData).toBeDefined();
237241
expect(permalinkPreview.props.embedData).toEqual(permalinkEmbedData);
238242
});
239243

@@ -271,6 +275,7 @@ describe('components/post_list/post/body/content/Content - PermalinkPreview', ()
271275
);
272276

273277
const permalinkPreview = getByTestId('permalink-preview');
278+
expect(permalinkPreview.props.embedData).toBeDefined();
274279
expect(permalinkPreview.props.embedData).toEqual(dmEmbedData);
275280
expect(permalinkPreview.props.embedData.channel_type).toBe('D');
276281
});
@@ -309,6 +314,7 @@ describe('components/post_list/post/body/content/Content - PermalinkPreview', ()
309314
);
310315

311316
const permalinkPreview = getByTestId('permalink-preview');
317+
expect(permalinkPreview.props.embedData).toBeDefined();
312318
expect(permalinkPreview.props.embedData).toEqual(gmEmbedData);
313319
expect(permalinkPreview.props.embedData.channel_type).toBe('G');
314320
});

‎app/components/post_list/post/body/content/message_attachments/attachment_author.tsx‎

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,11 @@
22
// See LICENSE.txt for license information.
33

44
import {Image} from 'expo-image';
5-
import React, {useCallback} from 'react';
6-
import {useIntl} from 'react-intl';
5+
import React from 'react';
76
import {Text, View} from 'react-native';
87

8+
import {useExternalLinkHandler} from '@hooks/use_external_link_handler';
99
import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
10-
import {tryOpenURL} from '@utils/url';
11-
import {onOpenLinkError} from '@utils/url/links';
1210

1311
type Props = {
1412
icon?: string;
@@ -37,18 +35,8 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
3735
});
3836

3937
const AttachmentAuthor = ({icon, link, name, theme}: Props) => {
40-
const intl = useIntl();
4138
const style = getStyleSheet(theme);
42-
43-
const openLink = useCallback(() => {
44-
if (link) {
45-
const onError = () => {
46-
onOpenLinkError(intl);
47-
};
48-
49-
tryOpenURL(link, onError);
50-
}
51-
}, [intl, link]);
39+
const openLink = useExternalLinkHandler(link);
5240

5341
return (
5442
<View style={style.container}>

‎app/components/post_list/post/body/content/message_attachments/attachment_title.tsx‎

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
22
// See LICENSE.txt for license information.
33

4-
import React, {useCallback} from 'react';
5-
import {useIntl} from 'react-intl';
4+
import React from 'react';
65
import {Text, View} from 'react-native';
76

87
import Markdown from '@components/markdown';
8+
import {useExternalLinkHandler} from '@hooks/use_external_link_handler';
99
import {makeStyleSheetFromTheme} from '@utils/theme';
10-
import {tryOpenURL} from '@utils/url';
11-
import {onOpenLinkError} from '@utils/url/links';
1210

1311
import type {AvailableScreens} from '@typings/screens/navigation';
1412

@@ -39,18 +37,8 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
3937
});
4038

4139
const AttachmentTitle = ({channelId, link, location, theme, value}: Props) => {
42-
const intl = useIntl();
4340
const style = getStyleSheet(theme);
44-
45-
const openLink = useCallback(() => {
46-
if (link) {
47-
const onError = () => {
48-
onOpenLinkError(intl);
49-
};
50-
51-
tryOpenURL(link, onError);
52-
}
53-
}, [intl, link]);
41+
const openLink = useExternalLinkHandler(link);
5442

5543
let title;
5644
if (link) {

‎app/components/post_list/post/body/content/opengraph/opengraph.tsx‎

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
22
// See LICENSE.txt for license information.
33

4-
import React, {useCallback} from 'react';
5-
import {useIntl} from 'react-intl';
4+
import React from 'react';
65
import {Text, TouchableOpacity, View} from 'react-native';
76

7+
import {useExternalLinkHandler} from '@hooks/use_external_link_handler';
88
import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
9-
import {tryOpenURL} from '@utils/url';
10-
import {onOpenLinkError} from '@utils/url/links';
9+
10+
import ExternalLinkPreview from '../permalink_preview/external_link_preview';
1111

1212
import OpengraphImage from './opengraph_image';
1313

@@ -19,6 +19,7 @@ type OpengraphProps = {
1919
postId: string;
2020
showLinkPreviews: boolean;
2121
theme: Theme;
22+
isEmbedded?: boolean;
2223
}
2324

2425
const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
@@ -60,9 +61,8 @@ const selectOpenGraphData = (url: string, metadata: PostMetadata | undefined | n
6061
})?.data;
6162
};
6263

63-
const Opengraph = ({isReplyPost, layoutWidth, location, metadata, postId, showLinkPreviews, theme}: OpengraphProps) => {
64-
const intl = useIntl();
65-
const link = metadata?.embeds![0]!.url || '';
64+
const Opengraph = ({isReplyPost, layoutWidth, location, metadata, postId, showLinkPreviews, theme, isEmbedded}: OpengraphProps) => {
65+
const link = metadata?.embeds?.[0]?.url || '';
6666
const openGraphData = selectOpenGraphData(link, metadata);
6767

6868
if (!showLinkPreviews || !openGraphData) {
@@ -76,13 +76,7 @@ const Opengraph = ({isReplyPost, layoutWidth, location, metadata, postId, showLi
7676
openGraphData.images.length &&
7777
metadata?.images);
7878

79-
const goToLink = useCallback(() => {
80-
const onError = () => {
81-
onOpenLinkError(intl);
82-
};
83-
84-
tryOpenURL(link, onError);
85-
}, [intl, link]);
79+
const goToLink = useExternalLinkHandler(link);
8680

8781
let siteName;
8882
if (openGraphData.site_name) {
@@ -136,22 +130,28 @@ const Opengraph = ({isReplyPost, layoutWidth, location, metadata, postId, showLi
136130
}
137131

138132
return (
139-
<View style={style.container}>
140-
{siteName}
141-
{siteTitle}
142-
{siteDescription}
143-
{hasImage &&
144-
<OpengraphImage
145-
isReplyPost={isReplyPost}
146-
layoutWidth={layoutWidth}
147-
location={location}
148-
openGraphImages={openGraphData.images as never[]}
149-
metadata={metadata}
150-
postId={postId}
151-
theme={theme}
152-
/>
153-
}
154-
</View>
133+
<>
134+
{isEmbedded ? (
135+
<ExternalLinkPreview embeds={metadata?.embeds}/>
136+
) : (
137+
<View style={style.container}>
138+
{siteName}
139+
{siteTitle}
140+
{siteDescription}
141+
{hasImage &&
142+
<OpengraphImage
143+
isReplyPost={isReplyPost}
144+
layoutWidth={layoutWidth}
145+
location={location}
146+
openGraphImages={openGraphData.images as never[]}
147+
metadata={metadata}
148+
postId={postId}
149+
theme={theme}
150+
/>
151+
}
152+
</View>
153+
)}
154+
</>
155155
);
156156
};
157157

0 commit comments

Comments
 (0)