toki/mattermost-mobile
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Show unread channels when category is collapsed (#6245)

Browse source 
* Show unread channels when category is collapsed

* tweak

* Replace channels with unread channels
This commit is contained in:
Elias Nahum 2022-05-06 17:56:00 -04:00 committed by GitHub
parent 10f7f008e4
commit 2aa73968b8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
app/screens/home/channel_list/categories_list/categories/body/category_body.tsx
View file

@ -17,11 +17,12 @@ type Props = {
category: CategoryModel;
limit: number;
onChannelSwitch: (channelId: string) => void;
unreadChannels: ChannelModel[];
};
const extractKey = (item: ChannelModel) => item.id;
const CategoryBody = ({sortedChannels, category, hiddenChannelIds, limit, onChannelSwitch}: Props) => {
const CategoryBody = ({sortedChannels, category, hiddenChannelIds, limit, onChannelSwitch, unreadChannels}: Props) => {
const ids = useMemo(() => {
let filteredChannels = sortedChannels;
@ -43,6 +44,7 @@ const CategoryBody = ({sortedChannels, category, hiddenChannelIds, limit, onChan
testID={`category.${category.displayName.replace(/ /g, '_').toLocaleLowerCase()}.channel_list_item`}
onPress={onChannelSwitch}
isCategoryMuted={category.muted}
key={item.id}
/>
);
}, [onChannelSwitch]);
@ -54,20 +56,21 @@ const CategoryBody = ({sortedChannels, category, hiddenChannelIds, limit, onChan
}, [category.collapsed]);
const height = ids.length ? ids.length * 40 : 0;
const unreadHeight = unreadChannels.length ? unreadChannels.length * 40 : 0;
const animatedStyle = useAnimatedStyle(() => {
const opacity = unreadHeight > 0 ? 1 : 0;
const heightDuration = unreadHeight > 0 ? 200 : 300;
return {
height: withTiming(sharedValue.value ? 1 : height, {duration: 300}),
opacity: withTiming(sharedValue.value ? 0 : 1, {duration: sharedValue.value ? 200 : 300, easing: Easing.inOut(Easing.exp)}),
height: withTiming(sharedValue.value ? unreadHeight : height, {duration: heightDuration}),
opacity: withTiming(sharedValue.value ? opacity : 1, {duration: sharedValue.value ? 200 : 300, easing: Easing.inOut(Easing.exp)}),
};
}, [height]);
}, [height, unreadHeight]);
return (
<Animated.View
style={animatedStyle}
>
<Animated.View style={animatedStyle}>
<FlatList
data={ids}
data={category.collapsed ? unreadChannels : ids}
renderItem={renderItem}
keyExtractor={extractKey}

20
app/screens/home/channel_list/categories_list/categories/body/index.ts
View file

@ -155,12 +155,10 @@ const enhance = withObservables(['category', 'isTablet', 'locale'], ({category,
const notifyProps = observeAllMyChannelNotifyProps(database);
const lastUnreadId = isTablet ? observeLastUnreadChannelId(database) : of$(undefined);
const unreadChannelIds = category.myChannels.observeWithColumns(['mentions_count', 'is_unread']).pipe(
combineLatestWith(unreadsOnTop, notifyProps, lastUnreadId),
map(([my, unreadTop, settings, lastUnread]) => {
if (!unreadTop) {
return new Set();
}
const unreadChannels = category.myChannels.observeWithColumns(['mentions_count', 'is_unread']);
const filterUnreads = unreadChannels.pipe(
combineLatestWith(notifyProps, lastUnreadId),
map(([my, settings, lastUnread]) => {
return my.reduce<Set<string>>((set, m) => {
const isMuted = settings[m.id]?.mark_unread === 'mention';
if ((isMuted && m.mentionsCount) || (!isMuted && m.isUnread) || m.id === lastUnread) {
@ -173,9 +171,9 @@ const enhance = withObservables(['category', 'isTablet', 'locale'], ({category,
const currentChannelId = observeCurrentChannelId(database);
const filtered = sortedChannels.pipe(
combineLatestWith(currentChannelId, unreadChannelIds),
map(([channels, ccId, unreadIds]) => {
return channels.filter((c) => c && ((c.deleteAt > 0 && c.id === ccId) || !c.deleteAt) && !unreadIds.has(c.id));
combineLatestWith(currentChannelId, filterUnreads, unreadsOnTop),
map(([channels, ccId, unreadIds, unreadTop]) => {
return channels.filter((c) => c && ((c.deleteAt > 0 && c.id === ccId) || !c.deleteAt) && (unreadTop ? !unreadIds.has(c.id) : true));
}),
);
@ -184,6 +182,10 @@ const enhance = withObservables(['category', 'isTablet', 'locale'], ({category,
hiddenChannelIds,
sortedChannels: filtered,
category: observedCategory,
unreadChannels: sortedChannels.pipe(
combineLatestWith(filterUnreads, unreadsOnTop),
map(([sorted, unreadIds, unreadsTop]) => (unreadsTop ? [] : sorted.filter((c) => c && unreadIds.has(c.id)))),
),
};
});