Merge pull request #2790 from StoDevX/search-results-push-view

Push course search results onto the stack

Author: hannesmcman

source/navigation.js

@@ -24,9 +24,11 @@ import {
 	CarletonSaylesMenuScreen,
 } from './views/menus'
 import NewsView from './views/news'
-import SISView from './views/sis'
-import {JobDetailView} from './views/sis/student-work/detail'
-import {CourseDetailView} from './views/sis/course-search/detail'
+import SISView, {
+	JobDetailView,
+	CourseDetailView,
+	CourseSearchResultsView,
+} from './views/sis'
 import {
 	BuildingHoursView,
 	BuildingHoursDetailView,
@@ -84,6 +86,7 @@ export const AppNavigator = createStackNavigator(
 		SettingsView: {screen: SettingsView},
 		IconSettingsView: {screen: IconSettingsView},
 		SISView: {screen: SISView},
+		CourseSearchResultsView: {screen: CourseSearchResultsView},
 		CourseDetailView: {screen: CourseDetailView},
 		StreamingView: {screen: StreamingView},
 		KSTOScheduleView: {screen: KSTOScheduleView},

source/views/components/searchbar/index.android.js

@@ -27,6 +27,8 @@ const styles = StyleSheet.create({
 export class SearchBar extends React.Component<Props> {
 	static defaultProps = {
 		active: false,
+		backButtonAndroid: true,
+		androidIcon: null,
 		onCancel: () => {},
 		onChange: () => {},
 		onFocus: () => {},
@@ -40,16 +42,18 @@ export class SearchBar extends React.Component<Props> {
 	}
 
 	render() {
+		let {backButtonAndroid} = this.props
 		let backButton = this.props.active ? backIcon : searchIcon
 
 		return (
 			<NativeSearchBar
 				ref={this.handleRef}
 				autoCorrect={false}
-				backButton={backButton}
+				backButton={backButtonAndroid === 'search' ? searchIcon : backButton}
 				closeButton={this.props.active ? closeIcon : null}
 				focusOnLayout={false}
 				handleChangeText={this.props.onChange}
+				hideBack={!backButtonAndroid}
 				hideClose={!this.props.active}
 				input={this.props.value}
 				onBack={this.props.onCancel}

source/views/components/searchbar/types.js

@@ -3,6 +3,7 @@
 export type Props = {
 	getRef?: any,
 	active?: boolean,
+	backButtonAndroid?: 'search' | boolean,
 	backgroundColor?: string,
 	onCancel: () => any,
 	onChange: string => any,

source/views/sis/components/animated-searchbox.js

@@ -80,23 +80,36 @@ export class AnimatedSearchbox extends React.Component<Props> {
 				render={viewport => {
 					let searchBarWidth = viewport.width - 20
 
+					let showTitle = Boolean(this.props.title)
+
 					let containerStyle = [
 						styles.searchContainer,
 						styles.common,
-						{height: this.containerHeight},
+						{
+							height: showTitle
+								? this.containerHeight
+								: this.containerHeightSpec.end,
+						},
 					]
 
 					let searchStyle = [
 						styles.searchBarWrapper,
 						{width: searchBarWidth},
-						{top: this.searchBarTop},
+						{top: showTitle ? this.searchBarTop : this.searchBarTopSpec.end},
 					]
 
-					let headerStyle = [styles.header, {opacity: this.headerOpacity}]
+					let headerStyle = [
+						styles.header,
+						{
+							opacity: showTitle
+								? this.headerOpacity
+								: this.headerOpacitySpec.end,
+						},
+					]
 
 					return (
 						<Animated.View style={containerStyle}>
-							{this.props.title ? (
+							{showTitle ? (
 								<Animated.Text style={headerStyle}>
 									{this.props.title}
 								</Animated.Text>
@@ -105,6 +118,7 @@ export class AnimatedSearchbox extends React.Component<Props> {
 							<Animated.View style={searchStyle}>
 								<SearchBar
 									active={this.props.active}
+									backButtonAndroid="search"
 									onCancel={this.handleCancel}
 									onChange={this.props.onChange}
 									onFocus={this.handleFocus}

source/views/sis/course-search/index.js

@@ -1,3 +1,5 @@
 // @flow
 
-export {default} from './search'
+export {default as CourseSearchView} from './search'
+export {default as CourseSearchResultsView} from './results'
+export {CourseDetailView} from './detail'

source/views/sis/course-search/list.js

@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react'
-import {StyleSheet, SectionList} from 'react-native'
+import {StyleSheet, SectionList, ActivityIndicator} from 'react-native'
 import type {TopLevelViewPropsType} from '../../types'
 import type {CourseType} from '../../../lib/course-search/types'
 import {ListSeparator, ListSectionHeader} from '../../components/list'
@@ -21,15 +21,23 @@ const styles = StyleSheet.create({
 	message: {
 		paddingVertical: 16,
 	},
+	spinner: {
+		alignItems: 'center',
+		justifyContent: 'center',
+		padding: 8,
+	},
 })
 
 type Props = TopLevelViewPropsType & {
 	applyFilters: (filters: FilterType[], item: CourseType) => boolean,
-	browsing: boolean,
 	courses: Array<CourseType>,
 	filters: Array<FilterType>,
 	onPopoverDismiss: (filter: FilterType) => any,
+	onListItemPress?: CourseType => any,
 	query: string,
+	style?: any,
+	contentContainerStyle?: any,
+	filtersLoaded: boolean,
 }
 
 function doSearch(args: {
@@ -63,29 +71,38 @@ export class CourseResultsList extends React.PureComponent<Props> {
 	)
 
 	onPressRow = (data: CourseType) => {
+		if (this.props.onListItemPress) {
+			this.props.onListItemPress(data)
+		}
 		this.props.navigation.navigate('CourseDetailView', {course: data})
 	}
 
 	render() {
 		let {
 			filters,
-			browsing,
 			query,
 			courses,
 			applyFilters,
 			onPopoverDismiss,
+			contentContainerStyle,
+			style,
+			filtersLoaded,
 		} = this.props
 
 		// be sure to lowercase the query before calling doSearch, so that the memoization
 		// doesn't break when nothing's changed except case.
 		query = query.toLowerCase()
 		let results = memoizedDoSearch({query, filters, courses, applyFilters})
 
-		const header = (
+		const header = filtersLoaded ? (
 			<FilterToolbar filters={filters} onPopoverDismiss={onPopoverDismiss} />
+		) : (
+			<ActivityIndicator style={styles.spinner} />
 		)
 
-		const message = browsing
+		const hasActiveFilter = filters.some(f => f.enabled)
+
+		const message = hasActiveFilter
 			? 'There were no courses that matched your selected filters. Try a different filter combination.'
 			: query.length
 				? 'There were no courses that matched your query. Please try again.'
@@ -98,14 +115,14 @@ export class CourseResultsList extends React.PureComponent<Props> {
 				ItemSeparatorComponent={ListSeparator}
 				ListEmptyComponent={messageView}
 				ListHeaderComponent={header}
-				contentContainerStyle={styles.container}
+				contentContainerStyle={[styles.container, contentContainerStyle]}
 				extraData={this.props}
 				keyExtractor={this.keyExtractor}
-				keyboardDismissMode="on-drag"
-				keyboardShouldPersistTaps="never"
+				keyboardDismissMode="interactive"
 				renderItem={this.renderItem}
 				renderSectionHeader={this.renderSectionHeader}
 				sections={(results: any)}
+				style={style}
 				windowSize={10}
 			/>
 		)