aretherecookies-mobile/js/pages/ZipcodePage.js

// @flow

import React from 'react';
import { View, Text, TextInput, Button } from 'react-native';
import { compose, withState, withHandlers } from 'recompose';
import { withRouterContext } from '../enhancers/routeEnhancers';
import theme from '../ui-theme';
import AsyncStorage from '@react-native-community/async-storage';

type Props = {
	zipcode: string,
	setZipcode: (zip: string) => void,
	router: {
		history: {
			replace: (route: string) => void,
		},
	},
	saveZip: (z: string) => Promise<void>,
};

const ZipcodePage = ({ zipcode, setZipcode, saveZip }: Props) => {
	return (
		<View style={{ flex: 1, justifyContent: 'center', padding: 30 }}>
			<Text style={{ fontSize: 18 }}>
				OK, we won't detect your location. Instead, please enter a zipcode for us to use as your
				default location.
			</Text>
			<TextInput
				onChangeText={setZipcode}
				value={zipcode}
				placeholder="Zipcode"
				keyboardType="numeric"
				style={{ marginBottom: 20 }}
				maxLength={5}
				autoFocus
			/>
			<Button
				onPress={saveZip}
				title="Save"
				color={theme.palette.primaryColor}
				disabled={!(zipcode && zipcode.length === 5)}
			/>
		</View>
	);
};

export default compose(
	withState('zipcode', 'setZipcode', ''),
	withRouterContext,
	withHandlers({
		saveZip: (props: Props) => async () => {
			await AsyncStorage.setItem('zipcode', props.zipcode);
			props.router.history.replace('/list/food');
		},
	})
)(ZipcodePage);