text: import React, { useState, useContext } from "react";
  import { Form, Button } from "semantic-ui-react";
  import { useMutation } from "@apollo/react-hooks";
  import gql from "graphql-tag";
  
  import { AuthContext } from "../context/auth";
  import { useForm } from "../util/hooks";
  
  const Login = (props) => {
    const context = useContext(AuthContext);
    const [errors, setErrors] = useState({});
  
    const { onChange, onSubmit, values } = useForm(loginUserCallback, {
      username: "",
      password: "",
    });
  
    const [loginUser, { loading }] = useMutation(LOGIN_USER, {
      update(_, { data: { login: userData } }) {
        context.login(userData);
        props.history.push("/");
      },
      onError(err) {
        setErrors(err.graphQLErrors[0].extensions.exception.errors);
      },
      variables: values,
    });
  
    function loginUserCallback() {
      loginUser();
    }
  
    return (
      <div className="form-container">
        <Form onSubmit={onSubmit} noValidate className={loading ? "loading" : ""}>
          <h1>Register</h1>
          <Form.Input
            label="Username"
            placeholder="Username"
            name="username"
            error={errors.username ? true : false}
            value={values.username}
            onChange={onChange}
            type="text"
          />
          <Form.Input
            label="Password"
            placeholder="Password"
            name="password"
            error={errors.password ? true : false}
            value={values.password}
            onChange={onChange}
            type="password"
          />
          <Button type="submit" primary>
            Login
          </Button>
        </Form>
        {Object.keys(errors).length > 0 && (
          <div className="ui error message">
            <ul className="list">
              {Object.values(errors).map((value) => (
                <li key={value}>{value}</li>
              ))}
            </ul>
          </div>
        )}
      </div>
    );
  };
  
  const LOGIN_USER = gql`
    mutation login($username: String!, $password: String!) {
      login(username: $username, password: $password) {
        id
        username
        email
        token
        createdAt
      }
    }
  `;
  
  export default Login;
  