Add map reporting screen

source/navigation.js

@@ -18,7 +18,7 @@ import {MenusView} from './views/menus'
 import {FilterView} from './views/components/filter'
 import NewsView from './views/news'
 import SISView, {BigBalancesView} from './views/sis'
-import {MapView} from './views/map-carls'
+import {MapView, MapReporterView} from './views/map-carls'
 import {StudentWorkDetailView} from './views/sis/student-work-carls'
 import {
 	BuildingHoursView,
@@ -103,6 +103,7 @@ export const AppNavigator = StackNavigator(
 		OtherModesDetailView: {screen: OtherModesDetailView},
 		BusMapView: {screen: BusMapView},
 		MapView: {screen: MapView},
+		MapReporterView: {screen: MapReporterView},
 		BigBalancesView: {screen: BigBalancesView},
 	},
 	{

source/views/map-carls/index.js

@@ -1,3 +1,4 @@
 // @flow
 
 export {MapView} from './mapbox'
+export {MapReporterView} from './report'

source/views/map-carls/info.js

@@ -26,13 +26,20 @@ type Props = {
 	feature: Feature<Building>,
 	onClose: () => any,
 	overlaySize: 'min' | 'mid' | 'max',
+	navigation: any,
 }
 
 export class BuildingInfo extends React.Component<Props> {
 	onClose = () => {
 		this.props.onClose()
 	}
 
+	openReportScreen = () => {
+		this.props.navigation.push('MapReporterView', {
+			building: this.props.feature.properties,
+		})
+	}
+
 	makeBuildingCategory = (building: Building) => {
 		let blacklist = ['hall', 'house', 'building']
 		return building.categories
@@ -165,6 +172,19 @@ export class BuildingInfo extends React.Component<Props> {
 							</Row>
 						</Section>
 					) : null}
+
+					<Section>
+						<Row alignItems="center">
+							<Column flex={1}>
+								<SectionTitle>Found an issue?</SectionTitle>
+								<SectionContent>Let us know!</SectionContent>
+							</Column>
+							<OutlineButton
+								onPress={this.openReportScreen}
+								title="Report an Issue"
+							/>
+						</Row>
+					</Section>
 				</ScrollView>
 			</React.Fragment>
 		)
@@ -194,7 +214,7 @@ const SectionListTitle = glamorous(SectionTitle)({
 const OutlineButton = (props: {
 	title: string,
 	onPress: () => any,
-	disabled: boolean,
+	disabled?: boolean,
 }) => (
 	<Touchable
 		accessibilityTraits="button"

source/views/map-carls/mapbox.js

@@ -209,6 +209,7 @@ export class MapView extends React.Component<Props, State> {
 					{this.state.selectedBuilding ? (
 						<BuildingInfo
 							feature={this.state.selectedBuilding}
+							navigation={this.props.navigation}
 							onClose={this.onInfoOverlayClose}
 							overlaySize={this.state.overlaySize}
 						/>

source/views/map-carls/report/editor.js

@@ -0,0 +1,118 @@
+// @flow
+import * as React from 'react'
+import {ScrollView, View, Text, StyleSheet} from 'react-native'
+import {CellTextField} from '../../components/cells/textfield'
+import {ButtonCell} from '../../components/cells/button'
+import {TableView, Section} from 'react-native-tableview-simple'
+import {submitReport} from './submit'
+import type {Building} from '../types'
+import * as c from '../../components/colors'
+import type {TopLevelViewPropsType} from '../../types'
+
+type Props = TopLevelViewPropsType & {
+	navigation: {state: {params: {item: Building}}},
+}
+
+type State = {
+	name: string,
+	description: string,
+}
+
+export class MapReporterView extends React.PureComponent<Props, State> {
+	static navigationOptions = () => {
+		return {
+			title: 'Suggest an Edit',
+		}
+	}
+
+	static getDerivedStateFromProps(nextProps: Props) {
+		let building = nextProps.navigation.state.params.building
+		return {name: building.name}
+	}
+
+	state = {
+		name: this.props.navigation.state.params.building.name,
+		description: '',
+	}
+
+	submit = () => {
+		submitReport(this.state)
+	}
+
+	onChangeDescription = (desc: string) => {
+		this.setState(() => ({description: desc}))
+	}
+
+	render() {
+		let name = this.props.navigation.state.params.building.name
+		let description = this.state.description
+
+		return (
+			<ScrollView
+				keyboardDismissMode="on-drag"
+				keyboardShouldPersistTaps="always"
+			>
+				<View style={styles.helpWrapper}>
+					<Text style={styles.helpTitle}>Thanks for spotting a problem!</Text>
+					<Text style={styles.helpDescription}>
+						There’s a problem with “{name}”, you say?
+					</Text>
+					<Text style={styles.helpDescription}>
+						If you could tell us what the problems are, we’d greatly appreciate
+						it.
+					</Text>
+				</View>
+
+				<TableView>
+					<Section header="DESCRIPTION">
+						<DefinitionCell
+							onChange={this.onChangeDescription}
+							text={description}
+						/>
+					</Section>
+
+					<Section footer="Thanks for reporting!">
+						<ButtonCell onPress={this.submit} title="Submit Report" />
+					</Section>
+				</TableView>
+			</ScrollView>
+		)
+	}
+}
+
+type TextFieldProps = {text: string, onChange: string => any}
+const DefinitionCell = ({text, onChange = () => {}}: TextFieldProps) => (
+	<CellTextField
+		autoCapitalize="sentences"
+		hideLabel={true}
+		multiline={true}
+		onChangeText={onChange}
+		onSubmitEditing={onChange}
+		placeholder="What’s the problem?"
+		returnKeyType="default"
+		value={text}
+	/>
+)
+
+const styles = StyleSheet.create({
+	helpWrapper: {
+		backgroundColor: c.white,
+		borderTopWidth: StyleSheet.hairlineWidth,
+		borderBottomWidth: StyleSheet.hairlineWidth,
+		borderTopColor: c.iosHeaderTopBorder,
+		borderBottomColor: c.iosHeaderBottomBorder,
+		marginBottom: 10,
+		paddingBottom: 15,
+		paddingTop: 15,
+	},
+	helpTitle: {
+		fontSize: 16,
+		fontWeight: 'bold',
+		paddingHorizontal: 15,
+	},
+	helpDescription: {
+		fontSize: 14,
+		paddingTop: 5,
+		paddingHorizontal: 15,
+	},
+})

source/views/map-carls/report/index.js

@@ -0,0 +1,3 @@
+// @flow
+
+export {MapReporterView} from './editor'

source/views/map-carls/report/submit.js

@@ -0,0 +1,30 @@
+// @flow
+
+import {sendEmail} from '../../components/send-email'
+import {GH_NEW_ISSUE_URL} from '../../../globals'
+
+export function submitReport({name, description}: {[key: string]: string}) {
+	const body = makeEmailBody({name, description})
+
+	return sendEmail({
+		to: ['[email protected]'],
+		subject: `[carls-map] Suggestion for building ${name}`,
+		body,
+	})
+}
+
+function makeEmailBody({name, description}) {
+	return `
+Hi! Thanks for letting us know about a map change.
+
+With regards to the building named "${name}", you said:
+
+> ${description}
+
+Please do not change anything below this line.
+
+------------
+
+Project maintainers: ${GH_NEW_ISSUE_URL}
+`
+}