From 368f6aa08d30cfa99705290d71400bf9341f1d9c Mon Sep 17 00:00:00 2001 From: Shaz MJ Date: Tue, 22 Mar 2022 09:42:47 +1100 Subject: [PATCH 1/5] Handes visibility preference setting for dm/gm --- .../categories/body/category_body.test.tsx | 1 + .../categories/body/category_body.tsx | 18 ++++++--- .../channel_list/categories/body/index.ts | 40 +++++++++++++++---- .../channel_list/categories/categories.tsx | 5 ++- .../channel_list/categories/index.ts | 6 ++- app/constants/preferences.ts | 3 +- app/queries/servers/channel.ts | 4 ++ app/queries/servers/preference.ts | 16 ++++++++ 8 files changed, 78 insertions(+), 15 deletions(-) diff --git a/app/components/channel_list/categories/body/category_body.test.tsx b/app/components/channel_list/categories/body/category_body.test.tsx index 220ac79aec..3a32e3bf20 100644 --- a/app/components/channel_list/categories/body/category_body.test.tsx +++ b/app/components/channel_list/categories/body/category_body.test.tsx @@ -36,6 +36,7 @@ describe('components/channel_list/categories/body', () => { category={category} locale={DEFAULT_LOCALE} currentChannelId={''} + currentUserId={''} />, {database}, ); diff --git a/app/components/channel_list/categories/body/category_body.tsx b/app/components/channel_list/categories/body/category_body.tsx index 38f3787a94..c27f2ac00c 100644 --- a/app/components/channel_list/categories/body/category_body.tsx +++ b/app/components/channel_list/categories/body/category_body.tsx @@ -11,19 +11,27 @@ import type CategoryModel from '@typings/database/models/servers/category'; type Props = { currentChannelId: string; sortedIds: string[]; + hiddenChannelIds: string[]; category: CategoryModel; limit: number; }; const extractKey = (item: string) => item; -const CategoryBody = ({currentChannelId, sortedIds, category, limit}: Props) => { +const CategoryBody = ({currentChannelId, sortedIds, category, hiddenChannelIds, limit}: Props) => { const ids = useMemo(() => { - if (category.type === 'direct_messages' && limit > 0) { - return sortedIds.slice(0, limit - 1); + let filteredIds = sortedIds; + + // Remove all closed gm/dms + if (hiddenChannelIds.length) { + filteredIds = sortedIds.filter((id) => !hiddenChannelIds.includes(id)); } - return sortedIds; - }, [category.type, limit]); + + if (category.type === 'direct_messages' && limit > 0) { + return filteredIds.slice(0, limit - 1); + } + return filteredIds; + }, [category.type, limit, hiddenChannelIds]); const ChannelItem = useCallback(({item}: {item: string}) => { return ( diff --git a/app/components/channel_list/categories/body/index.ts b/app/components/channel_list/categories/body/index.ts index 9acf7d37ec..3ca076ef4c 100644 --- a/app/components/channel_list/categories/body/index.ts +++ b/app/components/channel_list/categories/body/index.ts @@ -8,6 +8,9 @@ import {combineLatest, of as of$} from 'rxjs'; import {switchMap} from 'rxjs/operators'; import {MM_TABLES} from '@app/constants/database'; +import {queryChannelsByNames} from '@app/queries/servers/channel'; +import {queryPreferencesByCategory} from '@app/queries/servers/preference'; +import {getDirectChannelName} from '@app/utils/channel'; import {General, Preferences} from '@constants'; import {WithDatabaseArgs} from '@typings/database/database'; @@ -22,7 +25,7 @@ type ChannelData = Pick & { isMuted: boolean; }; -const {SERVER: {MY_CHANNEL_SETTINGS, PREFERENCE}} = MM_TABLES; +const {SERVER: {MY_CHANNEL_SETTINGS}} = MM_TABLES; const sortAlpha = (locale: string, a: ChannelData, b: ChannelData) => { if (a.isMuted && !b.isMuted) { @@ -82,19 +85,37 @@ const getSortedIds = (database: Database, category: CategoryModel, locale: strin } }; -const enhance = withObservables(['category'], ({category, locale, database}: {category: CategoryModel; locale: string} & WithDatabaseArgs) => { +const mapPrefName = (prefs: PreferenceModel[]) => of$(prefs.map((p) => p.name)); + +const mapChannelIds = (channels: ChannelModel[]) => of$(channels.map((c) => c.id)); + +const enhance = withObservables(['category'], ({category, locale, database, currentUserId}: {category: CategoryModel; locale: string; currentUserId: string} & WithDatabaseArgs) => { const observedCategory = category.observe(); const sortedIds = observedCategory.pipe( switchMap((c) => getSortedIds(database, c, locale)), ); + const dmMap = (p: PreferenceModel) => getDirectChannelName(p.name, currentUserId); + + const hiddenDmIds = queryPreferencesByCategory(database, Preferences.CATEGORY_DIRECT_CHANNEL_SHOW, undefined, 'false'). + observe().pipe( + switchMap((prefs: PreferenceModel[]) => { + const names = prefs.map(dmMap); + const channels = queryChannelsByNames(database, names).observe(); + + return channels.pipe( + switchMap(mapChannelIds), + ); + }), + ); + + const hiddenGmIds = queryPreferencesByCategory(database, Preferences.CATEGORY_GROUP_CHANNEL_SHOW, undefined, 'false'). + observe().pipe(switchMap(mapPrefName)); + let limit = of$(0); if (category.type === 'direct_messages') { - limit = database.get(PREFERENCE). - query( - Q.where('category', Preferences.CATEGORY_SIDEBAR_SETTINGS), - Q.where('name', 'limit_visible_dms_gms'), - ).observe().pipe( + limit = queryPreferencesByCategory(database, Preferences.CATEGORY_SIDEBAR_SETTINGS, Preferences.CHANNEL_SIDEBAR_LIMIT_DMS). + observe().pipe( switchMap( (val) => { if (val[0]) { @@ -107,8 +128,13 @@ const enhance = withObservables(['category'], ({category, locale, database}: {ca ); } + const hiddenChannelIds = combineLatest([hiddenDmIds, hiddenGmIds]).pipe(switchMap( + ([a, b]) => of$(a.concat(b)), + )); + return { limit, + hiddenChannelIds, sortedIds, category: observedCategory, }; diff --git a/app/components/channel_list/categories/categories.tsx b/app/components/channel_list/categories/categories.tsx index 406b122944..5718fd42b3 100644 --- a/app/components/channel_list/categories/categories.tsx +++ b/app/components/channel_list/categories/categories.tsx @@ -14,6 +14,7 @@ import type {CategoryModel} from '@database/models/server'; type Props = { categories: CategoryModel[]; currentChannelId: string; + currentUserId: string; } const styles = StyleSheet.create({ @@ -24,8 +25,9 @@ const styles = StyleSheet.create({ const extractKey = (item: CategoryModel) => item.id; -const Categories = ({categories, currentChannelId}: Props) => { +const Categories = ({categories, currentChannelId, currentUserId}: Props) => { const intl = useIntl(); + const renderCategory = useCallback((data: {item: CategoryModel}) => { return ( <> @@ -33,6 +35,7 @@ const Categories = ({categories, currentChannelId}: Props) => { diff --git a/app/components/channel_list/categories/index.ts b/app/components/channel_list/categories/index.ts index cf60109651..7de7c61cbe 100644 --- a/app/components/channel_list/categories/index.ts +++ b/app/components/channel_list/categories/index.ts @@ -16,7 +16,7 @@ import type CategoryModel from '@typings/database/models/servers/category'; import type SystemModel from '@typings/database/models/servers/system'; const {SERVER: {CATEGORY, SYSTEM}} = MM_TABLES; -const {CURRENT_CHANNEL_ID} = SYSTEM_IDENTIFIERS; +const {CURRENT_CHANNEL_ID, CURRENT_USER_ID} = SYSTEM_IDENTIFIERS; type WithDatabaseProps = {currentTeamId: string } & WithDatabaseArgs @@ -26,6 +26,9 @@ const enhanced = withObservables( const currentChannelId = database.get(SYSTEM).findAndObserve(CURRENT_CHANNEL_ID).pipe( switchMap(({value}) => of$(value)), ); + const currentUserId = database.get(SYSTEM).findAndObserve(CURRENT_USER_ID).pipe( + switchMap(({value}) => of$(value)), + ); const categories = database.get(CATEGORY).query( Q.where('team_id', currentTeamId), ).observeWithColumns(['sort_order']); @@ -33,6 +36,7 @@ const enhanced = withObservables( return { currentChannelId, categories, + currentUserId, }; }); diff --git a/app/constants/preferences.ts b/app/constants/preferences.ts index 0a962329ae..c76a1d17b4 100644 --- a/app/constants/preferences.ts +++ b/app/constants/preferences.ts @@ -11,6 +11,7 @@ const Preferences: Record = { CATEGORY_FAVORITE_CHANNEL: 'favorite_channel', CATEGORY_AUTO_RESET_MANUAL_STATUS: 'auto_reset_manual_status', CATEGORY_NOTIFICATIONS: 'notifications', + COMMENTS: 'comments', COMMENTS_ANY: 'any', COMMENTS_ROOT: 'root', @@ -35,7 +36,7 @@ const Preferences: Record = { USE_MILITARY_TIME: 'use_military_time', CATEGORY_SIDEBAR_SETTINGS: 'sidebar_settings', CHANNEL_SIDEBAR_ORGANIZATION: 'channel_sidebar_organization', - CHANNEL_SIDEBAR_AUTOCLOSE_DMS: 'close_unused_direct_messages', + CHANNEL_SIDEBAR_LIMIT_DMS: 'limit_visible_dms_gms', AUTOCLOSE_DMS_ENABLED: 'after_seven_days', CATEGORY_ADVANCED_SETTINGS: 'advanced_settings', ADVANCED_FILTER_JOIN_LEAVE: 'join_leave', diff --git a/app/queries/servers/channel.ts b/app/queries/servers/channel.ts index 48a9c03088..2683db1567 100644 --- a/app/queries/servers/channel.ts +++ b/app/queries/servers/channel.ts @@ -247,3 +247,7 @@ export const addChannelMembership = async (operator: ServerDataOperator, userId: export const queryAllMyChannelMembershipIds = async (database: Database, userId: string) => { return database.get(CHANNEL_MEMBERSHIP).query(Q.where('user_id', Q.eq(userId))).fetchIds(); }; + +export const queryChannelsByNames = (database: Database, names: string[]) => { + return database.get(CHANNEL).query(Q.where('name', Q.oneOf(names))); +}; diff --git a/app/queries/servers/preference.ts b/app/queries/servers/preference.ts index 3290f04dc9..d4fd7acc0c 100644 --- a/app/queries/servers/preference.ts +++ b/app/queries/servers/preference.ts @@ -12,6 +12,8 @@ import {queryCurrentTeamId} from './system'; import type ServerDataOperator from '@database/operator/server_data_operator'; import type PreferenceModel from '@typings/database/models/servers/preference'; +const {SERVER: {PREFERENCE}} = MM_TABLES; + export const prepareMyPreferences = (operator: ServerDataOperator, preferences: PreferenceType[], sync = false) => { try { return operator.handlePreferences({ @@ -65,3 +67,17 @@ export const deletePreferences = async (database: ServerDatabase, preferences: P return false; } }; + +export const queryPreferencesByCategory = (database: Database, category: string, name?: string, value?: string) => { + const clauses = [Q.where('category', category)]; + + if (typeof name === 'string') { + clauses.push(Q.where('name', name)); + } + + if (typeof value === 'string') { + clauses.push(Q.where('value', value)); + } + + return database.get(PREFERENCE).query(...clauses); +}; From 41d796e2f8181a42f2d28653e6cd8168df70c6c9 Mon Sep 17 00:00:00 2001 From: Shaz MJ Date: Wed, 23 Mar 2022 08:43:59 +1100 Subject: [PATCH 2/5] Feedback --- app/components/channel_list/categories/body/index.ts | 8 +++++--- app/constants/preferences.ts | 2 +- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/app/components/channel_list/categories/body/index.ts b/app/components/channel_list/categories/body/index.ts index 3ca076ef4c..368a7f7f89 100644 --- a/app/components/channel_list/categories/body/index.ts +++ b/app/components/channel_list/categories/body/index.ts @@ -89,7 +89,9 @@ const mapPrefName = (prefs: PreferenceModel[]) => of$(prefs.map((p) => p.name)); const mapChannelIds = (channels: ChannelModel[]) => of$(channels.map((c) => c.id)); -const enhance = withObservables(['category'], ({category, locale, database, currentUserId}: {category: CategoryModel; locale: string; currentUserId: string} & WithDatabaseArgs) => { +type EnhanceProps = {category: CategoryModel; locale: string; currentUserId: string} & WithDatabaseArgs + +const enhance = withObservables(['category'], ({category, locale, database, currentUserId}: EnhanceProps) => { const observedCategory = category.observe(); const sortedIds = observedCategory.pipe( switchMap((c) => getSortedIds(database, c, locale)), @@ -112,7 +114,7 @@ const enhance = withObservables(['category'], ({category, locale, database, curr const hiddenGmIds = queryPreferencesByCategory(database, Preferences.CATEGORY_GROUP_CHANNEL_SHOW, undefined, 'false'). observe().pipe(switchMap(mapPrefName)); - let limit = of$(0); + let limit = of$(Preferences.CHANNEL_SIDEBAR_LIMIT_DMS_DEFAULT); if (category.type === 'direct_messages') { limit = queryPreferencesByCategory(database, Preferences.CATEGORY_SIDEBAR_SETTINGS, Preferences.CHANNEL_SIDEBAR_LIMIT_DMS). observe().pipe( @@ -122,7 +124,7 @@ const enhance = withObservables(['category'], ({category, locale, database, curr return of$(parseInt(val[0].value, 10)); } - return of$(0); + return of$(Preferences.CHANNEL_SIDEBAR_LIMIT_DMS_DEFAULT); }, ), ); diff --git a/app/constants/preferences.ts b/app/constants/preferences.ts index c76a1d17b4..ba419d49a3 100644 --- a/app/constants/preferences.ts +++ b/app/constants/preferences.ts @@ -11,7 +11,6 @@ const Preferences: Record = { CATEGORY_FAVORITE_CHANNEL: 'favorite_channel', CATEGORY_AUTO_RESET_MANUAL_STATUS: 'auto_reset_manual_status', CATEGORY_NOTIFICATIONS: 'notifications', - COMMENTS: 'comments', COMMENTS_ANY: 'any', COMMENTS_ROOT: 'root', @@ -37,6 +36,7 @@ const Preferences: Record = { CATEGORY_SIDEBAR_SETTINGS: 'sidebar_settings', CHANNEL_SIDEBAR_ORGANIZATION: 'channel_sidebar_organization', CHANNEL_SIDEBAR_LIMIT_DMS: 'limit_visible_dms_gms', + CHANNEL_SIDEBAR_LIMIT_DMS_DEFAULT: 20, AUTOCLOSE_DMS_ENABLED: 'after_seven_days', CATEGORY_ADVANCED_SETTINGS: 'advanced_settings', ADVANCED_FILTER_JOIN_LEAVE: 'join_leave', From 735e9a3925a1ff9fed0123a9dd05acc3ef90330e Mon Sep 17 00:00:00 2001 From: Shaz MJ Date: Wed, 23 Mar 2022 12:21:53 +1100 Subject: [PATCH 3/5] Adds mention badges to channel list items --- .../channel/__snapshots__/badge.test.tsx.snap | 38 ++++++++++++ .../categories/body/channel/badge.test.tsx | 20 ++++++ .../categories/body/channel/badge.tsx | 62 +++++++++++++++++++ .../body/channel/channel_list_item.tsx | 11 +++- 4 files changed, 130 insertions(+), 1 deletion(-) create mode 100644 app/components/channel_list/categories/body/channel/__snapshots__/badge.test.tsx.snap create mode 100644 app/components/channel_list/categories/body/channel/badge.test.tsx create mode 100644 app/components/channel_list/categories/body/channel/badge.tsx diff --git a/app/components/channel_list/categories/body/channel/__snapshots__/badge.test.tsx.snap b/app/components/channel_list/categories/body/channel/__snapshots__/badge.test.tsx.snap new file mode 100644 index 0000000000..b9aeb9ca71 --- /dev/null +++ b/app/components/channel_list/categories/body/channel/__snapshots__/badge.test.tsx.snap @@ -0,0 +1,38 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`components/channel_list/categories/body/channel/badge should match snapshot 1`] = ` + + + 10 + + +`; diff --git a/app/components/channel_list/categories/body/channel/badge.test.tsx b/app/components/channel_list/categories/body/channel/badge.test.tsx new file mode 100644 index 0000000000..0696f225e3 --- /dev/null +++ b/app/components/channel_list/categories/body/channel/badge.test.tsx @@ -0,0 +1,20 @@ +// 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 Badge from './badge'; + +describe('components/channel_list/categories/body/channel/badge', () => { + it('should match snapshot', () => { + const wrapper = renderWithIntlAndTheme( + , + ); + expect(wrapper.toJSON()).toMatchSnapshot(); + }); +}); diff --git a/app/components/channel_list/categories/body/channel/badge.tsx b/app/components/channel_list/categories/body/channel/badge.tsx new file mode 100644 index 0000000000..7a7270f38b --- /dev/null +++ b/app/components/channel_list/categories/body/channel/badge.tsx @@ -0,0 +1,62 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React, {useMemo} from 'react'; +import {Text, View} from 'react-native'; + +import {useTheme} from '@context/theme'; +import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme'; +import {typography} from '@utils/typography'; + +const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({ + badge: { + backgroundColor: theme.mentionBg, + borderRadius: 10, + height: 20, + marginTop: 5, + paddingHorizontal: 8, + alignItems: 'center', + justifyContent: 'center', + textAlignVertical: 'center', + }, + text: { + color: theme.mentionColor, + ...typography('Body', 75), + }, + mutedBadge: { + backgroundColor: changeOpacity(theme.mentionBg, 0.4), + }, + mutedText: { + color: changeOpacity(theme.mentionColor, 0.4), + }, +})); + +const Badge = ({count, muted}: {count: number; muted: boolean}) => { + const theme = useTheme(); + const styles = getStyleSheet(theme); + + const viewStyle = useMemo(() => [ + styles.badge, + muted && styles.mutedBadge, + ], [muted]); + + const textStyle = useMemo(() => [ + styles.text, + + muted && styles.mutedText, + ], [muted]); + + if (!count) { + return null; + } + + return ( + + + {`${count}`} + + + ); +}; + +export default Badge; diff --git a/app/components/channel_list/categories/body/channel/channel_list_item.tsx b/app/components/channel_list/categories/body/channel/channel_list_item.tsx index f364bd3ecd..475035688b 100644 --- a/app/components/channel_list/categories/body/channel/channel_list_item.tsx +++ b/app/components/channel_list/categories/body/channel/channel_list_item.tsx @@ -15,6 +15,8 @@ import {useTheme} from '@context/theme'; import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme'; import {typography} from '@utils/typography'; +import Badge from './badge'; + import type ChannelModel from '@typings/database/models/servers/channel'; import type MyChannelModel from '@typings/database/models/servers/my_channel'; @@ -65,7 +67,7 @@ const ChannelListItem = ({channel, isActive, isOwnDirectMessage, isMuted, myChan const serverUrl = useServerUrl(); // Make it brighter if it's not muted, and highlighted or has unreads - const bright = !isMuted && (myChannel.isUnread || myChannel.mentionsCount > 0); + const bright = !isMuted && (isActive || myChannel.isUnread || myChannel.mentionsCount > 0); const sharedValue = useSharedValue(collapsed && !bright); @@ -117,6 +119,7 @@ const ChannelListItem = ({channel, isActive, isOwnDirectMessage, isMuted, myChan shared={channel.shared} size={24} type={channel.type} + isMuted={isMuted} /> {displayName} + {myChannel.mentionsCount > 0 && + + } From ab45851e192f6de7377e4d7d821acf4df65d2292 Mon Sep 17 00:00:00 2001 From: Shaz MJ Date: Thu, 24 Mar 2022 08:19:43 +1100 Subject: [PATCH 4/5] Uses existing badge --- .../__snapshots__/category_body.test.tsx.snap | 6 +- .../categories/body/category_body.tsx | 2 +- .../channel/__snapshots__/badge.test.tsx.snap | 38 ------------ .../channel_list_item.test.tsx.snap | 6 +- .../categories/body/channel/badge.test.tsx | 20 ------ .../categories/body/channel/badge.tsx | 62 ------------------- .../body/channel/channel_list_item.tsx | 31 ++++++---- 7 files changed, 28 insertions(+), 137 deletions(-) delete mode 100644 app/components/channel_list/categories/body/channel/__snapshots__/badge.test.tsx.snap delete mode 100644 app/components/channel_list/categories/body/channel/badge.test.tsx delete mode 100644 app/components/channel_list/categories/body/channel/badge.tsx diff --git a/app/components/channel_list/categories/body/__snapshots__/category_body.test.tsx.snap b/app/components/channel_list/categories/body/__snapshots__/category_body.test.tsx.snap index f8bfadc087..7202ed8da9 100644 --- a/app/components/channel_list/categories/body/__snapshots__/category_body.test.tsx.snap +++ b/app/components/channel_list/categories/body/__snapshots__/category_body.test.tsx.snap @@ -13,6 +13,7 @@ Object { Object { "value": Object { "height": 40, + "marginVertical": 2, "opacity": 1, }, } @@ -21,6 +22,7 @@ Object { style={ Object { "height": 40, + "marginVertical": 2, "opacity": 1, } } @@ -46,10 +48,10 @@ Object { diff --git a/app/components/channel_list/categories/body/category_body.tsx b/app/components/channel_list/categories/body/category_body.tsx index c27f2ac00c..2961cf21fe 100644 --- a/app/components/channel_list/categories/body/category_body.tsx +++ b/app/components/channel_list/categories/body/category_body.tsx @@ -41,7 +41,7 @@ const CategoryBody = ({currentChannelId, sortedIds, category, hiddenChannelIds, collapsed={category.collapsed} /> ); - }, [currentChannelId]); + }, [currentChannelId, category.collapsed]); return ( - - 10 - - -`; diff --git a/app/components/channel_list/categories/body/channel/__snapshots__/channel_list_item.test.tsx.snap b/app/components/channel_list/categories/body/channel/__snapshots__/channel_list_item.test.tsx.snap index 9f969d3357..ddfdff33ae 100644 --- a/app/components/channel_list/categories/body/channel/__snapshots__/channel_list_item.test.tsx.snap +++ b/app/components/channel_list/categories/body/channel/__snapshots__/channel_list_item.test.tsx.snap @@ -6,6 +6,7 @@ exports[`components/channel_list/categories/body/channel/item should match snaps Object { "value": Object { "height": 40, + "marginVertical": 2, "opacity": 1, }, } @@ -14,6 +15,7 @@ exports[`components/channel_list/categories/body/channel/item should match snaps style={ Object { "height": 40, + "marginVertical": 2, "opacity": 1, } } @@ -39,10 +41,10 @@ exports[`components/channel_list/categories/body/channel/item should match snaps diff --git a/app/components/channel_list/categories/body/channel/badge.test.tsx b/app/components/channel_list/categories/body/channel/badge.test.tsx deleted file mode 100644 index 0696f225e3..0000000000 --- a/app/components/channel_list/categories/body/channel/badge.test.tsx +++ /dev/null @@ -1,20 +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 Badge from './badge'; - -describe('components/channel_list/categories/body/channel/badge', () => { - it('should match snapshot', () => { - const wrapper = renderWithIntlAndTheme( - , - ); - expect(wrapper.toJSON()).toMatchSnapshot(); - }); -}); diff --git a/app/components/channel_list/categories/body/channel/badge.tsx b/app/components/channel_list/categories/body/channel/badge.tsx deleted file mode 100644 index 7a7270f38b..0000000000 --- a/app/components/channel_list/categories/body/channel/badge.tsx +++ /dev/null @@ -1,62 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -import React, {useMemo} from 'react'; -import {Text, View} from 'react-native'; - -import {useTheme} from '@context/theme'; -import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme'; -import {typography} from '@utils/typography'; - -const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({ - badge: { - backgroundColor: theme.mentionBg, - borderRadius: 10, - height: 20, - marginTop: 5, - paddingHorizontal: 8, - alignItems: 'center', - justifyContent: 'center', - textAlignVertical: 'center', - }, - text: { - color: theme.mentionColor, - ...typography('Body', 75), - }, - mutedBadge: { - backgroundColor: changeOpacity(theme.mentionBg, 0.4), - }, - mutedText: { - color: changeOpacity(theme.mentionColor, 0.4), - }, -})); - -const Badge = ({count, muted}: {count: number; muted: boolean}) => { - const theme = useTheme(); - const styles = getStyleSheet(theme); - - const viewStyle = useMemo(() => [ - styles.badge, - muted && styles.mutedBadge, - ], [muted]); - - const textStyle = useMemo(() => [ - styles.text, - - muted && styles.mutedText, - ], [muted]); - - if (!count) { - return null; - } - - return ( - - - {`${count}`} - - - ); -}; - -export default Badge; diff --git a/app/components/channel_list/categories/body/channel/channel_list_item.tsx b/app/components/channel_list/categories/body/channel/channel_list_item.tsx index 475035688b..1e458be25e 100644 --- a/app/components/channel_list/categories/body/channel/channel_list_item.tsx +++ b/app/components/channel_list/categories/body/channel/channel_list_item.tsx @@ -8,6 +8,7 @@ import {TouchableOpacity} from 'react-native-gesture-handler'; import Animated, {Easing, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated'; import {switchToChannelById} from '@actions/remote/channel'; +import Badge from '@components/badge'; import ChannelIcon from '@components/channel_icon'; import {General} from '@constants'; import {useServerUrl} from '@context/server'; @@ -15,17 +16,15 @@ import {useTheme} from '@context/theme'; import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme'; import {typography} from '@utils/typography'; -import Badge from './badge'; - import type ChannelModel from '@typings/database/models/servers/channel'; import type MyChannelModel from '@typings/database/models/servers/my_channel'; const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({ container: { flexDirection: 'row', - marginBottom: 8, paddingLeft: 2, - paddingVertical: 4, + height: 40, + alignItems: 'center', }, icon: { fontSize: 24, @@ -44,6 +43,16 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({ muted: { color: changeOpacity(theme.sidebarText, 0.4), }, + badge: { + position: 'relative', + borderWidth: 0, + left: 0, + top: 0, + alignSelf: undefined, + }, + mutedBadge: { + opacity: 0.4, + }, })); const textStyle = StyleSheet.create({ @@ -77,6 +86,7 @@ const ChannelListItem = ({channel, isActive, isOwnDirectMessage, isMuted, myChan const animatedStyle = useAnimatedStyle(() => { return { + marginVertical: withTiming(sharedValue.value ? 0 : 2, {duration: 500}), height: withTiming(sharedValue.value ? 0 : 40, {duration: 500}), opacity: withTiming(sharedValue.value ? 0 : 1, {duration: 500, easing: Easing.inOut(Easing.exp)}), }; @@ -87,7 +97,6 @@ const ChannelListItem = ({channel, isActive, isOwnDirectMessage, isMuted, myChan if (channel.type === General.GM_CHANNEL) { return channel.displayName?.split(',').length; } - return 0; }, [channel.type, channel.displayName]); @@ -128,13 +137,11 @@ const ChannelListItem = ({channel, isActive, isOwnDirectMessage, isMuted, myChan > {displayName} - {myChannel.mentionsCount > 0 && - - } - + 0} + value={myChannel.mentionsCount} + style={[styles.badge, isMuted && styles.mutedBadge]} + /> From c0b265132abdcc7951e4be04c830902e384b44a3 Mon Sep 17 00:00:00 2001 From: Shaz MJ Date: Thu, 24 Mar 2022 08:29:35 +1100 Subject: [PATCH 5/5] Removes dupes --- app/queries/servers/channel.ts | 4 ---- app/queries/servers/preference.ts | 14 -------------- 2 files changed, 18 deletions(-) diff --git a/app/queries/servers/channel.ts b/app/queries/servers/channel.ts index 116afdf50c..4bce45aebc 100644 --- a/app/queries/servers/channel.ts +++ b/app/queries/servers/channel.ts @@ -307,7 +307,3 @@ export const queryMyChannelSettingsByIds = (database: Database, ids: string[]) = export const queryChannelsByNames = (database: Database, names: string[]) => { return database.get(CHANNEL).query(Q.where('name', Q.oneOf(names))); }; - -export const queryChannelsByNames = (database: Database, names: string[]) => { - return database.get(CHANNEL).query(Q.where('name', Q.oneOf(names))); -}; diff --git a/app/queries/servers/preference.ts b/app/queries/servers/preference.ts index c68657b37f..93aa39f414 100644 --- a/app/queries/servers/preference.ts +++ b/app/queries/servers/preference.ts @@ -68,17 +68,3 @@ export const deletePreferences = async (database: ServerDatabase, preferences: P return false; } }; - -export const queryPreferencesByCategory = (database: Database, category: string, name?: string, value?: string) => { - const clauses = [Q.where('category', category)]; - - if (typeof name === 'string') { - clauses.push(Q.where('name', name)); - } - - if (typeof value === 'string') { - clauses.push(Q.where('value', value)); - } - - return database.get(PREFERENCE).query(...clauses); -};