Channel List Header Data from DB (#5807)

* Renames header

* Adds Server Display Name Context

* Adds server and team name to header

* Snapshot fail fixed

* rename serverUrl context to server and include displayName

* Add server display name and use only team display name in channel list header

* Improve channel_list test

* Fix channel list on tablets when team sidebar is present

* Fix Server icon color

Co-authored-by: Elias Nahum <nahumhbl@gmail.com>

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`] = `
 <View
-  style={
-    Array [
-      Object {
-        "backgroundColor": "#1e325c",
-        "flex": 1,
-        "paddingHorizontal": 20,
-        "paddingVertical": 10,
+  animatedStyle={
+    Object {
+      "value": Object {
+        "maxWidth": undefined,
       },
-      false,
-    ]
+    }
+  }
+  collapsable={false}
+  style={
+    Object {
+      "backgroundColor": "#1e325c",
+      "flex": 1,
+      "maxWidth": undefined,
+      "paddingHorizontal": 20,
+      "paddingVertical": 10,
+    }
   }
 >
   <RNGestureHandlerButton
@@ -62,7 +68,7 @@ exports[`Channels List should match snapshot 1`] = `
                 }
               }
             >
-              Contributors
+              Test Team!
             </Text>
             <View
               onMoveShouldSetResponder={[Function]}
@@ -164,7 +170,7 @@ exports[`Channels List should match snapshot 1`] = `
             }
           }
         >
-          Community TEST
+          
         </Text>
       </View>
     </View>

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<boolean>(true);
+
+    return (
+        <Animated.View style={[styles.container, tabletStyle]}>
+            <TouchableOpacity onPress={() => setShowCats(!showCats)}>
+                <ChannelListHeader
+                    iconPad={iconPad}
+                />
+            </TouchableOpacity>
+
+            {showCats && (
+                <>
+                    <SearchField/>
+                    <Categories categories={categories}/>
+                </>
+            )}
+            {/* <Loading/> */}
+            {!showCats && (<LoadingError/>)}
+        </Animated.View>
+    );
+};
+
+export default ChannelList;

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`] = `
 <View>
   <View
     style={
@@ -31,7 +31,7 @@ exports[`Channel List Header Component should match snapshot 1`] = `
           }
         }
       >
-        Hello World!
+        Test!
       </Text>
       <View
         onMoveShouldSetResponder={[Function]}
@@ -132,6 +132,8 @@ exports[`Channel List Header Component should match snapshot 1`] = `
         "lineHeight": 16,
       }
     }
