acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

rm forward ref from profiles

Browse Source
This commit is contained in:
Samuel Newman
2025-08-29 11:16:47 +01:00
parent 0114cfcfe1
commit 9cf341fe46
6 changed files with 228 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/StarterPack/ProfileStarterPacks.tsx
+7 -16
View File
@@ -1,9 +1,4 @@
import React, {
useCallback,
useEffect,
useImperativeHandle,
useState,
} from 'react'
import {useCallback, useEffect, useImperativeHandle, useState} from 'react'
import {
findNodeHandle,
type ListRenderItemInfo,
@@ -42,6 +37,7 @@ interface SectionRef {
}
interface ProfileFeedgensProps {
ref?: React.Ref<SectionRef>
scrollElRef: ListRef
did: string
headerOffset: number
@@ -56,11 +52,8 @@ function keyExtractor(item: AppBskyGraphDefs.StarterPackView) {
return item.uri
}
export const ProfileStarterPacks = React.forwardRef<
SectionRef,
ProfileFeedgensProps
>(function ProfileFeedgensImpl(
{
export function ProfileStarterPacks({
ref,
scrollElRef,
did,
headerOffset,
@@ -69,9 +62,7 @@ export const ProfileStarterPacks = React.forwardRef<
testID,
setScrollViewTag,
isMe,
},
ref,
) {
}: ProfileFeedgensProps) {
const t = useTheme()
const bottomBarOffset = useBottomBarOffset(100)
const [isPTRing, setIsPTRing] = useState(false)
@@ -101,7 +92,7 @@ export const ProfileStarterPacks = React.forwardRef<
setIsPTRing(false)
}, [refetch, setIsPTRing])
const onEndReached = React.useCallback(async () => {
const onEndReached = useCallback(async () => {
if (isFetchingNextPage || !hasNextPage || isError) return
try {
await fetchNextPage()
@@ -158,7 +149,7 @@ export const ProfileStarterPacks = React.forwardRef<
/>
</View>
)
})
}
function CreateAnother() {
const {_} = useLingui()
src/screens/Profile/ErrorState.tsx
+1 -1
View File
@@ -4,7 +4,7 @@ import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {useNavigation} from '@react-navigation/native'
import {NavigationProp} from '#/lib/routes/types'
import {type NavigationProp} from '#/lib/routes/types'
import {atoms as a, useTheme} from '#/alf'
import {Button, ButtonText} from '#/components/Button'
import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
src/screens/Profile/Sections/Feed.tsx
+12 -16
View File
@@ -1,4 +1,4 @@
import React from 'react'
import {useCallback, useEffect, useImperativeHandle, useState} from 'react'
import {findNodeHandle, View} from 'react-native'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
@@ -18,6 +18,7 @@ import {Text} from '#/components/Typography'
import {type SectionRef} from './types'
interface FeedSectionProps {
ref?: React.Ref<SectionRef>
feed: FeedDescriptor
headerHeight: number
isFocused: boolean
@@ -25,31 +26,26 @@ interface FeedSectionProps {
ignoreFilterFor?: string
setScrollViewTag: (tag: number | null) => void
}
export const ProfileFeedSection = React.forwardRef<
SectionRef,
FeedSectionProps
>(function FeedSectionImpl(
{
export function ProfileFeedSection({
ref,
feed,
headerHeight,
isFocused,
scrollElRef,
ignoreFilterFor,
setScrollViewTag,
},
ref,
) {
}: FeedSectionProps) {
const {_} = useLingui()
const queryClient = useQueryClient()
const [hasNew, setHasNew] = React.useState(false)
const [isScrolledDown, setIsScrolledDown] = React.useState(false)
const [hasNew, setHasNew] = useState(false)
const [isScrolledDown, setIsScrolledDown] = useState(false)
const shouldUseAdjustedNumToRender = feed.endsWith('posts_and_author_threads')
const isVideoFeed = isNative && feed.endsWith('posts_with_video')
const adjustedInitialNumToRender = useInitialNumToRender({
screenHeightOffset: headerHeight,
})
const onScrollToTop = React.useCallback(() => {
const onScrollToTop = useCallback(() => {
scrollElRef.current?.scrollToOffset({
animated: isNative,
offset: -headerHeight,
@@ -58,15 +54,15 @@ export const ProfileFeedSection = React.forwardRef<
setHasNew(false)
}, [scrollElRef, headerHeight, queryClient, feed, setHasNew])
React.useImperativeHandle(ref, () => ({
useImperativeHandle(ref, () => ({
scrollToTop: onScrollToTop,
}))
const renderPostsEmpty = React.useCallback(() => {
const renderPostsEmpty = useCallback(() => {
return <EmptyState icon="growth" message={_(msg`No posts yet.`)} />
}, [_])
React.useEffect(() => {
useEffect(() => {
if (isIOS && isFocused && scrollElRef.current) {
const nativeTag = findNodeHandle(scrollElRef.current)
setScrollViewTag(nativeTag)
@@ -101,7 +97,7 @@ export const ProfileFeedSection = React.forwardRef<
)}
</View>
)
})
}
function ProfileEndOfFeed() {
const t = useTheme()
src/screens/Profile/Sections/Labels.tsx
+1
View File
@@ -33,6 +33,7 @@ interface LabelsSectionProps {
isFocused: boolean
setScrollViewTag: (tag: number | null) => void
}
export function ProfileLabelsSection({
ref,
isLabelerLoading,
src/view/com/feeds/ProfileFeedgens.tsx
+29 -19
View File
@@ -1,4 +1,10 @@
import React from 'react'
import {
useCallback,
useEffect,
useImperativeHandle,
useMemo,
useState,
} from 'react'
import {
findNodeHandle,
type ListRenderItemInfo,
@@ -34,6 +40,7 @@ interface SectionRef {
}
interface ProfileFeedgensProps {
ref?: React.Ref<SectionRef>
did: string
scrollElRef: ListRef
headerOffset: number
@@ -43,17 +50,20 @@ interface ProfileFeedgensProps {
setScrollViewTag: (tag: number | null) => void
}
export const ProfileFeedgens = React.forwardRef<
SectionRef,
ProfileFeedgensProps
>(function ProfileFeedgensImpl(
{did, scrollElRef, headerOffset, enabled, style, testID, setScrollViewTag},
export function ProfileFeedgens({
ref,
) {
did,
scrollElRef,
headerOffset,
enabled,
style,
testID,
setScrollViewTag,
}: ProfileFeedgensProps) {
const {_} = useLingui()
const t = useTheme()
const [isPTRing, setIsPTRing] = React.useState(false)
const opts = React.useMemo(() => ({enabled}), [enabled])
const [isPTRing, setIsPTRing] = useState(false)
const opts = useMemo(() => ({enabled}), [enabled])
const {
data,
isPending,
@@ -67,7 +77,7 @@ export const ProfileFeedgens = React.forwardRef<
const isEmpty = !isPending && !data?.pages[0]?.feeds.length
const {data: preferences} = usePreferencesQuery()
const items = React.useMemo(() => {
const items = useMemo(() => {
let items: any[] = []
if (isError && isEmpty) {
items = items.concat([ERROR_ITEM])
@@ -91,7 +101,7 @@ export const ProfileFeedgens = React.forwardRef<
const queryClient = useQueryClient()
const onScrollToTop = React.useCallback(() => {
const onScrollToTop = useCallback(() => {
scrollElRef.current?.scrollToOffset({
animated: isNative,
offset: -headerOffset,
@@ -99,11 +109,11 @@ export const ProfileFeedgens = React.forwardRef<
queryClient.invalidateQueries({queryKey: RQKEY(did)})
}, [scrollElRef, queryClient, headerOffset, did])
React.useImperativeHandle(ref, () => ({
useImperativeHandle(ref, () => ({
scrollToTop: onScrollToTop,
}))
const onRefresh = React.useCallback(async () => {
const onRefresh = useCallback(async () => {
setIsPTRing(true)
try {
await refetch()
@@ -113,7 +123,7 @@ export const ProfileFeedgens = React.forwardRef<
setIsPTRing(false)
}, [refetch, setIsPTRing])
const onEndReached = React.useCallback(async () => {
const onEndReached = useCallback(async () => {
if (isFetchingNextPage || !hasNextPage || isError) return
try {
@@ -123,14 +133,14 @@ export const ProfileFeedgens = React.forwardRef<
}
}, [isFetchingNextPage, hasNextPage, isError, fetchNextPage])
const onPressRetryLoadMore = React.useCallback(() => {
const onPressRetryLoadMore = useCallback(() => {
fetchNextPage()
}, [fetchNextPage])
// rendering
// =
const renderItem = React.useCallback(
const renderItem = useCallback(
({item, index}: ListRenderItemInfo<any>) => {
if (item === EMPTY) {
return (
@@ -174,14 +184,14 @@ export const ProfileFeedgens = React.forwardRef<
[_, t, error, refetch, onPressRetryLoadMore, preferences],
)
React.useEffect(() => {
useEffect(() => {
if (isIOS && enabled && scrollElRef.current) {
const nativeTag = findNodeHandle(scrollElRef.current)
setScrollViewTag(nativeTag)
}
}, [enabled, scrollElRef, setScrollViewTag])
const ProfileFeedgensFooter = React.useCallback(() => {
const ProfileFeedgensFooter = useCallback(() => {
if (isEmpty) return null
return (
<ListFooter
@@ -220,7 +230,7 @@ export const ProfileFeedgens = React.forwardRef<
/>
</View>
)
})
}
function keyExtractor(item: any) {
return item._reactKey || item.uri
src/view/com/lists/ProfileLists.tsx
+30 -22
View File
@@ -1,4 +1,10 @@
import React from 'react'
import {
useCallback,
useEffect,
useImperativeHandle,
useMemo,
useState,
} from 'react'
import {
findNodeHandle,
type ListRenderItemInfo,
@@ -33,6 +39,7 @@ interface SectionRef {
}
interface ProfileListsProps {
ref?: React.Ref<SectionRef>
did: string
scrollElRef: ListRef
headerOffset: number
@@ -42,15 +49,20 @@ interface ProfileListsProps {
setScrollViewTag: (tag: number | null) => void
}
export const ProfileLists = React.forwardRef<SectionRef, ProfileListsProps>(
function ProfileListsImpl(
{did, scrollElRef, headerOffset, enabled, style, testID, setScrollViewTag},
export function ProfileLists({
ref,
) {
did,
scrollElRef,
headerOffset,
enabled,
style,
testID,
setScrollViewTag,
}: ProfileListsProps) {
const t = useTheme()
const {_} = useLingui()
const [isPTRing, setIsPTRing] = React.useState(false)
const opts = React.useMemo(() => ({enabled}), [enabled])
const [isPTRing, setIsPTRing] = useState(false)
const opts = useMemo(() => ({enabled}), [enabled])
const {
data,
isPending,
@@ -63,7 +75,7 @@ export const ProfileLists = React.forwardRef<SectionRef, ProfileListsProps>(
} = useProfileListsQuery(did, opts)
const isEmpty = !isPending && !data?.pages[0]?.lists.length
const items = React.useMemo(() => {
const items = useMemo(() => {
let items: any[] = []
if (isError && isEmpty) {
items = items.concat([ERROR_ITEM])
@@ -88,7 +100,7 @@ export const ProfileLists = React.forwardRef<SectionRef, ProfileListsProps>(
const queryClient = useQueryClient()
const onScrollToTop = React.useCallback(() => {
const onScrollToTop = useCallback(() => {
scrollElRef.current?.scrollToOffset({
animated: isNative,
offset: -headerOffset,
@@ -96,11 +108,11 @@ export const ProfileLists = React.forwardRef<SectionRef, ProfileListsProps>(
queryClient.invalidateQueries({queryKey: RQKEY(did)})
}, [scrollElRef, queryClient, headerOffset, did])
React.useImperativeHandle(ref, () => ({
useImperativeHandle(ref, () => ({
scrollToTop: onScrollToTop,
}))
const onRefresh = React.useCallback(async () => {
const onRefresh = useCallback(async () => {
setIsPTRing(true)
try {
await refetch()
@@ -110,7 +122,7 @@ export const ProfileLists = React.forwardRef<SectionRef, ProfileListsProps>(
setIsPTRing(false)
}, [refetch, setIsPTRing])
const onEndReached = React.useCallback(async () => {
const onEndReached = useCallback(async () => {
if (isFetchingNextPage || !hasNextPage || isError) return
try {
await fetchNextPage()
@@ -119,14 +131,14 @@ export const ProfileLists = React.forwardRef<SectionRef, ProfileListsProps>(
}
}, [isFetchingNextPage, hasNextPage, isError, fetchNextPage])
const onPressRetryLoadMore = React.useCallback(() => {
const onPressRetryLoadMore = useCallback(() => {
fetchNextPage()
}, [fetchNextPage])
// rendering
// =
const renderItemInner = React.useCallback(
const renderItemInner = useCallback(
({item, index}: ListRenderItemInfo<any>) => {
if (item === EMPTY) {
return (
@@ -138,10 +150,7 @@ export const ProfileLists = React.forwardRef<SectionRef, ProfileListsProps>(
)
} else if (item === ERROR_ITEM) {
return (
<ErrorMessage
message={cleanError(error)}
onPressTryAgain={refetch}
/>
<ErrorMessage message={cleanError(error)} onPressTryAgain={refetch} />
)
} else if (item === LOAD_MORE_ERROR_ITEM) {
return (
@@ -170,14 +179,14 @@ export const ProfileLists = React.forwardRef<SectionRef, ProfileListsProps>(
[error, refetch, onPressRetryLoadMore, _, t.atoms.border_contrast_low],
)
React.useEffect(() => {
useEffect(() => {
if (isIOS && enabled && scrollElRef.current) {
const nativeTag = findNodeHandle(scrollElRef.current)
setScrollViewTag(nativeTag)
}
}, [enabled, scrollElRef, setScrollViewTag])
const ProfileListsFooter = React.useCallback(() => {
const ProfileListsFooter = useCallback(() => {
if (isEmpty) return null
return (
<ListFooter
@@ -216,8 +225,7 @@ export const ProfileLists = React.forwardRef<SectionRef, ProfileListsProps>(
/>
</View>
)
},
)
}
function keyExtractor(item: any) {
return item._reactKey || item.uri