[TERMINAL] Cache locations for offline mode pairing (#663)

* [TERMINAL] Cache locations for offline mode pairing

* remove console.log, fix linting

dev-app/src/AppContext.ts

@@ -15,4 +15,6 @@ export const AppContext = React.createContext<IAppContext>({
   setLastSuccessfulPaymentIntentId: (_id) => null,
   autoReconnectOnUnexpectedDisconnect: false,
   setAutoReconnectOnUnexpectedDisconnect: (_b) => null,
+  cachedLocations: [],
+  setCachedLocations: (_locations) => null,
 });

dev-app/src/Root.tsx

@@ -1,6 +1,9 @@
 import React, { useState, useCallback, useEffect } from 'react';
 
-import { StripeTerminalProvider } from '@stripe/stripe-terminal-react-native';
+import {
+  StripeTerminalProvider,
+  Location,
+} from '@stripe/stripe-terminal-react-native';
 import App from './App';
 import { AppContext, api } from './AppContext';
 import type { IAccount } from './types';
@@ -23,6 +26,8 @@ export default function Root() {
     setAutoReconnectOnUnexpectedDisconnect,
   ] = useState<boolean | false>(false);
 
+  const [cachedLocations, setCachedLocations] = useState<Location[]>([]);
+
   useEffect(() => {
     // var is a string in CI
     if (process.env.IS_CI === 'true') {
@@ -94,6 +99,8 @@ export default function Root() {
         autoReconnectOnUnexpectedDisconnect,
         setAutoReconnectOnUnexpectedDisconnect: (b) =>
           setAutoReconnectOnUnexpectedDisconnect(b),
+        cachedLocations,
+        setCachedLocations: (locations) => setCachedLocations(locations),
       }}
     >
       <StripeTerminalProvider

dev-app/src/screens/LocationListScreen.tsx

@@ -1,5 +1,5 @@
 import { RouteProp, useNavigation, useRoute } from '@react-navigation/core';
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import {
   ActivityIndicator,
   FlatList,
@@ -15,8 +15,11 @@ import { colors } from '../colors';
 import ListItem from '../components/ListItem';
 
 import type { RouteParamList } from '../App';
+import { AppContext } from '../AppContext';
 
 export default function LocationListScreen() {
+  const { cachedLocations, setCachedLocations } = useContext(AppContext);
+
   const navigation = useNavigation();
   const { params } = useRoute<RouteProp<RouteParamList, 'LocationList'>>();
 
@@ -36,10 +39,13 @@ export default function LocationListScreen() {
       const { locations } = await getLocations({ limit: 20 });
       if (locations) {
         setList(locations);
+        setCachedLocations(locations);
+      } else {
+        setList(cachedLocations);
       }
     }
     init();
-  }, [getLocations]);
+  }, [getLocations, setCachedLocations, cachedLocations]);
 
   const renderItem = (item: Location) => (
     <ListItem

dev-app/src/types.ts

@@ -1,5 +1,6 @@
 import type { Stripe } from 'stripe';
 import type { Api as IApi } from './api/api';
+import type { Location } from '@stripe/stripe-terminal-react-native';
 
 export type IAccount = Stripe.Account & { secretKey: string };
 
@@ -17,6 +18,8 @@ export type IAppContext = {
   setLastSuccessfulPaymentIntentId: (id: string) => void;
   autoReconnectOnUnexpectedDisconnect: boolean | false;
   setAutoReconnectOnUnexpectedDisconnect: (b: boolean) => void;
+  cachedLocations: Array<Location>;
+  setCachedLocations: (locations: Array<Location>) => void;
 };
 
 export type IShortAccount = {