Merge pull request #6983 from StoDevX/drew/course-search-icon

Add course search icon to navigation header

Author: drewvolz

modules/navigation-buttons/index.ts

@@ -3,3 +3,4 @@ export {CloseScreenButton} from './close-screen'
 export {OpenSettingsButton} from './open-settings'
 export {FavoriteButton} from './favorite'
 export {DebugNoticeButton} from './debug'
+export {SearchButton} from './search'

modules/navigation-buttons/search.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react'
+import {Platform, StyleSheet, Text} from 'react-native'
+import Icon from 'react-native-vector-icons/Ionicons'
+import {Touchable} from '@frogpond/touchable'
+import {useTheme} from '@frogpond/app-theme'
+import {commonStyles, rightButtonStyles as styles} from './styles'
+
+type Props = {
+	onPress: () => void
+	title?: string
+}
+
+export function SearchButton(props: Props): JSX.Element {
+	let {colors} = useTheme()
+
+	return (
+		<Touchable highlight={false} onPress={props.onPress} style={styles.button}>
+			{props.title ? (
+				<Text
+					style={[
+						commonStyles.text,
+						searchStyles.text,
+						{color: colors.primary},
+					]}
+				>
+					{props.title}
+				</Text>
+			) : (
+				<Icon
+					name={
+						Platform.OS === 'ios' ? 'ios-search-outline' : 'md-search-outline'
+					}
+					style={styles.icon}
+				/>
+			)}
+		</Touchable>
+	)
+}
+
+const searchStyles = StyleSheet.create({
+	text: {
+		...Platform.select({
+			ios: {
+				fontWeight: '600',
+			},
+			android: {
+				fontWeight: '400',
+			},
+		}),
+	},
+})

source/views/sis/course-search/search.tsx

@@ -1,5 +1,6 @@
 import * as c from '@frogpond/colors'
 import {LoadingView, NoticeView} from '@frogpond/notice'
+import {SearchButton} from '@frogpond/navigation-buttons'
 import {useNavigation} from '@react-navigation/native'
 import {NativeStackNavigationOptions} from '@react-navigation/native-stack'
 import {debounce, fromPairs} from 'lodash'
@@ -35,12 +36,15 @@ export const CourseSearchView = (): JSX.Element => {
 	let [typedQuery, setTypedQuery] = React.useState('')
 
 	React.useLayoutEffect(() => {
-		// TODO: refactor the SIS tabview to not be tabview in order to support search.
-		// search will not be injected properly embedded inside of a tab navigator and
-		// calling navigation.getParent() is not a solution because the parent is a tab
-		// navigator so all top-level tabs here would receive a searchbar. For now we
-		// can at least rely on the "browse all" button to let us view search.
 		navigation.setOptions({
+			headerRight: () => (
+				<SearchButton
+					onPress={() =>
+						navigation.navigate('CourseSearchResults', {initialQuery: ''})
+					}
+					title="Browse"
+				/>
+			),
 			headerSearchBarOptions: {
 				barTintColor: c.quaternarySystemFill,
 				onChangeText: (event: ChangeTextEvent) => {
@@ -63,10 +67,6 @@ export const CourseSearchView = (): JSX.Element => {
 		})
 	}, [showSearchResult, typedQuery])
 
-	let browseAll = () => {
-		navigation.navigate('CourseSearchResults', {initialQuery: ''})
-	}
-
 	let onRecentFilterPress = React.useCallback(
 		(text: string) => {
 			let selectedFilterCombo = recentFilters.find(
@@ -120,11 +120,9 @@ export const CourseSearchView = (): JSX.Element => {
 					title="Recent"
 				/>
 				<RecentItemsList
-					actionLabel="Browse All"
 					emptyHeader="No recent filter combinations"
 					emptyText="Your recent filter combinations will appear here."
 					items={recentFilterDescriptions}
-					onAction={browseAll}
 					onItemPress={onRecentFilterPress}
 					title="Browse"
 				/>