[WIP] Add filters to course search

package.json

@@ -106,6 +106,7 @@
     "lodash": "4.17.5",
     "moment": "2.21.0",
     "moment-timezone": "0.5.14",
+    "p-props": "1.1.0",
     "p-retry": "1.0.0",
     "querystring": "0.2.0",
     "react": "16.2.0",

source/flux/index.js

@@ -12,12 +12,17 @@ import {settings, type State as SettingsState} from './parts/settings'
 import {sis, type State as SisState} from './parts/sis'
 import {buildings, type State as BuildingsState} from './parts/buildings'
 import {help, type State as HelpState} from './parts/help'
+import {
+	courseSearch,
+	type State as CourseSearchState,
+} from './parts/course-search'
 
 export {init as initRedux} from './init'
 export {updateMenuFilters} from './parts/menus'
 
 export type ReduxState = {
 	app?: AppState,
+	courseSearch?: CourseSearchState,
 	homescreen?: HomescreenState,
 	menus?: MenusState,
 	settings?: SettingsState,
@@ -29,6 +34,7 @@ export type ReduxState = {
 export const makeStore = () => {
 	const aao: any = combineReducers({
 		app,
+		courseSearch,
 		homescreen,
 		menus,
 		settings,

source/flux/parts/course-search.js

@@ -0,0 +1,35 @@
+// @flow
+
+import {type FilterType} from '../../views/components/filter/types'
+
+const UPDATE_COURSE_FILTERS = 'courseSearch/UPDATE_COURSE_FILTERS'
+
+type UpdateCourseFiltersAction = {|
+	type: 'courseSearch/UPDATE_COURSE_FILTERS',
+	payload: Array<FilterType>,
+|}
+export function updateCourseFilters(
+	filters: FilterType[],
+): UpdateCourseFiltersAction {
+	return {type: UPDATE_COURSE_FILTERS, payload: filters}
+}
+
+type Action = UpdateCourseFiltersAction
+
+export type State = {|
+	filters: Array<FilterType>,
+|}
+
+const initialState = {
+	filters: [],
+}
+
+export function courseSearch(state: State = initialState, action: Action) {
+	switch (action.type) {
+		case UPDATE_COURSE_FILTERS:
+			return {...state, filters: action.payload}
+
+		default:
+			return state
+	}
+}

source/flux/parts/sis.js

@@ -103,6 +103,7 @@ export type State = {|
 	mealPlanDescription: ?string,
 	allCourses: Array<CourseType>,
 	courseDataState: 'not-loaded' | 'ready',
+	validGEs: string[],
 |}
 
 const initialState = {
@@ -115,6 +116,7 @@ const initialState = {
 	mealPlanDescription: null,
 	allCourses: [],
 	courseDataState: 'not-loaded',
+	validGEs: [],
 }
 
 export function sis(state: State = initialState, action: Action) {

source/lib/course-search/index.js

@@ -4,3 +4,4 @@ export {loadCachedCourses} from './load-cached-courses'
 export {updateStoredCourses, areAnyTermsCached} from './update-course-storage'
 export {CourseType, TermType} from './types'
 export {parseTerm} from './parse-term'
+export {loadAllCourseFilterOptions} from './load-filter-options'

source/lib/course-search/load-filter-options.js

@@ -0,0 +1,38 @@
+// @flow
+
+import {GE_DATA, DEPT_DATA} from './urls'
+import * as storage from '../storage'
+import mapValues from 'lodash/mapValues'
+import isEqual from 'lodash/isEqual'
+import pProps from 'p-props'
+
+const filterCategories = {
+	ges: {name: 'ges', url: GE_DATA},
+	departments: {name: 'departments', url: DEPT_DATA},
+}
+
+type FilterCategory = {name: string, url: string}
+
+type AllFilterCategories = {
+	ges: string[],
+	departments: string[],
+}
+
+export async function loadCourseFilterOption(
+	category: FilterCategory,
+): Promise<Array<string>> {
+	const remoteData = await fetchJson(category.url).catch(() => [])
+	const storedData = await storage.getCourseFilterOption(category.name)
+	if (!isEqual(remoteData, storedData) || storedData.length === 0) {
+		storage.setCourseFilterOption(category.name, remoteData)
+		return remoteData
+	} else {
+		return storedData
+	}
+}
+
+export function loadAllCourseFilterOptions(): Promise<AllFilterCategories> {
+	return pProps(
+		mapValues(filterCategories, category => loadCourseFilterOption(category)),
+	).then(result => result)
+}

source/lib/course-search/urls.js

@@ -3,3 +3,12 @@
 export const COURSE_DATA_PAGE = 'https://stodevx.github.io/course-data/'
 
 export const INFO_PAGE = 'https://stodevx.github.io/course-data/info.json'
+
+export const GE_DATA =
+	'https://stodevx.github.io/course-data/data-lists/valid_gereqs.json'
+
+export const DEPT_DATA =
+	'https://stodevx.github.io/course-data/data-lists/valid_departments.json'
+
+export const TIMES_DATA =
+	'https://stodevx.github.io/course-data/data-lists/valid-times.json'

source/lib/storage.js

@@ -94,3 +94,12 @@ export function setTermInfo(termData: Array<TermType>) {
 export function getTermInfo(): Promise<Array<TermType>> {
 	return getItemAsArray(termInfoKey)
 }
+const filterDataKey = courseDataKey + ':filter-data'
+export function setCourseFilterOption(name: string, data: string[]) {
+	const key = filterDataKey + `:${name}`
+	return setItem(key, data)
+}
+export function getCourseFilterOption(name: string): Promise<Array<string>> {
+	const key = filterDataKey + `:${name}`
+	return getItemAsArray(key)
+}

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

@@ -12,6 +12,7 @@ it('should return `true` if the filter is disabled', () => {
 			options: filterValue('1', '2', '3'),
 			selected: [],
 			mode: 'OR',
+			displayTitle: true,
 		},
 		apply: {key: 'categories'},
 	}

source/views/components/filter/apply-filters.js

@@ -30,7 +30,9 @@ export function applyFilter(filter: FilterType, item: any): boolean {
 export function applyToggleFilter(filter: ToggleType, item: any): boolean {
 	// Dereference the value-to-check
 	const itemValue = item[filter.apply.key]
-	return Boolean(itemValue)
+	return filter.apply.trueEquivalent
+		? itemValue == filter.apply.trueEquivalent
+		: Boolean(itemValue)
 }
 
 export function applyListFilter(filter: ListType, item: any): boolean {

source/views/components/filter/index.js

@@ -3,3 +3,4 @@ export {FilterView} from './filter-view'
 export type {FilterType, ListType, ToggleType, PickerType} from './types'
 export {applyFiltersToItem} from './apply-filters'
 export {stringifyFilters} from './stringify-filters'
+export {filterListSpecs, filterPickerSpecs, filterToggleSpecs} from './tools'

source/views/components/filter/section-list.js

@@ -70,7 +70,9 @@ export function ListSection({filter, onChange}: PropsType) {
 			accessory={includes(selected, val) ? 'Checkmark' : undefined}
 			cellContentView={
 				<Column style={styles.content}>
-					<Text style={styles.title}>{val.title}</Text>
+					<Text style={styles.title}>
+						{spec.displayTitle ? val.title : val.label}
+					</Text>
 					{val.detail ? <Text style={styles.detail}>{val.detail}</Text> : null}
 				</Column>
 			}

source/views/components/filter/tools.js

@@ -0,0 +1,18 @@
+// @flow
+
+import type {FilterType, ListType, PickerType, ToggleType} from './types'
+
+export function filterListSpecs(specs: Array<FilterType>): Array<ListType> {
+	const retval = specs.filter(f => f.type === 'list')
+	return ((retval: any): Array<ListType>)
+}
+
+export function filterPickerSpecs(specs: Array<FilterType>): Array<PickerType> {
+	const retval = specs.filter(f => f.type === 'picker')
+	return ((retval: any): Array<PickerType>)
+}
+
+export function filterToggleSpecs(specs: Array<FilterType>): Array<ToggleType> {
+	const retval = specs.filter(f => f.type === 'toggle')
+	return ((retval: any): Array<ToggleType>)
+}

source/views/components/filter/types.js

@@ -6,7 +6,8 @@ export type ToggleSpecType = {
 }
 
 export type ListItemSpecType = {|
-	title: string,
+	title: string | number,
+	label?: string,
 	detail?: string,
 	image?: ?any,
 |}
@@ -18,6 +19,7 @@ export type ListSpecType = {
 	options: ListItemSpecType[],
 	selected: ListItemSpecType[],
 	mode: 'AND' | 'OR',
+	displayTitle: boolean,
 }
 
 export type PickerItemSpecType = {|
@@ -33,6 +35,7 @@ export type PickerSpecType = {
 
 export type ToggleFilterFunctionType = {
 	key: string,
+	trueEquivalent?: string,
 }
 
 export type PickerFilterFunctionType = {

source/views/menus/lib/build-filters.js

@@ -85,6 +85,7 @@ export function buildFilters(
 				options: allStations,
 				mode: 'OR',
 				selected: allStations,
+				displayTitle: true,
 			},
 			apply: {
 				key: 'station',
@@ -100,6 +101,7 @@ export function buildFilters(
 				options: allDietaryRestrictions,
 				mode: 'AND',
 				selected: [],
+				displayTitle: true,
 			},
 			apply: {
 				key: 'cor_icon',

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

@@ -0,0 +1,57 @@
+// @flow
+import * as React from 'react'
+import {type FilterType, filterListSpecs} from '../../components/filter'
+import {StyleSheet, Text, View, Platform} from 'react-native'
+import {Toolbar, ToolbarButton} from '../../components/toolbar'
+import {formatTerms} from '../course-search/lib/format-terms'
+
+const styles = StyleSheet.create({
+	today: {
+		flex: 1,
+		paddingLeft: 12,
+		paddingVertical: 14,
+	},
+	toolbarSection: {
+		flexDirection: 'row',
+	},
+})
+
+type Props = {
+	filters: Array<FilterType>,
+	onPress: () => any,
+}
+
+export function FilterToolbar({filters, onPress}: Props) {
+	const appliedFilterCount = filters.filter(f => f.enabled).length
+	const isFiltered = appliedFilterCount > 0
+	const filterWord = appliedFilterCount === 1 ? 'Filter' : 'Filters'
+
+	const termFilter = filterListSpecs(filters).find(f => f.key === 'term')
+
+	let toolbarTitle = 'All Terms'
+	if (termFilter) {
+		const selectedTerms = termFilter ? termFilter.spec.selected : []
+		const terms = selectedTerms.map(t => parseInt(t.title))
+		toolbarTitle = terms.length ? formatTerms(terms) : 'No Terms'
+	}
+
+	const buttonTitle = isFiltered
+		? `${appliedFilterCount} ${filterWord}`
+		: 'No Filters'
+
+	return (
+		<Toolbar onPress={onPress}>
+			<View style={[styles.toolbarSection, styles.today]}>
+				<Text ellipsizeMode="tail" numberOfLines={1}>
+					{toolbarTitle}
+				</Text>
+			</View>
+
+			<ToolbarButton
+				iconName={Platform.OS === 'ios' ? 'ios-funnel' : 'md-funnel'}
+				isActive={isFiltered}
+				title={buttonTitle}
+			/>
+		</Toolbar>
+	)
+}