Merge pull request #2725 from StoDevX/extract-animated-searchbox

Remove Course filters from Redux and refactor

Author: hawkrives

package.json

@@ -89,6 +89,7 @@
     "htmlparser2": "3.9.2",
     "keyword-search": "0.1.1",
     "lodash": "4.17.10",
+    "mem": "3.0.1",
     "moment": "2.22.2",
     "moment-timezone": "0.5.21",
     "p-props": "1.2.0",
@@ -109,7 +110,7 @@
     "react-native-restart": "0.0.6",
     "react-native-safari-view": "2.1.0",
     "react-native-search-bar": "3.4.2",
-    "react-native-searchbar": "https://github.com/MosesEsan/react-native-searchbar.git#setValue-function",
+    "react-native-searchbar-controlled": "1.0.0",
     "react-native-tableview-simple": "0.17.5",
     "react-native-typography": "1.3.0",
     "react-native-vector-icons": "5.0.0",

source/flux/parts/courses.js

@@ -14,24 +14,13 @@ import {
 	formatFilterCombo,
 } from '../../views/sis/course-search/lib/format-filter-combo'
 
-const UPDATE_COURSE_FILTERS = 'courses/UPDATE_COURSE_FILTERS'
 const LOAD_CACHED_COURSES = 'courses/LOAD_CACHED_COURSES'
 const COURSES_LOADED = 'courses/COURSES_LOADED'
 
 type Dispatch<A: Action> = (action: A | Promise<A> | ThunkAction<A>) => any
 type GetState = () => ReduxState
 type ThunkAction<A: Action> = (dispatch: Dispatch<A>, getState: GetState) => any
 
