rm forward ref from profiles

src/components/StarterPack/ProfileStarterPacks.tsx

@@ -1,9 +1,4 @@
-import React, {
+import {useCallback, useEffect, useImperativeHandle, useState} from 'react'
-  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<
+export function ProfileStarterPacks({
-  SectionRef,
+  ref,
-  ProfileFeedgensProps
->(function ProfileFeedgensImpl(
-  {
   scrollElRef,
   did,
   headerOffset,
@@ -69,9 +62,7 @@ export const ProfileStarterPacks = React.forwardRef<
   testID,
   setScrollViewTag,
   isMe,
-  },
+}: ProfileFeedgensProps) {
-  ref,
-) {
   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

@@ -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

@@ -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<
+export function ProfileFeedSection({
-  SectionRef,
+  ref,
-  FeedSectionProps
->(function FeedSectionImpl(
-  {
   feed,
   headerHeight,
   isFocused,
   scrollElRef,
   ignoreFilterFor,
   setScrollViewTag,
-  },
+}: FeedSectionProps) {
-  ref,
-) {
   const {_} = useLingui()
   const queryClient = useQueryClient()
-  const [hasNew, setHasNew] = React.useState(false)
+  const [hasNew, setHasNew] = useState(false)
-  const [isScrolledDown, setIsScrolledDown] = React.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

@@ -33,6 +33,7 @@ interface LabelsSectionProps {
   isFocused: boolean
   setScrollViewTag: (tag: number | null) => void
 }
+
 export function ProfileLabelsSection({
   ref,
   isLabelerLoading,

src/view/com/feeds/ProfileFeedgens.tsx

@@ -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<
+export function ProfileFeedgens({
-  SectionRef,
-  ProfileFeedgensProps
->(function ProfileFeedgensImpl(
-  {did, scrollElRef, headerOffset, enabled, style, testID, setScrollViewTag},
   ref,
-) {
+  did,
+  scrollElRef,
+  headerOffset,
+  enabled,
+  style,
+  testID,
+  setScrollViewTag,
+}: ProfileFeedgensProps) {
   const {_} = useLingui()
   const t = useTheme()
-  const [isPTRing, setIsPTRing] = React.useState(false)
+  const [isPTRing, setIsPTRing] = useState(false)
-  const opts = React.useMemo(() => ({enabled}), [enabled])
+  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

@@ -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>(
+export function ProfileLists({
-  function ProfileListsImpl(
-    {did, scrollElRef, headerOffset, enabled, style, testID, setScrollViewTag},
   ref,
-  ) {
+  did,
+  scrollElRef,
+  headerOffset,
+  enabled,
+  style,
+  testID,
+  setScrollViewTag,
+}: ProfileListsProps) {
   const t = useTheme()
   const {_} = useLingui()
-    const [isPTRing, setIsPTRing] = React.useState(false)
+  const [isPTRing, setIsPTRing] = useState(false)
-    const opts = React.useMemo(() => ({enabled}), [enabled])
+  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
+          <ErrorMessage message={cleanError(error)} onPressTryAgain={refetch} />
-              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