-  />
+  >
+    
+  </Text>
 </View>
 `;

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(
+            <Header displayName={'Test!'}/>,
+        );
+
+        expect(toJSON()).toMatchSnapshot();
+    });
+});

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 (
-        <View style={props.iconPad && styles.iconPad}>
+        <View style={iconPad && styles.iconPad}>
             <View style={styles.headerRow}>
                 <View style={styles.headerRow}>
                     <Text style={styles.headingStyles}>
-                        {props.heading}
+                        {displayName}
                     </Text>
                     <TouchableWithFeedback style={styles.chevronButton}>
                         <CompassIcon
@@ -80,7 +81,7 @@ const ChannelListHeader = (props: Props) => {
                 </TouchableWithFeedback>
             </View>
             <Text style={styles.subHeadingStyles}>
-                {props.subheading}
+                {serverDisplayName}
             </Text>
         </View>
     );

app/components/channel_list/header/index.test.tsx

@@ -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(
-        <Header heading='Hello World!'/>,
-    );
-
-    expect(toJSON()).toMatchSnapshot();
-});

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<SystemModel>(SYSTEM).findAndObserve(SYSTEM_IDENTIFIERS.CURRENT_TEAM_ID).pipe(
+        switchMap((id) => database.get<TeamModel>(TEAM).findAndObserve(id.value)),
+    );
+
+    return {
+        displayName: team.pipe(
+            switchMap((t) => of$(t.displayName)),
+        ),
+    };
+});
+
+export default withDatabase(withCurrentTeam(ChannelListHeader));

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(
-        <ChannelsList/>,
-    );
+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<TeamModel>(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(
+            <ChannelsList
+                isTablet={false}
+                teamsCount={1}
+            />,
+            {database},
+        );
+        expect(wrapper.toJSON()).toMatchSnapshot();
+    });
 });

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<MyTeamModel>(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<boolean>(true);
-
-    const isTablet = useIsTablet();
-
-    return (
-        <View style={[styles.container, isTablet && styles.maxW]}>
-            <TouchableOpacity onPress={() => setShowCats(!showCats)}>
-                <ChannelListHeader
-                    heading='Contributors'
-                    subheading='Community TEST'
-                    iconPad={iconPad}
-                />
-            </TouchableOpacity>
-
-            {showCats && (
-                <>
-                    <SearchField/>
-                    <Categories categories={categories}/>
-                </>
-            )}
-            {/* <Loading/> */}
-            {!showCats && (<LoadingError/>)}
-        </View>
-    );
-};
-
-export default ChannelList;
+export default withDatabase(enhanced(ChannelsList));

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';
 

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';

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';
 

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';

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';

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';

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';

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';

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';

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';

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';

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';

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';

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';

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;

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';

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';

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';

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';

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';

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';

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';

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';
 

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';

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';
 

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';
 

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<string>('');
-const {Provider, Consumer} = ServerUrlContext;
+type ServerContext = {
+    displayName: string;
+    url: string;
+}
 
-function ServerUrlProvider({url, children}: Props) {
+const ServerContext = createContext<ServerContext>({displayName: '', url: ''});
+const {Provider, Consumer} = ServerContext;
+
+function ServerUrlProvider({server, children}: Props) {
     return (
-        <Provider value={url}>{children}</Provider>
+        <Provider value={server}>{children}</Provider>
     );
 }
 
@@ -25,10 +30,10 @@ export function withServerUrl<T extends WithServerUrlProps>(Component: Component
     return function ServerUrlComponent(props) {
         return (
             <Consumer>
-                {(serverUrl: string) => (
+                {(server: ServerContext) => (
                     <Component
                         {...props}
-                        serverUrl={serverUrl}
+                        serverUrl={server.url}
                     />
                 )}
             </Consumer>
@@ -36,8 +41,14 @@ export function withServerUrl<T extends WithServerUrlProps>(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;

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<T>(Component: ComponentType<T>): ComponentTyp
                 setState({
                     database: serverDatabase,
                     serverUrl: server?.url,
+                    serverDisplayName: server?.displayName,
                 });
             } else {
                 setState(undefined);
@@ -62,11 +64,11 @@ export function withServerDatabase<T>(Component: ComponentType<T>): ComponentTyp
         return (
             <DatabaseProvider database={state.database}>
                 <UserLocaleProvider database={state.database}>
-                    <ServerUrlProvider url={state.serverUrl}>
+                    <ServerProvider server={{displayName: state.serverDisplayName, url: state.serverUrl}}>
                         <ThemeProvider database={state.database}>
                             <Component {...props}/>
                         </ThemeProvider>
-                    </ServerUrlProvider>
+                    </ServerProvider>
                 </UserLocaleProvider>
             </DatabaseProvider>
         );

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';

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();

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';

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';

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';

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';

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';

app/screens/home/channel_list/index.tsx

@@ -82,7 +82,10 @@ const ChannelListScreen = (props: ChannelProps) => {
                       * https://mattermost.atlassian.net/browse/MM-39702
                       */}
                     <TeamSidebar iconPad={true}/>
-                    <ChannelList iconPad={false}/>
+                    <ChannelList
+                        iconPad={false}
+                        isTablet={isTablet}
+                    />
                     {isTablet &&
                         <Channel {...props}/>
                     }

app/screens/home/channel_list/server_icon/server_icon.tsx

@@ -31,7 +31,7 @@ export default function ServerIcon() {
             <CompassIcon
                 size={24}
                 name='server-variant'
-                color={changeOpacity(theme.buttonColor, 0.56)}
+                color={changeOpacity(theme.sidebarHeaderTextColor, 0.56)}
             />
         </View>
     );

package-lock.json

@@ -5,6 +5,7 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "mattermost-mobile",
       "version": "2.0.0",
       "hasInstallScript": true,
       "license": "Apache 2.0",