From 60ec958f6bf28d536b58e37eedce94885d90a8ab Mon Sep 17 00:00:00 2001
From: Michel Weststrate <mweststrate@fb.com>
Date: Thu, 26 Mar 2020 04:51:44 -0700
Subject: [PATCH] Add (manual) tests to be able to verify working of network
 and logs

Summary: Added some UI so that we can manually verify that logging and network inspection is working in RN + Flipper.

Reviewed By: jknoxville

Differential Revision: D20668428

fbshipit-source-id: 4271595583e055b2b0324b3da7ac216c39717093
---
 docs/features/react-native.md                 |  1 +
 react-native/ReactNativeFlipperExample/App.js | 29 ++++++++++++++++++-
 .../android/app/src/debug/AndroidManifest.xml |  1 +
 3 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/docs/features/react-native.md b/docs/features/react-native.md
index dacac28ad..c77612cad 100644
--- a/docs/features/react-native.md
+++ b/docs/features/react-native.md
@@ -28,6 +28,7 @@ Beyond the React Native specific Flipper plugins described above, with Flipper y
 
 * Device logs
 * Device crash reporter
+* Inspecting network requests
 * Inspecting app local databases
 * Inspecting device preferences
 * Inspecting cached images
diff --git a/react-native/ReactNativeFlipperExample/App.js b/react-native/ReactNativeFlipperExample/App.js
index 5f102edd5..ebbb3df21 100644
--- a/react-native/ReactNativeFlipperExample/App.js
+++ b/react-native/ReactNativeFlipperExample/App.js
@@ -8,7 +8,7 @@
  * @flow strict-local
  */
 
-import React from 'react';
+import React, {useState} from 'react';
 
 import {
   SafeAreaView,
@@ -17,6 +17,7 @@ import {
   View,
   Text,
   StatusBar,
+  Button,
 } from 'react-native';
 
 import {
@@ -29,7 +30,10 @@ import {
 
 import FlipperTicTacToe from './FlipperTicTacToe';
 
+const API = 'https://status.npmjs.org/';
+
 const App: () => React$Node = () => {
+  const [npmStatus, setNpmStatus] = useState('NPM status: unknown');
   return (
     <>
       <StatusBar barStyle="dark-content" />
@@ -47,6 +51,29 @@ const App: () => React$Node = () => {
             <View style={styles.sectionContainer}>
               <FlipperTicTacToe />
             </View>
+            <View style={styles.sectionContainer}>
+              <Text style={styles.sectionTitle}>Network & Logging</Text>
+              <Text style={styles.sectionDescription}>{npmStatus}</Text>
+              <Button
+                title="Is NPM up?"
+                onPress={() => {
+                  console.log('Making request to ' + API);
+                  fetch(API, {headers: {accept: 'application/json'}})
+                    .then(res => res.json())
+                    .then(data => {
+                      console.log(
+                        'Got status: ' + JSON.stringify(data, null, 2),
+                      );
+                      setNpmStatus(data.status.description);
+                    })
+                    .catch(e => {
+                      console.error('Failed to fetch status: ' + e);
+                      console.error(e);
+                      setNpmStatus('Error: ' + e);
+                    });
+                }}
+              />
+            </View>
             <View style={styles.sectionContainer}>
               <Text style={styles.sectionTitle}>Step One</Text>
               <Text style={styles.sectionDescription}>
diff --git a/react-native/ReactNativeFlipperExample/android/app/src/debug/AndroidManifest.xml b/react-native/ReactNativeFlipperExample/android/app/src/debug/AndroidManifest.xml
index fa26aa56e..97431ef62 100644
--- a/react-native/ReactNativeFlipperExample/android/app/src/debug/AndroidManifest.xml
+++ b/react-native/ReactNativeFlipperExample/android/app/src/debug/AndroidManifest.xml
@@ -3,6 +3,7 @@
     xmlns:tools="http://schemas.android.com/tools">
 
     <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
+    <uses-permission android:name="android.permission.INTERNET" />
 
     <application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" />
 </manifest>