Add PTR

src/screens/Subscriptions/index.tsx

@@ -1,12 +1,12 @@
 import React from 'react'
-import {TextStyle, View} from 'react-native'
+import {RefreshControl,TextStyle, View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {NativeStackScreenProps} from '@react-navigation/native-stack'
 
 import {CommonNavigatorParams} from '#/lib/routes/types'
 import {isAndroid, isIOS, isWeb} from '#/platform/detection'
-import {PurchasesState, usePurchases} from '#/state/purchases'
+import {PurchasesState, usePurchases, usePurchasesApi} from '#/state/purchases'
 import {useManageSubscription} from '#/state/purchases/hooks/useManageSubscription'
 import {useNativeUserState} from '#/state/purchases/hooks/useNativeUserState'
 import {
@@ -48,13 +48,26 @@ export type ScreenProps = NativeStackScreenProps<
 export function Subscriptions(_props: ScreenProps) {
   const {_} = useLingui()
   const purchases = usePurchases()
+  const {refetch} = usePurchasesApi()
   const {loading, restricted} = useNativeUserState()
+  const [refreshing, setRefreshing] = React.useState(false)
+  const onRefresh = async () => {
+    setRefreshing(true)
+    try {
+      await refetch()
+    } finally {
+      setRefreshing(false)
+    }
+  }
 
   return (
     <Layout.Screen>
       <Layout.Header title={_(msg`Subscriptions`)} />
 
-      <Layout.Content>
+      <Layout.Content
+        refreshControl={
+          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+        }>
         <CenteredView style={[a.util_screen_outer]}>
           <View style={[a.px_xl, a.py_xl]}>
             {purchases.status === 'loading' || loading ? (

src/state/purchases/context.tsx

@@ -12,12 +12,21 @@ export type PurchasesState =
     }
   | {
       status: 'ready'
+      refetching: boolean
       email?: string
       subscriptions: APISubscription[]
       entitlements: APIEntitlement[]
       config: {}
     }
 
-export const Context = React.createContext<PurchasesState>({
+export type PurchasesApi = {
+  refetch: () => Promise<void>
+}
+
+export const StateContext = React.createContext<PurchasesState>({
   status: 'loading',
 })
+
+export const ApiContext = React.createContext<PurchasesApi>({
+  refetch: async () => {},
+})

src/state/purchases/index.tsx

@@ -1,6 +1,11 @@
 import React from 'react'
 
-import {Context, PurchasesState} from '#/state/purchases/context'
+import {
+  ApiContext,
+  PurchasesApi,
+  PurchasesState,
+  StateContext,
+} from '#/state/purchases/context'
 import {useNativeEventsListener} from '#/state/purchases/hooks/useNativeEventsListener'
 import {usePurchasesState} from '#/state/purchases/hooks/usePurchasesState'
 
@@ -11,6 +16,7 @@ export function Provider({children}: {children: React.ReactNode}) {
     data: purchases,
     error: purchasesStateError,
     refetch,
+    isRefetching,
   } = usePurchasesState()
   const ctx = React.useMemo<PurchasesState>(() => {
     if (purchasesStateError) {
@@ -25,13 +31,22 @@ export function Provider({children}: {children: React.ReactNode}) {
     } else {
       return {
         status: 'ready',
+        refetching: isRefetching,
         email: purchases?.email,
         subscriptions: purchases?.subscriptions ?? [],
         entitlements: purchases?.entitlements ?? [],
         config: {},
       }
     }
-  }, [purchases, purchasesStateError])
+  }, [purchases, purchasesStateError, isRefetching])
+
+  const apiCtx = React.useMemo<PurchasesApi>(() => {
+    return {
+      refetch: async () => {
+        await refetch()
+      },
+    }
+  }, [refetch])
 
   useNativeEventsListener({
     onCustomerInfoUpdated() {
@@ -39,9 +54,17 @@ export function Provider({children}: {children: React.ReactNode}) {
     },
   })
 
-  return <Context.Provider value={ctx}>{children}</Context.Provider>
+  return (
+    <ApiContext.Provider value={apiCtx}>
+      <StateContext.Provider value={ctx}>{children}</StateContext.Provider>
+    </ApiContext.Provider>
+  )
 }
 
 export function usePurchases() {
-  return React.useContext(Context)
+  return React.useContext(StateContext)
+}
+
+export function usePurchasesApi() {
+  return React.useContext(ApiContext)
 }