Merge pull request #7113 from StoDevX/drew/api-tester-refactor

refactor api tester for better separation of concerns

Author: drewvolz

modules/navigation-buttons/index.ts

@@ -4,3 +4,4 @@ export {OpenSettingsButton} from './open-settings'
 export {FavoriteButton} from './favorite'
 export {DebugNoticeButton} from './debug'
 export {SearchButton} from './search'
+export {NetworkLoggerButton} from './network-logger'

modules/navigation-buttons/network-logger.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react'
+import {Platform, StyleSheet, Text} from 'react-native'
+import {Touchable} from '@frogpond/touchable'
+import {useNavigation, useTheme} from '@react-navigation/native'
+import {commonStyles, rightButtonStyles as styles} from './styles'
+
+export const buttonStyles = StyleSheet.create({
+	text: {
+		...Platform.select({
+			ios: {
+				fontWeight: '600',
+			},
+			android: {
+				fontWeight: '400',
+			},
+		}),
+	},
+})
+
+export const NetworkLoggerButton: React.FC = () => {
+	const navigation = useNavigation()
+	let {colors} = useTheme()
+
+	return (
+		<Touchable
+			highlight={false}
+			onPress={() => navigation.navigate('NetworkLogger')}
+			style={styles.button}
+		>
+			<Text
+				style={[commonStyles.text, buttonStyles.text, {color: colors.primary}]}
+			>
+				Log
+			</Text>
+		</Touchable>
+	)
+}

modules/use-debounce/index.ts

@@ -1,3 +1,4 @@
+import {debounce} from 'lodash'
 import {useState, useEffect} from 'react'
 
 export function useDebounce<T>(value: T, delay: number): T {
@@ -15,3 +16,12 @@ export function useDebounce<T>(value: T, delay: number): T {
 
 	return debouncedValue
 }
+
+export const debounceSearch = debounce(
+	(query: string, callback: () => void) => {
+		if (query.length >= 2) {
+			callback()
+		}
+	},
+	1500,
+)

modules/use-debounce/package.json

@@ -8,6 +8,9 @@
   "scripts": {
     "test": "jest"
   },
+  "dependencies": {
+    "lodash": "4.17.21"
+  },
   "peerDependencies": {
     "react": "^18.0.0"
   }

package-lock.json

@@ -294,6 +294,11 @@ const SettingsStackScreens = () => {
 					name="APITest"
 					options={settings.APITestNavigationOptions}
 				/>
+				<SettingsStack.Screen
+					component={settings.APITestDetailView}
+					name="APITestDetail"
+					options={settings.APITestDetailNavigationOptions}
+				/>
 				<SettingsStack.Screen
 					component={DevBonAppPickerView}
 					name="BonAppPicker"

source/navigation/routes.tsx

@@ -27,6 +27,7 @@ import {Printer, PrintJob} from '../lib/stoprint/types'
 import {JobType} from '../views/sis/student-work/types'
 import {CourseType} from '../lib/course-search/types'
 import {DirectoryItem, DirectorySearchTypeEnum} from '../views/directory/types'
+import {ServerRoute} from '../views/settings/screens/api-test/query'
 
 export type RootViewsParamList = {
 	Home: undefined
@@ -94,6 +95,7 @@ export type RootStackParamList = RootViewsParamList &
 
 export type SettingsStackParamList = {
 	APITest: undefined
+	APITestDetail: {query: ServerRoute}
 	BonAppPicker: undefined
 	Credits: undefined
 	[debug.NavigationKey]: {keyPath: string[]}

source/navigation/types.tsx

@@ -14,7 +14,12 @@ export {
 
 // Developer settings
 export {DebugRootView} from './screens/debug'
-export {APITestView, APITestNavigationOptions} from './screens/api-test'
+export {
+	APITestView,
+	APITestNavigationOptions,
+	APITestDetailView,
+	APITestDetailNavigationOptions,
+} from './screens/api-test'
 export {
 	NetworkLoggerView,
 	NavigationOptions as NetworkLoggerNavigationOptions,