-type UpdateCourseFiltersAction = {|
-	type: 'courses/UPDATE_COURSE_FILTERS',
-	payload: Array<FilterType>,
-|}
-export function updateCourseFilters(
-	filters: FilterType[],
-): UpdateCourseFiltersAction {
-	return {type: UPDATE_COURSE_FILTERS, payload: filters}
-}
-
 const UPDATE_RECENT_FILTERS = 'courses/UPDATE_RECENT_FILTERS'
 
 type UpdateRecentFiltersAction = {|
@@ -151,7 +140,6 @@ export function updateRecentSearches(
 }
 
 type Action =
-	| UpdateCourseFiltersAction
 	| LoadCachedCoursesAction
 	| CoursesLoadedAction
 	| UpdateRecentSearchesAction
@@ -160,7 +148,6 @@ type Action =
 	| LoadRecentFiltersAction
 
 export type State = {|
-	filters: Array<FilterType>,
 	allCourses: Array<CourseType>,
 	readyState: 'not-loaded' | 'ready',
 	validGEs: string[],
@@ -169,7 +156,6 @@ export type State = {|
 |}
 
 const initialState = {
-	filters: [],
 	allCourses: [],
 	readyState: 'not-loaded',
 	validGEs: [],
@@ -179,9 +165,6 @@ const initialState = {
 
 export function courses(state: State = initialState, action: Action) {
 	switch (action.type) {
-		case UPDATE_COURSE_FILTERS:
-			return {...state, filters: action.payload}
-
 		case LOAD_RECENT_FILTERS:
 			return {...state, recentFilters: action.payload}
 

source/views/components/filter/filter-view.js

@@ -4,6 +4,7 @@ import {ScrollView, StyleSheet} from 'react-native'
 import {type FilterType} from './types'
 import {FilterSection} from './section'
 import {TableView} from 'react-native-tableview-simple'
+import {NoticeView} from '../notice'
 
 const styles = StyleSheet.create({
 	container: {
@@ -42,7 +43,7 @@ export class FilterView extends React.Component<Props, State> {
 	}
 
 	static getDerivedStateFromProps(props: Props) {
-		let {initialFilters: filters} = props.navigation.state.params
+		let {initialFilters: filters = []} = props.navigation.state.params
 		return {filters}
 	}
 
@@ -70,6 +71,10 @@ export class FilterView extends React.Component<Props, State> {
 	}
 
 	render() {
+		if (!this.state.filters.length) {
+			return <NoticeView text="No filters available" />
+		}
+
 		const contents = this.state.filters.map(filter => (
 			<FilterSection
 				key={filter.key}

source/views/components/searchable-alphabet-listview.js

@@ -14,19 +14,10 @@ const styles = StyleSheet.create({
 	},
 })
 
-type Props = any
+type Props = any & {query: string}
 
-export class SearchableAlphabetListView extends React.PureComponent<Props> {
-	searchBar: any = null
-
-	_performSearch = (text: string | Object) => {
-		// Android clear button returns an object
-		if (typeof text !== 'string') {
-			return this.props.onSearch(null)
-		}
-
-		return this.props.onSearch(text)
-	}
+export class SearchableAlphabetListView extends React.Component<Props> {
+	_performSearch = (text: string) => this.props.onSearch(text)
 
 	// We need to make the search run slightly behind the UI,
 	// so I'm slowing it down by 50ms. 0ms also works, but seems
@@ -36,12 +27,7 @@ export class SearchableAlphabetListView extends React.PureComponent<Props> {
 	render() {
 		return (
 			<View style={styles.wrapper}>
-				<SearchBar
-					getRef={ref => (this.searchBar = ref)}
-					onChangeText={this.performSearch}
-					// if we don't use the arrow function here, searchBar ref is null...
-					onSearchButtonPress={() => this.searchBar.unFocus()}
-				/>
+				<SearchBar onChange={this.performSearch} value={this.props.query} />
 				<StyledAlphabetListView
 					headerHeight={
 						Platform.OS === 'ios'

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

@@ -3,8 +3,9 @@
 import * as React from 'react'
 import {StyleSheet} from 'react-native'
 import * as c from '../colors'
-import NativeSearchBar from 'react-native-searchbar'
+import NativeSearchBar from 'react-native-searchbar-controlled'
 import Icon from 'react-native-vector-icons/Ionicons'
+import {type Props} from './types'
 
 const iconStyles = StyleSheet.create({
 	icon: {
@@ -23,48 +24,37 @@ const styles = StyleSheet.create({
 	},
 })
 
-type Props = {
-	getRef?: any,
-	style?: any,
-	placeholder?: string,
-	onChangeText: string => any,
-	onCancel: () => any,
-	onFocus: () => any,
-	onSearchButtonPress: string => any,
-	searchActive: boolean,
-}
-
-type State = {
-	input: string,
-}
-
-export class SearchBar extends React.PureComponent<Props, State> {
-	state = {
-		input: '',
+export class SearchBar extends React.Component<Props> {
+	static defaultProps = {
+		active: false,
+		onCancel: () => {},
+		onChange: () => {},
+		onFocus: () => {},
+		onSubmit: () => {},
+		placeholder: 'Search',
+		value: '',
 	}
 
-	updateText = input => {
-		this.setState({input: input})
-	}
-
-	onSearch = () => {
-		this.props.onSearchButtonPress(this.state.input)
+	handleRef = (ref: NativeSearchBar) => {
+		this.props.getRef && this.props.getRef(ref)
 	}
 
 	render() {
-		const backButton = this.props.searchActive ? backIcon : searchIcon
+		let backButton = this.props.active ? backIcon : searchIcon
+
 		return (
 			<NativeSearchBar
-				ref={this.props.getRef}
+				ref={this.handleRef}
 				backButton={backButton}
-				closeButton={this.props.searchActive ? closeIcon : null}
+				closeButton={this.props.active ? closeIcon : null}
 				focusOnLayout={false}
-				handleChangeText={this.updateText}
-				hideX={!this.props.searchActive}
+				handleChangeText={this.props.onChange}
+				hideClose={!this.props.active}
+				input={this.props.value}
 				onBack={this.props.onCancel}
 				onFocus={this.props.onFocus}
-				onSubmitEditing={this.onSearch}
-				placeholder={this.props.placeholder || 'Search'}
+				onSubmitEditing={this.props.onSubmit}
+				placeholder={this.props.placeholder}
 				showOnLoad={true}
 				style={[styles.searchbar, this.props.style]}
 			/>

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

@@ -4,40 +4,53 @@ import * as React from 'react'
 import {StyleSheet} from 'react-native'
 import NativeSearchBar from 'react-native-search-bar'
 import * as c from '../colors'
+import {type Props} from './types'
 
 const styles = StyleSheet.create({
 	searchbar: {
 		height: 44,
 	},
 })
 
-type PropsType = {
-	getRef?: any,
-	backgroundColor?: string,
-	style?: any,
-	placeholder?: string,
-	onFocus?: () => any,
-	onCancel?: () => any,
-	onChangeText?: string => any,
-	onSearchButtonPress: string => any,
-	text?: string,
-	textFieldBackgroundColor?: string,
-}
+export class SearchBar extends React.Component<Props> {
+	static defaultProps = {
+		backgroundColor: c.iosGray,
+		onCancel: () => {},
+		onChange: () => {},
+		onFocus: () => {},
+		onSubmit: () => {},
+		placeholder: 'Search',
+		textFieldBackgroundColor: c.white,
+		value: '',
+	}
+
+	_ref: ?NativeSearchBar = null
+
+	handleSearchButtonPress = () => {
+		this._ref && this._ref.blur()
+		this.props.onSubmit()
+	}
+
+	handleRef = (ref: NativeSearchBar) => {
+		this._ref = ref
+		this.props.getRef && this.props.getRef(ref)
+	}
 
-export const SearchBar = (props: PropsType) => {
-	return (
-		<NativeSearchBar
-			ref={props.getRef}
-			barTintColor={props.backgroundColor || c.iosGray}
-			hideBackground={true}
-			onCancelButtonPress={props.onCancel || (() => {})}
-			onChangeText={props.onChangeText || (() => {})}
-			onFocus={props.onFocus || (() => {})}
-			onSearchButtonPress={props.onSearchButtonPress || (() => {})}
-			placeholder={props.placeholder || 'Search'}
-			style={styles.searchbar}
-			text={props.text || ''}
-			textFieldBackgroundColor={props.textFieldBackgroundColor || c.white}
-		/>
-	)
+	render() {
+		return (
+			<NativeSearchBar
+				ref={this.handleRef}
+				barTintColor={this.props.backgroundColor}
+				hideBackground={true}
+				onCancelButtonPress={this.props.onCancel}
+				onChangeText={this.props.onChange}
+				onFocus={this.props.onFocus}
+				onSearchButtonPress={this.handleSearchButtonPress}
+				placeholder={this.props.placeholder}
+				style={styles.searchbar}
+				text={this.props.value}
+				textFieldBackgroundColor={this.props.textFieldBackgroundColor}
+			/>
+		)
+	}
 }

source/views/components/searchbar/types.js

@@ -0,0 +1,15 @@
+// @flow
+
+export type Props = {
+	getRef?: any,
+	active?: boolean,
+	backgroundColor?: string,
+	onCancel: () => any,
+	onChange: string => any,
+	onFocus: () => any,
+	onSubmit: () => any,
+	placeholder?: string,
+	style?: any,
+	textFieldBackgroundColor?: string,
+	value: string,
+}

source/views/dictionary/list.js

@@ -125,8 +125,8 @@ export class DictionaryView extends React.PureComponent<Props, State> {
 		<ListSeparator key={`${sectionId}-${rowId}`} />
 	)
 
-	performSearch = (text: ?string) => {
-		this.setState(() => ({query: text ? text.toLowerCase() : ''}))
+	performSearch = (text: string) => {
+		this.setState(() => ({query: text}))
 	}
 
 	render() {
@@ -139,7 +139,8 @@ export class DictionaryView extends React.PureComponent<Props, State> {
 
 		let results = this.state.allTerms
 		if (this.state.query) {
-			const {query, allTerms} = this.state
+			let {query, allTerms} = this.state
+			query = query.toLowerCase()
 			results = allTerms.filter(term =>
 				termToArray(term).some(word => word.startsWith(query)),
 			)
@@ -154,6 +155,7 @@ export class DictionaryView extends React.PureComponent<Props, State> {
 				}
 				data={groupBy(results, item => item.word[0])}
 				onSearch={this.performSearch}
+				query={this.state.query}
 				refreshControl={refreshControl}
 				renderSeparator={this.renderSeparator}
 				sectionHeader={this.renderSectionHeader}