Fix Activity Feed scroll

Author: youngkidwarrior

packages/app/features/activity/RecentActivity.tsx

@@ -1,4 +1,4 @@
-import { H4, Paragraph, Spinner, useMedia, XStack, YStack } from '@my/ui'
+import { Card, H4, Paragraph, Spinner, useMedia, XStack, YStack } from '@my/ui'
 import type { PostgrestError } from '@supabase/postgrest-js'
 import type { InfiniteData, UseInfiniteQueryResult } from '@tanstack/react-query'
 import { ActivityDetails } from 'app/features/activity/ActivityDetails'
@@ -26,14 +26,7 @@ export function RecentActivity() {
   }
 
   return (
-    <XStack
-      w={'100%'}
-      gap={'$5'}
-      f={1}
-      $gtLg={{
-        height: 0,
-      }}
-    >
+    <XStack w={'100%'} gap={'$5'} f={1}>
       <YStack
         f={1}
         display={selectedActivity && queryParams.activity ? 'none' : 'flex'}
@@ -49,6 +42,11 @@ export function RecentActivity() {
           activity={selectedActivity}
           onClose={handleCloseActivityDetails}
           w={'100%'}
+          $platform-web={{
+            height: 'fit-content',
+            position: 'sticky',
+            top: 10,
+          }}
           $gtLg={{
             maxWidth: '47%',
           }}
@@ -66,7 +64,6 @@ function ActivityFeed({
   onActivityPress: (activity: Activity) => void
 }) {
   const { isAtEnd } = useScrollDirection()
-  const media = useMedia()
 
   const {
     data,
@@ -78,10 +75,10 @@ function ActivityFeed({
   } = activityFeedQuery
 
   useEffect(() => {
-    if (isAtEnd && !media.gtLg && hasNextPage && !isFetchingNextPageActivities) {
+    if (isAtEnd && hasNextPage && !isFetchingNextPageActivities) {
       fetchNextPage()
     }
-  }, [isAtEnd, hasNextPage, fetchNextPage, isFetchingNextPageActivities, media.gtLg])
+  }, [isAtEnd, hasNextPage, fetchNextPage, isFetchingNextPageActivities])
 
   const sections = useMemo(() => {
     if (!data?.pages) return []
@@ -129,6 +126,7 @@ function ActivityFeed({
 
   return (
     <SectionList
+      style={{ flex: 1 }}
       sections={sections}
       testID={'RecentActivity'}
       showsVerticalScrollIndicator={false}
@@ -167,7 +165,6 @@ function ActivityFeed({
       renderSectionHeader={({ section: { title, index } }) => (
         <RowLabel first={index === 0}>{title}</RowLabel>
       )}
-      onEndReached={() => hasNextPage && media.gtLg && fetchNextPage()}
       ListFooterComponent={
         !isLoadingActivities && isFetchingNextPageActivities ? <Spinner size="small" /> : null
       }

packages/app/features/activity/utils/useActivityFeed.ts

@@ -34,6 +34,7 @@ export function useActivityFeed({
 > {
   const supabase = useSupabase()
   const addressBook = useAddressBook()
+  console.log(addressBook)
   const enabled = useMemo(() => addressBook.isError || addressBook.isSuccess, [addressBook])
   const queryKey = useMemo(
     () => ['activity_feed', { addressBook, supabase, pageSize }] as const,