Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- 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 };
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement