Adding queue throttle to example app

rgommezz · Feb 3, 2019 · f94c471 · f94c471
1 parent 9f155c5
commit f94c471
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 14 deletions.
diff --git a/example/components/ConnectionToggler.js b/example/components/ConnectionToggler.js
@@ -6,7 +6,7 @@ function ConnectionToggler() {
   return (
     <DummyNetworkContext.Consumer>
       {({ toggleConnection }) => (
-        <View style={{ marginBottom: 30 }}>
+        <View style={{ marginBottom: 20 }}>
           <Button
             onPress={toggleConnection}
             title="Toggle Internet connection"

diff --git a/example/components/OfflineQueue.js b/example/components/OfflineQueue.js
@@ -2,10 +2,10 @@ import React from 'react';
 import { View, StyleSheet, Text, ScrollView } from 'react-native';
 import { connect } from 'react-redux';
 
-function OfflineQueue({ queue }) {
+function OfflineQueue({ queue, title }) {
   return (
     <View style={{ height: 90, marginVertical: 8 }}>
-      <Text style={styles.title}>Offline Queue (FIFO)</Text>
+      <Text style={styles.title}>{title}</Text>
       <ScrollView
         style={{ flex: 1 }}
         contentContainerStyle={styles.queue}

diff --git a/example/package.json b/example/package.json
@@ -15,7 +15,7 @@
     "expo": "^32.0.0",
     "react": "16.5.0",
     "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
-    "react-native-offline": "^4.2.0",
+    "react-native-offline": "4.3.0",
     "react-navigation": "^3.0.9",
     "redux": "^4.0.1",
     "redux-saga": "0.16.2"

diff --git a/example/redux/createStore.js b/example/redux/createStore.js
@@ -7,10 +7,14 @@ import createSagaMiddleware from 'redux-saga';
 import counter from './reducer';
 import rootSaga from './sagas';
 
-export default function createReduxStore({ withSaga = false } = {}) {
+export default function createReduxStore({
+  withSaga = false,
+  queueReleaseThrottle = 1000,
+} = {}) {
   const networkMiddleware = createNetworkMiddleware({
     regexActionType: /^OTHER/,
     actionTypes: ['ADD_ONE', 'SUB_ONE'],
+    queueReleaseThrottle,
   });
 
   const sagaMiddleware = createSagaMiddleware();

diff --git a/example/screens/ReduxScreen.js b/example/screens/ReduxScreen.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Platform, View, StyleSheet, Image } from 'react-native';
+import { Platform, View, StyleSheet, Image, Text } from "react-native";
 import { ReduxNetworkProvider } from 'react-native-offline';
 import { Provider } from 'react-redux';
 
@@ -11,7 +11,7 @@ import Counter from '../components/Counter';
 import OfflineQueue from '../components/OfflineQueue';
 import ActionButtons from '../components/ActionButtons';
 
-const store = createStore();
+const store = createStore({ queueReleaseThrottle: 1000 });
 
 export default class ReduxScreen extends React.Component {
   static navigationOptions = {
@@ -42,7 +42,7 @@ export default class ReduxScreen extends React.Component {
                 <View style={styles.secondSection}>
                   <ActionButtons />
                   <View style={styles.offlineQueue}>
-                    <OfflineQueue />
+                    <OfflineQueue title="Offline Queue (FIFO), throttle = 1s" />
                   </View>
                 </View>
               </View>

diff --git a/example/screens/SagasScreen.js b/example/screens/SagasScreen.js
@@ -7,7 +7,7 @@ import ActionButtons from '../components/ActionButtons';
 import OfflineQueue from '../components/OfflineQueue';
 import createStore from '../redux/createStore';
 
-const store = createStore({ withSaga: true });
+const store = createStore({ withSaga: true, queueReleaseThrottle: 250 });
 
 export default class SettingsScreen extends React.Component {
   static navigationOptions = {
@@ -42,7 +42,7 @@ export default class SettingsScreen extends React.Component {
           <View style={styles.secondSection}>
             <ActionButtons />
             <View style={styles.offlineQueue}>
-              <OfflineQueue />
+              <OfflineQueue title="Offline Queue (FIFO), throttle = 250ms" />
             </View>
           </View>
         </View>

diff --git a/example/yarn.lock b/example/yarn.lock
@@ -5592,10 +5592,10 @@ react-native-maps@expo/react-native-maps#v0.22.1-exp.0:
   version "0.22.1"
   resolved "https://codeload.github.com/expo/react-native-maps/tar.gz/e6f98ff7272e5d0a7fe974a41f28593af2d77bb2"
 
-react-native-offline@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/react-native-offline/-/react-native-offline-4.2.0.tgz#baf2337a8126b93e1b9241c6b328bbe1c26a19c0"
-  integrity sha512-gFEs5oDEcSeUybnGQ/MlOI3Q9K8rH+cXcMWbyAoLDYnY8K6MCRXwOwfhFuTfKaRrcfMsywjTLcYetfNMMVN1ng==
+react-native-offline@4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/react-native-offline/-/react-native-offline-4.3.0.tgz#6877e4a4b961e230e0a198bce2d0611ca8af9d89"
+  integrity sha512-hM+rNGHKpmagseFuhnok/c7uCrMqs70fHRzaqGBCKnTsio6ff3/wb7jomsuRjsR1Iy+DwBws+VUovcfpQAtuBQ==
   dependencies:
     lodash "^4.17.11"
     react-redux "^6.0.0"