Settings.js

import React from "react";
import { Formik } from "formik";
import * as Yup from "yup";
import styled, { keyframes } from "styled-components";
import { Mutation, Query } from "react-apollo";
import { Button, Flex, Card, Box } from "rebass";
import gql from "graphql-tag";
import Link from "./Link";
import Text from "./Text";
import Error from "./ErrorMessage";
import User, { CURRENT_USER_QUERY } from "./User";


const UPDATE_USER_MUTATION = gql`
  mutation UPDATE_USER_MUTATION(
    $id: ID!
    $email: String
    $firstName: String
    $lastName: String
  ) {
    updateUser(
      id: $id
      email: $email
      firstName: $firstName
      lastName: $lastName
    ) {
      id
      email
      firstName
      lastName
    }
  }
`;

const StyledInput = styled(Box).attrs({
  as: "input",
})`
  font-size: 1em;
  border-radius: 3px;
  width: 15em;
  border: 1px solid ${props => props.theme.colors.greys[1]};
  padding: 0.5em;
`;

const UpdateSchema = Yup.object().shape({
  email: Yup.string()
    .email("Invalid email address")
    .required("You must enter an email address"),
  firstName: Yup.string()
    .min(2, "Must be longer than 2 characters")
    .required("Please enter your first name"),
  lastName: Yup.string()
    .min(2, "Must be longer than 2 characters")
    .required("Please enter your last name"),
});

const Settings = props => (
  <Query query={CURRENT_USER_QUERY} variables={{ id: props.id }}>
    {({ data: { currentUser } }) => (
      <Mutation mutation={UPDATE_USER_MUTATION}>
        {(updateUser, { error, loading, called }) => (
          <Formik
            initialValues={{
              id: props.userId,
              email: currentUser.email,
              firstName: currentUser.firstName,
              lastName: currentUser.lastName,
            }}
            validationSchema={UpdateSchema}
            onSubmit={values => {
              updateUser({
                variables: {
                  id: currentUser.id,
                  email: values.email,
                  firstName: values.firstName,
                  lastName: values.lastName,
                },
              });
            }}
            render={({
              values,
              errors,
              touched,
              handleChange,
              handleBlur,
              handleSubmit,
              isSubmitting,
            }) => (
              <Flex
                flexDirection={["column"]}
                mb={[2, 0]}
                width={1}
                alignItems="center"
                height={1}
              >
                <form onSubmit={handleSubmit}>
                  <fieldset disabled={loading} aria-busy={loading}>
                    <Box>
                      <Error error={error} />
                      <Box mb="30px">
                        <label htmlFor="email">
                          <Text my={2}>Email</Text>
                          <StyledInput
                            placeholder="Enter your email address"
                            type="email"
                            name="email"
                            onChange={handleChange}
                            onBlur={handleBlur}
                            value={values.email}
                          />

                          {!error && !loading && called && (
                            <Text fontSize={1} color="green" pt={1}>
                              Email successfully updated!
                            </Text>
                          )}

                          {touched.email && errors && errors.email && (
                            <Text fontSize={1} color="red" pt={1}>
                              {errors.email}
                            </Text>
                          )}
                        </label>
                      </Box>

                      <Box mb="30px">
                        <label htmlFor="First Name">
                          <Text my={2}>First Name</Text>
                          <StyledInput
                            placeholder="Please enter your first name"
                            type="text"
                            name="firstName"
                            onChange={handleChange}
                            onBlur={handleBlur}
                            value={values.firstName}
                          />

                          {!error && !loading && called && (
                            <Text fontSize={1} color="green" pt={1}>
                              First name updated!
                            </Text>
                          )}

                          {touched.firstName && errors && errors.firstName && (
                            <Text fontSize={1} color="red" pt={1}>
                              {errors.firstName}
                            </Text>
                          )}
                        </label>
                      </Box>

                      <Box mb="30px">
                        <label htmlFor="Last Name">
                          <Text my={2}>Last Name</Text>
                          <StyledInput
                            placeholder="Please enter your last name"
                            type="text"
                            name="lastName"
                            onChange={handleChange}
                            onBlur={handleBlur}
                            value={values.lastName}
                          />

                          {!error && !loading && called && (
                            <Text fontSize={1} color="green" pt={1}>
                              Last name updated!
                            </Text>
                          )}

                          {touched.lastName && errors && errors.lastName && (
                            <Text fontSize={1} color="red" pt={1}>
                              {errors.lastName}
                            </Text>
                          )}
                        </label>
                      </Box>
                      <Box>
                        <Button
                          type="submit"
                          disabled={
                            isSubmitting ||
                            !!(errors.email && touched.email) ||
                            !!(errors.firstName && touched.firstName) ||
                            !!(errors.lastName && touched.lastName)
                          }
                          width={1}
                          primary
                        >
                          Update
                        </Button>
                      </Box>
                    </Box>
                  </fieldset>
                </form>
              </Flex>
            )}
          />
        )}
      </Mutation>
    )}
  </Query>
);

export default Settings;
export { UPDATE_USER_MUTATION };