[Gekidou] unreads category section (#6170)

* exclude archived channels from unreads section

* Fix Observer for unreads on top

* Include Unreads section in the same Categories FlatList to fix scrolling
This commit is contained in:
Elias Nahum 2022-04-12 18:33:55 -04:00 committed by GitHub
parent 9feb3446a8
commit f09ab7c90a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 35 additions and 24 deletions

View file

@ -27,15 +27,26 @@ const styles = StyleSheet.create({
},
});
const extractKey = (item: CategoryModel) => item.id;
const extractKey = (item: CategoryModel) => (Array.isArray(item) ? 'UNREADS' : item.id);
const Categories = ({categories, currentChannelId, currentUserId, currentTeamId, unreadChannels}: Props) => {
const intl = useIntl();
const listRef = useRef<FlatList>(null);
const unreadChannelIds = useMemo(() => new Set(unreadChannels.map((myC) => myC.id)), [unreadChannels]);
const categoriesToDisplay: Array<CategoryModel|string[]> = useMemo(() => {
if (unreadChannelIds.size) {
return [Array.from(unreadChannelIds), ...categories];
}
return categories;
}, [categories, unreadChannelIds]);
const renderCategory = useCallback((data: {item: CategoryModel | string[]}) => {
if (Array.isArray(data.item)) {
return <UnreadCategories unreadChannels={unreadChannels}/>;
}
const renderCategory = useCallback((data: {item: CategoryModel}) => {
return (
<>
<CategoryHeader category={data.item}/>
@ -48,7 +59,7 @@ const Categories = ({categories, currentChannelId, currentUserId, currentTeamId,
/>
</>
);
}, [categories, currentChannelId, intl.locale]);
}, [categories, currentChannelId, intl.locale, unreadChannels]);
useEffect(() => {
listRef.current?.scrollToOffset({animated: false, offset: 0});
@ -62,23 +73,20 @@ const Categories = ({categories, currentChannelId, currentUserId, currentTeamId,
}
return (
<>
{unreadChannels.length > 0 && <UnreadCategories unreadChannels={unreadChannels}/>}
<FlatList
data={categories}
ref={listRef}
renderItem={renderCategory}
style={styles.mainList}
showsHorizontalScrollIndicator={false}
showsVerticalScrollIndicator={false}
keyExtractor={extractKey}
removeClippedSubviews={true}
initialNumToRender={5}
windowSize={15}
updateCellsBatchingPeriod={10}
maxToRenderPerBatch={5}
/>
</>
<FlatList
data={categoriesToDisplay}
ref={listRef}
renderItem={renderCategory}
style={styles.mainList}
showsHorizontalScrollIndicator={false}
showsVerticalScrollIndicator={false}
keyExtractor={extractKey}
removeClippedSubviews={true}
initialNumToRender={5}
windowSize={15}
updateCellsBatchingPeriod={10}
maxToRenderPerBatch={5}
/>
);
};

View file

@ -29,7 +29,7 @@ const enhanced = withObservables(
const categories = queryCategoriesByTeamIds(database, [currentTeamId]).observeWithColumns(['sort_order']);
const unreadsOnTop = queryPreferencesByCategoryAndName(database, Preferences.CATEGORY_SIDEBAR_SETTINGS, Preferences.CHANNEL_SIDEBAR_GROUP_UNREADS).
observe().
observeWithColumns(['value']).
pipe(
switchMap((prefs: PreferenceModel[]) => of$(getPreferenceAsBool(prefs, Preferences.CATEGORY_SIDEBAR_SETTINGS, Preferences.CHANNEL_SIDEBAR_GROUP_UNREADS, false))),
);

View file

@ -377,9 +377,12 @@ export const queryMyChannelUnreads = (database: Database, currentTeamId: string)
return database.get<MyChannelModel>(MY_CHANNEL).query(
Q.on(
CHANNEL,
Q.or(
Q.where('team_id', Q.eq(currentTeamId)),
Q.where('team_id', Q.eq('')),
Q.and(
Q.or(
Q.where('team_id', Q.eq(currentTeamId)),
Q.where('team_id', Q.eq('')),
),
Q.where('delete_at', Q.eq(0)),
),
),
Q.where('is_unread', Q.eq(true)),