saleor-dashboard/src/auth/views/NewPassword.tsx

import { parse as parseQs } from "qs";
import React from "react";
import { RouteComponentProps } from "react-router";

import useNavigator from "@saleor/hooks/useNavigator";
import useUser from "@saleor/hooks/useUser";
import NewPasswordPage, {
  NewPasswordPageFormData
} from "../components/NewPasswordPage";
import { SetPasswordMutation } from "../mutations";
import {
  SetPassword,
  SetPassword_setPassword_errors
} from "../types/SetPassword";
import { NewPasswordUrlQueryParams } from "../urls";

const NewPassword: React.FC<RouteComponentProps> = ({ location }) => {
  const navigate = useNavigator();
  const { loginByToken } = useUser();
  const [errors, setErrors] = React.useState<
    SetPassword_setPassword_errors[]
  >();

  const params: NewPasswordUrlQueryParams = parseQs(location.search.substr(1));

  const handleSetPassword = async (data: SetPassword) => {
    if (data.setPassword.errors.length === 0) {
      loginByToken(data.setPassword.token, data.setPassword.user);
      navigate("/", true);
    } else {
      setErrors(data.setPassword.errors);
    }
  };

  return (
    <SetPasswordMutation onCompleted={handleSetPassword}>
      {(setPassword, setPasswordOpts) => {
        const handleSubmit = (data: NewPasswordPageFormData) =>
          setPassword({
            variables: {
              email: params.email,
              password: data.password,
              token: params.token
            }
          });

        return (
          <NewPasswordPage
            errors={errors}
            disabled={setPasswordOpts.loading}
            onSubmit={handleSubmit}
          />
        );
      }}
    </SetPasswordMutation>
  );
};

NewPassword.displayName = "NewPassword";
export default NewPassword;