Merge pull request #2744 from StoDevX/filter-popovers

Replace FilterView with Interactive FilterToolbar

Author: hannesmcman

package.json

@@ -53,7 +53,7 @@
       "!**/node_modules/**"
     ],
     "transformIgnorePatterns": [
-      "node_modules/(?!(jest-)?react-native|glamorous-native)"
+      "node_modules/(?!(jest-)?react-native|glamorous-native|react-navigation)"
     ],
     "testEnvironment": "node",
     "preset": "react-native"
@@ -107,6 +107,7 @@
     "react-native-keychain": "3.0.0",
     "react-native-linear-gradient": "2.4.0",
     "react-native-network-info": "3.2.2",
+    "react-native-popover-view": "1.0.0",
     "react-native-restart": "0.0.6",
     "react-native-safari-view": "2.1.0",
     "react-native-search-bar": "3.4.2",

source/lib/course-search/types.js

@@ -1,18 +1,48 @@
 // @flow
 
+export type RawCourseType = {
+	clbid: number,
+	credits: number,
+	crsid: number,
+	departments: string[],
+	description?: string[],
+	enroll: number,
+	gereqs?: string[],
+	instructors: string[],
+	level: number,
+	locations?: string[],
+	max: number,
+	name: string,
+	notes?: string[],
+	number: number,
+	pn: boolean,
+	prerequisites: false | string,
+	section?: string,
+	semester: number,
+	status: string,
+	term: number,
+	times?: string[],
+	title?: string,
+	type: string,
+	year: number,
+}
+
 export type CourseType = {
 	clbid: number,
 	credits: number,
 	crsid: number,
 	departments: string[],
 	description?: string[],
+	enroll: number,
 	gereqs?: string[],
 	instructors: string[],
 	level: number,
 	locations?: string[],
+	max: number,
 	name: string,
 	notes?: string[],
 	number: number,
+	spaceAvailable: boolean,
 	pn: boolean,
 	prerequisites: false | string,
 	section?: string,

source/lib/course-search/update-course-storage.js

@@ -3,7 +3,7 @@
  * updateStoredCourses() handles updating the cached course data from the server
  */
 
-import type {CourseType, TermType} from './types'
+import type {RawCourseType, CourseType, TermType} from './types'
 import {COURSE_DATA_PAGE, INFO_PAGE} from './urls'
 import * as storage from '../storage'
 
@@ -58,6 +58,14 @@ async function loadCurrentTermsFromServer(): Promise<Array<TermType>> {
 
 async function storeTermCoursesFromServer(term: TermType) {
 	const url = COURSE_DATA_PAGE + term.path
-	const resp: Array<CourseType> = await fetchJson(url).catch(() => [])
-	storage.setTermCourseData(term.term, resp)
+	const resp: Array<RawCourseType> = await fetchJson(url).catch(() => [])
+	const formattedTermData = formatRawData(resp)
+	storage.setTermCourseData(term.term, formattedTermData)
+}
+
+function formatRawData(rawData: Array<RawCourseType>): Array<CourseType> {
+	return rawData.map(course => {
+		let spaceAvailable = course.enroll < course.max
+		return {spaceAvailable: spaceAvailable, ...course}
+	})
 }

source/views/components/filter/__tests__/apply-filter.test.js

@@ -9,6 +9,7 @@ it('should return `true` if the filter is disabled', () => {
 		key: 'key',
 		enabled: false,
 		spec: {
+			title: 'title',
 			options: filterValue('1', '2', '3'),
 			selected: [],
 			mode: 'OR',

source/views/components/filter/__tests__/apply-toggle-filter.test.js

@@ -7,7 +7,7 @@ it('should return `true` if the item has a truthy value', () => {
 		type: 'toggle',
 		key: 'key',
 		enabled: true,
-		spec: {label: 'label'},
+		spec: {label: 'label', title: 'title'},
 		apply: {key: 'i-am-a-key'},
 	}
 	let item = {'i-am-a-key': true}
@@ -19,7 +19,7 @@ it('should return `false` if the item has a falsy value', () => {
 		type: 'toggle',
 		key: 'key',
 		enabled: true,
-		spec: {label: 'label'},
+		spec: {label: 'label', title: 'title'},
 		apply: {key: 'i-am-a-key'},
 	}
 	let item = {'i-am-a-key': false}
@@ -31,7 +31,7 @@ it('should ignore the `enabled` status of the filter', () => {
 		type: 'toggle',
 		key: 'key',
 		enabled: false,
-		spec: {label: 'label'},
+		spec: {label: 'label', title: 'title'},
 		apply: {key: 'i-am-a-key'},
 	}
 	let itemTrue = {'i-am-a-key': true}

source/views/components/filter/active-filter-button.js

@@ -0,0 +1,53 @@
+// @flow
+import * as React from 'react'
+import type {FilterType} from './types'
+import {
+	StyleSheet,
+	View,
+	Text,
+	Platform,
+	TouchableWithoutFeedback,
+} from 'react-native'
+import Icon from 'react-native-vector-icons/Ionicons'
+import * as c from '../colors'
+
+type Props = {
+	filter: FilterType,
+	label: string,
+	onRemove: (filter: FilterType) => any,
+	style?: any,
+}
+
+export function ActiveFilterButton({filter, label, onRemove, style}: Props) {
+	const iconName = Platform.select({
+		ios: 'ios-close-circle',
+		android: 'md-close-circle',
+	})
+
+	return (
+		<View style={[style, styles.badge]}>
+			<Text style={styles.text}>{label}</Text>
+			<TouchableWithoutFeedback onPress={() => onRemove(filter)}>
+				<Icon color={c.sto.white} name={iconName} size={20} />
+			</TouchableWithoutFeedback>
+		</View>
+	)
+}
+
+const styles = StyleSheet.create({
+	badge: {
+		alignItems: 'center',
+		backgroundColor: c.accent,
+		borderRadius: 15,
+		flexDirection: 'row',
+		justifyContent: 'center',
+		marginRight: 10,
+		marginVertical: 10,
+		paddingHorizontal: 10,
+		paddingVertical: 5,
+	},
+	text: {
+		fontSize: 14,
+		paddingRight: 5,
+	},
+})

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

@@ -0,0 +1,59 @@
+//@flow
+import * as React from 'react'
+import Popover from 'react-native-popover-view'
+import {FilterSection} from './section'
+import type {FilterType} from './types'
+import {type TouchableUnion} from '../touchable'
+import * as c from '../colors'
+
+type Props = {
+	anchor: ?React.Ref<TouchableUnion>,
+	filter: FilterType,
+	onClosePopover: (filter: FilterType) => any,
+	visible: boolean,
+}
+
+type State = {
+	filter: FilterType,
+}
+
+export class FilterPopover extends React.PureComponent<Props, State> {
+	state = {
+		filter: this.props.filter,
+	}
+
+	static getDerivedStateFromProps(props: Props) {
+		return {
+			filter: props.filter,
+		}
+	}
+
+	onFilterChanged = (filter: FilterType) => {
+		this.setState(() => ({filter: filter}))
+	}
+
+	render() {
+		const {filter} = this.state
+		const {anchor, onClosePopover, visible} = this.props
+
+		return (
+			<Popover
+				arrowStyle={arrowStyle}
+				fromView={anchor}
+				isVisible={visible}
+				onClose={() => onClosePopover(filter)}
+				placement="bottom"
+				popoverStyle={popoverContainer}
+			>
+				<FilterSection filter={filter} onChange={this.onFilterChanged} />
+			</Popover>
+		)
+	}
+}
+
+const popoverContainer = {
+	minWidth: 200,
+	maxWidth: 300,
+}
+
+const arrowStyle = {backgroundColor: c.iosLightBackground}

source/views/components/filter/filter-toolbar-button.js

@@ -0,0 +1,123 @@
+// @flow
+import * as React from 'react'
+import {StyleSheet, Text, Platform} from 'react-native'
+import Icon from 'react-native-vector-icons/Ionicons'
+import type {FilterType} from './types'
+import {FilterPopover} from './filter-popover'
+import * as c from '../colors'
+import {Touchable, type TouchableUnion} from '../touchable'
+
+const buttonStyles = StyleSheet.create({
+	button: {
+		flexDirection: 'row',
+		alignItems: 'center',
+		marginRight: 10,
+		paddingHorizontal: 8,
+		paddingVertical: 5,
+		marginVertical: 8,
+		borderWidth: 1,
+		borderRadius: 2,
+	},
+	activeButton: {
+		backgroundColor: c.toolbarButtonBackground,
+		borderColor: c.toolbarButtonBackground,
+	},
+	inactiveButton: {
+		borderColor: c.iosDisabledText,
+	},
+	activeText: {
+		color: c.toolbarButtonForeground,
+	},
+	inactiveText: {
+		color: c.iosDisabledText,
+	},
+	text: {
+		fontSize: 16,
+	},
+	textWithIcon: {
+		paddingRight: 8,
+	},
+})
+
+type Props = {
+	filter: FilterType,
+	isActive: boolean,
+	onPopoverDismiss: (filter: FilterType) => any,
+	style?: any,
+	title: string,
+}
+
+type State = {
+	popoverVisible: boolean,
+}
+
+export class FilterToolbarButton extends React.PureComponent<Props, State> {
+	state = {
+		popoverVisible: false,
+	}
+
+	touchable: ?TouchableUnion = null
+
+	openPopover = () => {
+		this.setState(() => ({popoverVisible: true}))
+	}
+
+	onClosePopover = (filter: FilterType) => {
+		this.props.onPopoverDismiss(filter)
+		this.setState(() => ({popoverVisible: false}))
+	}
+
+	render() {
+		const {filter, isActive, style, title} = this.props
+		const {popoverVisible} = this.state
+		const icon = Platform.select({
+			ios: 'ios-arrow-down',
+			android: 'md-arrow-dropdown',
+		})
+
+		let activeButtonStyle = isActive
+			? buttonStyles.activeButton
+			: buttonStyles.inactiveButton
+		let activeContentStyle = isActive
+			? buttonStyles.activeText
+			: buttonStyles.inactiveText
+
+		let textWithIconStyle = icon ? buttonStyles.textWithIcon : null
+		let activeTextStyle = {
+			fontWeight: isActive && Platform.OS === 'android' ? 'bold' : 'normal',
+		}
+
+		if (filter.type === 'list') {
+			if (!filter.spec.options.length) {
+				return null
+			}
+		}
+
+		const buttonTextStyle = [
+			activeContentStyle,
+			textWithIconStyle,
+			activeTextStyle,
+			buttonStyles.text,
+		]
+
+		return (
+			<React.Fragment>
+				<Touchable
+					getRef={ref => (this.touchable = ref)}
+					highlight={false}
+					onPress={this.openPopover}
+					style={[buttonStyles.button, activeButtonStyle, style]}
+				>
+					<Text style={buttonTextStyle}>{title}</Text>
+					<Icon name={icon} size={18} style={activeContentStyle} />
+				</Touchable>
+				<FilterPopover
+					anchor={this.touchable}
+					filter={filter}
+					onClosePopover={this.onClosePopover}
+					visible={popoverVisible}
+				/>
+			</React.Fragment>
+		)
+	}
+}