Merge pull request #2722 from StoDevX/filter-no-redux

Remove menu filters from Redux

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/index.js

@@ -7,21 +7,18 @@ import reduxThunk from 'redux-thunk'
 
 import {app, type State as AppState} from './parts/app'
 import {homescreen, type State as HomescreenState} from './parts/homescreen'
-import {menus, type State as MenusState} from './parts/menus'
 import {settings, type State as SettingsState} from './parts/settings'
 import {balances, type State as BalancesState} from './parts/balances'
 import {buildings, type State as BuildingsState} from './parts/buildings'
 import {help, type State as HelpState} from './parts/help'
 import {courses, type State as CoursesState} from './parts/courses'
 
 export {init as initRedux} from './init'
-export {updateMenuFilters} from './parts/menus'
 
 export type ReduxState = {
 	app?: AppState,
 	courses?: CoursesState,
 	homescreen?: HomescreenState,
-	menus?: MenusState,
 	settings?: SettingsState,
 	balances?: BalancesState,
 	buildings?: BuildingsState,
@@ -33,7 +30,6 @@ export const makeStore = () => {
 		app,
 		courses,
 		homescreen,
-		menus,
 		settings,
 		balances,
 		buildings,

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/flux/parts/menus.js

@@ -2,63 +2,80 @@
 import * as React from 'react'
 import {ScrollView, StyleSheet} from 'react-native'
 import {type FilterType} from './types'
-import {type ReduxState} from '../../../flux'
 import {FilterSection} from './section'
 import {TableView} from 'react-native-tableview-simple'
-import {connect} from 'react-redux'
-import get from 'lodash/get'
+import {NoticeView} from '../notice'
 
 const styles = StyleSheet.create({
 	container: {
 		flex: 1,
 	},
 })
 
-type NavigationState = {
-	params: {
-		title: string,
-		pathToFilters: string[],
-		onChange: (x: FilterType[]) => any,
-		onLeave?: (filters: FilterType[]) => any,
-	},
-}
-
-type ReactProps = {
+type Props = {
 	navigation: {
-		state: NavigationState,
+		state: {
+			params: {|
+				+title: string,
+				+initialFilters: Array<FilterType>,
+				+onDismiss: (filters: Array<FilterType>) => mixed,
+			|},
+		},
+		addListener: (
+			ev: string,
+			(payload: mixed) => mixed,
+		) => {remove: () => void},
 	},
 }
 
-type ReduxStateProps = {
-	filters: FilterType[],
+type State = {
+	filters: Array<FilterType>,
 }
 
-type Props = ReactProps & ReduxStateProps
+export class FilterView extends React.Component<Props, State> {
+	static navigationOptions({navigation}: Props) {
+		let {title} = navigation.state.params
+		return {title}
+	}
 
-class FilterViewComponent extends React.PureComponent<Props> {
-	static navigationOptions = ({navigation}: Props) => {
-		return {
-			title: navigation.state.params.title,
-		}
+	state = {
+		filters: [],
+	}
+
+	static getDerivedStateFromProps(props: Props) {
+		let {initialFilters: filters = []} = props.navigation.state.params
+		return {filters}
+	}
+
+	componentDidMount() {
+		this._subscription = this.props.navigation.addListener('willBlur', () => {
+			let {onDismiss} = this.props.navigation.state.params
+			if (onDismiss) {
+				onDismiss(this.state.filters)
+			}
+		})
 	}
 
 	componentWillUnmount() {
-		if (this.props.navigation.state.params.onLeave) {
-			this.props.navigation.state.params.onLeave(this.props.filters)
-		}
+		this._subscription && this._subscription.remove()
 	}
 
+	_subscription: ?{remove: () => void} = null
+
 	onFilterChanged = (filter: FilterType) => {
-		const {onChange} = this.props.navigation.state.params
 		// replace the changed filter in the array, maintaining position
-		let result = this.props.filters.map(
-			f => (f.key !== filter.key ? f : filter),
-		)
-		onChange(result)
+		this.setState(state => {
+			let edited = state.filters.map(f => (f.key !== filter.key ? f : filter))
+			return {filters: edited}
+		})
 	}
 
 	render() {
-		const contents = this.props.filters.map(filter => (
+		if (!this.state.filters.length) {
+			return <NoticeView text="No filters available" />
+		}
+
+		const contents = this.state.filters.map(filter => (
 			<FilterSection
 				key={filter.key}
 				filter={filter}
@@ -73,11 +90,3 @@ class FilterViewComponent extends React.PureComponent<Props> {
 		)
 	}
 }
-
-function mapState(state: ReduxState, actualProps: ReactProps): ReduxStateProps {
-	return {
-		filters: get(state, actualProps.navigation.state.params.pathToFilters, []),
-	}
-}
-
-export const ConnectedFilterView = connect(mapState)(FilterViewComponent)

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

@@ -1,5 +1,5 @@
 // @flow
-export {ConnectedFilterView as FilterView} from './filter-view'
+export {FilterView} from './filter-view'
 export type {FilterType, ListType, ToggleType, PickerType} from './types'
 export {applyFiltersToItem} from './apply-filters'
 export {stringifyFilters} from './stringify-filters'

source/views/components/filter/index.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/searchable-alphabet-listview.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]}
 			/>