render feature flag sections

source/views/settings/screens/feature-flags.tsx

@@ -1,57 +1,75 @@
 import * as React from 'react'
-import {ScrollView} from 'react-native'
-import {NoticeView} from '@frogpond/notice'
-import {white} from '@frogpond/colors'
+import {StyleSheet, SectionList} from 'react-native'
 import * as storage from '../../../lib/storage'
 import {NativeStackNavigationOptions} from '@react-navigation/native-stack'
-import {RouteProp, useRoute} from '@react-navigation/native'
-import {useNavigation} from '@react-navigation/native'
-import {
-	SettingsStackParamList,
-	ChangeTextEvent,
-} from '../../../navigation/types'
-import {Cell, Section, TableView} from '@frogpond/tableview'
 import {CellToggle} from '@frogpond/tableview/cells'
-import {ListEmpty, ListSeparator} from '@frogpond/lists'
-import {FlatList} from 'react-native-gesture-handler'
-import {
-	AppConfig,
-	FeatureFlagDataType,
-	FeatureFlagSectionType,
-} from '@frogpond/app-config'
+import {ListEmpty, ListSectionHeader, ListSeparator} from '@frogpond/lists'
+import * as c from '@frogpond/colors'
+import {AppConfig, FeatureFlagSectionType} from '@frogpond/app-config'
+import {groupBy} from 'lodash'
+import {LoadingView, NoticeView} from '@frogpond/notice'
 
 export const FeatureFlagsView = (): JSX.Element => {
+	let [loading, setLoading] = React.useState(true)
 	let [sections, setSections] = React.useState<FeatureFlagSectionType[]>([])
 
-	let navigation = useNavigation()
+	async function fetchData() {
+		let config = await AppConfig()
+		setSections(config)
+		setLoading(false)
+	}
 
 	React.useEffect(() => {
-		async function fetchData() {
-			let config = await AppConfig()
-			setSections(config)
-		}
 		fetchData()
-	}, [sections])
+	}, [])
+
+	if (!sections) {
+		return <ListEmpty mode="bug" />
+	}
+
+	let grouped = groupBy(sections, (s) => s.title)
+	let groupedSections = Object.entries(grouped).map(([key, value]) => ({
+		title: key,
+		data: value,
+	}))
 
 	return (
-		<FlatList
+		<SectionList
 			ItemSeparatorComponent={ListSeparator}
-			ListEmptyComponent={<NoticeView text="No feature flags found." />}
+			ListEmptyComponent={loading ? <LoadingView /> : <NoticeView text="No feature flags found." />}
+			contentContainerStyle={styles.contentContainer}
 			contentInsetAdjustmentBehavior="automatic"
-			data={sections}
-			renderItem={({item}) => (
-				<Cell
-					accessory="DisclosureIndicator"
-					onPress={() =>
-						navigation.navigate('FeatureFlagsDetail', {flags: item})
-					}
-					title={item.title}
-				/>
+			keyExtractor={(item, key) => `${item.title}-${key}`}
+			renderItem={({item}) => {
+				return item.data.map(({data}) => {
+					return data.map(({title, active, configKey}) => (
+						<CellToggle
+							key={configKey}
+							label={title}
+							onChange={(newValue) => {
+								storage.setFeatureFlag(configKey, newValue)
+								fetchData()
+							}}
+							value={Boolean(active)}
+						/>
+					))
+				})
+			}}
+			renderSectionHeader={({section: {title}}) => (
+				<ListSectionHeader title={title} />
 			)}
+			sections={groupedSections}
 		/>
 	)
 }
 
+let styles = StyleSheet.create({
+	contentContainer: {
+		flexGrow: 1,
+		backgroundColor: c.systemBackground,
+	},
+})
+
 export {FeatureFlagsView as View}
 
 export const NavigationOptions: NativeStackNavigationOptions = {