Filterable list candidates

[drewvolz]

What views would it be helpful to see a filterable interface added?

🧠 Filterable view Ideas:

• Student Orgs
  • searching goes pretty far but categories would help drill it down
• Open Student Jobs
  • quite a lot of visual info to parse at the moment

🎈Areas we've applied this to:

• SIS course search
• Menus
• News: 🔖 news filtertoolbar #6152
• Streams:
  • [streams part 1] Refactor streams data fetching with useAsync #6412
  • [streams part 2] add category filtering to streams #6413

[drewvolz]

Do we have a preference for how something like news would get filtered?

Idea 1: <FilterBar />

~	~

Idea 2: <ContextMenuButton />

[rye]

I like Option 2 as well

[hawkrives]

Wow, talk about a typo. I meant ①… I like 2, but it's so different? Now, if we reworked - say - filterbar to use UIPopupMenu or w/e, I'd love that!

[drewvolz]

Either way, the popover context menu is iOS specific. Is there a native equivalent for Android?

[hawkrives]

They've had a similar thing for a while, I think paper calls it "menu".

.	.	.

[drewvolz]

Okay. WIth iOS, I've implemented ① in PR #6152 👍

---

Experimental follow-up with native context menu

This follow-up is in the experimental and exploratory stage for us to see what more native components would look and feel like.

It can be done but my implementation feels unstable at the moment. The component works well. My issue is that I was lacking better ways to look up if something was added or removed from state... we are returned menu item title and index which is separate data from our own filter type.

I had to reach for a solution to check what was tapped via item title to see if it exists in the current selected state and remove/add it this way. Not great.

---

Reiterating that #6152 is in good shape and does not contain the above/below changes.

• branch: drew/native-news-filters
• patch: react-native-context-menu.patch.txt

patch diff (same as above but syntax highlighted)

diff --git a/modules/filter/filter-toolbar-button.tsx b/modules/filter/filter-toolbar-button.tsx
index 662b65362..cdb5f215f 100644
--- a/modules/filter/filter-toolbar-button.tsx
+++ b/modules/filter/filter-toolbar-button.tsx
@@ -10,8 +10,8 @@ import {
 	ViewStyle,
 } from 'react-native'
 import Icon from 'react-native-vector-icons/Ionicons'
-import type {FilterType} from './types'
-import {FilterPopover} from './filter-popover'
+import type {FilterType, ListSpecType} from './types'
+import {ContextMenuButton, MenuActionConfig} from 'react-native-ios-context-menu'
 import * as c from '@frogpond/colors'
 import {Touchable} from '@frogpond/touchable'
 import {useTheme} from '@frogpond/app-theme'
@@ -100,8 +100,53 @@ export function FilterToolbarButton(props: Props): JSX.Element | null {
 		buttonStyles.text,
 	]
 
+	let options: MenuConfig['menuItems'] = filter.spec.options.map(
+		(option, id) => ({
+			actionKey: id.toString(),
+			actionTitle: option.title,
+		}),
+	)
+
+	const handleOnPress = (nativeEvent: MenuActionConfig) => {
+		let selectedMenuItem = filter.spec.options[nativeEvent.actionKey]
+
+		let isFilterActive = filter.spec.selected.some((f: ListSpecType) => f.title === selectedMenuItem.title)
+		
+		if (isFilterActive) {
+			let indexToGet = filter.spec.selected.indexOf(nativeEvent.actionTitle)
+			let selected = filter.spec.selected.slice(indexToGet)
+
+			// remove the selected filter item (e.g. return the remaining)
+			onClosePopover({
+				...filter,
+				spec: {
+					...filter.spec,
+					selected: selected,
+				}
+			})
+		} else {
+			let selected = [...filter.spec.selected, selectedMenuItem]
+
+			// add the selected filter item
+			onClosePopover({
+				...filter,
+				spec: {
+					...filter.spec,
+					selected: selected
+				}
+			})
+		}
+	}
+
 	return (
-		<React.Fragment>
+		<ContextMenuButton
+			isMenuPrimaryAction={true}
+			menuConfig={{
+				menuTitle: '',
+				menuItems: options,
+			}}
+			onPressMenuItem={({nativeEvent}) => handleOnPress(nativeEvent)}
+		>
 			<Touchable
 				ref={touchable}
 				highlight={false}
@@ -111,14 +156,6 @@ export function FilterToolbarButton(props: Props): JSX.Element | null {
 				<Text style={buttonTextStyle}>{title}</Text>
 				<Icon name={icon} size={18} style={activeContentStyle} />
 			</Touchable>
-			{popoverVisible && (
-				<FilterPopover
-					anchor={touchable}
-					filter={filter}
-					onClosePopover={onClosePopover}
-					visible={true}
-				/>
-			)}
-		</React.Fragment>
+		</ContextMenuButton>
 	)
 }
diff --git a/source/views/news/news-list.tsx b/source/views/news/news-list.tsx
index 5d4d44209..970bdc1db 100644
--- a/source/views/news/news-list.tsx
+++ b/source/views/news/news-list.tsx
@@ -81,7 +81,7 @@ export const NewsList = (props: Props): JSX.Element => {
 				spec: {
 					title: 'Categories',
 					options: filterCategories,
-					selected: filterCategories,
+					selected: [],
 					mode: 'OR',
 					displayTitle: true,
 				},

---