Hotel-Booking/client/src/examples/useAuthStoreExamples.tsx

/**
 * Example: How to use useAuthStore in components
 * 
 * This file is for reference only, should not be used 
 * in production
 */

import { useNavigate } from 'react-router-dom';
import useAuthStore from '../store/useAuthStore';

// ============================================
// Example 1: Login Component
// ============================================
export const LoginExample = () => {
  const { login, isLoading, error } = useAuthStore();
  const navigate = useNavigate();

  const handleLogin = async (
    email: string, 
    password: string
  ) => {
    try {
      await login({ email, password });
      navigate('/dashboard');
    } catch (error) {
      // Error has been handled in store
      console.error('Login failed:', error);
    }
  };

  return (
    <div>
      {error && <p className="text-red-500">{error}</p>}
      <button 
        onClick={() => handleLogin(
          'user@example.com', 
          'password123'
        )}
        disabled={isLoading}
      >
        {isLoading ? 'Processing...' : 'Login'}
      </button>
    </div>
  );
};

// ============================================
// Example 2: Register Component
// ============================================
export const RegisterExample = () => {
  const { register, isLoading } = useAuthStore();
  const navigate = useNavigate();

  const handleRegister = async () => {
    try {
      await register({
        name: 'John Doe',
        email: 'john@example.com',
        password: 'password123',
        phone: '0123456789'
      });
      navigate('/login');
    } catch (error) {
      console.error('Register failed:', error);
    }
  };

  return (
    <button 
      onClick={handleRegister} 
      disabled={isLoading}
    >
      {isLoading ? 'Processing...' : 'Register'}
    </button>
  );
};

// ============================================
// Example 3: User Profile Display
// ============================================
export const UserProfileExample = () => {
  const { userInfo, isAuthenticated } = useAuthStore();

  if (!isAuthenticated) {
    return <p>Please login</p>;
  }

  return (
    <div>
      <h2>User Information</h2>
      <p>Name: {userInfo?.name}</p>
      <p>Email: {userInfo?.email}</p>
      <p>Role: {userInfo?.role}</p>
      {userInfo?.avatar && (
        <img 
          src={userInfo.avatar} 
          alt={userInfo.name} 
        />
      )}
    </div>
  );
};

// ============================================
// Example 4: Logout Button
// ============================================
export const LogoutButtonExample = () => {
  const { logout, isLoading } = useAuthStore();
  const navigate = useNavigate();

  const handleLogout = async () => {
    await logout();
    navigate('/login');
  };

  return (
    <button 
      onClick={handleLogout} 
      disabled={isLoading}
    >
      {isLoading ? 'Processing...' : 'Logout'}
    </button>
  );
};

// ============================================
// Example 5: Forgot Password
// ============================================
export const ForgotPasswordExample = () => {
  const { forgotPassword, isLoading } = useAuthStore();

  const handleForgotPassword = async (
    email: string
  ) => {
    try {
      await forgotPassword({ email });
      // Toast will display success message
    } catch (error) {
      console.error('Forgot password failed:', error);
    }
  };

  return (
    <button 
      onClick={() => 
        handleForgotPassword('user@example.com')
      }
      disabled={isLoading}
    >
      Send password reset email
    </button>
  );
};

// ============================================
// Example 6: Reset Password
// ============================================
export const ResetPasswordExample = () => {
  const { resetPassword, isLoading } = useAuthStore();
  const navigate = useNavigate();

  const handleResetPassword = async (
    token: string,
    password: string
  ) => {
    try {
      await resetPassword({
        token,
        password,
        confirmPassword: password
      });
      navigate('/login');
    } catch (error) {
      console.error('Reset password failed:', error);
    }
  };

  return (
    <button 
      onClick={() => 
        handleResetPassword(
          'reset-token-123', 
          'newpassword123'
        )
      }
      disabled={isLoading}
    >
      Reset Password
    </button>
  );
};

// ============================================
// Example 7: Conditional Rendering by Role
// ============================================
export const RoleBasedComponentExample = () => {
  const { userInfo } = useAuthStore();

  return (
    <div>
      {userInfo?.role === 'admin' && (
        <button>Admin Panel</button>
      )}
      {userInfo?.role === 'staff' && (
        <button>Staff Tools</button>
      )}
      {userInfo?.role === 'customer' && (
        <button>Customer Dashboard</button>
      )}
    </div>
  );
};

// ============================================
// Example 8: Auth State Check
// ============================================
export const AuthStateCheckExample = () => {
  const { 
    isAuthenticated, 
    isLoading, 
    token 
  } = useAuthStore();

  if (isLoading) {
    return <p>Loading...</p>;
  }

  if (!isAuthenticated || !token) {
    return <p>You are not logged in</p>;
  }

  return <p>You are logged in</p>;
};

// ============================================
// Example 9: Update User Info
// ============================================
export const UpdateUserInfoExample = () => {
  const { userInfo, setUser } = useAuthStore();

  const handleUpdateProfile = () => {
    if (userInfo) {
      setUser({
        ...userInfo,
        name: 'New Name',
        avatar: 'https://example.com/avatar.jpg'
      });
    }
  };

  return (
    <button onClick={handleUpdateProfile}>
      Update Information
    </button>
  );
};

// ============================================
// Example 10: Clear Error
// ============================================
export const ErrorHandlingExample = () => {
  const { error, clearError } = useAuthStore();

  if (!error) return null;

  return (
    <div className="bg-red-100 p-4 rounded">
      <p className="text-red-800">{error}</p>
      <button 
        onClick={clearError}
        className="mt-2 text-sm text-red-600"
      >
        Close
      </button>
    </div>
  );
};