aretherecookies-mobile/js/pages/ProfilePage.js

// @flow
import React from 'react';
import { View, Text, Switch, TextInput } from 'react-native';
import IconButton from '../components/IconButton';
import { palette } from '../ui-theme';
import { compose, withState, withHandlers, lifecycle } from 'recompose';
import { withRouterContext } from '../enhancers/routeEnhancers';
import { getLocation } from '../apis/PositionApi';
import Snackbar from 'react-native-snackbar';
import AsyncStorage from '@react-native-community/async-storage';

type Props = {
	zipcode: ?string,
	loading: boolean,
	setLoading: (l: boolean) => void,
	setZip: (zip: string | null) => void,
	saveZip: (zip: number) => Promise<void>,
	error: string,
	setError: (e: string) => void,
	toggleGPS: (a: boolean) => Promise<void>,
	router: {
		history: {
			replace: (route: string) => void,
		},
	},
	isLoggedIn: boolean,
};

export const ProfilePage = (props: Props) => {
	const {
		zipcode,
		loading,
		setZip,
		saveZip,
		error,
		toggleGPS,
		router: { history },
		isLoggedIn,
	} = props;
	const usingGPS = zipcode === 'usegps';
	return (
		<View style={{ flex: 1, flexDirection: 'column', padding: 15 }}>
			<Text style={{ fontSize: 32, marginBottom: 20, color: '#555555' }}>Profile</Text>
			<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
				<Text style={{ fontSize: 18 }}>Use My Location</Text>
				<Switch value={usingGPS} onValueChange={toggleGPS} />
			</View>
			{!usingGPS && (
				<View style={{ flexDirection: 'row' }}>
					<View
						style={{
							flex: 1,
							flexDirection: 'column',
							justifyContent: 'flex-end',
							height: 60,
						}}>
						<TextInput
							editable={!loading}
							value={zipcode}
							placeholder="zipcode"
							onChangeText={setZip}
							onEndEditing={saveZip}
							keyboardType="numeric"
							style={{
								fontSize: 18,
							}}
						/>
					</View>
				</View>
			)}
			{!!error && <Text style={{ fontSize: 16, color: 'red' }}>{error}</Text>}
			<View style={{ marginTop: 20 }}>
				{isLoggedIn && (
					<IconButton
						glyph="exit-to-app"
						text="Logout"
						onPress={() => history.push('/logout')}
						color={palette.accentColor}
						textStyle={{ color: palette.accentColor }}
					/>
				)}
				{!isLoggedIn && (
					<IconButton
						glyph="exit-to-app"
						text="Login"
						onPress={() => history.push('/login')}
						color={palette.accentColor}
						textStyle={{ color: palette.accentColor }}
					/>
				)}
			</View>
		</View>
	);
};

export default compose(
	withRouterContext,
	withState('loading', 'setLoading', false),
	withState('zipcode', 'setZip', null),
	withState('error', 'setError', ''),
	withHandlers({
		saveZip: (props: Props) => async () => {
			props.setError('');
			if (!props.zipcode || props.zipcode.length !== 5) {
				props.setError('Zipcode must be five digits');
				return;
			}
			props.setLoading(true);
			await AsyncStorage.setItem('zipcode', props.zipcode);
			props.setLoading(false);
			getLocation();
			Snackbar.show({ title: 'Zipcode updated.' });
		},
	}),
	withHandlers({
		toggleGPS: (props: Props) => async (useGPS: boolean) => {
			try {
				props.setLoading(true);
				props.setZip(useGPS ? 'usegps' : '');
				await AsyncStorage.setItem('zipcode', 'usegps');
			} catch (error) {
				console.error(error); //eslint-disable-line no-console
				props.setZip(props.zipcode || '');
			} finally {
				props.setLoading(false);
			}
		},
		getZipcode: ({ setLoading, setZip }) => async () => {
			setLoading(true);
			try {
				setZip(await AsyncStorage.getItem('zipcode'));
			} catch (error) {
				console.error(error); //eslint-disable-line no-console
			} finally {
				setLoading(false);
			}
		},
	}),
	lifecycle({
		componentDidMount() {
			this.props.getZipcode();
		},
	})
)(ProfilePage);