aretherecookies-mobile/js/pages/ProfilePage.js

// @flow
import React from "react";
import { View, Text, Switch, TextInput, AsyncStorage } 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";

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);