toki/mattermost-mobile
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

MM-53775: hide Thread Overview until a reply occurs (#8316)

Browse source
This commit is contained in:
Jesse Hallam 2024-11-06 13:01:42 -04:00 committed by GitHub
parent 97e74c92af
commit 6f381cfcf5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 21 additions and 159 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

127
app/components/post_list/thread_overview/__snapshots__/thread_overview.test.tsx.snap
View file

@ -1,126 +1,5 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ThreadOverview should match snapshot when post is not saved and 0 replies 1`] = `
<View
style={
[
{
"borderBottomWidth": 1,
"borderColor": "rgba(63,67,80,0.1)",
"borderTopWidth": 1,
"flexDirection": "row",
"marginVertical": 12,
"paddingHorizontal": 16,
"paddingVertical": 10,
},
{
"borderBottomWidth": 0,
},
undefined,
]
}
testID="thread-overview"
>
<View
style={
{
"flex": 1,
}
}
>
<Text
style={
{
"color": "rgba(63,67,80,0.64)",
"fontFamily": "OpenSans",
"fontSize": 16,
"fontWeight": "400",
"lineHeight": 24,
"marginHorizontal": 4,
}
}
testID="thread-overview.no_replies"
>
No replies yet
</Text>
</View>
<View
style={
{
"flexDirection": "row",
}
}
>
<RNGestureHandlerButton
collapsable={false}
delayLongPress={600}
enabled={true}
exclusive={true}
handlerTag={1}
handlerType="NativeViewGestureHandler"
innerRef={null}
onGestureEvent={[Function]}
onGestureHandlerEvent={[Function]}
onGestureHandlerStateChange={[Function]}
onHandlerStateChange={[Function]}
rippleColor={0}
testID="thread-overview.unsave.button"
touchSoundDisabled={false}
>
<View
accessible={true}
collapsable={false}
style={
{
"marginLeft": 16,
"opacity": 1,
}
}
>
<Icon
color="#386fe5"
name="bookmark"
size={24}
/>
</View>
</RNGestureHandlerButton>
<RNGestureHandlerButton
collapsable={false}
delayLongPress={600}
enabled={true}
exclusive={true}
handlerTag={2}
handlerType="NativeViewGestureHandler"
innerRef={null}
onGestureEvent={[Function]}
onGestureHandlerEvent={[Function]}
onGestureHandlerStateChange={[Function]}
onHandlerStateChange={[Function]}
rippleColor={0}
testID="thread-overview.post_options.button"
touchSoundDisabled={false}
>
<View
accessible={true}
collapsable={false}
style={
{
"marginLeft": 16,
"opacity": 1,
}
}
>
<Icon
color="rgba(63,67,80,0.64)"
name="dots-horizontal"
size={24}
/>
</View>
</RNGestureHandlerButton>
</View>
</View>
`;
exports[`ThreadOverview should match snapshot when post is saved and has replies 1`] = `
<View
style={
@ -174,7 +53,7 @@ exports[`ThreadOverview should match snapshot when post is saved and has replies
delayLongPress={600}
enabled={true}
exclusive={true}
handlerTag={3}
handlerTag={1}
handlerType="NativeViewGestureHandler"
innerRef={null}
onGestureEvent={[Function]}
@ -207,7 +86,7 @@ exports[`ThreadOverview should match snapshot when post is saved and has replies
delayLongPress={600}
enabled={true}
exclusive={true}
handlerTag={4}
handlerTag={2}
handlerType="NativeViewGestureHandler"
innerRef={null}
onGestureEvent={[Function]}
@ -238,3 +117,5 @@ exports[`ThreadOverview should match snapshot when post is saved and has replies
</View>
</View>
`;
exports[`ThreadOverview should match snapshot when post is saved with no replies 1`] = `null`;

2
app/components/post_list/thread_overview/thread_overview.test.tsx
View file

@ -10,7 +10,7 @@ import ThreadOverview from './thread_overview';
import type PostModel from '@typings/database/models/servers/post';
describe('ThreadOverview', () => {
it('should match snapshot when post is not saved and 0 replies', () => {
it('should match snapshot when post is saved with no replies', () => {
const props = {
isSaved: true,
repliesCount: 0,

43
app/components/post_list/thread_overview/thread_overview.tsx
View file

@ -13,7 +13,6 @@ import {Screens} from '@constants';
import {useServerUrl} from '@context/server';
import {useTheme} from '@context/theme';
import {useIsTablet} from '@hooks/device';
import {useFetchingThreadState} from '@hooks/fetching_thread';
import {bottomSheetModalOptions, showModal, showModalOverCurrentContext} from '@screens/navigation';
import {preventDoubleTap} from '@utils/tap';
import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
@ -58,14 +57,13 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
};
});
const ThreadOverview = ({isSaved, repliesCount, rootId, rootPost, style, testID}: Props) => {
const ThreadOverview = ({isSaved, repliesCount, rootPost, style, testID}: Props) => {
const theme = useTheme();
const styles = getStyleSheet(theme);
const intl = useIntl();
const isTablet = useIsTablet();
const serverUrl = useServerUrl();
const isFetchingThread = useFetchingThreadState(rootId);
const onHandleSavePress = useCallback(preventDoubleTap(() => {
if (rootPost?.id) {
@ -101,35 +99,8 @@ const ThreadOverview = ({isSaved, repliesCount, rootId, rootPost, style, testID}
const saveButtonTestId = isSaved ? `${testID}.unsave.button` : `${testID}.save.button`;
let repliesCountElement;
if (repliesCount > 0) {
repliesCountElement = (
<FormattedText
style={styles.repliesCount}
id='thread.repliesCount'
defaultMessage='{repliesCount, number} {repliesCount, plural, one {reply} other {replies}}'
testID={`${testID}.replies_count`}
values={{repliesCount}}
/>
);
} else if (isFetchingThread) {
repliesCountElement = (
<FormattedText
style={styles.repliesCount}
id='thread.loadingReplies'
defaultMessage='Loading replies...'
testID={`${testID}.loading_replies`}
/>
);
} else {
repliesCountElement = (
<FormattedText
style={styles.repliesCount}
id='thread.noReplies'
defaultMessage='No replies yet'
testID={`${testID}.no_replies`}
/>
);
if (repliesCount === 0) {
return null;
}
return (
@ -138,7 +109,13 @@ const ThreadOverview = ({isSaved, repliesCount, rootId, rootPost, style, testID}
testID={testID}
>
<View style={styles.repliesCountContainer}>
{repliesCountElement}
<FormattedText
style={styles.repliesCount}
id='thread.repliesCount'
defaultMessage='{repliesCount, number} {repliesCount, plural, one {reply} other {replies}}'
testID={`${testID}.replies_count`}
values={{repliesCount}}
/>
</View>
<View style={styles.optionsContainer}>
<TouchableOpacity

2
assets/base/i18n/en.json
View file

@ -1143,8 +1143,6 @@
"terms_of_service.title": "Terms of Service",
"thread.header.thread": "Thread",
"thread.header.thread_in": "in {channelName}",
"thread.loadingReplies": "Loading replies...",
"thread.noReplies": "No replies yet",
"thread.options.title": "Thread Actions",
"thread.repliesCount": "{repliesCount, number} {repliesCount, plural, one {reply} other {replies}}",
"threads": "Threads",

6
detox/e2e/test/smoke_test/messaging.e2e.ts
View file

@ -111,6 +111,9 @@ describe('Smoke Test - Messaging', () => {
// * Verify on reply thread screen
await ThreadScreen.toBeVisible();
// * Verify no thread overview while there are no replies
await expect(ThreadScreen.getThreadOverview()).not.toBeVisible();
// # Reply to parent post
const replyMessage = `${message} reply`;
await ThreadScreen.postMessage(replyMessage);
@ -120,6 +123,9 @@ describe('Smoke Test - Messaging', () => {
const {postListPostItem: replyPostListPostItem} = ThreadScreen.getPostListPostItem(replyPost.id, replyMessage);
await expect(replyPostListPostItem).toBeVisible();
// * Verify thread overview when there are replies
await expect(ThreadScreen.getThreadOverview()).toBeVisible();
// # Go back to channel list screen
await ThreadScreen.back();
await ChannelScreen.back();