[Gekidou MM-41093] CRT - WS Events, Actions, Queries, Thread Follow, Post Query (#6075)

* WS Events, Actions, Queries, Thread Follow, Post Query * i18n changes * Misc * Only unread threads are marked as read * Mark threads from WS even as visible in Global threads * Merge fixes * Update thread_post_list.tsx * Merge fix * Feedback fix * Make teamId in handleThreads optional for unfollowed threads * Removed unwated type and return * Review changes * Removing unused model * Merge fix * Misc fixes * Following button query change
2022-04-04 19:55:13 +05:30
parent d1322e84ce
commit 8d6fc41dd5
40 changed files with 1147 additions and 117 deletions
--- a/app/screens/thread/thread_follow_button/thread_follow_button.tsx
+++ b/app/screens/thread/thread_follow_button/thread_follow_button.tsx
@@ -0,0 +1,86 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {Platform, StyleSheet, TouchableOpacity, View} from 'react-native';
+
+import {updateThreadFollowing} from '@actions/remote/thread';
+import FormattedText from '@components/formatted_text';
+import {useServerUrl} from '@context/server';
+import {useTheme} from '@context/theme';
+import {preventDoubleTap} from '@utils/tap';
+import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
+import {typography} from '@utils/typography';
+
+type Props = {
+    isFollowing: boolean;
+    teamId: string;
+    threadId: string;
+};
+
+const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
+    return {
+        container: {
+            borderColor: theme.sidebarHeaderTextColor,
+            borderWidth: StyleSheet.hairlineWidth,
+            borderRadius: 4,
+            paddingVertical: 4.5,
+            paddingHorizontal: 10,
+            opacity: 0.72,
+            ...Platform.select({
+                android: {
+                    marginRight: 12,
+                },
+                ios: {
+                    right: -4,
+                },
+            }),
+        },
+        containerActive: {
+            backgroundColor: changeOpacity(theme.sidebarHeaderTextColor, 0.24),
+            borderColor: 'transparent',
+            opacity: 1,
+        },
+        text: {
+            color: theme.sidebarHeaderTextColor,
+            ...typography('Heading', 75, 'SemiBold'),
+        },
+    };
+});
+
+function ThreadFollow({isFollowing, teamId, threadId}: Props) {
+    const theme = useTheme();
+    const styles = getStyleSheet(theme);
+
+    const serverUrl = useServerUrl();
+
+    const onPress = preventDoubleTap(() => {
+        updateThreadFollowing(serverUrl, teamId, threadId, !isFollowing);
+    });
+
+    const containerStyle = [styles.container];
+    let followTextProps = {
+        id: 'threads.follow',
+        defaultMessage: 'Follow',
+    };
+    if (isFollowing) {
+        containerStyle.push(styles.containerActive);
+        followTextProps = {
+            id: 'threads.following',
+            defaultMessage: 'Following',
+        };
+    }
+
+    return (
+        <TouchableOpacity onPress={onPress}>
+            <View style={containerStyle}>
+                <FormattedText
+                    {...followTextProps}
+                    style={styles.text}
+                />
+            </View>
+        </TouchableOpacity>
+    );
+}
+
+export default ThreadFollow;