From a6a2ea63a49c7eab3e2b2318d07ad4c832b0a02a Mon Sep 17 00:00:00 2001 From: harshil Sharma Date: Tue, 26 Sep 2023 17:32:48 +0530 Subject: [PATCH 001/213] Added convert option to GM --- app/screens/channel_info/channel_info.tsx | 8 ++++++++ ios/Podfile.lock | 2 +- package.json | 2 +- 3 files changed, 10 insertions(+), 2 deletions(-) diff --git a/app/screens/channel_info/channel_info.tsx b/app/screens/channel_info/channel_info.tsx index c71c8df986f..3cd0239f147 100644 --- a/app/screens/channel_info/channel_info.tsx +++ b/app/screens/channel_info/channel_info.tsx @@ -21,6 +21,8 @@ import Options from './options'; import Title from './title'; import type {AvailableScreens} from '@typings/screens/navigation'; +import ConvertToChannelLabel from '@app/components/channel_actions/convert_to_channel/convert_to_channel_label'; +import { General } from '@app/constants'; type Props = { channelId: string; @@ -105,6 +107,12 @@ const ChannelInfo = ({ canManageMembers={canManageMembers} /> + {type === General.GM_CHANNEL && + <> + + + + } {canEnableDisableCalls && <> Date: Mon, 16 Oct 2023 16:05:59 +0530 Subject: [PATCH 002/213] Created screen --- app/actions/remote/entry/common.ts | 1 + app/actions/remote/entry/gql_common.ts | 1 + app/constants/screens.ts | 2 ++ app/screens/channel_info/channel_info.tsx | 4 ++-- app/screens/index.tsx | 2 ++ app/screens/navigation.ts | 1 + 6 files changed, 9 insertions(+), 2 deletions(-) diff --git a/app/actions/remote/entry/common.ts b/app/actions/remote/entry/common.ts index dff04e5788b..3ff5d0201a1 100644 --- a/app/actions/remote/entry/common.ts +++ b/app/actions/remote/entry/common.ts @@ -406,6 +406,7 @@ export async function verifyPushProxy(serverUrl: string) { } } +// LOL export async function handleEntryAfterLoadNavigation( serverUrl: string, teamMembers: TeamMembership[], diff --git a/app/actions/remote/entry/gql_common.ts b/app/actions/remote/entry/gql_common.ts index acecb84d080..9b1b8d79f9f 100644 --- a/app/actions/remote/entry/gql_common.ts +++ b/app/actions/remote/entry/gql_common.ts @@ -266,6 +266,7 @@ export const entryGQL = async (serverUrl: string, currentTeamId?: string, curren return {models, initialTeamId, initialChannelId, prefData, teamData, chData, meData}; }; +// LOL export const entry = async (serverUrl: string, teamId?: string, channelId?: string, since = 0): Promise => { const {database} = DatabaseManager.getServerDatabaseAndOperator(serverUrl); const config = await getConfig(database); diff --git a/app/constants/screens.ts b/app/constants/screens.ts index 358bdf23699..c288f76719b 100644 --- a/app/constants/screens.ts +++ b/app/constants/screens.ts @@ -70,6 +70,7 @@ export const THREAD = 'Thread'; export const THREAD_FOLLOW_BUTTON = 'ThreadFollowButton'; export const THREAD_OPTIONS = 'ThreadOptions'; export const USER_PROFILE = 'UserProfile'; +export const CONVERT_GM_TO_CHANNEL = 'ConvertGMToChannel'; export default { ABOUT, @@ -141,6 +142,7 @@ export default { THREAD_FOLLOW_BUTTON, THREAD_OPTIONS, USER_PROFILE, + CONVERT_GM_TO_CHANNEL, } as const; export const MODAL_SCREENS_WITHOUT_BACK = new Set([ diff --git a/app/screens/channel_info/channel_info.tsx b/app/screens/channel_info/channel_info.tsx index 3cd0239f147..23718977188 100644 --- a/app/screens/channel_info/channel_info.tsx +++ b/app/screens/channel_info/channel_info.tsx @@ -5,6 +5,8 @@ import React, {useCallback} from 'react'; import {ScrollView, View} from 'react-native'; import {type Edge, SafeAreaView} from 'react-native-safe-area-context'; +import ConvertToChannelLabel from '@app/components/channel_actions/convert_to_channel/convert_to_channel_label'; +import {General} from '@app/constants'; import ChannelInfoEnableCalls from '@calls/components/channel_info_enable_calls'; import ChannelActions from '@components/channel_actions'; import {useServerUrl} from '@context/server'; @@ -21,8 +23,6 @@ import Options from './options'; import Title from './title'; import type {AvailableScreens} from '@typings/screens/navigation'; -import ConvertToChannelLabel from '@app/components/channel_actions/convert_to_channel/convert_to_channel_label'; -import { General } from '@app/constants'; type Props = { channelId: string; diff --git a/app/screens/index.tsx b/app/screens/index.tsx index 47059b289e2..4e46ee83891 100644 --- a/app/screens/index.tsx +++ b/app/screens/index.tsx @@ -262,6 +262,8 @@ Navigation.setLazyComponentRegistrator((screenName) => { case Screens.CALL: screen = withServerDatabase(require('@calls/screens/call_screen').default); break; + case Screens.CONVERT_GM_TO_CHANNEL: + screen = withServerDatabase(require('@screens/convert_gm_to_channel').default); } if (screen) { diff --git a/app/screens/navigation.ts b/app/screens/navigation.ts index b1f02203ab2..8fde51685d2 100644 --- a/app/screens/navigation.ts +++ b/app/screens/navigation.ts @@ -245,6 +245,7 @@ export function getThemeFromState(): Theme { function isScreenRegistered(screen: AvailableScreens) { const notImplemented = NOT_READY.includes(screen) || !Object.values(Screens).includes(screen); if (notImplemented) { + console.log('AAAA'); Alert.alert( 'Temporary error ' + screen, 'The functionality you are trying to use has not been implemented yet', From 65dc65df47847dc34371105689db9d57fee68fbf Mon Sep 17 00:00:00 2001 From: harshil Sharma Date: Tue, 17 Oct 2023 10:15:42 +0530 Subject: [PATCH 003/213] Used goToScreen instead of shoModal --- .../convert_to_channel_label.tsx | 31 +++++++++++++++++++ .../convert_gm_to_channel.tsx | 17 ++++++++++ app/screens/convert_gm_to_channel/index.tsx | 8 +++++ app/screens/navigation.ts | 1 - 4 files changed, 56 insertions(+), 1 deletion(-) create mode 100644 app/components/channel_actions/convert_to_channel/convert_to_channel_label.tsx create mode 100644 app/screens/convert_gm_to_channel/convert_gm_to_channel.tsx create mode 100644 app/screens/convert_gm_to_channel/index.tsx diff --git a/app/components/channel_actions/convert_to_channel/convert_to_channel_label.tsx b/app/components/channel_actions/convert_to_channel/convert_to_channel_label.tsx new file mode 100644 index 00000000000..b3c56a58fe2 --- /dev/null +++ b/app/components/channel_actions/convert_to_channel/convert_to_channel_label.tsx @@ -0,0 +1,31 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React from 'react'; + +import OptionItem from '@app/components/option_item'; +import {Screens} from '@app/constants'; +import {useTheme} from '@app/context/theme'; +import {dismissBottomSheet, goToScreen} from '@app/screens/navigation'; +import {preventDoubleTap} from '@app/utils/tap'; + +const ConvertToChannelLabel = () => { + const goToConvertToPrivateChannl = preventDoubleTap(async () => { + await dismissBottomSheet(); + + const title = 'Convert to Private Channel'; + goToScreen(Screens.CONVERT_GM_TO_CHANNEL, title, {}); + }); + + // LOL: localize this + return ( + + ); +}; + +export default ConvertToChannelLabel; diff --git a/app/screens/convert_gm_to_channel/convert_gm_to_channel.tsx b/app/screens/convert_gm_to_channel/convert_gm_to_channel.tsx new file mode 100644 index 00000000000..8ac4f0d2fb7 --- /dev/null +++ b/app/screens/convert_gm_to_channel/convert_gm_to_channel.tsx @@ -0,0 +1,17 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React from 'react'; +import { Text, View } from 'react-native'; + +type Props = { + +} + +const ConvertGMToChannel = (props: Props) => { + return ( + {'ConvertGMToChannel component'} + ); +}; + +export default ConvertGMToChannel; diff --git a/app/screens/convert_gm_to_channel/index.tsx b/app/screens/convert_gm_to_channel/index.tsx new file mode 100644 index 00000000000..912207fa83b --- /dev/null +++ b/app/screens/convert_gm_to_channel/index.tsx @@ -0,0 +1,8 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import {withDatabase} from '@nozbe/watermelondb/DatabaseProvider'; + +import ConvertGMToChannel from './convert_gm_to_channel'; + +export default ConvertGMToChannel; diff --git a/app/screens/navigation.ts b/app/screens/navigation.ts index 8fde51685d2..b1f02203ab2 100644 --- a/app/screens/navigation.ts +++ b/app/screens/navigation.ts @@ -245,7 +245,6 @@ export function getThemeFromState(): Theme { function isScreenRegistered(screen: AvailableScreens) { const notImplemented = NOT_READY.includes(screen) || !Object.values(Screens).includes(screen); if (notImplemented) { - console.log('AAAA'); Alert.alert( 'Temporary error ' + screen, 'The functionality you are trying to use has not been implemented yet', From cd3ff8be764a031cd9801239b9de986b92695a7f Mon Sep 17 00:00:00 2001 From: harshil Sharma Date: Tue, 17 Oct 2023 16:27:11 +0530 Subject: [PATCH 004/213] Added message box --- .../convert_to_channel_label.tsx | 8 ++++--- .../convert_gm_to_channel.tsx | 21 ++++++++++++++++--- assets/base/i18n/en.json | 3 ++- 3 files changed, 25 insertions(+), 7 deletions(-) diff --git a/app/components/channel_actions/convert_to_channel/convert_to_channel_label.tsx b/app/components/channel_actions/convert_to_channel/convert_to_channel_label.tsx index b3c56a58fe2..8a766d8033b 100644 --- a/app/components/channel_actions/convert_to_channel/convert_to_channel_label.tsx +++ b/app/components/channel_actions/convert_to_channel/convert_to_channel_label.tsx @@ -2,10 +2,10 @@ // See LICENSE.txt for license information. import React from 'react'; +import {useIntl} from 'react-intl'; import OptionItem from '@app/components/option_item'; import {Screens} from '@app/constants'; -import {useTheme} from '@app/context/theme'; import {dismissBottomSheet, goToScreen} from '@app/screens/navigation'; import {preventDoubleTap} from '@app/utils/tap'; @@ -17,12 +17,14 @@ const ConvertToChannelLabel = () => { goToScreen(Screens.CONVERT_GM_TO_CHANNEL, title, {}); }); - // LOL: localize this + const {formatMessage} = useIntl(); + const label = formatMessage({id: 'channel_info.convert_gm_to_channel', defaultMessage: 'Convert to a Private Channel'}); + return ( ); diff --git a/app/screens/convert_gm_to_channel/convert_gm_to_channel.tsx b/app/screens/convert_gm_to_channel/convert_gm_to_channel.tsx index 8ac4f0d2fb7..e9e24fc4722 100644 --- a/app/screens/convert_gm_to_channel/convert_gm_to_channel.tsx +++ b/app/screens/convert_gm_to_channel/convert_gm_to_channel.tsx @@ -1,16 +1,31 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. -import React from 'react'; -import { Text, View } from 'react-native'; +import React, {useEffect, useState} from 'react'; + +import {ConvertGMToChannelForm} from './convert_gm_to_channel_form'; +import {Loader} from './loader'; type Props = { } +const loadingIndicatorTimeout = 1200; + const ConvertGMToChannel = (props: Props) => { + const [loadingAnimationTimeout, setLoadingAnimationTimeout] = useState(false); + + useEffect(() => { + setTimeout(() => setLoadingAnimationTimeout(true), loadingIndicatorTimeout); + }, []); + + const showLoader = !loadingAnimationTimeout; + if (showLoader) { + return (); + } + return ( - {'ConvertGMToChannel component'} + ); }; diff --git a/assets/base/i18n/en.json b/assets/base/i18n/en.json index 15707f980c6..ca5028f4d74 100644 --- a/assets/base/i18n/en.json +++ b/assets/base/i18n/en.json @@ -1074,5 +1074,6 @@ "video.download": "Download video", "video.download_description": "This video must be downloaded to play it.", "video.failed_description": "An error occurred while trying to play the video.", - "your.servers": "Your servers" + "your.servers": "Your servers", + "channel_info.convert_gm_to_channel": "Convert to a Private Channel" } From 9ae6db441f8c0d46367054bea90d3d93c7018441 Mon Sep 17 00:00:00 2001 From: harshil Sharma Date: Wed, 18 Oct 2023 16:42:23 +0530 Subject: [PATCH 005/213] WIP --- .../channel_name_input.tsx | 47 ++++++++++ .../convert_gm_to_channel_form.tsx | 53 +++++++++++ app/screens/convert_gm_to_channel/loader.tsx | 39 ++++++++ .../convert_gm_to_channel/message_box.tsx | 93 +++++++++++++++++++ .../convert_gm_to_channel/team_selector.tsx | 71 ++++++++++++++ assets/base/i18n/en.json | 7 +- 6 files changed, 309 insertions(+), 1 deletion(-) create mode 100644 app/screens/convert_gm_to_channel/channel_name_input.tsx create mode 100644 app/screens/convert_gm_to_channel/convert_gm_to_channel_form.tsx create mode 100644 app/screens/convert_gm_to_channel/loader.tsx create mode 100644 app/screens/convert_gm_to_channel/message_box.tsx create mode 100644 app/screens/convert_gm_to_channel/team_selector.tsx diff --git a/app/screens/convert_gm_to_channel/channel_name_input.tsx b/app/screens/convert_gm_to_channel/channel_name_input.tsx new file mode 100644 index 00000000000..9accaef76a0 --- /dev/null +++ b/app/screens/convert_gm_to_channel/channel_name_input.tsx @@ -0,0 +1,47 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React from 'react'; +import {useIntl} from 'react-intl'; + +import FloatingTextInput from '@app/components/floating_text_input_label'; +import {Channel} from '@app/constants'; +import {useTheme} from '@app/context/theme'; +import {t} from '@app/i18n'; +import {getKeyboardAppearanceFromTheme, makeStyleSheetFromTheme} from '@app/utils/theme'; + +const getStyleSheet = makeStyleSheetFromTheme((theme) => ({ + fieldContainer: { + marginBottom: 32, + }, +})); + +export const ChannelNameInput = () => { + const {formatMessage} = useIntl(); + const theme = useTheme(); + + const labelDisplayName = formatMessage({id: t('channel_modal.name'), defaultMessage: 'Name'}); + const placeholder = formatMessage({id: t('"channel_modal.name": "Name",'), defaultMessage: 'Channel Name'}); + + const styles = getStyleSheet(theme); + + return ( + + ); +}; diff --git a/app/screens/convert_gm_to_channel/convert_gm_to_channel_form.tsx b/app/screens/convert_gm_to_channel/convert_gm_to_channel_form.tsx new file mode 100644 index 00000000000..93506e4e868 --- /dev/null +++ b/app/screens/convert_gm_to_channel/convert_gm_to_channel_form.tsx @@ -0,0 +1,53 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React from 'react'; +import {useIntl} from 'react-intl'; +import {View} from 'react-native'; + +import {useTheme} from '@app/context/theme'; +import {makeStyleSheetFromTheme} from '@app/utils/theme'; +import Button from '@components/button'; + +import {ChannelNameInput} from './channel_name_input'; +import {MessageBox} from './message_box'; +import {TeamSelector} from './team_selector'; + +const getStyleFromTheme = makeStyleSheetFromTheme((theme: Theme) => { + return { + container: { + paddingVertical: 24, + paddingHorizontal: 20, + display: 'flex', + flexDirection: 'column', + gap: 24, + }, + }; +}); + +export const ConvertGMToChannelForm = () => { + const theme = useTheme(); + const styles = getStyleFromTheme(theme); + + const {formatMessage} = useIntl(); + const confirmButtonText = formatMessage({ + id: 'channel_info.convert_gm_to_channel.button_text', + defaultMessage: 'Convert to a Private Channel', + }); + + return ( + + + + +