From 2aa73968b831ba34e92a3bab25577e0a8f3d2da3 Mon Sep 17 00:00:00 2001
From: Elias Nahum <nahumhbl@gmail.com>
Date: Fri, 6 May 2022 17:56:00 -0400
Subject: [PATCH] Show unread channels when category is collapsed (#6245)

* Show unread channels when category is collapsed

* tweak

* Replace channels with unread channels
---
 .../categories/body/category_body.tsx         | 19 ++++++++++--------
 .../categories_list/categories/body/index.ts  | 20 ++++++++++---------
 2 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/app/screens/home/channel_list/categories_list/categories/body/category_body.tsx b/app/screens/home/channel_list/categories_list/categories/body/category_body.tsx
index 014daa745..932d8afb5 100644
--- a/app/screens/home/channel_list/categories_list/categories/body/category_body.tsx
+++ b/app/screens/home/channel_list/categories_list/categories/body/category_body.tsx
@@ -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}
 
diff --git a/app/screens/home/channel_list/categories_list/categories/body/index.ts b/app/screens/home/channel_list/categories_list/categories/body/index.ts
index 0186cab2b..c402f7d89 100644
--- a/app/screens/home/channel_list/categories_list/categories/body/index.ts
+++ b/app/screens/home/channel_list/categories_list/categories/body/index.ts
@@ -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)))),
+        ),
     };
 });