From e255e1a423143c4bd4f3e37656a56ba2ecbbf3e2 Mon Sep 17 00:00:00 2001 From: Piotr Trocki Date: Mon, 14 Aug 2023 11:13:00 +0200 Subject: [PATCH] add example --- .../js/examples/Fetch/FetchExample.js | 141 ++++++++++++++++++ .../js/utils/RNTesterList.android.js | 5 + .../rn-tester/js/utils/RNTesterList.ios.js | 5 + packages/rn-tester/package.json | 1 + yarn.lock | 2 +- 5 files changed, 153 insertions(+), 1 deletion(-) create mode 100644 packages/rn-tester/js/examples/Fetch/FetchExample.js diff --git a/packages/rn-tester/js/examples/Fetch/FetchExample.js b/packages/rn-tester/js/examples/Fetch/FetchExample.js new file mode 100644 index 00000000000000..4c744475c4c0c1 --- /dev/null +++ b/packages/rn-tester/js/examples/Fetch/FetchExample.js @@ -0,0 +1,141 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @format + * @flow + */ + +import * as React from 'react'; +import type {RNTesterModule} from '../../types/RNTesterTypes'; +import { + StyleSheet, + Text, + Pressable, + View, + ActivityIndicator, +} from 'react-native'; +import axios from 'axios'; + +const REMOTE_TIMEOUT = 6000; +const LOCAL_TIMEOUT = 3000; +const URL = `https://httpstat.us/200?sleep=${REMOTE_TIMEOUT}`; + +type NetworkProvider = 'axios' | 'fetch'; + +const getNetworkProvider = (provider: NetworkProvider) => { + switch (provider) { + case 'fetch': + return fetch(URL); + case 'axios': + return axios.get(URL, { + timeout: LOCAL_TIMEOUT, + }); + } + throw new Error(`null provider for ${provider}`); +}; + +type Props = { + provider: NetworkProvider, +}; + +const NetworkCallWithTimeout = ({provider}: Props) => { + const [isLoading, setLoading] = React.useState(false); + const [seconds, setSeconds] = React.useState(0); + const onPress = React.useCallback(() => { + setLoading(true); + const timerId = setInterval(() => { + setSeconds(prev => prev + 1); + }, 1000); + getNetworkProvider(provider) + .then(response => { + console.log('Responded with data'); + console.log(JSON.stringify(response, null, 2)); + }) + .catch(error => { + if (error.code === 'ECONNABORTED') { + console.log('Request timed out'); + } + console.error(error); + }) + .finally(() => { + setLoading(false); + clearInterval(timerId); + setSeconds(0); + }); + }, [provider]); + + return ( + + + + {`${isLoading ? 'loading' : 'Tap to make an API call'}`} + + + {isLoading ? : null} + {seconds ? ( + + {`${ + seconds * 1000 > LOCAL_TIMEOUT + ? `❌ TIMEOUT DOES NOT WORK ${seconds}` + : seconds + }`} + + ) : null} + + ); +}; + +const styles = StyleSheet.create({ + wrapper: { + borderRadius: 5, + marginBottom: 5, + }, + button: { + backgroundColor: '#eeeeee', + padding: 10, + }, + logContainer: { + paddingVertical: 8, + paddingHorizontal: 5, + }, + bold: { + fontWeight: 'bold', + }, + promptValue: { + marginBottom: 10, + }, +}); + +export const examples = [ + { + title: 'Fetch with timeout', + description: '', + render(): React.Node { + return ; + }, + }, + + { + title: 'Axios with timeout', + description: '', + render(): React.Node { + return ; + }, + }, +]; + +export default ({ + framework: 'React', + title: 'Fetch', + category: 'UI', + documentationURL: 'https://reactnative.dev/docs/', + description: '', + examples, +}: RNTesterModule); diff --git a/packages/rn-tester/js/utils/RNTesterList.android.js b/packages/rn-tester/js/utils/RNTesterList.android.js index d702ef779ede31..f3afc5b303d4bc 100644 --- a/packages/rn-tester/js/utils/RNTesterList.android.js +++ b/packages/rn-tester/js/utils/RNTesterList.android.js @@ -153,6 +153,11 @@ const APIs: Array = ([ category: 'UI', module: require('../examples/Alert/AlertExample').default, }, + { + key: 'FetchExample', + category: 'UI', + module: require('../examples/Fetch/FetchExample').default, + }, { key: 'AnimatedIndex', category: 'UI', diff --git a/packages/rn-tester/js/utils/RNTesterList.ios.js b/packages/rn-tester/js/utils/RNTesterList.ios.js index ed8ca43be2f221..857319248ec7a8 100644 --- a/packages/rn-tester/js/utils/RNTesterList.ios.js +++ b/packages/rn-tester/js/utils/RNTesterList.ios.js @@ -163,6 +163,11 @@ const APIs: Array = ([ module: require('../examples/Alert/AlertExample').default, category: 'UI', }, + { + key: 'FetchExample', + category: 'UI', + module: require('../examples/Fetch/FetchExample').default, + }, { key: 'AnimatedIndex', module: require('../examples/Animated/AnimatedIndex').default, diff --git a/packages/rn-tester/package.json b/packages/rn-tester/package.json index 2adbba48dd380c..09c78f355dc184 100644 --- a/packages/rn-tester/package.json +++ b/packages/rn-tester/package.json @@ -23,6 +23,7 @@ "clean-ios": "rm -rf build/generated/ios Pods Podfile.lock" }, "dependencies": { + "axios": "^1.4.0", "flow-enums-runtime": "^0.0.6", "invariant": "^2.2.4", "nullthrows": "^1.1.1" diff --git a/yarn.lock b/yarn.lock index f97611334f0014..4b1bb9fe71c2d1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4053,7 +4053,7 @@ axe-core@^4.4.2: resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.4.2.tgz#dcf7fb6dea866166c3eab33d68208afe4d5f670c" integrity sha512-LVAaGp/wkkgYJcjmHsoKx4juT1aQvJyPcW09MLCjVTh3V2cc6PnyempiLMNH5iMdfIX/zdbjUx2KDjMLCTdPeA== -axios@1.4.0, axios@^1.x: +axios@1.4.0, axios@^1.4.0, axios@^1.x: version "1.4.0" resolved "https://registry.yarnpkg.com/axios/-/axios-1.4.0.tgz#38a7bf1224cd308de271146038b551d725f0be1f" integrity sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==