fix: Limit request length before scrolling for long requests (#108)

* Update dependencies

* Limit request length before scrolling

* Revert "Update dependencies"

This reverts commit 869f3aa.

* Fit lint

Author: alexbrazier

.prettierrc

@@ -1,3 +1,7 @@
 {
-  "singleQuote": true
+  "quoteProps": "consistent",
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "useTabs": false
 }

example/src/App.tsx

@@ -22,7 +22,9 @@ export default function App() {
   formData.append('test', 'hello');
   const makeRequest = () => {
     fetch(
-      'https://postman-echo.com/post?query=some really long query that goes onto multiple lines so we can test what happens',
+      `https://postman-echo.com/post?query=${'some really long query that goes onto multiple lines so we can test what happens'.repeat(
+        5
+      )}`,
       {
         method: 'POST',
         body: JSON.stringify({ test: 'hello' }),

package.json

@@ -38,7 +38,8 @@
   "scripts": {
     "test": "jest",
     "typescript": "tsc --noEmit",
-    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "lint": "yarn eslint && yarn prettier",
+    "eslint": "eslint \"**/*.{js,ts,tsx}\"",
     "prettier": "prettier --check '{,example/}src/**/*.{js,json,ts,tsx}' '{*,example/*}.{js,ts,tsx}'",
     "prepare": "bob build",
     "release": "release-it",
@@ -55,7 +56,6 @@
     "@types/react-native": "^0.72.0",
     "eslint": "^8.41.0",
     "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-prettier": "^4.2.1",
     "husky": "^8.0.3",
     "jest": "^29.5.0",
     "prettier": "^2.8.8",
@@ -109,19 +109,7 @@
     "extends": [
       "@react-native-community",
       "prettier"
-    ],
-    "rules": {
-      "prettier/prettier": [
-        "error",
-        {
-          "quoteProps": "consistent",
-          "singleQuote": true,
-          "tabWidth": 2,
-          "trailingComma": "es5",
-          "useTabs": false
-        }
-      ]
-    }
+    ]
   },
   "eslintIgnore": [
     "node_modules/",

src/components/RequestList.tsx

@@ -56,6 +56,7 @@ const RequestList: React.FC<Props> = ({
             request={item}
             onPress={() => onPressItem(item.id)}
             compact={compact}
+            list
           />
         )}
       />

src/components/ResultItem.tsx

@@ -1,5 +1,11 @@
 import React from 'react';
-import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';
+import {
+  View,
+  TouchableOpacity,
+  Text,
+  StyleSheet,
+  ScrollView,
+} from 'react-native';
 import { Theme, useThemedStyles, useTheme } from '../theme';
 import { backHandlerSet } from '../backHandler';
 import { NetworkRequestInfoRow } from '../types';
@@ -9,9 +15,16 @@ interface Props {
   onPress?(): void;
   style?: any;
   compact?: boolean;
+  list?: boolean;
 }
 
-const ResultItem: React.FC<Props> = ({ style, request, onPress, compact }) => {
+const ResultItem: React.FC<Props> = ({
+  style,
+  request,
+  onPress,
+  compact,
+  list,
+}) => {
   const styles = useThemedStyles(themedStyles);
   const theme = useTheme();
   const onDetailsPage = !onPress;
@@ -59,6 +72,8 @@ const ResultItem: React.FC<Props> = ({ style, request, onPress, compact }) => {
 
   const gqlOperation = request.gqlOperation;
 
+  const UrlContainer = list ? View : ScrollView;
+
   return (
     <MaybeTouchable
       style={[styles.container, style]}
@@ -93,8 +108,9 @@ const ResultItem: React.FC<Props> = ({ style, request, onPress, compact }) => {
           )}
         </View>
       </View>
-      <View style={[styles.content]}>
+      <UrlContainer style={[styles.content]}>
         <Text
+          numberOfLines={list ? 5 : undefined}
           style={[
             styles.text,
             getUrlTextColor(request.status),
@@ -110,7 +126,7 @@ const ResultItem: React.FC<Props> = ({ style, request, onPress, compact }) => {
             </Text>
           </View>
         )}
-      </View>
+      </UrlContainer>
     </MaybeTouchable>
   );
 };
@@ -156,6 +172,7 @@ const themedStyles = (theme: Theme) =>
       paddingRight: 5,
       flexShrink: 1,
       flex: 1,
+      maxHeight: 250,
     },
     method: {
       fontSize: 18,

yarn.lock

@@ -2919,9 +2919,9 @@ camelcase@^7.0.1:
   integrity sha512-xlx1yCK2Oc1APsPXDL2LdlNP6+uu8OCDdhOBSVT279M/S+y75O30C2VuD8T2ogdePBBl7PfPF4504tnLgX3zfw==
 
 caniuse-lite@^1.0.30001449:
-  version "1.0.30001488"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001488.tgz#d19d7b6e913afae3e98f023db97c19e9ddc5e91f"
-  integrity sha512-NORIQuuL4xGpIy6iCCQGN4iFjlBXtfKWIenlUuyZJumLRIindLb7wXM+GO8erEhb7vXfcnf4BAg2PrSDN5TNLQ==
+  version "1.0.30001663"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001663.tgz"
+  integrity sha512-o9C3X27GLKbLeTYZ6HBOLU1tsAcBZsLis28wrVzddShCS16RujjHp9GDHKZqrB3meE0YjhawvMFsGb/igqiPzA==
 
 chalk@5.3.0, chalk@^5.3.0:
   version "5.3.0"