Merge pull request #2884 from StoDevX/debug

List redux info in beta settings

Author: hawkrives

modules/constants/index.js

@@ -26,7 +26,8 @@ let IS_RC: boolean
 export const isRc = () => IS_RC
 
 // checks if the build should show debugging tools
-export const isDevMode = () => !IS_PRODUCTION || (IS_ALPHA || IS_BETA || IS_PRE || IS_RC)
+export const isDevMode = () =>
+	!IS_PRODUCTION || (IS_ALPHA || IS_BETA || IS_PRE || IS_RC)
 
 export const setVersionInfo = (versionStr: string) => {
 	let [version, buildNum] = versionStr.split('+')

source/navigation/routes.js

@@ -35,6 +35,7 @@ import {
 	SettingsView,
 	IconSettingsView,
 	CreditsView,
+	DebugView,
 	LegalView,
 	PrivacyView,
 	PushNotificationsSettingsView,
@@ -65,6 +66,7 @@ export const routes = {
 	ContactsView: {screen: ContactsView},
 	ContactsDetailView: {screen: ContactsDetailView},
 	CreditsView: {screen: CreditsView},
+	DebugView: {screen: DebugView},
 	DictionaryDetailView: {screen: DictionaryDetailView},
 	DictionaryView: {screen: DictionaryView},
 	DictionaryEditorView: {screen: DictionaryEditorView},

source/views/settings/index.js

@@ -3,6 +3,7 @@
 export {SettingsView} from './screens/overview'
 export {IconSettingsView} from './screens/change-icon'
 export {CreditsView} from './screens/credits'
+export {DebugView} from './screens/debug'
 export {LegalView} from './screens/legal'
 export {PrivacyView} from './screens/privacy'
 export {

source/views/settings/screens/debug/index.js

@@ -0,0 +1,3 @@
+// @flow
+
+export {ConnectedDebugListView as DebugView} from './list'

source/views/settings/screens/debug/list.js

@@ -0,0 +1,73 @@
+// @flow
+
+import * as React from 'react'
+import {FlatList} from 'react-native'
+import {DebugRow} from './row'
+import {connect} from 'react-redux'
+import {NoticeView} from '@frogpond/notice'
+import {ListSeparator} from '@frogpond/lists'
+import toPairs from 'lodash/toPairs'
+import {toLaxTitleCase} from 'titlecase'
+import get from 'lodash/get'
+import type {NavigationState} from 'react-navigation'
+import type {TopLevelViewPropsType} from '../../../types'
+
+type Props = TopLevelViewPropsType & {
+	state: any,
+}
+
+export class DebugListView extends React.PureComponent<Props> {
+	static navigationOptions = ({navigation}: NavigationState) => {
+		let titleParam = navigation.getParam('keyPath', 'Debug')
+		let title =
+			titleParam === 'Debug' ? titleParam : titleParam[titleParam.length - 1]
+
+		return {
+			title: toLaxTitleCase(title),
+		}
+	}
+
+	onPressRow = (row: any) => {
+		let keyPath = this.props.navigation.getParam('keyPath', [])
+		keyPath = [...keyPath, row.key]
+		this.props.navigation.push('DebugView', {keyPath: keyPath})
+	}
+
+	keyExtractor = (item: any) => item.key
+
+	renderItem = ({item}: {item: any}) => (
+		<DebugRow
+			data={item}
+			navigation={this.props.navigation}
+			onPress={() => this.onPressRow(item)}
+		/>
+	)
+
+	render() {
+		let keyed = toPairs(this.props.state).map(([key, value]) => {
+			return {key, value}
+		})
+
+		return (
+			<FlatList
+				ItemSeparatorComponent={ListSeparator}
+				ListEmptyComponent={<NoticeView text="Nothing found in redux." />}
+				data={keyed}
+				keyExtractor={this.keyExtractor}
+				renderItem={this.renderItem}
+			/>
+		)
+	}
+}
+
+function mapStateToProps(state, ownProps) {
+	if (!ownProps.navigation.getParam('keyPath', null)) {
+		return {state}
+	}
+
+	return {
+		state: get(state, ownProps.navigation.getParam('keyPath')),
+	}
+}
+
+export const ConnectedDebugListView = connect(mapStateToProps)(DebugListView)

source/views/settings/screens/debug/row.js

@@ -0,0 +1,50 @@
+// @flow
+
+import * as React from 'react'
+import {Cell} from 'react-native-tableview-simple'
+import type {TopLevelViewPropsType} from '../../../types'
+
+type Props = TopLevelViewPropsType & {
+	data: {key: string, value: any},
+	onPress: string => any,
+}
+
+export class DebugRow extends React.PureComponent<Props> {
+	render() {
+		const {data} = this.props
+
+		let rowDetail = '<unknown>'
+		let arrowPosition = 'none'
+
+		if (Array.isArray(data.value)) {
+			// Array(0), Array(100), etc
+			rowDetail = `Array(${data.value.length})`
+			arrowPosition = 'center'
+		} else if (typeof data.value === 'object' && data.value !== null) {
+			// [object Object], [object Symbol], etc
+			rowDetail = data.value.toString()
+			arrowPosition = 'center'
+		} else if (typeof data.value === 'string') {
+			if (data.value.length > 20) {
+				rowDetail = `"${data.value.substr(0, 20)}…"`
+			} else {
+				rowDetail = JSON.stringify(data.value)
+			}
+		} else {
+			rowDetail = JSON.stringify(data.value)
+		}
+
+		const arrowStyle = arrowPosition === 'none' ? false : 'DisclosureIndicator'
+		const onPress = arrowPosition === 'none' ? null : this.props.onPress
+
+		return (
+			<Cell
+				accessory={arrowStyle}
+				cellStyle="RightDetail"
+				detail={rowDetail}
+				onPress={onPress}
+				title={data.key}
+			/>
+		)
+	}
+}

source/views/settings/screens/overview/odds-and-ends.js

@@ -6,12 +6,15 @@ import {setFeedbackStatus} from '../../../../redux/parts/settings'
 import type {ReduxState} from '../../../../redux'
 import {connect} from 'react-redux'
 import {type NavigationScreenProp} from 'react-navigation'
+import {isDevMode} from '@frogpond/constants'
 
 type Props = {
 	navigation: NavigationScreenProp<*>,
 }
 
 export class OddsAndEndsSection extends React.Component<Props> {
+	onDebugButton = () => this.props.navigation.navigate('DebugView')
+
 	onNotificationsButton = () => {
 		this.props.navigation.navigate('PushNotificationsSettingsView')
 	}
@@ -30,6 +33,10 @@ export class OddsAndEndsSection extends React.Component<Props> {
 				<ConnectedAnalyticsCell />
 
 				<ConnectedNotificationsCell onPress={this.onNotificationsButton} />
+
+				{isDevMode && (
+					<PushButtonCell onPress={this.onDebugButton} title="Debug" />
+				)}
 			</Section>
 		)
 	}