AppEmailScreen.tsx

import React from "react";
import { compose } from "react-apollo";
import { Button, TextInput } from "react-native";

import { Screen } from "src/ui";
import { UserQueryResponse } from "src/graphql/responses";
import { Success, UpdateUserInfoMutationArgs } from "src/graphql/types";
import { withUpdateUserInfoMutation, withUser } from "src/graphql/helpers";

interface ComponentProps {
  user: UserQueryResponse;
  updateUserInfo: IMutation<UpdateUserInfoMutationArgs, Promise<Success>>;
}

interface ComponentState {
  email: string;
}

export class EmailScreenComponent extends React.Component<
  ComponentProps,
  ComponentState
> {
  constructor(props: ComponentProps) {
    super(props);

    this.state = {
      email: this.props.user.user.email,
    };
  }

  render(): JSX.Element {
    return (
      <Screen>
        <TextInput
          value={this.state.email}
          onChangeText={email => this.setState({ email })}
        />
        <Button
          title="Save Email"
          onPress={() =>
            this.props.updateUserInfo({
              variables: { email: this.state.email },
            })
          }
        />
      </Screen>
    );
  }
}

export default compose(
  withUser,
  withUpdateUserInfoMutation,
)(EmailScreenComponent);