useGrainAnalytics Hook

import { useGrainAnalytics } from '@grainql/analytics-web/react';

function Component() {
  const grain = useGrainAnalytics();
  
  // Use any client method
  grain.setUserId('user_123');
  grain.track('event', { data: 'value' });
  await grain.flush();
  
  return <div>...</div>;
}

function LoginHandler() {
  const grain = useGrainAnalytics();
  const { user } = useAuth();
  
  useEffect(() => {
    if (user) {
      grain.identify(user.id);
    } else {
      grain.setUserId(null);
    }
  }, [user, grain]);
  
  return <div>...</div>;
}

function ProfilePage() {
  const grain = useGrainAnalytics();
  
  const handleUpgrade = async () => {
    await grain.setProperty({
      plan: 'premium',
      upgrade_date: new Date().toISOString()
    });
    
    // Show success message
  };
  
  return <button onClick={handleUpgrade}>Upgrade</button>;
}

function CheckoutPage() {
  const grain = useGrainAnalytics();
  
  const handleCheckout = async (order) => {
    await grain.trackCheckout({
      orderId: order.id,
      total: order.total,
      currency: 'USD',
      paymentMethod: 'credit_card',
      success: true
    });
    
    // Continue with checkout
  };
  
  return <button onClick={handleCheckout}>Checkout</button>;
}

function CriticalAction() {
  const grain = useGrainAnalytics();
  
  const handleAction = async () => {
    grain.track('critical_action', { data: 'value' });
    
    // Ensure event is sent before navigation
    await grain.flush();
    
    router.push('/next-page');
  };
  
  return <button onClick={handleAction}>Continue</button>;
}

function App() {
  const grain = useGrainAnalytics();
  const [ready, setReady] = useState(false);
  
  useEffect(() => {
    const loadConfigs = async () => {
      await grain.preloadConfig([
        'hero_text',
        'button_color',
        'feature_enabled'
      ]);
      setReady(true);
    };
    
    loadConfigs();
  }, [grain]);
  
  if (!ready) return <div>Loading...</div>;
  
  return <HomePage />;
}

function UserStatus() {
  const grain = useGrainAnalytics();
  const userId = grain.getUserId();
  
  return (
    <div>
      {userId ? `Logged in as: ${userId}` : 'Anonymous'}
    </div>
  );
}

function Component() {
  const grain = useGrainAnalytics();
  
  const loadConfig = async () => {
    const response = await grain.fetchConfig({
      immediateKeys: ['feature_flag'],
      properties: {
        plan: 'premium',
        location: 'US'
      }
    });
    
    console.log('Snapshot ID:', response.snapshotId);
    console.log('Configs:', response.configurations);
  };
  
  return <button onClick={loadConfig}>Load Config</button>;
}

function Component() {
  const grain = useGrainAnalytics();
  
  useEffect(() => {
    const listener = (configs) => {
      console.log('Configs updated:', configs);
      // Update UI or trigger actions
    };
    
    grain.addConfigChangeListener(listener);
    
    return () => {
      grain.removeConfigChangeListener(listener);
    };
  }, [grain]);
  
  return <div>...</div>;
}

function Component() {
  const grain = useGrainAnalytics();
  
  useEffect(() => {
    return () => {
      // Only if you need manual cleanup
      grain.destroy();
    };
  }, [grain]);
  
  return <div>...</div>;
}

function Component() {
  const grain = useGrainAnalytics();
  
  // Safe to use in effects without listing as dependency
  useEffect(() => {
    grain.track('mounted');
  }, []); // grain is stable, no need in dependencies
  
  return <div>...</div>;
}

function AuthHandler() {
  const grain = useGrainAnalytics();
  const { user } = useAuth();
  
  useEffect(() => {
    const setupUser = async () => {
      if (user) {
        // Identify user
        grain.identify(user.id);
        
        // Set user properties
        await grain.setProperty({
          email: user.email,
          plan: user.plan,
          signup_date: user.createdAt
        });
        
        // Track login
        await grain.trackLogin({
          method: user.loginMethod,
          success: true
        });
      } else {
        // Clear user ID on logout
        grain.setUserId(null);
      }
    };
    
    setupUser();
  }, [user, grain]);
  
  return null;
}