text: import React, { useRef, useState } from "react";
  import { Form, Button, Card, Alert } from "react-bootstrap";
  import { Link, useNavigate } from "react-router-dom";
  
  import { useAuth } from "../contexts/AuthContext";
  
  export default function UpdateProfile() {
    const emailRef = useRef();
    const passwordRef = useRef();
    const passwordConfirmRef = useRef();
    const { currentUser, updateUserEmail, updateUserPassword } = useAuth();
    const [error, setError] = useState("");
    const [loading, setLoading] = useState(false);
    const navigate = useNavigate();
  
    function handleSubmit(e) {
      e.preventDefault();
  
      // validation check
      if (passwordRef.current.value !== passwordConfirmRef.current.value) {
        // exit the function immediately
        return setError("Passwords do not match");
      }
  
      const promises = [];
  
      setError("");
      setLoading(true);
  
      if (emailRef.current.value !== currentUser.email) {
        promises.push(updateUserEmail(emailRef.current.value));
      }
  
      if (passwordRef.current.value) {
        promises.push(updateUserPassword(passwordRef.current.value));
      }
  
      Promise.all(promises)
        .then(() => {
          navigate("/");
        })
        .catch(() => {
          setError("Failed to update account");
        })
        .finally(() => {
          setLoading(false);
        });
    }
  
    return (
      <>
        <Card>
          <Card.Body>
            <h2 className="text-center mb-4">Update Profile</h2>
            {error && <Alert variant="danger">{error}</Alert>}
            <Form onSubmit={handleSubmit}>
              <Form.Group id="email">
                <Form.Label>Email</Form.Label>
                <Form.Control
                  type="email"
                  required
                  ref={emailRef}
                  defaultValue={currentUser.email}
                />
              </Form.Group>
              <Form.Group id="password">
                <Form.Label>Password</Form.Label>
                <Form.Control
                  type="password"
                  ref={passwordRef}
                  placeholder={"Leave blank to keep the same"}
                />
              </Form.Group>
              <Form.Group id="password-confirmation">
                <Form.Label>Password Confirm</Form.Label>
                <Form.Control
                  type="password"
                  ref={passwordConfirmRef}
                  placeholder={"Leave blank to keep the same"}
                />
              </Form.Group>
              <Button type="submit" className="w-100" disabled={loading}>
                Update
              </Button>
            </Form>
          </Card.Body>
        </Card>
        <div className="w-100 text-center">
          <Link to="/">Cancel</Link>
        </div>
      </>
    );
  }
  