feat(app): cursor based pagination

src/App.js

@@ -1,12 +1,10 @@
-/* eslint-disable */
 import { registerRootComponent } from 'expo';
-import NewRelic from 'newrelic-react-native-agent';
+import * as SplashScreen from 'expo-splash-screen';
+import newRelic from 'newrelic-react-native-agent';
 import { Platform } from 'react-native';
-import App from './src/App';
+import { version } from '../package.json';
+import App from './App';
 import 'expo-dev-client';
-import { version } from './package.json' assert { type: 'json' };
-import './src/polyfills';
-import * as SplashScreen from 'expo-splash-screen';
 
 // eslint-disable-next-line no-undef
 if (!__DEV__) {
@@ -38,22 +36,23 @@ if (!__DEV__) {
     loggingEnabled: true,
     // Optional:Specifies the log level. Omit this field for the default log level.
     // Options include: ERROR (least verbose), WARNING, INFO, VERBOSE, AUDIT (most verbose).
-    logLevel: NewRelic.LogLevel.INFO,
+    logLevel: newRelic.LogLevel.INFO,
     // iOS Specific
     // Optional:Enable/Disable automatic instrumentation of WebViews
     webViewInstrumentation: true,
   };
 
   agentConfiguration.loggingEnabled = true;
-  agentConfiguration.logLevel = NewRelic.LogLevel.VERBOSE;
+  agentConfiguration.logLevel = newRelic.LogLevel.VERBOSE;
 
-  NewRelic.startAgent(appToken, agentConfiguration);
-  NewRelic.setJSAppVersion(version);
+  newRelic.startAgent(appToken, agentConfiguration);
+  newRelic.setJSAppVersion(version);
 }
 
 SplashScreen.preventAutoHideAsync();
 
 function FoamApp() {
+  // eslint-disable-next-line react/jsx-filename-extension
   return <App hideSplashScreen={SplashScreen.hideAsync} />;
 }
 

src/App.tsx

@@ -109,11 +109,11 @@ export default function App(props: AppProps) {
 
   // otherwise, we're ready to render the app
   return (
-    <SafeAreaProvider initialMetrics={initialWindowMetrics}>
-      <ErrorBoundary
-        catchErrors={Config.catchErrors}
-        onReset={() => setRecoveredFromError(true)}
-      >
+    <ErrorBoundary
+      catchErrors={Config.catchErrors}
+      onReset={() => setRecoveredFromError(true)}
+    >
+      <SafeAreaProvider initialMetrics={initialWindowMetrics}>
         <QueryClientProvider client={queryClient}>
           <GestureHandlerRootView style={$bottomSheetContainer}>
             <BottomSheetModalProvider>
@@ -131,8 +131,8 @@ export default function App(props: AppProps) {
             </BottomSheetModalProvider>
           </GestureHandlerRootView>
         </QueryClientProvider>
-      </ErrorBoundary>
-    </SafeAreaProvider>
+      </SafeAreaProvider>
+    </ErrorBoundary>
   );
 }
 

src/components/ScrollToTop.tsx

@@ -0,0 +1,28 @@
+import { colors } from '@app/styles';
+import { TextStyle, TouchableOpacity, ViewStyle } from 'react-native';
+import { Text } from './ui/Text';
+
+interface Props {
+  onPress: () => void;
+}
+
+export default function ScrollToTop({ onPress }: Props) {
+  return (
+    <TouchableOpacity style={$topButton} onPress={onPress}>
+      <Text style={$topText}>TOP</Text>
+    </TouchableOpacity>
+  );
+}
+const $topButton: ViewStyle = {
+  position: 'absolute',
+  bottom: 20,
+  right: 20,
+  backgroundColor: 'rgba(0,0,0,0.5)',
+  borderRadius: 25,
+  padding: 10,
+};
+
+const $topText: TextStyle = {
+  color: colors.text,
+  fontWeight: 'bold',
+};

src/navigators/TopStackNavigator.tsx

@@ -1,12 +1,12 @@
-import CategoriesSecreen from '@app/screens/Top/Categories';
+import TopCategoriesScreen from '@app/screens/Top/Categories';
 import TopStreamsScreen from '@app/screens/Top/Streams';
 import TopScreen from '@app/screens/Top/TopScreen';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { StackScreenProps } from '@react-navigation/stack';
 
 export type TopStackParamList = {
   Top: undefined;
-  Categories: undefined;
+  TopCategories: undefined;
   TopStreams: undefined;
 };
 
@@ -19,7 +19,7 @@ export default function TopStackNavigator() {
   return (
     <Stack.Navigator initialRouteName="Top">
       <Stack.Screen name="Top" component={TopScreen} />
-      <Stack.Screen name="Categories" component={CategoriesSecreen} />
+      <Stack.Screen name="TopCategories" component={TopCategoriesScreen} />
       <Stack.Screen name="TopStreams" component={TopStreamsScreen} />
     </Stack.Navigator>
   );

src/navigators/navigationUtilities.ts

@@ -5,6 +5,7 @@ import {
   NavigationAction,
   createNavigationContainerRef,
 } from '@react-navigation/native';
+import newRelic from 'newrelic-react-native-agent';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { BackHandler, Platform } from 'react-native';
 import Config, { type PersistNavigationConfig } from '../config';
@@ -165,6 +166,9 @@ export function useNavigationPersistence(storage: any, persistenceKey: string) {
 
         // persist state to storage
         storage.save(persistenceKey, state);
+
+        // log to new relic
+        newRelic.onStateChange(state);
       }
     }
   };

src/queries/twitchQueries.ts

@@ -4,6 +4,7 @@ import twitchService, {
   Category,
   UserInfoResponse,
   SearchChannelResponse,
+  PaginatedList,
 } from '@app/services/twitchService';
 import { UseQueryOptions } from '@tanstack/react-query';
 
@@ -20,7 +21,7 @@ const twitchQueries = {
       queryFn: () => twitchService.getChannel(userId),
     };
   },
-  getTopCategories(): UseQueryOptions<Category[]> {
+  getTopCategories(): UseQueryOptions<PaginatedList<Category>> {
     return {
       queryKey: ['topCategories'],
       queryFn: () => twitchService.getTopCategories(),
@@ -56,7 +57,7 @@ const twitchQueries = {
       queryFn: () => twitchService.searchChannels(query),
     };
   },
-  getTopStreams(cursor?: string): UseQueryOptions<Stream[]> {
+  getTopStreams(cursor?: string): UseQueryOptions<PaginatedList<Stream>> {
     return {
       queryKey: ['topStreams', cursor],
       queryFn: () => twitchService.getTopStreams(cursor),
@@ -68,7 +69,10 @@ const twitchQueries = {
       queryFn: () => twitchService.getCategory(id),
     };
   },
-  getStreamsByCategory(id: string, cursor?: string): UseQueryOptions<Stream[]> {
+  getStreamsByCategory(
+    id: string,
+    cursor?: string,
+  ): UseQueryOptions<PaginatedList<Stream>> {
     return {
       queryKey: ['streamsByCategory', id, cursor],
       queryFn: () => twitchService.getStreamsByCategory(id, cursor),