diff --git a/app/screens/channel/intro/direct_channel/direct_channel.tsx b/app/screens/channel/intro/direct_channel/direct_channel.tsx deleted file mode 100644 index 98c9140ad..000000000 --- a/app/screens/channel/intro/direct_channel/direct_channel.tsx +++ /dev/null @@ -1,152 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -import React, {useEffect, useMemo} from 'react'; -import {Text, View} from 'react-native'; - -import {fetchProfilesInChannel} from '@actions/remote/user'; -import FormattedText from '@components/formatted_text'; -import {BotTag} from '@components/tag'; -import {General} from '@constants'; -import {useServerUrl} from '@context/server'; -import {makeStyleSheetFromTheme} from '@utils/theme'; -import {typography} from '@utils/typography'; - -import IntroOptions from '../options'; - -import Group from './group'; -import Member from './member'; - -import type ChannelModel from '@typings/database/models/servers/channel'; -import type ChannelMembershipModel from '@typings/database/models/servers/channel_membership'; - -type Props = { - channel: ChannelModel; - currentUserId: string; - isBot: boolean; - members?: ChannelMembershipModel[]; - theme: Theme; -} - -const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({ - botContainer: { - alignSelf: 'flex-end', - bottom: 7.5, - height: 20, - marginBottom: 0, - marginLeft: 4, - paddingVertical: 0, - }, - botText: { - fontSize: 14, - lineHeight: 20, - }, - container: { - alignItems: 'center', - }, - message: { - color: theme.centerChannelColor, - marginTop: 16, - textAlign: 'center', - ...typography('Body', 200, 'Regular'), - }, - profilesContainer: { - justifyContent: 'center', - alignItems: 'center', - }, - title: { - color: theme.centerChannelColor, - marginTop: 16, - textAlign: 'center', - ...typography('Heading', 700, 'SemiBold'), - }, - titleGroup: { - ...typography('Heading', 600, 'SemiBold'), - }, -})); - -const DirectChannel = ({channel, currentUserId, isBot, members, theme}: Props) => { - const serverUrl = useServerUrl(); - const styles = getStyleSheet(theme); - - useEffect(() => { - const channelMembers = members?.filter((m) => m.userId !== currentUserId); - if (!channelMembers?.length) { - fetchProfilesInChannel(serverUrl, channel.id, currentUserId, false); - } - }, []); - - const message = useMemo(() => { - if (channel.type === General.DM_CHANNEL) { - return ( - - ); - } - return ( - - ); - }, [channel.displayName, theme]); - - const profiles = useMemo(() => { - const channelMembers = members?.filter((m) => m.userId !== currentUserId); - if (!channelMembers?.length) { - return null; - } - - if (channel.type === General.DM_CHANNEL) { - return ( - - ); - } - - return ( - cm.userId)} - /> - ); - }, [members, theme]); - - return ( - - - {profiles} - - - - {channel.displayName} - - {isBot && - - } - - {message} - - - ); -}; - -export default DirectChannel; diff --git a/app/screens/channel/intro/direct_channel/group/group.tsx b/app/screens/channel/intro/direct_channel/group/group.tsx deleted file mode 100644 index cb37ac563..000000000 --- a/app/screens/channel/intro/direct_channel/group/group.tsx +++ /dev/null @@ -1,78 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -import {chunk} from 'lodash'; -import React from 'react'; -import {View} from 'react-native'; -import FastImage from 'react-native-fast-image'; - -import {useServerUrl} from '@context/server'; -import NetworkManager from '@init/network_manager'; -import {makeStyleSheetFromTheme} from '@utils/theme'; - -import type {Client} from '@client/rest'; -import type UserModel from '@typings/database/models/servers/user'; - -type Props = { - theme: Theme; - users: UserModel[]; -} - -const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({ - container: { - alignItems: 'center', - flexDirection: 'row', - marginBottom: 12, - }, - profile: { - borderColor: theme.centerChannelBg, - borderRadius: 36, - borderWidth: 2, - height: 72, - width: 72, - }, -})); - -const Group = ({theme, users}: Props) => { - const serverUrl = useServerUrl(); - const styles = getStyleSheet(theme); - - let client: Client | undefined; - - try { - client = NetworkManager.getClient(serverUrl); - } catch { - return null; - } - - const rows = chunk(users, 5); - const groups = rows.map((c, k) => { - const group = c.map((u, i) => { - const pictureUrl = client!.getProfilePictureUrl(u.id, u.lastPictureUpdate); - return ( - - ); - }); - - return ( - - {group} - - ); - }); - - return ( - <> - {groups} - - ); -}; - -export default Group; diff --git a/app/screens/channel/intro/direct_channel/group/index.ts b/app/screens/channel/intro/direct_channel/group/index.ts deleted file mode 100644 index 920750bfd..000000000 --- a/app/screens/channel/intro/direct_channel/group/index.ts +++ /dev/null @@ -1,21 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -import {Q} from '@nozbe/watermelondb'; -import {withDatabase} from '@nozbe/watermelondb/DatabaseProvider'; -import withObservables from '@nozbe/with-observables'; - -import {MM_TABLES} from '@constants/database'; - -import Group from './group'; - -import type {WithDatabaseArgs} from '@typings/database/database'; -import type UserModel from '@typings/database/models/servers/user'; - -const {SERVER: {USER}} = MM_TABLES; - -const enhanced = withObservables([], ({userIds, database}: {userIds: string[]} & WithDatabaseArgs) => ({ - users: database.get(USER).query(Q.where('id', Q.oneOf(userIds))).observeWithColumns(['last_picture_update']), -})); - -export default withDatabase(enhanced(Group)); diff --git a/app/screens/channel/intro/direct_channel/index.ts b/app/screens/channel/intro/direct_channel/index.ts deleted file mode 100644 index 70df012e0..000000000 --- a/app/screens/channel/intro/direct_channel/index.ts +++ /dev/null @@ -1,45 +0,0 @@ -// 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 {catchError, switchMap} from 'rxjs/operators'; - -import {General} from '@constants'; -import {MM_TABLES, SYSTEM_IDENTIFIERS} from '@constants/database'; -import {getUserIdFromChannelName} from '@utils/user'; - -import DirectChannel from './direct_channel'; - -import type {WithDatabaseArgs} from '@typings/database/database'; -import type ChannelModel from '@typings/database/models/servers/channel'; -import type SystemModel from '@typings/database/models/servers/system'; -import type UserModel from '@typings/database/models/servers/user'; - -const enhanced = withObservables([], ({channel, database}: {channel: ChannelModel} & WithDatabaseArgs) => { - const currentUserId = database.get(MM_TABLES.SERVER.SYSTEM).findAndObserve(SYSTEM_IDENTIFIERS.CURRENT_USER_ID).pipe(switchMap(({value}) => of$(value))); - const members = channel.members.observe(); - let isBot = of$(false); - - if (channel.type === General.DM_CHANNEL) { - isBot = currentUserId.pipe( - switchMap((userId: string) => { - const otherUserId = getUserIdFromChannelName(userId, channel.name); - return database.get(MM_TABLES.SERVER.USER).findAndObserve(otherUserId).pipe( - // eslint-disable-next-line max-nested-callbacks - switchMap((user) => of$(user.isBot)), // eslint-disable-next-line max-nested-callbacks - catchError(() => of$(false)), - ); - }), - ); - } - - return { - currentUserId, - isBot, - members, - }; -}); - -export default withDatabase(enhanced(DirectChannel)); diff --git a/app/screens/channel/intro/direct_channel/member/index.ts b/app/screens/channel/intro/direct_channel/member/index.ts deleted file mode 100644 index 2e1577dcb..000000000 --- a/app/screens/channel/intro/direct_channel/member/index.ts +++ /dev/null @@ -1,15 +0,0 @@ -// 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 Member from './member'; - -import type ChannelMembershipModel from '@typings/database/models/servers/channel_membership'; - -const enhanced = withObservables([], ({member}: {member: ChannelMembershipModel}) => ({ - user: member.memberUser.observe(), -})); - -export default withDatabase(enhanced(Member)); diff --git a/app/screens/channel/intro/direct_channel/member/member.tsx b/app/screens/channel/intro/direct_channel/member/member.tsx deleted file mode 100644 index 24b1d5515..000000000 --- a/app/screens/channel/intro/direct_channel/member/member.tsx +++ /dev/null @@ -1,74 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -import React, {useCallback} from 'react'; -import {useIntl} from 'react-intl'; -import {StyleProp, StyleSheet, ViewStyle} from 'react-native'; - -import CompassIcon from '@components/compass_icon'; -import ProfilePicture from '@components/profile_picture'; -import TouchableWithFeedback from '@components/touchable_with_feedback'; -import {Screens} from '@constants'; -import {showModal} from '@screens/navigation'; - -import type UserModel from '@typings/database/models/servers/user'; - -type Props = { - containerStyle?: StyleProp; - size?: number; - showStatus?: boolean; - theme: Theme; - user: UserModel; -} - -const styles = StyleSheet.create({ - profile: { - height: 67, - marginBottom: 12, - marginRight: 12, - }, -}); - -const Member = ({containerStyle, size = 72, showStatus = true, theme, user}: Props) => { - const intl = useIntl(); - const onPress = useCallback(() => { - const screen = Screens.USER_PROFILE; - const title = intl.formatMessage({id: 'mobile.routes.user_profile', defaultMessage: 'Profile'}); - const passProps = { - userId: user.id, - }; - - const closeButton = CompassIcon.getImageSourceSync('close', 24, theme.sidebarHeaderTextColor); - - const options = { - topBar: { - leftButtons: [{ - id: 'close-user-profile', - icon: closeButton, - testID: 'close.settings.button', - }], - }, - }; - - showModal(screen, title, passProps, options); - }, [theme]); - - return ( - - - - ); -}; - -export default Member; diff --git a/app/screens/channel/intro/illustration/private.tsx b/app/screens/channel/intro/illustration/private.tsx deleted file mode 100644 index 00b0e6401..000000000 --- a/app/screens/channel/intro/illustration/private.tsx +++ /dev/null @@ -1,272 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -import * as React from 'react'; -import Svg, { - G, - Path, - Ellipse, - Mask, - Defs, - Pattern, - Use, - Image, - LinearGradient, - Stop, - ClipPath, -} from 'react-native-svg'; - -type Props = { - theme: Theme; -}; - -const PrivateChannelIllustration = ({theme}: Props) => ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -); - -export default PrivateChannelIllustration; diff --git a/app/screens/channel/intro/illustration/public.tsx b/app/screens/channel/intro/illustration/public.tsx deleted file mode 100644 index 7d9265e2a..000000000 --- a/app/screens/channel/intro/illustration/public.tsx +++ /dev/null @@ -1,358 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -import * as React from 'react'; -import Svg, { - G, - Path, - Mask, - Ellipse, - Defs, - Pattern, - Use, - Image, - LinearGradient, - Stop, - ClipPath, -} from 'react-native-svg'; - -type Props = { - theme: Theme; -}; - -const PublicChannelIllustration = ({theme}: Props) => ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -); - -export default PublicChannelIllustration; diff --git a/app/screens/channel/intro/index.ts b/app/screens/channel/intro/index.ts deleted file mode 100644 index 8fce3966e..000000000 --- a/app/screens/channel/intro/index.ts +++ /dev/null @@ -1,43 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -import {Q} from '@nozbe/watermelondb'; -import {withDatabase} from '@nozbe/watermelondb/DatabaseProvider'; -import withObservables from '@nozbe/with-observables'; -import {combineLatest} from 'rxjs'; -import {switchMap} from 'rxjs/operators'; - -import {MM_TABLES, SYSTEM_IDENTIFIERS} from '@constants/database'; - -import Intro from './intro'; - -import type {WithDatabaseArgs} from '@typings/database/database'; -import type ChannelModel from '@typings/database/models/servers/channel'; -import type MyChannelModel from '@typings/database/models/servers/my_channel'; -import type RoleModel from '@typings/database/models/servers/role'; -import type SystemModel from '@typings/database/models/servers/system'; -import type UserModel from '@typings/database/models/servers/user'; - -const {SERVER: {CHANNEL, MY_CHANNEL, ROLE, SYSTEM, USER}} = MM_TABLES; - -const enhanced = withObservables(['channelId'], ({channelId, database}: {channelId: string} & WithDatabaseArgs) => { - const channel = database.get(CHANNEL).findAndObserve(channelId); - const myChannel = database.get(MY_CHANNEL).findAndObserve(channelId); - const me = database.get(SYSTEM).findAndObserve(SYSTEM_IDENTIFIERS.CURRENT_USER_ID).pipe( - switchMap(({value}) => database.get(USER).findAndObserve(value)), - ); - - const roles = combineLatest([me, myChannel]).pipe( - switchMap(([{roles: userRoles}, {roles: memberRoles}]) => { - const combinedRoles = userRoles.split(' ').concat(memberRoles.split(' ')); - return database.get(ROLE).query(Q.where('name', Q.oneOf(combinedRoles))).observe(); - }), - ); - - return { - channel, - roles, - }; -}); - -export default withDatabase(enhanced(Intro)); diff --git a/app/screens/channel/intro/intro.tsx b/app/screens/channel/intro/intro.tsx deleted file mode 100644 index bb50706a4..000000000 --- a/app/screens/channel/intro/intro.tsx +++ /dev/null @@ -1,86 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -import React, {useMemo} from 'react'; -import {ActivityIndicator, Platform, StyleSheet, View} from 'react-native'; - -import {General} from '@constants'; -import {useTheme} from '@context/theme'; - -import DirectChannel from './direct_channel'; -import PublicOrPrivateChannel from './public_or_private_channel'; -import TownSquare from './townsquare'; - -import type ChannelModel from '@typings/database/models/servers/channel'; -import type RoleModel from '@typings/database/models/servers/role'; - -type Props = { - channel: ChannelModel; - loading?: boolean; - roles: RoleModel[]; -} - -const styles = StyleSheet.create({ - container: { - marginVertical: 12, - overflow: 'hidden', - ...Platform.select({ - android: { - scaleY: -1, - }, - }), - }, -}); - -const Intro = ({channel, loading = false, roles}: Props) => { - const theme = useTheme(); - const element = useMemo(() => { - if (channel.type === General.OPEN_CHANNEL && channel.name === General.DEFAULT_CHANNEL) { - return ( - - ); - } - - switch (channel.type) { - case General.OPEN_CHANNEL: - case General.PRIVATE_CHANNEL: - return ( - - ); - default: - return ( - - ); - } - }, [channel, roles, theme]); - - if (loading) { - return ( - - ); - } - - return ( - - {element} - - ); -}; - -export default Intro; diff --git a/app/screens/channel/intro/options/favorite/favorite.tsx b/app/screens/channel/intro/options/favorite/favorite.tsx deleted file mode 100644 index 7c6bcdd6d..000000000 --- a/app/screens/channel/intro/options/favorite/favorite.tsx +++ /dev/null @@ -1,38 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -import React, {useCallback} from 'react'; -import {useIntl} from 'react-intl'; - -import {saveFavoriteChannel} from '@actions/remote/preference'; -import {useServerUrl} from '@context/server'; - -import OptionItem from '../item'; - -type Props = { - channelId: string; - isFavorite: boolean; - theme: Theme; -} - -const IntroFavorite = ({channelId, isFavorite, theme}: Props) => { - const {formatMessage} = useIntl(); - const serverUrl = useServerUrl(); - - const toggleFavorite = useCallback(() => { - saveFavoriteChannel(serverUrl, channelId, !isFavorite); - }, [channelId, isFavorite]); - - return ( - - ); -}; - -export default IntroFavorite; diff --git a/app/screens/channel/intro/options/favorite/index.ts b/app/screens/channel/intro/options/favorite/index.ts deleted file mode 100644 index 5db9164aa..000000000 --- a/app/screens/channel/intro/options/favorite/index.ts +++ /dev/null @@ -1,29 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -import {Q} from '@nozbe/watermelondb'; -import {withDatabase} from '@nozbe/watermelondb/DatabaseProvider'; -import withObservables from '@nozbe/with-observables'; -import {of as of$} from 'rxjs'; -import {switchMap} from 'rxjs/operators'; - -import {Preferences} from '@constants'; -import {MM_TABLES} from '@constants/database'; - -import FavoriteItem from './favorite'; - -import type {WithDatabaseArgs} from '@typings/database/database'; -import type PreferenceModel from '@typings/database/models/servers/preference'; - -const enhanced = withObservables([], ({channelId, database}: {channelId: string} & WithDatabaseArgs) => ({ - isFavorite: database.get(MM_TABLES.SERVER.PREFERENCE).query( - Q.where('category', Preferences.CATEGORY_FAVORITE_CHANNEL), - Q.where('name', channelId), - ).observeWithColumns(['value']).pipe( - switchMap((prefs) => { - return prefs.length ? of$(prefs[0].value === 'true') : of$(false); - }), - ), -})); - -export default withDatabase(enhanced(FavoriteItem)); diff --git a/app/screens/channel/intro/options/index.tsx b/app/screens/channel/intro/options/index.tsx deleted file mode 100644 index 774791f61..000000000 --- a/app/screens/channel/intro/options/index.tsx +++ /dev/null @@ -1,86 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -import React, {useCallback} from 'react'; -import {useIntl} from 'react-intl'; -import {StyleSheet, View} from 'react-native'; - -import {Screens} from '@constants'; -import {showModal} from '@screens/navigation'; - -import IntroFavorite from './favorite'; -import OptionItem from './item'; - -type Props = { - channelId: string; - header?: boolean; - favorite?: boolean; - people?: boolean; - theme: Theme; -} - -const styles = StyleSheet.create({ - container: { - justifyContent: 'center', - flexDirection: 'row', - marginBottom: 8, - marginTop: 28, - width: '100%', - }, -}); - -const IntroOptions = ({channelId, header, favorite, people, theme}: Props) => { - const {formatMessage} = useIntl(); - - const onAddPeople = useCallback(() => { - const title = formatMessage({id: 'intro.add_people', defaultMessage: 'Add People'}); - showModal(Screens.CHANNEL_ADD_PEOPLE, title, {channelId}); - }, []); - - const onSetHeader = useCallback(() => { - const title = formatMessage({id: 'screens.channel_edit', defaultMessage: 'Edit Channel'}); - showModal(Screens.CHANNEL_EDIT, title, {channelId}); - }, []); - - const onDetails = useCallback(() => { - const title = formatMessage({id: 'screens.channel_details', defaultMessage: 'Channel Details'}); - showModal(Screens.CHANNEL_DETAILS, title, {channelId}); - }, []); - - return ( - - {people && - - } - {header && - - } - {favorite && - - } - - - ); -}; - -export default IntroOptions; diff --git a/app/screens/channel/intro/options/item.tsx b/app/screens/channel/intro/options/item.tsx deleted file mode 100644 index 041dc90bc..000000000 --- a/app/screens/channel/intro/options/item.tsx +++ /dev/null @@ -1,88 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -import React, {useCallback} from 'react'; -import {Pressable, PressableStateCallbackType, Text} from 'react-native'; - -import CompassIcon from '@components/compass_icon'; -import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme'; -import {typography} from '@utils/typography'; - -type Props = { - applyMargin?: boolean; - color?: string; - iconName: string; - label: string; - onPress: () => void; - theme: Theme; -} - -const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({ - container: { - alignItems: 'center', - backgroundColor: changeOpacity(theme.centerChannelColor, 0.04), - borderRadius: 4, - height: 70, - justifyContent: 'center', - paddingHorizontal: 16, - paddingVertical: 12, - width: 112, - }, - containerPressed: { - backgroundColor: changeOpacity(theme.buttonBg, 0.08), - }, - label: { - marginTop: 6, - ...typography('Body', 50, 'SemiBold'), - }, - margin: { - marginRight: 8, - }, -})); - -const IntroItem = ({applyMargin, color, iconName, label, onPress, theme}: Props) => { - const styles = getStyleSheet(theme); - const pressedStyle = useCallback(({pressed}: PressableStateCallbackType) => { - const style = [styles.container]; - if (pressed) { - style.push(styles.containerPressed); - } - - if (applyMargin) { - style.push(styles.margin); - } - - return style; - }, [applyMargin, theme]); - - const renderPressableChildren = ({pressed}: PressableStateCallbackType) => { - let pressedColor = color || changeOpacity(theme.centerChannelColor, 0.56); - if (pressed) { - pressedColor = theme.linkColor; - } - - return ( - <> - - - {label} - - - ); - }; - - return ( - - {renderPressableChildren} - - ); -}; - -export default IntroItem; diff --git a/app/screens/channel/intro/public_or_private_channel/index.ts b/app/screens/channel/intro/public_or_private_channel/index.ts deleted file mode 100644 index 39c657301..000000000 --- a/app/screens/channel/intro/public_or_private_channel/index.ts +++ /dev/null @@ -1,51 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -import {Q} from '@nozbe/watermelondb'; -import {withDatabase} from '@nozbe/watermelondb/DatabaseProvider'; -import withObservables from '@nozbe/with-observables'; -import {combineLatest, of as of$} from 'rxjs'; -import {map, switchMap} from 'rxjs/operators'; - -import {Preferences} from '@constants'; -import {MM_TABLES, SYSTEM_IDENTIFIERS} from '@constants/database'; -import {getTeammateNameDisplaySetting} from '@helpers/api/preference'; -import {displayUsername} from '@utils/user'; - -import PublicOrPrivateChannel from './public_or_private_channel'; - -import type {WithDatabaseArgs} from '@typings/database/database'; -import type ChannelModel from '@typings/database/models/servers/channel'; -import type PreferenceModel from '@typings/database/models/servers/preference'; -import type SystemModel from '@typings/database/models/servers/system'; -import type UserModel from '@typings/database/models/servers/user'; - -const {SERVER: {PREFERENCE, SYSTEM, USER}} = MM_TABLES; - -const enhanced = withObservables([], ({channel, database}: {channel: ChannelModel} & WithDatabaseArgs) => { - let creator; - if (channel.creatorId) { - const config = database.get(SYSTEM).findAndObserve(SYSTEM_IDENTIFIERS.CONFIG).pipe(switchMap(({value}) => of$(value as ClientConfig))); - const license = database.get(SYSTEM).findAndObserve(SYSTEM_IDENTIFIERS.LICENSE).pipe(switchMap(({value}) => of$(value as ClientLicense))); - const preferences = database.get(PREFERENCE).query(Q.where('category', Preferences.CATEGORY_DISPLAY_SETTINGS)).observe(); - const me = database.get(SYSTEM).findAndObserve(SYSTEM_IDENTIFIERS.CURRENT_USER_ID).pipe( - switchMap(({value}) => database.get(USER).findAndObserve(value)), - ); - - const profile = channel.creator.observe(); - const teammateNameDisplay = combineLatest([preferences, config, license]).pipe( - map(([prefs, cfg, lcs]) => getTeammateNameDisplaySetting(prefs, cfg, lcs)), - ); - creator = combineLatest([profile, teammateNameDisplay, me]).pipe( - map(([user, displaySetting, currentUser]) => (user ? displayUsername(user as UserModel, currentUser.locale, displaySetting, true) : '')), - ); - } else { - creator = of$(undefined); - } - - return { - creator, - }; -}); - -export default withDatabase(enhanced(PublicOrPrivateChannel)); diff --git a/app/screens/channel/intro/public_or_private_channel/public_or_private_channel.tsx b/app/screens/channel/intro/public_or_private_channel/public_or_private_channel.tsx deleted file mode 100644 index e6558fa5c..000000000 --- a/app/screens/channel/intro/public_or_private_channel/public_or_private_channel.tsx +++ /dev/null @@ -1,145 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -import React, {useEffect, useMemo} from 'react'; -import {useIntl} from 'react-intl'; -import {Text, View} from 'react-native'; - -import {fetchChannelCreator} from '@actions/remote/channel'; -import CompassIcon from '@components/compass_icon'; -import {General, Permissions} from '@constants'; -import {useServerUrl} from '@context/server'; -import {t} from '@i18n'; -import {hasPermission} from '@utils/role'; -import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme'; -import {typography} from '@utils/typography'; - -import PrivateChannel from '../illustration/private'; -import PublicChannel from '../illustration/public'; -import IntroOptions from '../options'; - -import type ChannelModel from '@typings/database/models/servers/channel'; -import type RoleModel from '@typings/database/models/servers/role'; - -type Props = { - channel: ChannelModel; - creator?: string; - roles: RoleModel[]; - theme: Theme; -} - -const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({ - container: { - alignItems: 'center', - }, - created: { - color: changeOpacity(theme.centerChannelColor, 0.64), - ...typography('Body', 50, 'Regular'), - }, - icon: { - marginRight: 5, - }, - message: { - color: theme.centerChannelColor, - marginTop: 16, - textAlign: 'center', - ...typography('Body', 200, 'Regular'), - }, - title: { - color: theme.centerChannelColor, - marginTop: 16, - marginBottom: 8, - ...typography('Heading', 700, 'SemiBold'), - }, -})); - -const PublicOrPrivateChannel = ({channel, creator, roles, theme}: Props) => { - const intl = useIntl(); - const serverUrl = useServerUrl(); - const styles = getStyleSheet(theme); - const illustration = useMemo(() => { - if (channel.type === General.OPEN_CHANNEL) { - return ; - } - - return ; - }, [channel.type, theme]); - - useEffect(() => { - if (!creator && channel.creatorId) { - fetchChannelCreator(serverUrl, channel.id); - } - }, []); - - const canManagePeople = useMemo(() => { - const permission = channel.type === General.OPEN_CHANNEL ? Permissions.MANAGE_PUBLIC_CHANNEL_MEMBERS : Permissions.MANAGE_PRIVATE_CHANNEL_MEMBERS; - return hasPermission(roles, permission, false); - }, [channel.type, roles]); - - const canSetHeader = useMemo(() => { - const permission = channel.type === General.OPEN_CHANNEL ? Permissions.MANAGE_PUBLIC_CHANNEL_PROPERTIES : Permissions.MANAGE_PRIVATE_CHANNEL_PROPERTIES; - return hasPermission(roles, permission, false); - }, [channel.type, roles]); - - const createdBy = useMemo(() => { - const id = channel.type === General.OPEN_CHANNEL ? t('intro.public_channel') : t('intro.private_channel'); - const defaultMessage = channel.type === General.OPEN_CHANNEL ? 'Public Channel' : 'Private Channel'; - const channelType = `${intl.formatMessage({id, defaultMessage})} `; - - const date = intl.formatDate(channel.createAt, { - year: 'numeric', - month: 'long', - day: 'numeric', - }); - const by = intl.formatMessage({id: 'intro.created_by', defaultMessage: 'created by {creator} on {date}.'}, { - creator, - date, - }); - - return `${channelType} ${by}`; - }, [channel.type, creator, theme]); - - const message = useMemo(() => { - const id = channel.type === General.OPEN_CHANNEL ? t('intro.welcome.public') : t('intro.welcome.private'); - const msg = channel.type === General.OPEN_CHANNEL ? 'Add some more team members to the channel or start a conversation below.' : 'Only invited members can see messages posted in this private channel.'; - const mainMessage = intl.formatMessage({ - id: 'intro.welcome', - defaultMessage: 'Welcome to {displayName} channel.', - }, {displayName: channel.displayName}); - - const suffix = intl.formatMessage({id, defaultMessage: msg}); - - return `${mainMessage} ${suffix}`; - }, [channel.displayName, channel.type, theme]); - - return ( - - {illustration} - - {channel.displayName} - - - - - {createdBy} - - - - {message} - - - - ); -}; - -export default PublicOrPrivateChannel; diff --git a/app/screens/channel/intro/townsquare/index.tsx b/app/screens/channel/intro/townsquare/index.tsx deleted file mode 100644 index 04fb5ab04..000000000 --- a/app/screens/channel/intro/townsquare/index.tsx +++ /dev/null @@ -1,66 +0,0 @@ -// 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 FormattedText from '@components/formatted_text'; -import {Permissions} from '@constants'; -import {hasPermission} from '@utils/role'; -import {makeStyleSheetFromTheme} from '@utils/theme'; -import {typography} from '@utils/typography'; - -import PublicChannel from '../illustration/public'; -import IntroOptions from '../options'; - -import type RoleModel from '@typings/database/models/servers/role'; - -type Props = { - channelId: string; - displayName: string; - roles: RoleModel[]; - theme: Theme; -} - -const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({ - container: { - alignItems: 'center', - }, - message: { - color: theme.centerChannelColor, - marginTop: 16, - textAlign: 'center', - ...typography('Body', 200, 'Regular'), - width: '100%', - }, - title: { - color: theme.centerChannelColor, - marginTop: 16, - ...typography('Heading', 700, 'SemiBold'), - }, -})); - -const TownSquare = ({channelId, displayName, roles, theme}: Props) => { - const styles = getStyleSheet(theme); - return ( - - - - {displayName} - - - - - ); -}; - -export default TownSquare;