diff --git a/app/components/channel_list/__snapshots__/index.test.tsx.snap b/app/components/channel_list/__snapshots__/index.test.tsx.snap index eaeb5b73d..ceb36db65 100644 --- a/app/components/channel_list/__snapshots__/index.test.tsx.snap +++ b/app/components/channel_list/__snapshots__/index.test.tsx.snap @@ -1,17 +1,23 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Channels List should match snapshot 1`] = ` +exports[`components/channel_list should match snapshot 1`] = ` - Contributors + Test Team! - Community TEST + diff --git a/app/components/channel_list/channel_list.tsx b/app/components/channel_list/channel_list.tsx new file mode 100644 index 000000000..e8b1facf1 --- /dev/null +++ b/app/components/channel_list/channel_list.tsx @@ -0,0 +1,89 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React, {useEffect, useState} from 'react'; +import {TouchableOpacity} from 'react-native-gesture-handler'; +import Animated, {useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated'; + +import {TABLET_SIDEBAR_WIDTH, TEAM_SIDEBAR_WIDTH} from '@constants/view'; +import {useTheme} from '@context/theme'; +import {makeStyleSheetFromTheme} from '@utils/theme'; + +import Categories from './categories'; +import ChannelListHeader from './header'; +import LoadingError from './loading_error'; +import SearchField from './search'; + +// import Loading from '@components/loading'; + +const channels: TempoChannel[] = [ + {id: '1', name: 'Just a channel'}, + {id: '2', name: 'A Highlighted Channel!!!', highlight: true}, + {id: '3', name: 'And a longer channel name.'}, +]; + +const categories: TempoCategory[] = [ + {id: '1', title: 'My first Category', channels}, + {id: '2', title: 'Another Cat', channels}, +]; + +const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({ + container: { + flex: 1, + backgroundColor: theme.sidebarBg, + paddingHorizontal: 20, + paddingVertical: 10, + }, + +})); + +type ChannelListProps = { + iconPad?: boolean; + isTablet: boolean; + teamsCount: number; +} + +const ChannelList = ({iconPad, isTablet, teamsCount}: ChannelListProps) => { + const theme = useTheme(); + const styles = getStyleSheet(theme); + const tabletWidth = useSharedValue(TABLET_SIDEBAR_WIDTH); + const tabletStyle = useAnimatedStyle(() => { + if (!isTablet) { + return { + maxWidth: undefined, + }; + } + + return {maxWidth: withTiming(tabletWidth.value, {duration: 250})}; + }, []); + + useEffect(() => { + if (isTablet) { + tabletWidth.value = TABLET_SIDEBAR_WIDTH - (teamsCount > 1 ? TEAM_SIDEBAR_WIDTH : 0); + } + }, [isTablet, teamsCount]); + + // @to-do; remove after testing + const [showCats, setShowCats] = useState(true); + + return ( + + setShowCats(!showCats)}> + + + + {showCats && ( + <> + + + + )} + {/* */} + {!showCats && ()} + + ); +}; + +export default ChannelList; diff --git a/app/components/channel_list/header/__snapshots__/index.test.tsx.snap b/app/components/channel_list/header/__snapshots__/header.test.tsx.snap similarity index 96% rename from app/components/channel_list/header/__snapshots__/index.test.tsx.snap rename to app/components/channel_list/header/__snapshots__/header.test.tsx.snap index f3f8451e0..d66877d5c 100644 --- a/app/components/channel_list/header/__snapshots__/index.test.tsx.snap +++ b/app/components/channel_list/header/__snapshots__/header.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Channel List Header Component should match snapshot 1`] = ` +exports[`components/channel_list/header Channel List Header Component should match snapshot 1`] = ` - Hello World! + Test! + > + + `; diff --git a/app/components/channel_list/header/header.test.tsx b/app/components/channel_list/header/header.test.tsx new file mode 100644 index 000000000..669f70151 --- /dev/null +++ b/app/components/channel_list/header/header.test.tsx @@ -0,0 +1,18 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React from 'react'; + +import {render} from '@test/intl-test-helper'; + +import Header from './header'; + +describe('components/channel_list/header', () => { + it('Channel List Header Component should match snapshot', () => { + const {toJSON} = render( +
, + ); + + expect(toJSON()).toMatchSnapshot(); + }); +}); diff --git a/app/components/channel_list/header/index.tsx b/app/components/channel_list/header/header.tsx similarity index 88% rename from app/components/channel_list/header/index.tsx rename to app/components/channel_list/header/header.tsx index f263bfae1..963faa2bc 100644 --- a/app/components/channel_list/header/index.tsx +++ b/app/components/channel_list/header/header.tsx @@ -6,13 +6,13 @@ import {Text, View} from 'react-native'; import CompassIcon from '@components/compass_icon'; import TouchableWithFeedback from '@components/touchable_with_feedback'; +import {useServerDisplayName} from '@context/server'; import {useTheme} from '@context/theme'; import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme'; import {typography} from '@utils/typography'; type Props = { - heading: string; - subheading?: string; + displayName: string; iconPad?: boolean; } @@ -54,16 +54,17 @@ const getStyles = makeStyleSheetFromTheme((theme: Theme) => ({ }, })); -const ChannelListHeader = (props: Props) => { +const ChannelListHeader = ({displayName, iconPad}: Props) => { const theme = useTheme(); + const serverDisplayName = useServerDisplayName(); const styles = getStyles(theme); return ( - + - {props.heading} + {displayName} { - {props.subheading} + {serverDisplayName} ); diff --git a/app/components/channel_list/header/index.test.tsx b/app/components/channel_list/header/index.test.tsx deleted file mode 100644 index 35247b2cb..000000000 --- a/app/components/channel_list/header/index.test.tsx +++ /dev/null @@ -1,16 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -import React from 'react'; - -import {renderWithIntlAndTheme} from '@test/intl-test-helper'; - -import Header from './index'; - -test('Channel List Header Component should match snapshot', () => { - const {toJSON} = renderWithIntlAndTheme( -
, - ); - - expect(toJSON()).toMatchSnapshot(); -}); diff --git a/app/components/channel_list/header/index.ts b/app/components/channel_list/header/index.ts new file mode 100644 index 000000000..03d895392 --- /dev/null +++ b/app/components/channel_list/header/index.ts @@ -0,0 +1,30 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import {withDatabase} from '@nozbe/watermelondb/DatabaseProvider'; +import withObservables from '@nozbe/with-observables'; +import {of as of$} from 'rxjs'; +import {switchMap} from 'rxjs/operators'; + +import {MM_TABLES, SYSTEM_IDENTIFIERS} from '@constants/database'; + +const {SERVER: {SYSTEM, TEAM}} = MM_TABLES; +import ChannelListHeader from './header'; + +import type {WithDatabaseArgs} from '@typings/database/database'; +import type SystemModel from '@typings/database/models/servers/system'; +import type TeamModel from '@typings/database/models/servers/team'; + +const withCurrentTeam = withObservables([], ({database}: WithDatabaseArgs) => { + const team = database.get(SYSTEM).findAndObserve(SYSTEM_IDENTIFIERS.CURRENT_TEAM_ID).pipe( + switchMap((id) => database.get(TEAM).findAndObserve(id.value)), + ); + + return { + displayName: team.pipe( + switchMap((t) => of$(t.displayName)), + ), + }; +}); + +export default withDatabase(withCurrentTeam(ChannelListHeader)); diff --git a/app/components/channel_list/index.test.tsx b/app/components/channel_list/index.test.tsx index fa96d5b9a..fabf5de00 100644 --- a/app/components/channel_list/index.test.tsx +++ b/app/components/channel_list/index.test.tsx @@ -1,16 +1,37 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. - +import Database from '@nozbe/watermelondb/Database'; import React from 'react'; -import {renderWithIntlAndTheme} from '@test/intl-test-helper'; +import {MM_TABLES} from '@constants/database'; +import {TeamModel} from '@database/models/server'; +import {renderWithEverything} from '@test/intl-test-helper'; +import TestHelper from '@test/test_helper'; -import ChannelsList from './index'; +import ChannelsList from './channel_list'; -test('Channels List should match snapshot', () => { - const {toJSON} = renderWithIntlAndTheme( - , - ); +describe('components/channel_list', () => { + let database: Database; + beforeAll(async () => { + const server = await TestHelper.setupServerDatabase(); + database = server.database; - expect(toJSON()).toMatchSnapshot(); + const team = await database.get(MM_TABLES.SERVER.TEAM).find(TestHelper.basicTeam!.id); + await database.write(async () => { + await team?.update(() => { + team.displayName = 'Test Team!'; + }); + }); + }); + + it('should match snapshot', () => { + const wrapper = renderWithEverything( + , + {database}, + ); + expect(wrapper.toJSON()).toMatchSnapshot(); + }); }); diff --git a/app/components/channel_list/index.tsx b/app/components/channel_list/index.tsx index 94a5ec5ca..89773fec1 100644 --- a/app/components/channel_list/index.tsx +++ b/app/components/channel_list/index.tsx @@ -1,79 +1,20 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. -import React, {useState} from 'react'; -import {View} from 'react-native'; -import {TouchableOpacity} from 'react-native-gesture-handler'; +import {withDatabase} from '@nozbe/watermelondb/DatabaseProvider'; +import withObservables from '@nozbe/with-observables'; -import TABLET from '@constants/view'; -import {useTheme} from '@context/theme'; -import {useIsTablet} from '@hooks/device'; -import {makeStyleSheetFromTheme} from '@utils/theme'; +import {MM_TABLES} from '@constants/database'; +import MyTeamModel from '@typings/database/models/servers/my_team'; -import Categories from './categories'; -import ChannelListHeader from './header'; -import LoadingError from './loading_error'; -import SearchField from './search'; +import ChannelsList from './channel_list'; -// import Loading from '@components/loading'; +import type {WithDatabaseArgs} from '@typings/database/database'; -const channels: TempoChannel[] = [ - {id: '1', name: 'Just a channel'}, - {id: '2', name: 'A Highlighted Channel!!!', highlight: true}, - {id: '3', name: 'And a longer channel name.'}, -]; - -const categories: TempoCategory[] = [ - {id: '1', title: 'My first Category', channels}, - {id: '2', title: 'Another Cat', channels}, -]; - -const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({ - container: { - flex: 1, - backgroundColor: theme.sidebarBg, - paddingHorizontal: 20, - paddingVertical: 10, - }, - maxW: { - maxWidth: TABLET.TABLET_SIDEBAR_WIDTH, - }, +const {SERVER: {MY_TEAM}} = MM_TABLES; +const enhanced = withObservables([], ({database}: WithDatabaseArgs) => ({ + teamsCount: database.get(MY_TEAM).query().observeCount(), })); -type ChannelListProps = { - iconPad?: boolean; -} - -const ChannelList = ({iconPad}: ChannelListProps) => { - const theme = useTheme(); - const styles = getStyleSheet(theme); - - // @to-do; remove after testing - const [showCats, setShowCats] = useState(true); - - const isTablet = useIsTablet(); - - return ( - - setShowCats(!showCats)}> - - - - {showCats && ( - <> - - - - )} - {/* */} - {!showCats && ()} - - ); -}; - -export default ChannelList; +export default withDatabase(enhanced(ChannelsList)); diff --git a/app/components/emoji/index.tsx b/app/components/emoji/index.tsx index a28e1b9fd..3bb5e1080 100644 --- a/app/components/emoji/index.tsx +++ b/app/components/emoji/index.tsx @@ -17,7 +17,7 @@ import {of as of$} from 'rxjs'; import {switchMap} from 'rxjs/operators'; import {MM_TABLES, SYSTEM_IDENTIFIERS} from '@constants/database'; -import {useServerUrl} from '@context/server_url'; +import {useServerUrl} from '@context/server'; import NetworkManager from '@init/network_manager'; import {EmojiIndicesByAlias, Emojis} from '@utils/emoji'; diff --git a/app/components/emoji_picker/index.tsx b/app/components/emoji_picker/index.tsx index a12c0d89b..11f1860d4 100644 --- a/app/components/emoji_picker/index.tsx +++ b/app/components/emoji_picker/index.tsx @@ -15,7 +15,7 @@ import {searchCustomEmojis} from '@actions/remote/custom_emoji'; import SearchBar from '@components/search_bar'; import {Preferences} from '@constants'; import {MM_TABLES, SYSTEM_IDENTIFIERS} from '@constants/database'; -import {useServerUrl} from '@context/server_url'; +import {useServerUrl} from '@context/server'; import {useTheme} from '@context/theme'; import {debounce} from '@helpers/api/general'; import {safeParseJSON} from '@utils/helpers'; diff --git a/app/components/emoji_picker/sections/index.tsx b/app/components/emoji_picker/sections/index.tsx index 462f67bdc..1d0a590f5 100644 --- a/app/components/emoji_picker/sections/index.tsx +++ b/app/components/emoji_picker/sections/index.tsx @@ -8,7 +8,7 @@ import sectionListGetItemLayout from 'react-native-section-list-get-item-layout' import {fetchCustomEmojis} from '@actions/remote/custom_emoji'; import {EMOJIS_PER_PAGE} from '@constants/emoji'; -import {useServerUrl} from '@context/server_url'; +import {useServerUrl} from '@context/server'; import {CategoryNames, EmojiIndicesByCategory, CategoryTranslations, CategoryMessage} from '@utils/emoji'; import {fillEmoji} from '@utils/emoji/helpers'; diff --git a/app/components/markdown/channel_mention/index.tsx b/app/components/markdown/channel_mention/index.tsx index a76e6d0bd..4a3406ef8 100644 --- a/app/components/markdown/channel_mention/index.tsx +++ b/app/components/markdown/channel_mention/index.tsx @@ -12,7 +12,7 @@ import {map, switchMap} from 'rxjs/operators'; import {switchToChannel} from '@actions/local/channel'; import {joinChannel} from '@actions/remote/channel'; import {MM_TABLES, SYSTEM_IDENTIFIERS} from '@constants/database'; -import {useServerUrl} from '@context/server_url'; +import {useServerUrl} from '@context/server'; import {t} from '@i18n'; import {dismissAllModals, popToRoot} from '@screens/navigation'; import {alertErrorWithFallback} from '@utils/draft'; diff --git a/app/components/markdown/markdown_image/index.tsx b/app/components/markdown/markdown_image/index.tsx index c98c482c2..63e51c712 100644 --- a/app/components/markdown/markdown_image/index.tsx +++ b/app/components/markdown/markdown_image/index.tsx @@ -14,7 +14,7 @@ import ProgressiveImage from '@components/progressive_image'; import SlideUpPanelItem, {ITEM_HEIGHT} from '@components/slide_up_panel_item'; import TouchableWithFeedback from '@components/touchable_with_feedback'; import {Navigation} from '@constants'; -import {useServerUrl} from '@context/server_url'; +import {useServerUrl} from '@context/server'; import {useIsTablet} from '@hooks/device'; import {showModalOverCurrentContext} from '@screens/navigation'; import {openGallerWithMockFile} from '@utils/gallery'; diff --git a/app/components/markdown/markdown_link/index.tsx b/app/components/markdown/markdown_link/index.tsx index a0629d73b..98195996f 100644 --- a/app/components/markdown/markdown_link/index.tsx +++ b/app/components/markdown/markdown_link/index.tsx @@ -18,7 +18,7 @@ import SlideUpPanelItem, {ITEM_HEIGHT} from '@components/slide_up_panel_item'; import {Navigation} from '@constants'; import {MM_TABLES, SYSTEM_IDENTIFIERS} from '@constants/database'; import DeepLinkTypes from '@constants/deep_linking'; -import {useServerUrl} from '@context/server_url'; +import {useServerUrl} from '@context/server'; import {dismissAllModals, popToRoot, showModalOverCurrentContext} from '@screens/navigation'; import {errorBadChannel} from '@utils/draft'; import {preventDoubleTap} from '@utils/tap'; diff --git a/app/components/markdown/markdown_table_image/index.tsx b/app/components/markdown/markdown_table_image/index.tsx index eed6602f7..538013371 100644 --- a/app/components/markdown/markdown_table_image/index.tsx +++ b/app/components/markdown/markdown_table_image/index.tsx @@ -8,7 +8,7 @@ import parseUrl from 'url-parse'; import CompassIcon from '@components/compass_icon'; import ProgressiveImage from '@components/progressive_image'; import TouchableWithFeedback from '@components/touchable_with_feedback'; -import {useServerUrl} from '@context/server_url'; +import {useServerUrl} from '@context/server'; import {openGallerWithMockFile} from '@utils/gallery'; import {generateId} from '@utils/general'; import {calculateDimensions, isGifTooLarge} from '@utils/images'; diff --git a/app/components/post_list/combined_user_activity/combined_user_activity.tsx b/app/components/post_list/combined_user_activity/combined_user_activity.tsx index 5a1217f84..8372accf9 100644 --- a/app/components/post_list/combined_user_activity/combined_user_activity.tsx +++ b/app/components/post_list/combined_user_activity/combined_user_activity.tsx @@ -11,7 +11,7 @@ import SystemAvatar from '@components/system_avatar'; import SystemHeader from '@components/system_header'; import TouchableWithFeedback from '@components/touchable_with_feedback'; import {Post as PostConstants} from '@constants'; -import {useServerUrl} from '@context/server_url'; +import {useServerUrl} from '@context/server'; import {showModalOverCurrentContext} from '@screens/navigation'; import {emptyFunction} from '@utils/general'; import {getMarkdownTextStyles} from '@utils/markdown'; diff --git a/app/components/post_list/post/avatar/index.tsx b/app/components/post_list/post/avatar/index.tsx index a8886b8d5..0db35d02a 100644 --- a/app/components/post_list/post/avatar/index.tsx +++ b/app/components/post_list/post/avatar/index.tsx @@ -16,7 +16,7 @@ import SystemAvatar from '@components/system_avatar'; import TouchableWithFeedback from '@components/touchable_with_feedback'; import {View as ViewConstant} from '@constants'; import {MM_TABLES, SYSTEM_IDENTIFIERS} from '@constants/database'; -import {useServerUrl} from '@context/server_url'; +import {useServerUrl} from '@context/server'; import {useTheme} from '@context/theme'; import NetworkManager from '@init/network_manager'; import {showModal} from '@screens/navigation'; diff --git a/app/components/post_list/post/body/add_members/index.tsx b/app/components/post_list/post/body/add_members/index.tsx index eab121f80..3b237140c 100644 --- a/app/components/post_list/post/body/add_members/index.tsx +++ b/app/components/post_list/post/body/add_members/index.tsx @@ -15,7 +15,7 @@ import FormattedText from '@components/formatted_text'; import AtMention from '@components/markdown/at_mention'; import {General} from '@constants'; import {MM_TABLES, SYSTEM_IDENTIFIERS} from '@constants/database'; -import {useServerUrl} from '@context/server_url'; +import {useServerUrl} from '@context/server'; import {t} from '@i18n'; import {getMarkdownTextStyles} from '@utils/markdown'; import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme'; diff --git a/app/components/post_list/post/body/content/embedded_bindings/button_binding/index.tsx b/app/components/post_list/post/body/content/embedded_bindings/button_binding/index.tsx index 658eef018..10f494913 100644 --- a/app/components/post_list/post/body/content/embedded_bindings/button_binding/index.tsx +++ b/app/components/post_list/post/body/content/embedded_bindings/button_binding/index.tsx @@ -10,7 +10,7 @@ import {map} from 'rxjs/operators'; import {doAppCall, postEphemeralCallResponseForPost} from '@actions/remote/apps'; import {AppExpandLevels, AppBindingLocations, AppCallTypes, AppCallResponseTypes} from '@constants/apps'; import {MM_TABLES, SYSTEM_IDENTIFIERS} from '@constants/database'; -import {useServerUrl} from '@context/server_url'; +import {useServerUrl} from '@context/server'; import {createCallContext, createCallRequest} from '@utils/apps'; import {getStatusColors} from '@utils/message_attachment_colors'; import {preventDoubleTap} from '@utils/tap'; diff --git a/app/components/post_list/post/body/content/embedded_bindings/menu_binding/index.tsx b/app/components/post_list/post/body/content/embedded_bindings/menu_binding/index.tsx index 09401ea03..710d7ef39 100644 --- a/app/components/post_list/post/body/content/embedded_bindings/menu_binding/index.tsx +++ b/app/components/post_list/post/body/content/embedded_bindings/menu_binding/index.tsx @@ -10,7 +10,7 @@ import {doAppCall, postEphemeralCallResponseForPost} from '@actions/remote/apps' import AutocompleteSelector from '@components/autocomplete_selector'; import {AppExpandLevels, AppBindingLocations, AppCallTypes, AppCallResponseTypes} from '@constants/apps'; import {MM_TABLES, SYSTEM_IDENTIFIERS} from '@constants/database'; -import {useServerUrl} from '@context/server_url'; +import {useServerUrl} from '@context/server'; import {createCallContext, createCallRequest} from '@utils/apps'; import type ChannelModel from '@typings/database/models/servers/channel'; diff --git a/app/components/post_list/post/body/content/image_preview/index.tsx b/app/components/post_list/post/body/content/image_preview/index.tsx index 8092e4151..099f56f60 100644 --- a/app/components/post_list/post/body/content/image_preview/index.tsx +++ b/app/components/post_list/post/body/content/image_preview/index.tsx @@ -14,7 +14,7 @@ import FileIcon from '@components/post_list/post/body/files/file_icon'; import ProgressiveImage from '@components/progressive_image'; import TouchableWithFeedback from '@components/touchable_with_feedback'; import {MM_TABLES, SYSTEM_IDENTIFIERS} from '@constants/database'; -import {useServerUrl} from '@context/server_url'; +import {useServerUrl} from '@context/server'; import {useIsTablet} from '@hooks/device'; import useDidUpdate from '@hooks/did_update'; import {openGallerWithMockFile} from '@utils/gallery'; diff --git a/app/components/post_list/post/body/content/message_attachments/action_button/index.tsx b/app/components/post_list/post/body/content/message_attachments/action_button/index.tsx index 382eb7606..113bdc014 100644 --- a/app/components/post_list/post/body/content/message_attachments/action_button/index.tsx +++ b/app/components/post_list/post/body/content/message_attachments/action_button/index.tsx @@ -5,7 +5,7 @@ import React, {useCallback, useRef} from 'react'; import Button from 'react-native-button'; import {postActionWithCookie} from '@actions/remote/post'; -import {useServerUrl} from '@context/server_url'; +import {useServerUrl} from '@context/server'; import {getStatusColors} from '@utils/message_attachment_colors'; import {preventDoubleTap} from '@utils/tap'; import {makeStyleSheetFromTheme, changeOpacity} from '@utils/theme'; diff --git a/app/components/post_list/post/body/content/message_attachments/action_menu/index.tsx b/app/components/post_list/post/body/content/message_attachments/action_menu/index.tsx index 14077b337..7e395757c 100644 --- a/app/components/post_list/post/body/content/message_attachments/action_menu/index.tsx +++ b/app/components/post_list/post/body/content/message_attachments/action_menu/index.tsx @@ -5,7 +5,7 @@ import React, {useCallback, useState} from 'react'; import {selectAttachmentMenuAction} from '@actions/local/post'; import AutocompleteSelector from '@components/autocomplete_selector'; -import {useServerUrl} from '@context/server_url'; +import {useServerUrl} from '@context/server'; type Props = { dataSource?: string; diff --git a/app/components/post_list/post/body/failed/index.tsx b/app/components/post_list/post/body/failed/index.tsx index b350bbc5b..55a6d7043 100644 --- a/app/components/post_list/post/body/failed/index.tsx +++ b/app/components/post_list/post/body/failed/index.tsx @@ -10,7 +10,7 @@ import CompassIcon from '@components/compass_icon'; import SlideUpPanelItem, {ITEM_HEIGHT} from '@components/slide_up_panel_item'; import TouchableWithFeedback from '@components/touchable_with_feedback'; import Navigation from '@constants/navigation'; -import {useServerUrl} from '@context/server_url'; +import {useServerUrl} from '@context/server'; import {showModalOverCurrentContext} from '@screens/navigation'; import type PostModel from '@typings/database/models/servers/post'; diff --git a/app/components/post_list/post/body/files/document_file.tsx b/app/components/post_list/post/body/files/document_file.tsx index 9e3719b6c..1bf13a825 100644 --- a/app/components/post_list/post/body/files/document_file.tsx +++ b/app/components/post_list/post/body/files/document_file.tsx @@ -13,7 +13,7 @@ import ProgressBar from '@components/progress_bar'; import TouchableWithFeedback from '@components/touchable_with_feedback'; import {Device} from '@constants'; import {DOWNLOAD_TIMEOUT} from '@constants/network'; -import {useServerUrl} from '@context/server_url'; +import {useServerUrl} from '@context/server'; import NetworkManager from '@init/network_manager'; import {alertDownloadDocumentDisabled, alertDownloadFailed, alertFailedToOpenDocument} from '@utils/document'; import {getLocalFilePathFromFile} from '@utils/file'; diff --git a/app/components/post_list/post/body/files/image_file.tsx b/app/components/post_list/post/body/files/image_file.tsx index 2e05d4c01..8bab05779 100644 --- a/app/components/post_list/post/body/files/image_file.tsx +++ b/app/components/post_list/post/body/files/image_file.tsx @@ -5,7 +5,7 @@ import React, {useCallback, useState} from 'react'; import {StyleProp, StyleSheet, useWindowDimensions, View, ViewStyle} from 'react-native'; import ProgressiveImage from '@components/progressive_image'; -import {useServerUrl} from '@context/server_url'; +import {useServerUrl} from '@context/server'; import NetworkManager from '@init/network_manager'; import {calculateDimensions} from '@utils/images'; import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme'; diff --git a/app/components/post_list/post/body/files/index.tsx b/app/components/post_list/post/body/files/index.tsx index f3e773590..af63263fa 100644 --- a/app/components/post_list/post/body/files/index.tsx +++ b/app/components/post_list/post/body/files/index.tsx @@ -9,7 +9,7 @@ import {combineLatest, of as of$} from 'rxjs'; import {map, switchMap} from 'rxjs/operators'; import {MM_TABLES, SYSTEM_IDENTIFIERS} from '@constants/database'; -import {useServerUrl} from '@context/server_url'; +import {useServerUrl} from '@context/server'; import {useIsTablet} from '@hooks/device'; import NetworkManager from '@init/network_manager'; import {isGif, isImage} from '@utils/file'; diff --git a/app/components/post_list/post/body/reactions/reactions.tsx b/app/components/post_list/post/body/reactions/reactions.tsx index 34eabb312..3db60beec 100644 --- a/app/components/post_list/post/body/reactions/reactions.tsx +++ b/app/components/post_list/post/body/reactions/reactions.tsx @@ -9,7 +9,7 @@ import {addReaction, removeReaction} from '@actions/remote/reactions'; import CompassIcon from '@components/compass_icon'; import TouchableWithFeedback from '@components/touchable_with_feedback'; import {MAX_ALLOWED_REACTIONS} from '@constants/emoji'; -import {useServerUrl} from '@context/server_url'; +import {useServerUrl} from '@context/server'; import {showModal, showModalOverCurrentContext} from '@screens/navigation'; import {preventDoubleTap} from '@utils/tap'; import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme'; diff --git a/app/components/post_list/post/post.tsx b/app/components/post_list/post/post.tsx index 8c55fae2a..b7cdedd14 100644 --- a/app/components/post_list/post/post.tsx +++ b/app/components/post_list/post/post.tsx @@ -11,7 +11,7 @@ import SystemAvatar from '@components/system_avatar'; import SystemHeader from '@components/system_header'; import TouchableWithFeedback from '@components/touchable_with_feedback'; import * as Screens from '@constants/screens'; -import {useServerUrl} from '@context/server_url'; +import {useServerUrl} from '@context/server'; import {useTheme} from '@context/theme'; import {showModalOverCurrentContext} from '@screens/navigation'; import {fromAutoResponder, isFromWebhook, isPostPendingOrFailed, isSystemMessage} from '@utils/post'; diff --git a/app/components/profile_picture/index.tsx b/app/components/profile_picture/index.tsx index f078567f9..b92c39b28 100644 --- a/app/components/profile_picture/index.tsx +++ b/app/components/profile_picture/index.tsx @@ -8,7 +8,7 @@ import FastImage from 'react-native-fast-image'; import {fetchStatusInBatch} from '@actions/remote/user'; import CompassIcon from '@components/compass_icon'; import UserStatus from '@components/user_status'; -import {useServerUrl} from '@context/server_url'; +import {useServerUrl} from '@context/server'; import {useTheme} from '@context/theme'; import NetworkManager from '@init/network_manager'; import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme'; diff --git a/app/components/team_sidebar/add_team/team_list_item/team_list_item.tsx b/app/components/team_sidebar/add_team/team_list_item/team_list_item.tsx index 8d6d3c972..ab0c101fc 100644 --- a/app/components/team_sidebar/add_team/team_list_item/team_list_item.tsx +++ b/app/components/team_sidebar/add_team/team_list_item/team_list_item.tsx @@ -8,7 +8,7 @@ import {addUserToTeam} from '@actions/remote/team'; import TeamIcon from '@components/team_sidebar/team_list/team_item/team_icon'; import TouchableWithFeedback from '@components/touchable_with_feedback'; import {Navigation} from '@constants'; -import {useServerUrl} from '@context/server_url'; +import {useServerUrl} from '@context/server'; import {useTheme} from '@context/theme'; import {makeStyleSheetFromTheme} from '@utils/theme'; diff --git a/app/components/team_sidebar/team_list/team_item/team_icon.tsx b/app/components/team_sidebar/team_list/team_item/team_icon.tsx index 21b414536..a5aa0df2a 100644 --- a/app/components/team_sidebar/team_list/team_item/team_icon.tsx +++ b/app/components/team_sidebar/team_list/team_item/team_icon.tsx @@ -5,7 +5,7 @@ import React, {useCallback, useEffect, useRef, useState} from 'react'; import {View, Text} from 'react-native'; import FastImage from 'react-native-fast-image'; -import {useServerUrl} from '@context/server_url'; +import {useServerUrl} from '@context/server'; import {useTheme} from '@context/theme'; import NetworkManager from '@init/network_manager'; import {makeStyleSheetFromTheme} from '@utils/theme'; diff --git a/app/components/team_sidebar/team_list/team_item/team_item.tsx b/app/components/team_sidebar/team_list/team_item/team_item.tsx index 695caaa43..6100d69c7 100644 --- a/app/components/team_sidebar/team_list/team_item/team_item.tsx +++ b/app/components/team_sidebar/team_list/team_item/team_item.tsx @@ -7,7 +7,7 @@ import {View} from 'react-native'; import {handleTeamChange} from '@actions/local/team'; import Badge from '@components/badge'; import TouchableWithFeedback from '@components/touchable_with_feedback'; -import {useServerUrl} from '@context/server_url'; +import {useServerUrl} from '@context/server'; import {useTheme} from '@context/theme'; import {makeStyleSheetFromTheme} from '@utils/theme'; diff --git a/app/components/team_sidebar/team_sidebar.tsx b/app/components/team_sidebar/team_sidebar.tsx index 440925acd..17844656d 100644 --- a/app/components/team_sidebar/team_sidebar.tsx +++ b/app/components/team_sidebar/team_sidebar.tsx @@ -6,7 +6,7 @@ import {View} from 'react-native'; import {fetchAllTeams} from '@actions/remote/team'; import {TEAM_SIDEBAR_WIDTH} from '@constants/view'; -import {useServerUrl} from '@context/server_url'; +import {useServerUrl} from '@context/server'; import {useTheme} from '@context/theme'; import {makeStyleSheetFromTheme} from '@utils/theme'; diff --git a/app/context/server_url/index.tsx b/app/context/server/index.tsx similarity index 54% rename from app/context/server_url/index.tsx rename to app/context/server/index.tsx index 3083eb328..f44ae1d66 100644 --- a/app/context/server_url/index.tsx +++ b/app/context/server/index.tsx @@ -4,7 +4,7 @@ import React, {ComponentType, createContext} from 'react'; type Props = { - url: string; + server: ServerContext; children: React.ReactNode; } @@ -12,12 +12,17 @@ type WithServerUrlProps = { serverUrl: string; } -const ServerUrlContext = createContext(''); -const {Provider, Consumer} = ServerUrlContext; +type ServerContext = { + displayName: string; + url: string; +} -function ServerUrlProvider({url, children}: Props) { +const ServerContext = createContext({displayName: '', url: ''}); +const {Provider, Consumer} = ServerContext; + +function ServerUrlProvider({server, children}: Props) { return ( - {children} + {children} ); } @@ -25,10 +30,10 @@ export function withServerUrl(Component: Component return function ServerUrlComponent(props) { return ( - {(serverUrl: string) => ( + {(server: ServerContext) => ( )} @@ -36,8 +41,14 @@ export function withServerUrl(Component: Component }; } +export function useServerDisplayName(): string { + const server = React.useContext(ServerContext); + return server.displayName; +} + export function useServerUrl(): string { - return React.useContext(ServerUrlContext); + const server = React.useContext(ServerContext); + return server.url; } export default ServerUrlProvider; diff --git a/app/database/components/index.tsx b/app/database/components/index.tsx index 45c18721b..1adc723c2 100644 --- a/app/database/components/index.tsx +++ b/app/database/components/index.tsx @@ -6,7 +6,7 @@ import DatabaseProvider from '@nozbe/watermelondb/DatabaseProvider'; import React, {ComponentType, useEffect, useState} from 'react'; import {MM_TABLES} from '@constants/database'; -import ServerUrlProvider from '@context/server_url'; +import ServerProvider from '@context/server'; import ThemeProvider from '@context/theme'; import UserLocaleProvider from '@context/user_locale'; import DatabaseManager from '@database/manager'; @@ -16,6 +16,7 @@ import type ServersModel from '@typings/database/models/app/servers'; type State = { database: Database; serverUrl: string; + serverDisplayName: string; }; const {SERVERS} = MM_TABLES.APP; @@ -37,6 +38,7 @@ export function withServerDatabase(Component: ComponentType): ComponentTyp setState({ database: serverDatabase, serverUrl: server?.url, + serverDisplayName: server?.displayName, }); } else { setState(undefined); @@ -62,11 +64,11 @@ export function withServerDatabase(Component: ComponentType): ComponentTyp return ( - + - + ); diff --git a/app/screens/channel/failed_channels/index.tsx b/app/screens/channel/failed_channels/index.tsx index 959ebbd27..7d765567f 100644 --- a/app/screens/channel/failed_channels/index.tsx +++ b/app/screens/channel/failed_channels/index.tsx @@ -10,7 +10,7 @@ import {retryInitialChannel} from '@actions/remote/retry'; import FailedAction from '@components/failed_action'; import Loading from '@components/loading'; import {MM_TABLES} from '@constants/database'; -import {useServerUrl} from '@context/server_url'; +import {useServerUrl} from '@context/server'; import type {WithDatabaseArgs} from '@typings/database/database'; import type TeamModel from '@typings/database/models/servers/team'; diff --git a/app/screens/channel/failed_teams/index.tsx b/app/screens/channel/failed_teams/index.tsx index 8f919d565..d9f836436 100644 --- a/app/screens/channel/failed_teams/index.tsx +++ b/app/screens/channel/failed_teams/index.tsx @@ -7,7 +7,7 @@ import {useIntl} from 'react-intl'; import {retryInitialTeamAndChannel} from '@actions/remote/retry'; import FailedAction from '@components/failed_action'; import Loading from '@components/loading'; -import {useServerUrl} from '@context/server_url'; +import {useServerUrl} from '@context/server'; const FailedTeams = () => { const intl = useIntl(); diff --git a/app/screens/channel/index.tsx b/app/screens/channel/index.tsx index 6947381fd..0a54639b6 100644 --- a/app/screens/channel/index.tsx +++ b/app/screens/channel/index.tsx @@ -13,7 +13,7 @@ import {logout} from '@actions/remote/session'; import PostList from '@components/post_list'; import ServerVersion from '@components/server_version'; import {Screens, Database} from '@constants'; -import {useServerUrl} from '@context/server_url'; +import {useServerUrl} from '@context/server'; import {useTheme} from '@context/theme'; import {useAppState} from '@hooks/device'; import {goToScreen} from '@screens/navigation'; diff --git a/app/screens/custom_status/index.tsx b/app/screens/custom_status/index.tsx index cf90380bc..d306f86cd 100644 --- a/app/screens/custom_status/index.tsx +++ b/app/screens/custom_status/index.tsx @@ -19,7 +19,7 @@ import TabletTitle from '@components/tablet_title'; import {CustomStatusDuration, Events, Screens} from '@constants'; import {SET_CUSTOM_STATUS_FAILURE} from '@constants/custom_status'; import {MM_TABLES, SYSTEM_IDENTIFIERS} from '@constants/database'; -import {withServerUrl} from '@context/server_url'; +import {withServerUrl} from '@context/server'; import {withTheme} from '@context/theme'; import {dismissModal, goToScreen, mergeNavigationOptions, showModal} from '@screens/navigation'; import {getCurrentMomentForTimezone, getRoundedTime, isCustomStatusExpirySupported, safeParseJSON} from '@utils/helpers'; diff --git a/app/screens/home/account/components/options/custom_status/index.tsx b/app/screens/home/account/components/options/custom_status/index.tsx index 99eda5152..ab2d98455 100644 --- a/app/screens/home/account/components/options/custom_status/index.tsx +++ b/app/screens/home/account/components/options/custom_status/index.tsx @@ -10,7 +10,7 @@ import {unsetCustomStatus} from '@actions/remote/user'; import DrawerItem from '@components/drawer_item'; import {Events, Screens} from '@constants'; import {SET_CUSTOM_STATUS_FAILURE} from '@constants/custom_status'; -import {useServerUrl} from '@context/server_url'; +import {useServerUrl} from '@context/server'; import {useTheme} from '@context/theme'; import {showModal} from '@screens/navigation'; import {preventDoubleTap} from '@utils/tap'; diff --git a/app/screens/home/account/components/options/logout/index.tsx b/app/screens/home/account/components/options/logout/index.tsx index fd044fb23..0adbe7a5d 100644 --- a/app/screens/home/account/components/options/logout/index.tsx +++ b/app/screens/home/account/components/options/logout/index.tsx @@ -7,7 +7,7 @@ import {TextStyle, View} from 'react-native'; import {logout} from '@actions/remote/session'; import DrawerItem from '@components/drawer_item'; import FormattedText from '@components/formatted_text'; -import {useServerUrl} from '@context/server_url'; +import {useServerUrl} from '@context/server'; import DatabaseManager from '@database/manager'; import {queryServer} from '@queries/app/servers'; import {preventDoubleTap} from '@utils/tap'; diff --git a/app/screens/home/account/components/options/user_presence/index.tsx b/app/screens/home/account/components/options/user_presence/index.tsx index 619a11e20..f475c83e1 100644 --- a/app/screens/home/account/components/options/user_presence/index.tsx +++ b/app/screens/home/account/components/options/user_presence/index.tsx @@ -12,7 +12,7 @@ import StatusLabel from '@components/status_label'; import UserStatusIndicator from '@components/user_status'; import {Navigation} from '@constants'; import General from '@constants/general'; -import {useServerUrl} from '@context/server_url'; +import {useServerUrl} from '@context/server'; import {bottomSheet, dismissModal} from '@screens/navigation'; import {preventDoubleTap} from '@utils/tap'; import {changeOpacity} from '@utils/theme'; diff --git a/app/screens/home/channel_list/index.tsx b/app/screens/home/channel_list/index.tsx index 4346879de..4d3102a14 100644 --- a/app/screens/home/channel_list/index.tsx +++ b/app/screens/home/channel_list/index.tsx @@ -82,7 +82,10 @@ const ChannelListScreen = (props: ChannelProps) => { * https://mattermost.atlassian.net/browse/MM-39702 */} - + {isTablet && } diff --git a/app/screens/home/channel_list/server_icon/server_icon.tsx b/app/screens/home/channel_list/server_icon/server_icon.tsx index ef65f12c7..ac249abd1 100644 --- a/app/screens/home/channel_list/server_icon/server_icon.tsx +++ b/app/screens/home/channel_list/server_icon/server_icon.tsx @@ -31,7 +31,7 @@ export default function ServerIcon() { ); diff --git a/package-lock.json b/package-lock.json index e6d4a4254..fd6ca85fb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,6 +5,7 @@ "requires": true, "packages": { "": { + "name": "mattermost-mobile", "version": "2.0.0", "hasInstallScript": true, "license": "Apache 2.0",