feat: Add share buttons to share part or full requests, including cURL

Closes #2

README.md

@@ -17,6 +17,8 @@ An alternative to Wormholy but for both iOS and Android and with zero native dep
 - View network requests made with in app viewer
 - Debug network requests on release builds
 - Individually view headers sent, received and body sent and received
+- Copy or share headers, body or full request
+- Share cURL representation of request
 - Zero native or JavaScript dependencies
 - Built in TypeScript definitions
 

src/Header.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  Share,
+  Image,
+} from 'react-native';
+import { useThemedStyles, Theme } from './theme';
+
+interface Props {
+  children: string;
+  shareContent?: string;
+}
+
+const Header: React.FC<Props> = ({ children, shareContent }) => {
+  const styles = useThemedStyles(themedStyles);
+  return (
+    <View style={styles.container}>
+      <Text style={styles.header}>{children}</Text>
+
+      {shareContent && (
+        <TouchableOpacity
+          onPress={() => {
+            Share.share({ message: shareContent });
+          }}
+        >
+          <Image
+            source={require('./share.png')}
+            resizeMode="contain"
+            style={styles.shareIcon}
+          />
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};
+
+const themedStyles = (theme: Theme) =>
+  StyleSheet.create({
+    header: {
+      fontWeight: 'bold',
+      fontSize: 20,
+      marginTop: 10,
+      marginBottom: 5,
+      marginHorizontal: 10,
+      color: theme.colors.text,
+    },
+    shareIcon: { width: 24, height: 24, marginRight: 10 },
+    container: {
+      justifyContent: 'space-between',
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+  });
+
+export default Header;

src/RequestDetails.tsx

@@ -2,24 +2,22 @@ import React, { useState, useEffect } from 'react';
 import {
   View,
   Text,
+  Button,
   StyleSheet,
   TouchableOpacity,
   ScrollView,
+  Share,
 } from 'react-native';
 import ResultItem from './ResultItem';
 import type NetworkRequestInfo from './NetworkRequestInfo';
 import { useThemedStyles, Theme } from './theme';
+import Header from './Header';
 
 interface Props {
   request: NetworkRequestInfo;
   onClose(): void;
 }
 
-const Header = ({ children }: { children: string }) => {
-  const styles = useThemedStyles(themedStyles);
-  return <Text style={styles.header}>{children}</Text>;
-};
-
 const Headers = ({
   title = 'Headers',
   headers,
@@ -30,7 +28,9 @@ const Headers = ({
   const styles = useThemedStyles(themedStyles);
   return (
     <View>
-      <Header>{title}</Header>
+      <Header shareContent={headers && JSON.stringify(headers, null, 2)}>
+        {title}
+      </Header>
       <View style={styles.content}>
         {Object.entries(headers || {}).map(([name, value]) => (
           <View style={styles.headerContainer} key={name}>
@@ -54,16 +54,52 @@ const RequestDetails: React.FC<Props> = ({ request, onClose }) => {
     })();
   }, [request]);
 
+  const requestBody = request.getRequestBody();
+
+  const getFullRequest = () => {
+    const processedRequest = {
+      ...request,
+      response: JSON.parse(responseBody),
+      duration: request.duration,
+    };
+    return JSON.stringify(processedRequest, null, 2);
+  };
+
+  const getCurlRequest = () => {
+    // TODO - currently wont work for every request
+    let parsedHeaders =
+      request.requestHeaders &&
+      Object.entries(request.requestHeaders)
+        .map(([key, value]) => `"${key}: ${value}"`)
+        .join('-H ');
+    if (parsedHeaders) {
+      parsedHeaders = `-H ${parsedHeaders}`;
+    }
+
+    return `curl -X${request.method.toUpperCase()} ${parsedHeaders} '${
+      request.url
+    }'`;
+  };
+
   return (
     <View style={styles.container}>
       <ResultItem request={request} style={styles.info} />
       <ScrollView style={styles.scrollView}>
         <Headers title="Request Headers" headers={request.requestHeaders} />
         <Headers title="Response Headers" headers={request.responseHeaders} />
-        <Header>Request Body</Header>
-        <Text style={styles.content}>{request.getRequestBody()}</Text>
-        <Header>Response Body</Header>
+        <Header shareContent={requestBody}>Request Body</Header>
+        <Text style={styles.content}>{requestBody}</Text>
+        <Header shareContent={responseBody}>Response Body</Header>
         <Text style={styles.content}>{responseBody}</Text>
+        <Header>More</Header>
+        <Button
+          title="Share full request"
+          onPress={() => Share.share({ message: getFullRequest() })}
+        />
+        <Button
+          title="Share as cURL"
+          onPress={() => Share.share({ message: getCurlRequest() })}
+        />
       </ScrollView>
       <TouchableOpacity onPress={() => onClose()} style={styles.close}>
         <Text style={styles.closeTitle}>Close</Text>
@@ -95,26 +131,13 @@ const themedStyles = (theme: Theme) =>
     scrollView: {
       width: '100%',
     },
-    header: {
-      fontWeight: 'bold',
-      fontSize: 20,
-      marginTop: 10,
-      marginBottom: 5,
-      marginHorizontal: 10,
-      color: theme.colors.text,
-    },
     headerContainer: { flexDirection: 'row', flexWrap: 'wrap' },
     headerKey: { fontWeight: 'bold', color: theme.colors.text },
     headerValue: { color: theme.colors.text },
     text: {
       fontSize: 16,
       color: theme.colors.text,
     },
-    horizontal: {
-      flexDirection: 'row',
-      alignSelf: 'flex-start',
-      flex: 1,
-    },
     content: {
       backgroundColor: theme.colors.card,
       padding: 10,