From fef16e060f3931ed3e731ce228cfb14510a934a2 Mon Sep 17 00:00:00 2001 From: Paul Frazee Date: Thu, 6 Jun 2024 12:10:50 -0700 Subject: [PATCH 1/6] Fix notifications pagination on web (#4400) * Fix notifications pagination on web * Preserve larger threshold on native --- src/view/com/notifications/Feed.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/view/com/notifications/Feed.tsx b/src/view/com/notifications/Feed.tsx index e2f12e84f1..90f2785b21 100644 --- a/src/view/com/notifications/Feed.tsx +++ b/src/view/com/notifications/Feed.tsx @@ -25,6 +25,7 @@ import {LoadMoreRetryBtn} from '#/view/com/util/LoadMoreRetryBtn' import {CenteredView} from '#/view/com/util/Views' import {FeedItem} from './FeedItem' import hairlineWidth = StyleSheet.hairlineWidth +import {isWeb} from '#/platform/detection' const EMPTY_FEED_ITEM = {_reactKey: '__empty__'} const LOAD_MORE_ERROR_ITEM = {_reactKey: '__load_more_error__'} @@ -182,7 +183,15 @@ export function Feed({ refreshing={isPTRing} onRefresh={onRefresh} onEndReached={onEndReached} - onEndReachedThreshold={2} + onEndReachedThreshold={ + /* + NOTE: + web's intersection observer struggles with the 2x threshold + and leads to missed pagination, so we keep it <1 + -prf + */ + isWeb ? 0.6 : 2 + } onScrolledDownChange={onScrolledDownChange} contentContainerStyle={s.contentContainer} // @ts-ignore our .web version only -prf From 885ad2c7564ea81e35f00d2d1b04ecbbe3aca6ec Mon Sep 17 00:00:00 2001 From: Hailey Date: Thu, 6 Jun 2024 12:15:36 -0700 Subject: [PATCH 2/6] disable keyboard controller in the composer screen (#4399) * disable keyboard controller in the composer screen * add comment * oops * destructure * rename to keyboard context for clarity * move destructure * cleanup --- src/view/com/composer/Composer.tsx | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx index 862e36625f..5807488393 100644 --- a/src/view/com/composer/Composer.tsx +++ b/src/view/com/composer/Composer.tsx @@ -17,6 +17,7 @@ import { import { KeyboardAvoidingView, KeyboardStickyView, + useKeyboardContext, } from 'react-native-keyboard-controller' import Animated, { interpolateColor, @@ -129,6 +130,17 @@ export const ComposePost = observer(function ComposePost({ const {closeAllDialogs} = useDialogStateControlContext() const t = useTheme() + // Disable this in the composer to prevent any extra keyboard height being applied. + // See https://github.com/bluesky-social/social-app/pull/4399 + const {setEnabled} = useKeyboardContext() + React.useEffect(() => { + setEnabled(false) + + return () => { + setEnabled(true) + } + }, [setEnabled]) + const [isKeyboardVisible] = useIsKeyboardVisible({iosUseWillEvents: true}) const [isProcessing, setIsProcessing] = useState(false) const [processingState, setProcessingState] = useState('') From bd1e6fced9f27b48b2d122bbaf7fb53861beaea5 Mon Sep 17 00:00:00 2001 From: Paul Frazee Date: Thu, 6 Jun 2024 12:18:08 -0700 Subject: [PATCH 3/6] 1.85.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 6182cc9568..4c38a24c42 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "bsky.app", - "version": "1.85.0", + "version": "1.85.1", "private": true, "engines": { "node": ">=18" From 5b976972f57122bb75d3321e66c1ea08304ebc28 Mon Sep 17 00:00:00 2001 From: Hailey Date: Thu, 6 Jun 2024 15:59:38 -0700 Subject: [PATCH 4/6] add support for `ListEmptyComponent`, allow `undefined` data --- src/view/com/util/List.web.tsx | 41 ++++++++++++++++++++++------------ 1 file changed, 27 insertions(+), 14 deletions(-) diff --git a/src/view/com/util/List.web.tsx b/src/view/com/util/List.web.tsx index 6b0c17762c..da286845bf 100644 --- a/src/view/com/util/List.web.tsx +++ b/src/view/com/util/List.web.tsx @@ -38,6 +38,7 @@ function ListImpl( { ListHeaderComponent, ListFooterComponent, + ListEmptyComponent, containWeb, contentContainerStyle, data, @@ -92,6 +93,16 @@ function ListImpl( } } + let emptyComponent: JSX.Element | null = null + if (ListEmptyComponent != null) { + if (isValidElement(ListEmptyComponent)) { + emptyComponent = ListEmptyComponent + } else { + // @ts-ignore Nah it's fine. + emptyComponent = + } + } + if (headerOffset != null) { style = addStyle(style, { paddingTop: headerOffset, @@ -331,20 +342,22 @@ function ListImpl( /> )} {header} - {(data as Array).map((item, index) => { - const key = keyExtractor!(item, index) - return ( - - key={key} - item={item} - index={index} - renderItem={renderItem} - extraData={extraData} - onItemSeen={onItemSeen} - disableContentVisibility={disableContentVisibility} - /> - ) - })} + {!data || data.length === 0 + ? emptyComponent + : (data as Array)?.map((item, index) => { + const key = keyExtractor!(item, index) + return ( + + key={key} + item={item} + index={index} + renderItem={renderItem} + extraData={extraData} + onItemSeen={onItemSeen} + disableContentVisibility={disableContentVisibility} + /> + ) + })} {onEndReached && ( Date: Thu, 6 Jun 2024 16:14:34 -0700 Subject: [PATCH 5/6] change `header` and `footer` to be in line with `emptyComponent` --- src/view/com/util/List.web.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/view/com/util/List.web.tsx b/src/view/com/util/List.web.tsx index da286845bf..018ca0065b 100644 --- a/src/view/com/util/List.web.tsx +++ b/src/view/com/util/List.web.tsx @@ -73,23 +73,23 @@ function ListImpl( ) } - let header: JSX.Element | null = null + let headerComponent: JSX.Element | null = null if (ListHeaderComponent != null) { if (isValidElement(ListHeaderComponent)) { - header = ListHeaderComponent + headerComponent = ListHeaderComponent } else { // @ts-ignore Nah it's fine. - header = + headerComponent = } } - let footer: JSX.Element | null = null + let footerComponent: JSX.Element | null = null if (ListFooterComponent != null) { if (isValidElement(ListFooterComponent)) { - footer = ListFooterComponent + footerComponent = ListFooterComponent } else { // @ts-ignore Nah it's fine. - footer = + footerComponent = } } @@ -341,7 +341,7 @@ function ListImpl( topMargin={(onStartReachedThreshold ?? 0) * 100 + '%'} /> )} - {header} + {headerComponent} {!data || data.length === 0 ? emptyComponent : (data as Array)?.map((item, index) => { @@ -365,7 +365,7 @@ function ListImpl( bottomMargin={(onEndReachedThreshold ?? 0) * 100 + '%'} /> )} - {footer} + {footerComponent} ) From a19bfe5c8a2c706742517a6d2ac04ca93088e440 Mon Sep 17 00:00:00 2001 From: Hailey Date: Thu, 6 Jun 2024 16:16:41 -0700 Subject: [PATCH 6/6] don't render `onEndReached` or `onStartReached` `Visibility` if empty --- src/view/com/util/List.web.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/view/com/util/List.web.tsx b/src/view/com/util/List.web.tsx index 018ca0065b..e917ab1d32 100644 --- a/src/view/com/util/List.web.tsx +++ b/src/view/com/util/List.web.tsx @@ -73,6 +73,8 @@ function ListImpl( ) } + const isEmpty = !data || data.length === 0 + let headerComponent: JSX.Element | null = null if (ListHeaderComponent != null) { if (isValidElement(ListHeaderComponent)) { @@ -334,7 +336,7 @@ function ListImpl( onVisibleChange={handleAboveTheFoldVisibleChange} style={[styles.aboveTheFoldDetector, {height: headerOffset}]} /> - {onStartReached && ( + {onStartReached && !isEmpty && ( ( /> )} {headerComponent} - {!data || data.length === 0 + {isEmpty ? emptyComponent : (data as Array)?.map((item, index) => { const key = keyExtractor!(item, index) @@ -358,7 +360,7 @@ function ListImpl( /> ) })} - {onEndReached && ( + {onEndReached && !isEmpty && (