Untitled

import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';

export default function Profile() {
  const [email, setEmail] = useState('');

  const navigate = useNavigate();
  const navigateDoneRecipes = () => {
    navigate('/done-recipes');
  };
  const navigateFavorite = () => {
    navigate('/favorite-recipes');
  };
  const navigateLogin = () => {
    navigate('/');
    localStorage.clear();
  };
  useEffect(() => {
    const user = localStorage.getItem('user');
    setEmail(user);
  }, []);

  return (
    <div>
      <h1 data-testid="profile-email">{email}</h1>
      <button
        onClick={ navigateDoneRecipes }
        data-testid="profile-done-btn"
      >
        Done Recipes

      </button>
      <button
        onClick={ navigateFavorite }
        data-testid="profile-favorite-btn"
      >
        Favorite Recipes

      </button>
      <button
        onClick={ navigateLogin }
        data-testid="profile-logout-btn"
      >
        Logout

      </button>

    </div>
  );
}